7 Replies Latest reply on Jul 9, 2012 3:18 PM by Nancy OShea

    jQuery question with a lateral scrolling layout

    daveharr1s0n Level 1

      Hello Dreamweaver Forum,

       

      I have an idea for a lateral scrolling site and found something online that I really like that uses jQuery to animate the transition from one page to the next (actually, the same page -- as each "page" is really just a div on the same page).

       

      I admit I don't know enough about JavaScript, let alone jQuery, but why isn't the code that I am copying and pasting in my header (and elsewhere, as the sample source code shows) doing what it's supposed to be doing?

       

      The lesson I was following along with can be seen here: http://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jquery/

       

      The javaScript and jQuery code I copied and pasted into my html page was from the source code found in Demo 3.

       

      And MY page is here: http://www.daveharrison.info/horizontal.html

       

      For what it's worth, I am using Dreamweaver CS3. That shouldn't matter, should it?

       

      I have a feeling this is an easy one to answer, but like I said, I really have no javaScript experience.

       

      Any help greatly appreciated!

        • 1. Re: jQuery question with a lateral scrolling layout
          Nancy OShea Adobe Community Professional & MVP

          jQuery has 3 basic parts to it:

          • the core code library which you ref in your <head>
          • the plug-in script & CSS (if any) which you ref in your <head>
          • the function code inside <script> tags -- I prefer to put this just before the closing </body> tag.

           

          <head>

           

          <!-- jQuery latest core library -->

          <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

          </script>

           

          <!-- Plugin script if required-->

          <script type="text/javascript" src="Scripts/scrolling.js"></script>

           

          <!-- Plugin CSS if required-->

          <style type="text/css" src="Styles/scrolling.css"></stylet>

           

          </head>

           

           

          <body>

          <!--navigation-->

          <ul id="banner">

            <li><a href="#home">Home</a></li>

            <li><a href="#newsletter">Newsletter</a></li>

            <li><a href="#directions">Directions &amp; Opening Hours</a></li>

            <li><a href="#contact">Contact us</a></li>

          </ul>

           

          <!--content-->

          <div id="home" class="panel"> ... </div>

            <div id="newsletter" class="panel"> ... </div>

            <div id="directions" class="panel"> ... </div>

            <div id="contact" class="panel"> ... </div>

            </div>

           

           

          <!--jQuery function code-->

          <script type="text/javascript">

          $(document).ready(function() {

            $("#banner a").bind("click",function(event){

              event.preventDefault();

              var target = $(this).attr("href");

              $("html, body").stop().animate({

                scrollLeft: $(target).offset().left,

                scrollTop: $(target).offset().top

              }, 1200);

            });

          });

          </script>

           

          </body>

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          • 2. Re: jQuery question with a lateral scrolling layout
            daveharr1s0n Level 1

            Thanks, Nancy O!

             

            You are my hero! I know I must learn more of JavaScript. I am thinking of taking a class at my local community college this Fall.

             

            One more question on this page you helped me with. I was following along with the tutorial previously mentioned, which probably only covers the basics. One problem I haven't been able to figure out has to do with the way the main content shifts slightly to the left when you (or at least I, on my laptop) click the "home" link. The navigation (unordered list) is fixed position, so it does not scroll off the screen. When you first open the page, the text below sits right below, in line with, the navigation but, as I said, seems to shift slightly when clicking on "home".

             

            I have tried messing with ther divs, clearing left, clearing right, playing with margins and padding and adding an extra wrapper div, but to no avail.

             

            Any clue as to what that problem might be?

             

            Again, ... http://www.daveharrison.info/horizontal.html

             

            Thanks ever so much, again!

             

            Dave

            • 3. Re: jQuery question with a lateral scrolling layout
              Nancy OShea Adobe Community Professional & MVP

              Try this in your CSS:

               

              body {width: 8000px;}

               

              .panel {

                width: 930px;

                float: left;

                padding-left: 75px;

                padding-right: 500px;

                margin-top: 45px;

                border: 1px dotted #CCC;  /**for demo purposes**/

              }

               

              .panel:nth-child(first) {padding-left: 85px}

               

              ul#banner {

                position: fixed;

                top: 5px;

                left: 0;

                min-height: 55px;

              }

               

              ul#banner li {

              list-style:none;

              display: inline;

              padding: 0 25px;

              }

               

               

              Nancy O.

              • 4. Re: jQuery question with a lateral scrolling layout
                daveharr1s0n Level 1

                Thanks again, Nancy O., but no, that didn't seem to do the trick either. I checked on both Firefox and Internet Explorer.

                 

                Not a huge problem, just baffled why it keeps sliding over. It would be one thing if the page opened to that position, but it opens with the left side pushed out ever so slightly, for some reason. It doesn't do that with their demo (the page I was following along with, http://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jquery/ ).  I tried contacting the author of the article some time ago but never heard back.

                 

                I don't want to wear out my welcome, but any idea how to get this to work on my iTouch (and iPhones)?

                 

                Thanks again, very happy I can now move forward with the actual "design" of the site.

                 

                Dave

                • 5. Re: jQuery question with a lateral scrolling layout
                  Nancy OShea Adobe Community Professional & MVP

                  If you look at source code for his final demo4,  its different from yours.

                  http://s3.sitepoint.com/examples/sidescroll/demo4.html

                   

                   

                  What doesn't work on your iTouch?

                   

                   

                  Nancy O.

                  • 6. Re: jQuery question with a lateral scrolling layout
                    daveharr1s0n Level 1

                    I played around with it some more last night and still couldn't figure out why all divs slide slightly to the left of where the page lands, left of the unordered list at the top.

                     

                    I just tried changing it from XHTML transitional to strict, that doesn't do the trick. I then tried substituting all the javaScript and jQuery to what the demo source shows, but that stopped the animated scrolling effect and still nudged the divs to the left. I then made some changes to the CSS looking at the styles in the demo. Still couldn't figure it out.

                     

                    Probably a stupid question, but Is this what you call a collapsing div? Would it collapse AFTER clicking on a link?

                     

                    As for the iTouch, it just jiggles a little when I touch one of the links and doesn't scroll the page.

                     

                    I wonder if using named anchors would be the way to go. Or is that basically what I'm doing?

                    • 7. Re: jQuery question with a lateral scrolling layout
                      Nancy OShea Adobe Community Professional & MVP

                      I have a couple of scrolling demos that use different techniques.  If JavaScript is disabled, they work like regular named anchors without the smooth scrolling effect.

                       

                      Mootools: (Warning: this has music)

                      http://alt-web.com/DEMOS/SmoothScroll.shtml

                       

                      jQuery:

                      http://alt-web.com/TEMPLATES/FixedLayout.shtml

                       

                       

                      Nancy O.