Welcome to WebDesignForums.net!
You're currently viewing WDF as a guest. By registering for a free account, you'll be able to participate with other members in our friendly community. Being a member allows you to ask questions and get answers for those troublesome web development tasks!

In addition, as a member you'll be able to post your websites up for review. Using our unique website review system you can gain some amazing feedback from some of the best web developers around. This is a completely free service to all registered members.

Ready to register yet? Registration is 100% free. Click Here To Join Now!

New to Javascript

Discussion in 'Javascript, AJAX, and JSON' started by EdMarks, May 13, 2012.

  1. Offline

    EdMarks Member

    Message Count:
    51
    Likes Received:
    3
    Trophy Points:
    8
    Gender:
    Male
    Location:
    181º lat 91º long
    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:


    EdMarks, May 13, 2012
    #1

  2. WDF Go Premium, Drop Ads

  3. Offline

    smoseley Administrator

    Message Count:
    9,727
    Likes Received:
    192
    Trophy Points:
    63
    Location:
    Boston, MA
    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:
    <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>


    smoseley, May 13, 2012
    #2
    EdMarks likes this.
  4. Offline

    EdMarks Member

    Message Count:
    51
    Likes Received:
    3
    Trophy Points:
    8
    Gender:
    Male
    Location:
    181º lat 91º long
    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?


    EdMarks, May 14, 2012
    #3
  5. Offline

    smoseley Administrator

    Message Count:
    9,727
    Likes Received:
    192
    Trophy Points:
    63
    Location:
    Boston, MA
    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.


    smoseley, May 14, 2012
    #4
  6. Offline

    EdMarks Member

    Message Count:
    51
    Likes Received:
    3
    Trophy Points:
    8
    Gender:
    Male
    Location:
    181º lat 91º long
    Thanks smoseley. Works great, that is exactly what I was looking for.


    EdMarks, May 14, 2012
    #5
  7. Offline

    smoseley Administrator

    Message Count:
    9,727
    Likes Received:
    192
    Trophy Points:
    63
    Location:
    Boston, MA
    Sure thing, Ed. Enjoy!


    smoseley, May 14, 2012
    #6
(You have insufficient privileges to reply here.)

Share This Page