Multiple Scripts, One Page? Errors?

**AdamDowning** · Oct 28, 2010 09:23

Hey Guys

Just need a little help. I am trying to implement this script here:

Code:

http://inspectelement.com/tutorials/animate-a-contact-us-slide-out-area-using-jquery/

And it doesn't work on my site here:

Code:

http://downingwebdesign.com/notworkingcontact/

Can someone assist me? It displays about half way down the page and I wan't it at the top and not interfering with the other parts of the site!

**paul_wilkins** · Oct 29, 2010 00:02

In your HTML, can you move your contact area so that it comes before the header?

**AdamDowning** · Oct 29, 2010 04:28

Right, that worked, Kinda. Now the other area of my website which works at

Code:

www.downingwebdesign.com

doesn't work at

Code:

www.downingwebdesign.com/notworkingcontact

If this can be sorted then it would be great!

**paul_wilkins** · Oct 29, 2010 04:38

Originally Posted by AdamDowning

Now the other area [...] doesn't work

Doesn't work? If it's the carousel you're talking about then I don't see that working on either link.

Is there something else that works at one, and doesn't at the other?

**AdamDowning** · Oct 29, 2010 04:40

No no, the layout of the page in /notworkingcontact is different to the layout of the page at downingwebdesign.com. After you told me to put the HTML code for the Contact Us thing in the header of the page, it went up to the top and is positioned where it should be, but it seems to be interfering with the CSS of the page because the layout is now, not working.

**paul_wilkins** · Oct 29, 2010 04:47

You are becoming confused in regards to the meaning of "header".

It is not the Head section (<head>) of your HTML page that is meant. What I mean is in reference to the Header section (<div id="header">) of your page.

It is invalid to place body content within the head section.

**AdamDowning** · Oct 29, 2010 04:49

Okay so I placed it like this, I think this is what you meant?

Code:

	<link rel="stylesheet" href="contact.css"/>
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
	<script src="jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="contact.js" type="text/javascript"></script>
	
	

</head>
<body>

<!-- Contact Us -->
<div id="contactArea"> 
		
		<form> 
			
			<div id="info"> 
 
			    <label for="author">Name</label> 
				<input type="text" name="author" id="author" value="" size="22" tabindex="1" class="rounded" aria-required='true' /> 
			
				<label for="email">Email</label> 
				<input type="text" name="email" id="email" value="" size="22" tabindex="2" class="rounded" aria-required='true' /> 
			
				<label for="url">Website</label> 
				<input type="text" name="url" id="url" value="" size="22" tabindex="3" class="rounded" /> 
 
			</div> 
 
			<div id="message"> 
			
				<label for="comment">Your Message</label> 
				<textarea name="comment" id="comment" cols="2" rows="2" tabindex="4" class="rounded"></textarea> 
				<br/><br/>Please only submit once. Your message will be submitted with no confirmation!
				<input name="submit" type="submit" id="submit" class="rounded" tabindex="5" value="Submit" /> 
			
			</div> 
			
		</form> 
		
	</div> 
	
	<div id="container"> 
	
		<div id="header" class="container"></div> 
		
			<a class="contact" href="#">Contact Us</a> 
			
		</div> 
<!-- Contact Us--!>
			

<!-- Header -->
<div id="header">

	<div class="shell">
		<div class="cl">&nbsp;</div>

But there are still layout errors on the page?

**paul_wilkins** · Oct 29, 2010 04:55

From the code that you posted, I see that you now have duplicates of header information.

What you need to achieve is to have both the contact section and the header section contained within the container.

Instead of continuing to work this, an alternative approach is to leave the code as it began before changes were made, and to use CSS to set the contact section to be absolutely positioned to the top, in reference to the container. That might be easier for you to achieve that what we're currently seeing here.

**AdamDowning** · Oct 29, 2010 04:56

I don't understand what you mean? If I message you my files would you mind showing me how this script would be implemented? I'm still learning even after 5 years and this is the first time putting 2 scripts into one site!

**paul_wilkins** · Oct 29, 2010 04:59

With the rearranging of the HTML content, what I mean is this:

Code html4strict:

<div id="container">
    <div id="contactArea"> 
        ...
    </div>
    <div id="header">
        ...
    </div>
    <!-- other sections here -->
</div>

**AdamDowning** · Oct 29, 2010 05:03

So from what i'm thinking you are advising something like this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Downing Web Design - Product Portfolio</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<!--[if lte IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><![endif]-->
	<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
	<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function() {
		    jQuery('#mycarousel').jcarousel({
		    	scroll: 1,
		    	animation: "slow",
		    	wrap: "both"	    		
		    });
		});		
	</script>

</head>
<body>

<!-- Contact Us -->
<div id="contactArea"> 
		
		<form action="contact.php" method="post"> 
			
			<div id="info"> 
 
			    <label for="author">Name</label> 
				<input type="text" name="name" id="name" value="" size="22" tabindex="1" class="rounded" aria-required='true' /> 
			
				<label for="email">Email</label> 
				<input type="text" name="email" id="email" value="" size="22" tabindex="2" class="rounded" aria-required='true' /> 
			
				<label for="url">Website</label> 
				<input type="text" name="url" id="url" value="" size="22" tabindex="3" class="rounded" /> 
 
			</div> 
 
			<div id="message"> 
			
				<label for="comment">Your Message</label> 
				<textarea name="comment" id="comment" cols="2" rows="2" tabindex="4" class="rounded"></textarea> 
				<br/><br/>Please only submit once. Your message will be submitted with no confirmation!
				<input name="submit" type="submit" id="submit" class="rounded" tabindex="5" value="Submit" /> 
			
			</div> 
			
		</form> 
		
	</div> 
	
	<div id="container"> 
	
		<div id="header" class="container"></div> 
		
			<a class="contact" href="#">Contact Us</a> 
			
		</div> 
<!-- Contact Us--!>
			

<!-- Header -->
<div id="header">

	<link rel="stylesheet" href="contact.css"/>
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
	<script src="jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="contact.js" type="text/javascript"></script>

	<div class="shell">
		<div class="cl">&nbsp;</div>
		
		<!-- Logo -->
		<div id="logo-cnt">
			<h1 id="logo">Downing Web Design</h1>
			<h2 id="slogan">Adam Downing's Web Portfolio</h2>				
		</div>
		<!-- End Logo -->
		
		<div id="status">
			<p class="available">Call Me: <strong><a href="skype:+447801233070">07801233070</strong></p>
		</div>
		<div class="cl">&nbsp;</div>
		
		<!-- Carousel -->
		<div id="slider">
			<ul id="mycarousel">
			    <li>
			    <div class="img-cnt">
			    	<a href="#"><img src="css/images/portfolio-item-1.gif" alt="" /> </a>		
		    	</div>				    	
		    	</li>
				    	
		    	</li>			    	
			</ul>
		</div>
		<!-- End Carousel -->
		
	</div>		
</div>
<!-- End Header -->



<!-- Main -->
<div id="main">
	<div class="shell">
		
		<!-- Article -->
		<div class="article">
			<h2>About Me</h2>					
			<p>I'm a College student studying Business Studies Level 3, and have been interested in web design for the past 5 years. I have developed my skills into HTML, CSS and basic PHP. I ensure that the websites I create are displayed on the portfolio and are to the best of my standard. Recenlty, I have decided to sell my skills in the creation of websites for other people.</p>
		</div>
		<!-- End Article -->
		
		<!-- Gallery -->
		<div class="gallery">
			<div class="cl">&nbsp;</div>
			<h2 class="left">Product Portfolio</h2>
			<div class="cl">&nbsp;</div>
			<div class="cl">&nbsp;</div>
			<div class="portfolio-item">
				<a href="/allroads"><img src="css/images/port-1.gif" alt="" /></a>
				<a href="/allroads">All Roads Driving School</a>
			</div>
			
			<div class="cl">&nbsp;</div>
		</div>
		<!-- End Gallery -->
		
	</div>
</div>
<!-- End Main -->

<div id="footer">
	<p>&copy; <a href="http://www.downingwebdesigns.com/">DowningWebDesign</a></p>
</div>

</body>
</html>

If I am doing it wrong can you please show me via copy/paste of the code into a [*code] tag? That would be wonderful! Or did you want me to put the contact us part with in the div header?

**paul_wilkins** · Oct 29, 2010 05:06

Originally Posted by AdamDowning

If I am doing it wrong can you please show me via copy/paste of the code

I cannot at the moment. It's after midnight and it looks like this might take some time to resolve.

Hopefully someone else can pick this up though to give you a hand.

**AdamDowning** · Oct 29, 2010 05:07

Oh okay. Thanks anyways.
If I made a donation would this help your tiredness? I kinda need this portfolio sorted ASAP so driving instructor can view his website.

On a sidenote, if anyone can correct my code it would be great! The code is above for you to look at. Going to take Dog for a walk and then I will check this thread when I get back.

**paul_wilkins** · Oct 29, 2010 05:10

As it's been resolved that this is not a scripting issue, you can now take your problem over to the HTML forum, or the CSS forum, where there will be many people there who can help you with either the layout of your code or the presentation of your site.

User Tag List

Thread: Multiple Scripts, One Page? Errors?

Thread Tools

Display

Multiple Scripts, One Page? Errors?

Bookmarks

Bookmarks

Posting Permissions