SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Scripts, One Page? Errors?

    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!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    In your HTML, can you move your contact area so that it comes before the header?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by AdamDowning View Post
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by AdamDowning View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •