Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Member EdMarks's Avatar
    Join Date
    Nov 2011
    Location
    181 lat 91 long
    Posts
    51
    Member #
    29986
    Liked
    3 times
    Hello All,

    I am very new to Javascript and would like to start my first project, for learning purposes.
    I want to do a page where the the links actually navigate through the same page moving from left to right.
    So instead of linking to another page, the user is just scrolling through the same page.

    Does anyone know a tutorial that would help me with this?

    Heres a rough example.

    http://www.dennys.com/#/media
    :balanced:

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    You're going to use the following:

    1) a master div with a hidden overflow, and a child div with a large width
    2) a menu with onclick events
    3) a javascript controller that will readjust your CSS appropriately

    Here's a simple example using jQuery I threw together. Could use some embellishment:

    HTML Code:
    <html>
    <head>
    <style type="text/css">
    body { background: #eee; font-size: 75%; font-family: Arial, Helvetica, Sans-Serif; }
    #wrapper { width: 960px; margin: 0 auto; background: white; }
    #controller { width: 960px; overflow: hidden; }
    #content { width: 3840px; display: inline-block;}
    .page {width: 960px; float: left; }
    .content { padding: 20px; }
    
    ul.menu { list-style: noone; display: block; margin: 0; padding: 0; background: #999; }
    ul.menu li { display: inline-block; margin: 0; padding: 0; }
    ul.menu li a { display: block; padding: 10px 20px; border-right: 1px solid #fff; background: #999; color: #fff; font-weight: bold; text-transform: uppercase; text-decoration: none; }
    ul.menu li a:hover { background: #ccc; color: #000 }
    </style>
    
    <script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    function gotoPage(pageNumber) {
    var x = (pageNumber - 1) * 960;
    $('#content').animate({'margin': '0px 0px 0px -' + x + 'px'});
    }
    </script>
    </head>
    <body>
    <div id="wrapper">
    <ul class="menu">
    <li><a href="javascript:gotoPage(1)">Page 1</a></li>
    <li><a href="javascript:gotoPage(2)">Page 2</a></li>
    <li><a href="javascript:gotoPage(3)">Page 3</a></li>
    <li><a href="javascript:gotoPage(4)">Page 4</a></li>
    </ul>
    <div id="controller">
    <div id="content">
    <div class="page"><div class="content"><h1>Home</h1></div></div>
    <div class="page"><div class="content"><h1>About</h1></div></div>
    <div class="page"><div class="content"><h1>Services</h1></div></div>
    <div class="page"><div class="content"><h1>Contact</h1></div></div>
    </div>
    </div>
    </body>
    </html>

  4. #3
    Member EdMarks's Avatar
    Join Date
    Nov 2011
    Location
    181 lat 91 long
    Posts
    51
    Member #
    29986
    Liked
    3 times
    Quote Originally Posted by smoseley, post: 235346
    You're going to use the following...
    1) a master div with a hidden overflow, and a child div with a large width
    Hey thanks smoseley.
    So to get it straight.
    Jquery is a library. Of javascript?
    And you simply reference them like you did with
    It is used like a header file would be in C or C++ except it actually grabs the file each time during runtime

    Am I close?

    Also is there a centralized place to find these files or does one just google it?

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    jQuery is a JS framework, or library, yes. The way I referenced it uses the Google Code source to grab the jQuery library and make it available in your site. You would structure the page exactly as I did in my example.

    jQuery greatly simplifies doing complex things (like animation) in JavaScript. If you would like to find more cool tools, check out www.jquery.com - or, you could add the jQuery UI library at www.jqueryui.com to add even more cool visual effects to your site.

    Check it all out. Fun stuff.

  6. #5
    Member EdMarks's Avatar
    Join Date
    Nov 2011
    Location
    181 lat 91 long
    Posts
    51
    Member #
    29986
    Liked
    3 times
    Quote Originally Posted by smoseley, post: 235379
    jQuery is a JS framework, or library......
    Check it all out. Fun stuff.
    Thanks smoseley. Works great, that is exactly what I was looking for.

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Sure thing, Ed. Enjoy!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:49 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com