SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation ScrollTo plugin not scrolling div

    Hello,

    I am at a complete loss with this plugin, so I'm hoping someone here can help me. And if after reading my post, someone can come up with a better, less frustrating plugin, I would really appreciate it. The plug-in author's site is: http://flesler.blogspot.com/2007/10/jqueryscrollto.html. The gist of it is that I am making a website for a restaurant. They want the menu to horizontally scroll between the sections of food, and within each section, have a vertically scrollable (via scroll bar) text menu in two columns. When you click on the section in the nav menu, it's supposed to take you to that food section via horizontal animated scroll. The link below is the sample page I'm testing on, and an image is attached to show you the idea of what it's supposed to look like:

    http://www.bqcreative.com/gcc2/menu.html

    That is the sample page with the JQuery.ScrollTo plugin installed. When I shrink the page, it looks like the animation *is* working (by the window scroll bars moving), just not correctly, since it's not moving the divs.

    Image of what each food section should look like:


    Maybe this is a case of me not having the divs set up correctly with CSS? I'm not sure, I've dug myself into a messy hole... please help

    HTML (with irrelevant code removed):
    HTML Code:
      <div class="menunav">
       <ul>
        <li><a href="#" onclick="$.scrollTo('#appetizers', 1500, {easing:'elasout'}, {axis:'x'});">Appetizers</a></li>
        <li><a href="#" onclick="$.scrollTo('#skinnygreek', 1500, {easing:'elasout'}, {axis:'x'});">Skinny Greek</a></li>
        <li><a href="#">Salads</a></li>
        <li><a href="#">Sandwiches</a></li>
        <li><a href="#">Wraps & Pitas</a></li>
        <li><a href="#">Dinners</a></li>
        <li><a href="#">Desserts</a></li>
       </ul>
    <br /><br /><br />
    <hr />
      </div>
      <div class="menuwrap">
       <div id="appetizers">
        <div class="itemleft">
    <p>Appetizer foods on the left</p>
        </div>
        <div class="itemright">
    <p>Appetizer foods on the right</p>
        </div>
       </div>
       <div id="skinnygreek">
        <div class="itemleft">
    <p>Skinny Greek foods on the left</p>
        </div>
        <div class="itemright">
    <p>Skinny Greek foods on the right</p>
        </div>
       </div>
      </div>
    CSS:
    Code:
    .menunav {
    	width: 90&#37;;
    	margin-top:35px;
    	margin-bottom:10px;
    	margin-left:auto;
    	margin-right:auto;
    	}
    
    .menunav ul {
    	list-style:none;
    	}
    
    .menunav li {
    	display:block;
    	text-align:center;
    	float:left;
    	padding: 0 10px;
    	}
    
    .menunav li a {
    	color: #2e6ab1;
    	text-decoration: none;
    	float:left;
    	font-family: 'DominicanRegular', sans-serif;
    	font-size:1.5em;
    	}
    
    .menuwrap {
    	width: 721px;
    	margin-top:10px;
    	margin-bottom:10px;
    	margin-left:auto;
    	margin-right:auto;
    	overflow-y:auto;
    	overflow-x:hidden;
    	position:relative;
    	}
    
    #appetizers {
    	width: 721px;
    	float:left;
    	position:relative;
    	top:0px;
    	left:0px;
    	}
    
    #skinnygreek {
    	width: 721px;
    	clear:left;
    	float:left;
    	position:relative;
    	top:0px;
    	left:800px;
    	}
    
    .itemleft {
    	width:50%;
    	float:left;
    	}
    
    .itemright {
    	width:50%;
    	float:right;
    	}
    Javascript (in header section):
    Code:
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
    <script type="text/javascript">
    <!--
    jQuery(function( $ ){
    		//borrowed from jQuery easing plugin
    		//http://gsgd.co.uk/sandbox/jquery.easing.php
    		$.scrollTo.defaults.axis = 'xy'; 
    		$.easing.elasout = function(x, t, b, c, d) {
    			var s=1.70158;var p=0;var a=c;
    			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    			if (a < Math.abs(c)) { a=c; var s=p/4; }
    			else var s = p/(2*Math.PI) * Math.asin (c/a);
    			return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    		};
    		});
    // -->
    </script>

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Your right. Putting that plugin together is hard. I did this a while back. It may help shed some light on your problem. http://www.visibilityinherit.com/cod...al-website.php

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It didn't seem to work when I integrated that into my site. I don't know if I was copying the wrong info or not, but it looks like you had some absolutely positioned stuff, and I didn't quite understand the CSS properties you had in there.

    Is what I'm trying to do just impossible? I feel so lost, and I know I've mucked up my code pretty bad at this point.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Tampa, Fl
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also tried this a while back and had no luck making it work.

  5. #5
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wonderful! Haha. I should have known to stay away from it from the looks of all the other stuff on Google I found - the person made a really neat looking scrollable plugin, then failed to explain it at all.

    Is there something that has similar functionality?

  6. #6
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Just Like You View Post
    Wonderful! Haha. I should have known to stay away from it from the looks of all the other stuff on Google I found - the person made a really neat looking scrollable plugin, then failed to explain it at all.

    Is there something that has similar functionality?
    I think this should get you out of trouble, and not hard to configure: http://scripterlative.com/files/softdivscroll.htm
    Tab-indentation is a crime against humanity.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    I think this should get you out of trouble, and not hard to configure: http://scripterlative.com/files/softdivscroll.htm
    Yes that is a good example. Mine is using the body (or browser window basically - don't remember which tag). Basically you'd just need to change that outer container to your scrolling container and change some percentages here and there.

  8. #8
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    I think this should get you out of trouble, and not hard to configure: http://scripterlative.com/files/softdivscroll.htm
    THANK YOU!!!

    Thank you, thank you, thank you.

    I'm gonna say it again... THANK YOU!!!

    That was SUPER painless to configure, took all of 5 seconds to get it working, and it does EXACTLY what I wanted it to do... all with less code than the original plugin I was messing with! What a dream after a nightmare of endless hours kicking myself in the pants trying to get the original one working.

    Just so you can see, the final (test page) product is here : http://www.bqcreative.com/gcc/menu.html

    Again, thanks. I am so happy I was able to get this to work! Some minor space/margin/type tweaking, and I'll be all set.


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
  •