New to Javascript

**EdMarks** · May 13th, 2012, 10:42 AM

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:

**Web Design Forums** · May 13th, 2012 10:42 AM

**smoseley** · May 13th, 2012, 12:41 PM

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>

**EdMarks** · May 13th, 2012, 06:59 PM

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

src="https://ajax.googleapis.com/ajax/lib.../jquery.min.js"

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?

**smoseley** · May 13th, 2012, 08:35 PM

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.

**EdMarks** · May 13th, 2012, 10:57 PM

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.

**smoseley** · May 14th, 2012, 06:17 AM

Sure thing, Ed. Enjoy!

Thread: New to Javascript

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions