JQuery scrolling weirdness

**realmuffin** · 08-10-2011 05:17 PM

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.

**dangerousprince** · 08-10-2011 05:24 PM

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.

**realmuffin** · 08-11-2011 11:47 AM

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.

**dangerousprince** · 08-11-2011 01:49 PM

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.

**realmuffin** · 08-11-2011 03:46 PM

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

**dangerousprince** · 08-11-2011 03:50 PM

Could you post up all your code? I'll make it work for you.

**realmuffin** · 08-16-2011 02:48 PM

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..

**dangerousprince** · 08-17-2011 06:39 AM

This code works?

**realmuffin** · 08-17-2011 11:50 AM

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 */).

**dangerousprince** · 08-17-2011 11:56 AM

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.

**realmuffin** · 08-17-2011 01:36 PM

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: JQuery scrolling weirdness

Thread Tools

Display

JQuery scrolling weirdness

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions