www.webdeveloper.com
Results 1 to 11 of 11

Thread: JQuery scrolling weirdness

  1. #1
    Join Date
    Jul 2009
    Posts
    77

    Question JQuery scrolling weirdness

    I'm using a JQuery function to slide a div into and out of visibility, but every time I toggle, the browser resets my view to the top of the web page..

    What I want to happen is when you click to reveal the div, the page scrolls down and the div content is in full view. When I click again to re-hide the div, I want the page to scroll back up smoothly instead of just reverting to the top of the whole page...

    The page url is: http://impactgr.com/chris/test4

    Here's my code:
    Code:
    <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery(".content").hide();
      //toggle the componenet with class msg_body
      jQuery(".heading").click(function()
      {
        jQuery(this).next(".content").slideToggle(500);
      });
    });
    </script>
    and on the page:
    Code:
    <div class="heading">
    					<h2><a href="#">check out our work</a></h2>
    					<a href="#"><img src="images/downarrow.png" alt="downarrow" /></a>
    				</div>
    				
    				<div class="content">
    					<p>Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
    				</div>
    Any help is appreciated!
    Thanks.

  2. #2
    Join Date
    Aug 2011
    Location
    Worthing, West Sussex
    Posts
    96
    Why don't you try and make it so the div slides down, then use a jQuery plugin to smooth scroll down to the new div.

    For example:

    HTML Code:
    $(document).ready(function() {
      $("#div").slideDown(500).jQueryPluginScroll("meh");
    });
    That way, the div slides down, then it scrolls down nicely. If you want a good plugin, let me know what you think of this: www.passmethatspanner.com/home.php and I'll send it to you.

  3. #3
    Join Date
    Jul 2009
    Posts
    77

    Question

    Yes!

    That's exactly what I want, I'm just a bit new to JQuery.

    So this is what I have currently...

    Code:
    <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery(".content").hide();
      //toggle the component with class msg_body
      jQuery(".heading").click(function()
      {
        jQuery(this).next(".content").slideToggle(500);
      });
    });
    </script>
    I modified it with what you sent as follows:
    Code:
    <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery(".content").hide();
      //toggle the component with class msg_body
      jQuery(".heading").click(function()
      {
        jQuery(this).next(".content").slideDown(500).jQueryPluginScroll(".content");
      });
    });
    </script>
    but it didn't work.. Do you have any ideas? How would it be best to mesh your script with mine?

    By the way, your site is really cool--great idea to scroll everything left/right as opposed to reloading a new page.

  4. #4
    Join Date
    Aug 2011
    Location
    Worthing, West Sussex
    Posts
    96
    Try it without the scrolling, see if the slideDown works for you, make sure the CSS says display:hidden; and you need to try an find a plugin for the smoothscrolling. I'll try and find one for you.

  5. #5
    Join Date
    Jul 2009
    Posts
    77

    Question

    Thanks for your help.

    I tried it as:
    Code:
    <script type="text/javascript">
    		jQuery(document).ready(function() {
    		  jQuery(".content").hide();
    		  //toggle the component with class msg_body
    		  jQuery(".heading").click(function()
    		  {
    		    jQuery(this).next(".content").slideDown(500);
    		  });
    		});
    	</script>
    but with no success... the page should pan down using slideDown(500); should it not?

    Thanks,
    Chris

  6. #6
    Join Date
    Aug 2011
    Location
    Worthing, West Sussex
    Posts
    96
    Could you post up all your code? I'll make it work for you.

  7. #7
    Join Date
    Jul 2009
    Posts
    77

    Question

    Thanks DangerousPrince, here's what I have so far..

    Code:
    <!DOCTYPE HTML>
    <html>
    
    <head>
    	<meta charset="UTF-8" />
    	<title>new IG site</title>
    	<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    	
    	<script type="text/javascript">
    		jQuery(document).ready(function() {
    		  jQuery(".content").hide();
    		  //toggle the componenet with class msg_body
    		  jQuery(".heading").click(function()
    		  {
    		    jQuery(this).next(".content").slideDown(500);
    		  });
    		});
    		/*
    		$(document).ready(function() {
    		  $(".content").slideDown(500).jQueryPluginScroll("meh");
    		});*/
    	</script>
    </head>
    
    <body>
    
    	<div id="wrapper">
    	
    		<div id="leftwrapper">
    			<header>
    				<h1><img src="images/iglogo2.png" alt="Impact Group" /></h1>
    			</header>
    			<aside>
    			<div class="separator"></div>
    				<ul>
    					<li><h2>marketing/</h2>
    						<ul>
    							<li><h3>branding/</h3></li>
    							<li><h3>design/</h3></li>
    							<li><h3>advertising</h3></li>
    						</ul>
    					</li>
    					<li><h2>web/</h2>
    						<ul>
    							<li><h3>design/</h3></li>
    							<li><h3>programming/</h3></li>
    							<li><h3>management</h3></li>
    						</ul>
    					</li>
    					<li><h2>training/</h2>
    						<ul>
    							<li><h3>leadership/</h3></li>
    							<li><h3>supervising/</h3></li>
    							<li><h3>marketing</h3></li>
    						</ul>
    					</li>
    					<li><h2>coaching/</h2>
    						<ul>
    							<li><h3>strategy/</h3></li>
    							<li><h3>structure/</h3></li>
    							<li><h3>staff</h3></li>
    						</ul>
    					</li>
    					<li><h2>facilitation/</h2>
    						<ul>
    							<li><h3>events/</h3></li>
    							<li><h3>workshops/</h3></li>
    							<li><h3>meetings</h3></li>
    						</ul>
    					</li>
    				</ul>
    				
    				<div class="separator"></div>
    				
    				<div class="heading">
    					<h2><a href="#">who the heck are we?</a></h2>
    					<a href="#"><img src="images/downarrow.png" alt="downarrow"/></a>
    				</div>
    				
    				<div class="content">a bit about us and why we do what we do</div>
    				
    				<div class="separator"></div>
    				
    				<div class="heading">
    					<h2><a href="#">check out our work</a></h2>
    					<a href="#"><img src="images/downarrow.png" alt="downarrow" /></a>
    				</div>
    				
    				<div class="content">
    					<p>Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
    				</div>
    				
    			</aside>
    			
    			<!--<footer>
    				copyright Impact Group 2011
    			</footer>-->
    			
    		</div> <!--end #leftwrapper div-->
    		
    		<div id="rightcontent">
    			<p>Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p><p>Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p><p>Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
    		</div>
    		
    	</div> <!--end #wrapper div-->
    
    </body>
    
    </html>
    and here is the CSS:
    Code:
    html, body{
       padding: 0;
       margin: 0;
    }
    
    * { margin: 0; padding: 0; }
    body { font: 14px/1.4 "century gothic", sans-serif; }
    article, aside, figure, footer, header, nab, section, { display: block; }
    
    
    a:link {text-decoration: none; color: inherit}      /* unvisited link */
    a:visited {text-decoration: none; color: inherit}  /* visited link */
    a:hover {text-decoration: none; color: inherit}   /* mouse over link */
    a:active {text-decoration: none; color: inherit}   /* selected link */
    
    h2 {
    font-size: 24px;
    margin-top: 8px;
    }
    
    h3 {
    font-size: 14px;
    }
    
    #leftwrapper {
    float: left;
    background-image: url(images/transparentgreybg.png);
    width: 340px;
    color: white;
    text-align: center;
    /*z-index: +2;*/
    
    }
    
    aside {
    padding-top: 25px;
    }
    
    aside h2, h3 {
    font-weight: normal;
    }
    
    aside h3 {
    /*color: pink;*/
    }
    
    #wrapper { 
    width: 980px; 
    margin: 0px auto; 
    position: relative;
    background-image: url(images/photo1.jpg);
    background-position: 250px 50px; 
    background-repeat: no-repeat;
    overflow: hidden;
    }
    
    header {
    width: 215px;
    background-color:#FFFFFF; 
    text-align: center;
    margin: auto;
    padding: 50px 0px 10px 0px; 
    border: 2px dotted black;
    border-top: none;
    -moz-box-shadow: 5px 5px 7px #282727; 
    -webkit-box-shadow: 5px 5px 7px #282727;
    box-shadow: 5px 5px 7px #282727;
    }
    
    /*footer {
    height: 90px;
    position: absolute;
    bottom: 0px;
    }*/
    
    #rightcontent {
    float:right;
    height: 600px;
    width: 640px;
    margin-top: 50px;
    /*left: 250px;
    z-index: -3;
    overflow-x: hidden;
    overflow-y: auto;*/
    }
    
    .separator {
    margin: auto; 
    background-image: url('images/dottedline.png');
    background-position: center;
    background-repeat: no-repeat;
    height: 3px;
    margin-top: 10px; 
    }
    
    ul li {
    list-style-type: none;
    display: inline;   
    margin: 0;
    padding: 0;
    } 
    
    ul li ul li {
    /*color: pink;*/ 
    }
    
    ul li h2 {
    /*display: inline;*/  
    }
    
    ul li ul li h3 {
    display: inline;  
    }
    Thanks for any help with this..

  8. #8
    Join Date
    Aug 2011
    Location
    Worthing, West Sussex
    Posts
    96
    This code works?

  9. #9
    Join Date
    Jul 2009
    Posts
    77
    Well the Jquery doesn't work the way I want it to. I put the snippet that you wrote in there but it's commented out (/* and */).

  10. #10
    Join Date
    Aug 2011
    Location
    Worthing, West Sussex
    Posts
    96
    Okay, well the jQuery I wrote needs to be edited, it was merely an example once you've found a plugin. The script you have works correctly, all you need now is to add the scroll script.

  11. #11
    Join Date
    Jul 2009
    Posts
    77

    Question

    Ok, so I should identify myself as a real JQuery noob... I've been trying to teach it to myself.

    I found a scroller at http://oncemade.com/animated-page-scroll-with-jquery/:

    Code:
    $('.scrollPage').click(function() {
    		   var elementClicked = $(this).attr("href");
    		   var destination = $(elementClicked).offset().top;
    		   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
    		   return false;
    		});
    What I don't understand is how to integrate this with the other Jquery I have which is:
    Code:
    <script type="text/javascript">
    		jQuery(document).ready(function() {
    		  jQuery(".content").hide();
    		  //toggle the component with class msg_body
    		  jQuery(".heading").click(function()
    		  {
    		    jQuery(this).next(".content").slideDown(500);
    		  });
    		});
    I get that this hides then shows my content, and I get that the other script I found can be used to make the page scroll down... but how do I make them both work on the same thing at the same time?

    thanks for your help with this..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles