Devirtuoso » How to

Triggering Navigation with Scrolling in JQuery

Shawn — Tue, 24 Jan 2012 17:16:01 +0000

Scrolling as your sites main source of navigation is all the rage. With the amount of one page sites out there I thought it would be helpful to show how to trigger your navigation to changed based on how far you’ve scrolled down.

What we’re building

We’ll be creating a simple 1 page site. Actually we’ll just be stealing the code from the previous post on Smooth Scrolling in Jquery, and adding in the navigation triggering bits.

Download Example

Steal the Previous Code

We’re just going to steal the HTML and CSS from the previous post Smooth Scrolling in Jquery. There is nothing special, it’s just a navigation and a bunch of sections with a header and some text in them. The headers have unique ids so we can reference them with the jQuery. We’re more or less going to get rid of the jQuery and start a new.

Here is what we’re starting off with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

The New CSS

In new found code aquired by a five finger discount needs some styling. Right now the navigation is plain and you can’t tell when an item is selected so we’re just going to add an .active class and perhaps beautify the list a bit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/*
Regular state of naviation
*/
a:link,
a:hover,
a:visited{
text-decoration:none;
color: #000;
padding:3px;
}

/*
Active state of navigation
*/
.active:link,
.active:hover,
.active:visited
{
color: #fff;
background: #000060;
}

/*
Make the font of the list a little nicer to look at.
*/
*{
font-family: sans-serif;
color: #666;
}

The JQuery

The first thing we need to know is how far each section is from the top. So we’re going to write a function that we can pass in a navigation item and it will tell us how far that section is from the top. Because we have our navigation at the top, we’ll have to make sure that the section triggers the change just before it reaches the navigation. We’ll just subtract the height of the nav from the distance from the top.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//Get Sections top position
function getTargetTop(elem){

//gets the id of the section header
//from the navigation's href e.g. ("#html")
var id = elem.attr("href");

//Height of the navigation
var offset = 60;

//Gets the distance from the top and
//subtracts the height of the nav.
return $(id).offset().top - offset;
}

Now that we can pull where each section is, we can now setup our navigation to scroll to a section when clicked.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//Smooth scroll when user click link that starts with #
$('a[href^="#"]').click(function(event) {

//gets the distance from the top of the
//section refenced in the href.
var target = getTargetTop($(this));

//scrolls to that section.
$('html, body').animate({scrollTop:target}, 500);

//prevent the browser from jumping down to section.
event.preventDefault();

});

That takes care of the nav, but now comes the meat and potatoes. The scrolling now has to trigger the navigation to change. We’ll create a function that goes through every section and sees if it’s at the top yet. It’ll except 1 parameter which specifies how far the user has scrolled.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//Pulling sections from main nav.
var sections = $('a[href^="#"]');

// Go through each section to see if it's at the top.
// if it is add an active class
function checkSectionSelected(scrolledTo){

//How close the top has to be to the section.
var threshold = 100;

var i;

for (i = 0; i < sections.length; i++) {

//get next nav item
var section = $(sections[i]);

//get the distance from top
var target = getTargetTop(section);

//Check if section is at the top of the page.
if (scrolledTo > target - threshold && scrolledTo < target + threshold) {

//remove all selected elements
sections.removeClass("active");

//add current selected element.
section.addClass("active");
}

};
}

The last thing we need to do is call the function when someone scrolls and when the page is first loaded.

1
2
3
4
5
6

//Check if page is already scrolled to a section.
checkSectionSelected($(window).scrollTop());

$(window).scroll(function(e){
checkSectionSelected($(window).scrollTop())
});

That’s it!

Now you have yourself a pretty sweet scrolling site. You can also use this same principle to animate items on your page. Too fun.

Here is all the code all together:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

<html>
<head>
<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style type="text/css">
.container{
width:300px;
margin:0 auto;

}
.section{
margin-top:60px;
}
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}

a:link,
a:hover,
a:visited{
text-decoration:none;
color: #000;
padding:3px;
}

.active:link,
.active:hover,
.active:visited
{
color: #fff;
background: #000060;
}
*{
font-family: sans-serif;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
<a href="#html">HTML</a>
<a href="#javascript">JavaScript</a>
<a href="#jquery">jQuery</a>
<a href="#php">PHP</a>
<a href="#css">CSS</a>
</div>
<div class="section">
<h1 id="html">HTML</h1>
<p></p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p></p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p></p>

</div>
<div class="section">
<h1 id="php">PHP</h1>
<p></p>

</div>
<div class="section">
<h1 id="css">CSS</h1>
<p></p>

</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
$(document).ready(function() {

//Get Sections top position
function getTargetTop(elem){

//gets the id of the section header
//from the navigation's href e.g. ("#html")
var id = elem.attr("href");

//Height of the navigation
var offset = 60;

//Gets the distance from the top and
//subtracts the height of the nav.
return $(id).offset().top - offset;
}

//Smooth scroll when user click link that starts with #
$('a[href^="#"]').click(function(event) {

//gets the distance from the top of the
//section refenced in the href.
var target = getTargetTop($(this));

//scrolls to that section.
$('html, body').animate({scrollTop:target}, 500);

//prevent the browser from jumping down to section.
event.preventDefault();

});

//Pulling sections from main nav.
var sections = $('a[href^="#"]');

// Go through each section to see if it's at the top.
// if it is add an active class
function checkSectionSelected(scrolledTo){

//How close the top has to be to the section.
var threshold = 100;

var i;

for (i = 0; i < sections.length; i++) {

//get next nav item
var section = $(sections[i]);

//get the distance from top
var target = getTargetTop(section);

//Check if section is at the top of the page.
if (scrolledTo > target - threshold && scrolledTo < target + threshold) {

//remove all selected elements
sections.removeClass("active");

//add current selected element.
section.addClass("active");
}

};
}

//Check if page is already scrolled to a section.
checkSectionSelected($(window).scrollTop());

$(window).scroll(function(e){
checkSectionSelected($(window).scrollTop())
});

});
</script>
</body>
</html>

Download Example

Toggle Switches with JQuery and Checkboxes

Shawn — Wed, 25 May 2011 14:30:58 +0000

iOS style checkboxes (toggle switches) are far more user friendly than ye ol’ browser checkboxes. Without feeling to sorry for your browser checkboxes, we’re going to go through creating new toggle switch hotness with jQuery.

What are we building?

Well I’m glad you asked. We’re going to take a progressive enhancement approach to this. We want to make sure that the checkboxes still work if JavaScript is turned off. So with jQuery we’ll add the new toggle switches, and make them check off the hidden checkboxes when clicked.

Download Example

Getting Started: The HTML

Nothing to crazy going on here. It’s just a simple form with some checkboxes. I added a class to the checkboxes just for ease of use. Not really necessary if you’d rather reference them by some other means. Also I gave the body tag a class of “nojs” so we can change this to “js” with JavaScript. This way we can react appropriately when someone doesn’t have javascript enabled.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<body class="nojs">
<h1>Toggle Checkboxes</h1>
<form action="" method="get">

<p>
<label for="enjoy_web">Do you enjoy web development?</label>
<input class="checkbox" type="checkbox" name="enjoy_web" value="yes" id="enjoy_web" checked="true" />
</p>

<p>
<label for="enjoy_web">Do you hate IE?</label>
<input class="checkbox" type="checkbox" name="hate_ie" value="yes" id="hate_ie" />
</p>

<p>
<label for="enjoy_web">Do pandas make you sad?</label>
<input class="checkbox" type="checkbox" name="sad_panda" value="yes" id="sad_panda" />
</p>

<p><a href="#" id="showCheckboxes">Show Checkboxes</a></p>
</form>
</body>

The jQuery

The first thing we need to tackle is progressive enhancement. So we’re just going to change the body class to “js”, so now in our css we can hide all checkboxes when the javascript is enabled.

After that we add an anchor tag after each checkbox. This will be our toggle switch with the magic of css styling. When we create this anchor we’ll add a ref attribute which reference the checkbox that it will affect. Also we’ll add a checked class to the anchor tag if the checkbox is already checked.

Then it just comes down to creating a click event for our new anchor tag. This will just toggle on and off a checked attribute of the checkbox referenced in the anchor’s ref tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

$(document).ready(function() {
/*
Progressive enhancement. If javascript is enabled we change the body class. Which in turn hides the checkboxes with css.
*/
$('body').attr("class","js");

/*
Add toggle switch after each checkbox. If checked, then toggle the switch.
*/
$('.checkbox').after(function(){
if ($(this).is(":checked")) {
return "";
}else{
return "";
}

});

/*
When the toggle switch is clicked, check off / de-select the associated checkbox
*/
$('.toggle').click(function(e) {
var checkboxID = $(this).attr("ref");
var checkbox = $('#'+checkboxID);

if (checkbox.is(":checked")) {
checkbox.removeAttr("checked");

}else{
checkbox.attr("checked","true");
}
$(this).toggleClass("checked");

e.preventDefault();

});

});

CSS: The Styling of the Toggle Switch

There is nothing to crazy here. If you’ve ever done a sprite button, you won’t find too much new here. We’re just giving the anchor a background of toggle switch graphic and shifting it up and down depending on whether it has a checked class or not.

Also we’re hiding all checkboxes if javascript is enabled.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.js .checkbox{
display:none;
}

.toggle{
background:url("toggle.png") bottom left;
display:block;
width:70px;
height:22px;
}

.toggle.checked{
background-position:top left;
}

That’s it

Not too hard was it? You can play around with the code at jsfiddle

Tooltips the JQuery way

Shawn — Thu, 10 Feb 2011 19:39:30 +0000

When it comes to forms, keeping things easy and clutter free for the user is key. In this tutorial I’ll show you how to create tooltips that helps users without the clutter.

What we’re building

We are going to be adding functionality to the label tag. There will be a new attribute that you can add called “helpText” that will end up as your tooltip. For decluttering purposes, we’ll be replacing the label text with the tooltip text on rollover.

Download Example

Building the Form

This will work with any standard form. The only difference will be the labels. We will be adding a helpText attribute that jQuery will take and make into awesome tooltip.
So here is the simple form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<h1 id="smaple_form">Smaple Form</h1>
<form action="" method="get" accept-charset="utf-8">

<ul>
<li>
<label for="sample_label" helpText="Enter your name here.">Name </label>
<input type="text" name="sample_label" value="" id="sample_label" />
</li>
<li>
<label for="website" helpText="Enter your website here.">Favorite Website</label>
<input type="text" name="website" value="" id="website" />
</li>
</ul>

</form>

jQuery It Up : Handling the Label’s Rollover

So first thing we’re going to do is handle the rollover state of the label. We’ll be hiding the label and creating the help text in this function. Perhaps a little fading animation to make it a little more polished. Just a note, we’ll be using a JQuery plugin called Hover Intent. This is a fantastic plugin that makes sure the user is intentionally hovering over our label and not just by passing by. The user will have to hover over our label for a second for it to activate.
Here is the jQuery for the rollover state:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$(document).ready(function() {

//Label hover handler
$('label').hoverIntent(function() {

//Get the Help Text
var helpText = $(this).attr("helpText");

//Make sure the label has the helpText attribute before carrying on.
if (helpText != undefined && helpText != "") {

//Hide label
$(this).stop().fadeOut(200);

//Create help text if it doesn't already exist
if ($(this).siblings(".help").length == 0) {

//Create Tooltip then fade it in.
$(this).after("

">"+helpText+"

");
$('.help').stop().delay(200).fadeIn(200);
}
}

},function(){});

});

Tooltip Removal

Next we’ll tackle removing the tooltip when the user moves their cursor off the help text. We’ll need to use jQuery’s live() function as we’ll be creating and destroying these tooltips, and we’ll want jQuery to assign a mouseout event handler to each one we create. In this event handler we just show the label again and remove the tooltip.
Here is the jQuery for the tooltip:

1
2
3
4
5
6
7
8
9
10

//Help mouse out handler.
$('.help').live('mouseout',function() {

//Show the label again.
$(this).siblings('label').stop().show();

//Remove the help text
$(this).remove();

});

CSS Styles

So as of right now your tooltip should work. Of course you can style everything with CSS to how you like. The tooltip uses the class help.

Here is the CSS I used:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

label,
.help{
display:block;
font-size:1.3em;
margin-bottom:.2em;
}
input{
margin-bottom:20px;
width:200px;
}
h1{
font-size:1.7em;
margin-bottom:1.1em;
}

.help{
color:#999;
font-size:1em;
line-height:1.4em;
display:none;
cursor:help;
}

Good to Go

The last thing you need to do is sit back and enjoy you’re masterpiece. Enjoy!

Here is all the code together:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Help Labels</title>
<meta name="description" content="Using jQuery to make a handle help rollover" />
<meta name="keywords" content="jquery label animate help rollover" />
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>

<div id="wrapper">

<h1 id="smaple_form">Smaple Form</h1>
<form action="" method="get" accept-charset="utf-8">
<ul>
<li>
<label for="sample_label" helpText="Enter your name here.">Name </label>
<input type="text" name="sample_label" value="" id="sample_label" />
</li>
<li>
<label for="website" helpText="Enter your website here.">Favorite Website</label>
<input type="text" name="website" value="" id="website" />
</li>
</ul>

</form>

</div>

<script src="hoverIntent.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

//Label hover handler
$('label').hoverIntent(function() {

//Get the Help Text
var helpText = $(this).attr("helpText");

//Make sure the label has the helpText attribute before carrying on.
if (helpText != undefined && helpText != "") {

//Hide label
$(this).stop().fadeOut(200);

//Create help text if it doesn't already exist
if ($(this).siblings(".help").length == 0) {

//Create Tooltip then fade it in.
$(this).after("<div class='help'>"+helpText+"</div>");
$('.help').stop().delay(200).fadeIn(200);

}

}

},function(){});

//Help mouse out handler.
$('.help').live('mouseout',function() {

//Show the label again.
$(this).siblings('label').stop().show();

//Remove the help text
$(this).remove();

});

});

</script>

</body>
</html>

Download Example

Quick Tip: Validate Email Addresses with PHP

Shawn — Mon, 30 Aug 2010 13:20:27 +0000

Email validation is a common task that most developers have to deal with on a regular basis. Far too often the complex approach is taken (regular expressions), when PHP 5 has a super simple way to validate / sanitize your email string.

Filtering Variables the PHP 5 Way

So what is the quick method to validating emails? The function called filter_var(). This function allows you to run your variable through a filter that you specify, and can either validate the variable, or return a sanitized string depending on the filter you choose.

What does this look like…

1
2
3
4
5
6
7
8
9
10
11
12
13

//Bad Email...
$badEmail = "bad@email";

//Run the email through an email validation filter.
if( !filter_var($badEmail, FILTER_VALIDATE_EMAIL) ){
echo "Email is no good.";
}else{
echo "Nice email.";
}

//Result - Email is no good.
?>

Alternatively you can use the sanitize filter, and it will remove any characters that aren’t valid.

1
2
3
4
5
6
7
8
9

//Crappy email.
$var="bad%%@em\#ail.com";

//Runs email through a sanitize filter
print filter_var($var, FILTER_SANITIZE_EMAIL);

//Result - bad@email.com
?>

As you can see these are super easy. You no longer have to worry about your regular expressions sucking. Php has you covered.

How to Make a Jquery Back to Top Link

Shawn — Fri, 27 Aug 2010 13:39:35 +0000

It’s the small things in a website that makes your clients go OOOHhhhh… Things like animating the scroll when someone clicks a back to top link can give you some serious brownie points. Considering it’s online a couple of extra lines of code it’s well worth it.

What We are Building

Simply put, we’re going to create a looooong HTML page that has back to top links through out. When you click on one of these links it will scroll to the top in an awesome animated fashion.

Download Example

Step 1: The Content

This should be pretty straight forward, you’re site should already have content, but in the case of an example we have to get some, and there has to be enough to scroll. I just took mine from the w3 standards website…as it should be already HTML compliant Now throughout you just need to add some back to top links with anchor tags to some element at the top of the page. In our case we have a div with an id of top. So our anchor tag should look something like…

1	<a href="#top" class="backToTop">Back to top</a>

Step 2: The jQuery

At the bottom of your html just add the following code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Nothing too special here. Just a click event for the back to top links that animates the scroll.

That’s all there is to it. Enjoy making your site that much cooler.

Download Example

Quick Tip: Using Google Fonts for your website

Shawn — Tue, 17 Aug 2010 17:08:15 +0000

Google has offered yet another fantastic service that allows you to add new free fonts to your web pages. This article will give you a quick run down on how to do this.

Google Font Directory

Tired of using the same ol’ fonts for every web page? I know I am. Google offers a directory of fonts that you can quickly add to your website with 2 lines of code. Doesn’t get much easier.

Step 1: Select a Font

Visit the Google Font Directory and pick out a font. There isn’t a huge list, but what they do have is nice and clean.

Step 2: Get the Code

After you click on the font you want, just click on “Get the code”. Google offers up 2 lines of code. One a CSS include for the font you selected, and the CSS to implement it.

Step 3: Use the Code

Copy and paste the code into your document. El finito. This is the code I used for the headers in this article.

1
2
3
4
5

3D Sphere Using jQuery

Shawn — Tue, 22 Sep 2009 17:53:35 +0000

Ever wanted your tag cloud to resemble a ball? Of course you did. This tutorial will walk you through how to create a Sphere in jQuery.

What We Are Building

This one can bog down a system in a hurry, but that’s the fun with experimenting with JavaScript. We will be building a sphere that rotates depending on which way the mouse moves….exciting.

Download Example

Getting Started

This tutorial is a continuation of a line of 3D jQuery posts. I would recommend you having a look at the previous post so you’re up to speed.

Now that is out of the way lets get started. For this project we’ll have 3 files.

3DEngine.js
Sphere.js
sphere.html

The 3DEngine.js is the same file that was in the previous posts so we won’t be covering that. The Sphere.js holds the Sphere class which is used by the 3D Engine. Lastly the html file puts everything together.

The Sphere

With the sphere class we’ll be creating a set of 3d points (x,y,z) in an array. To build the sphere we’re simply going to create a whole bunch of rings that start off small, get larger, then small again. I’m not sure if this the best way of building a sphere, but it works so I’m not going to worry too much.

Here is the JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

There are two loops. One for the number of rings, the other for the points within each ring. Inside the inner loop we first figure out where each point should lie, then figure out how that would translate into the x, y and z co-ordinates.

The jQuery / Html

Not much has changed in our jQuery / HTML since the 3d Plane post. The only thing that has changed is we imported the Sphere.js and instead of adding a plane, we’re adding a sphere.

Here is the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<body>
<div id="item">
</div>
</body>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="Sphere.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//

$(document).ready(function() {

//Init Camera
var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item")

//Create object holder
var item = new Object3D(container);

//Add sphere to the object holder
item.addChild(new Sphere(200,10,100));

//Create scene
var scene = new Scene3D();

//Add object holder to the scene
scene.addToScene(item);

var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

//Figure out where the mouse is when the mouse is moved.
$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

var animateIt = function(){
//rotate the sphere along the y axis when the mouse
//mouse is moved left and right
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed
}

//rotate along the x axis when the mouse is moved
//up and down.
if (mouseY != undefined){
axisRotation.x -= mouseY / speed;
}

//Render the scene.
scene.renderCamera(camera);

};

setInterval(animateIt, 20);

});
//]]>
</script>

Disclaimer

Be careful adding points on this one. Because the 3D engine doesn’t use html’s canvas just yet, it really can’t handle too many points. I can get away with 100 points on my machine without too much delay. Chrome handles it the best out of all the browsers I tried. So use it at your own discretion, you might have some angry viewers if you go too nuts. This is just meant to be experimental…and cool.

The next step will be to optimize the 3D Engine a bit using the canvas so there won’t be this problem in the future.

Here is all the code together:

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

HTML

<html>
<head>
<title>3d engine</title>
<style type="text/css" media="screen">
#item{
width:100px;
height:100px;
margin:0 auto;
top:300px;
position: relative;

}
ul{
list-style-type: none;
}
body{
background-color: #111;
color: #69c;
font-family: Arial, "MS Trebuchet", sans-serif;
font-weight: bold;
font-size:2em;
}
</style>
</head>
<body>
<div id="item">
</div>
</body>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="Sphere.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//

$(document).ready(function() {

var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item")

var item = new Object3D(container);

item.addChild(new Sphere(200,10,100));

var scene = new Scene3D();
scene.addToScene(item);

var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

var animateIt = function(){
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed
}
if (mouseY != undefined){
axisRotation.x -= mouseY / speed;
}

scene.renderCamera(camera);

};

setInterval(animateIt, 20);

});
//]]>
</script>
</html>

Download Example

Creating a Wobbling 3D Carousel

Shawn — Sun, 20 Sep 2009 07:07:33 +0000

We’ve all seen a carousel in one form or another. This post will show how to create a carousel with a wobbling effect, much like an unbalanced wheel.

What We’re Building

We’ll be creating a carousel with the help of the 3d Engine we built in a previous post. The idea is we’ll create a ring by plotting points in 3d space, then we’ll rotate it so it’s almost perpendicular to the viewer. Because it’s not 100% flat, it will look like it’s wobbling up and down, giving your carousel a little more flavor.

Download Example

Building the Ring

If you haven’t read up on the 3d Engine just yet I recommend you do so. Creating objects for the engine isn’t overly complicated. It’s just an array of 3d points. With the ring, we’re going to use math to plot the points for us. We’re going to be creating a circle and plot it in 3d space.

Here is the JavaScript: (Ring.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var Ring = function (radius, numOfItems){

//Step through each point on ring.
for (var i = numOfItems - 1; i >= 0; i--)
{
//Figure out where each point lies on the circle
var angle = i * Math.PI * 2 / numOfItems;

//Translate that point on the circle into x,y coordinates.
var x = Math.sin(angle) * radius;
var y = Math.cos(angle) * radius;
var z = 0;

//Add the point to the array.
this.pointsArray.push(this.make3DPoint(x,y,z));
}

};

//You need to inherit the DisplayObject3D.
Ring.prototype = new DisplayObject3D();

The Ring class takes 2 parameters, the first is the radius of the ring, and the second is how many items are going to be on the ring.

We then proceed to step through all the points, and place them at equal distances around the ring.

The HTML

There isn’t much too the html. We’re simply going to create a

Here is the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="item">
<ul>
<li>website</li>
<li>jQuery</li>
<li>JavaScript</li>
<li>HTML</li>
<li>PHP</li>
<li>3D</li>
<li>Ajax</li>
<li>CSS</li>
<li>Design</li>
<li>Flash</li>
<li>Experimental</li>
<li>Development</li>
<li>web</li>
<li>Tutorial</li>
<li>ASP</li>
</ul>
</div>

The jQuery

There is not much changed from our previous post on how to create a 3d plane for jQuery 3D Engine. The only difference here is we’re going to give an initial value to the axisRotation x value. This will rotate the ring towards the viewer. Through trial and error I figured out the value that worked for me.

Then we’ll animate the axisRotation y value when the mouse moves left and right.

Here is the jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

$(document).ready(function() {

//setup camera.
var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item");

//Setup 3d object holder.
var item = new Object3D(container);

//Add ring to 3d object holder.
//The first argument for the ring is the radius.
//The second argument for the ring is how many items
//are on the ring. So we pass in how many items are in our list.
item.addChild(new Ring(200, $("#item ul li").length));

//Create a scene.
var scene = new Scene3D();

//Add 3d object holder to the scene.
scene.addToScene(item);

var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

//Capturing mouse movements.
$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

//Rotate ring so it's almost perpendicular to the viewer.
axisRotation.x = 1.5;

var animateIt = function(){
if (mouseX != undefined){

//When the user moves the mouse left and right,
//rotate around the ring on the y axis.
axisRotation.y += (mouseX) / speed;
}

scene.renderCamera(camera);

};

setInterval(animateIt, 20);

});

Voila!

That’s all there is too it.

Here is all the code together:

<html>
<head>
<title>3d engine</title>
<style type="text/css" media="screen">
#item{
width:100px;
height:100px;
margin:0 auto;
top:300px;
position: relative;

}
ul{
list-style-type: none;
}
body{
background-color: #111;
color: #69c;
font-family: Arial, "MS Trebuchet", sans-serif;
font-weight: bold;
font-size:1em;
}
</style>
</head>
<body>
<div id="item">
<ul>
<li>website</li>
<li>jQuery</li>
<li>JavaScript</li>
<li>HTML</li>
<li>PHP</li>
<li>3D</li>
<li>Ajax</li>
<li>CSS</li>
<li>Design</li>
<li>Flash</li>
<li>Experimental</li>
<li>Development</li>
<li>web</li>
<li>Tutorial</li>
<li>ASP</li>
</ul>
</div>
</body>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="Ring.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//

$(document).ready(function() {

var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item");

var item = new Object3D(container);

item.addChild(new Ring(200, $("#item ul li").length));

var scene = new Scene3D();
scene.addToScene(item);

var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

axisRotation.x = 1.5;

var animateIt = function(){
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed;
}

scene.renderCamera(camera);

};

setInterval(animateIt, 20);

});
//]]>
</script>
</html>

Ring.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var Ring = function (radius, numOfItems){

for (var i = numOfItems - 1; i >= 0; i--)
{
var angle = i * Math.PI * 2 / numOfItems;

var x = Math.sin(angle) * radius;
var y = Math.cos(angle) * radius;
var z = 0;

this.pointsArray.push(this.make3DPoint(x,y,z));
}

};

Ring.prototype = new DisplayObject3D();

Just a small tip. If you wanted to create a carousel that doesn’t wobble, your first instinct might be to adjust the axisRotation x value until you get it. You can do it this way, it just might take a bit to get it right on the money. The easier way is to adjust the Ring.js file, and switch the y and z values. This will create a totally flat ring and you don’t have to worry about using the axisRotation x value to try and flatten it out.

Download Example

3D Plane for jQuery 3D Engine

Shawn — Wed, 16 Sep 2009 18:11:23 +0000

In the last post we created a 3D Engine with jQuery. This time around we’re going to make a new shape and make it interact with the mouse.

What We’re Making

I decided not to tackle too tough a shape as I wanted to show how to interact with the mouse. We’ll be making a plane that rotates the further you get from the center.

Download Example

Getting Started

If you haven’t seen how the 3D engine works I recommend visiting Making a 3D Engine in jQuery and getting caught up. The first thing we’re going to tackle is the plane. We’re going to create a JavaScript file that we’ll import into our HTML file. The code isn’t too complicated. We’re creating an array of 3d points.

Lets look at the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var Plane = function (size){

if (size === undefined){
size = 10;
}

this.pointsArray = [
this.make3DPoint(-size,size,0),
this.make3DPoint(size,size,0),
this.make3DPoint(size,-size,0),
this.make3DPoint(-size,-size,0)
];

};

Plane.prototype = new DisplayObject3D();

It’s pretty much the same as the Cube in the previous post. The only difference is it’s less points. This would be a good opportunity to walk you through how each point is placed. The Plane class has 1 argument. The size of the Plane. We’ll use this size to plot our points. Let’s look at the first point. (-size,size,0) So if we pass in a size of 100, then the 3d point would be (-100,100,0) Which puts a point 100 points to the left and 100 up. The z value is at zero because it’s a plane. All the points are going to sit line up along the z axis. The next point is (100,100,0). This is the top right point. (100,-100,0) is bottom left. Lastly (-100,-100,0) is bottom right.

Mouse Interaction

Now that we have our plane made, we’ll just import it into our html file. Just like our previous post we’ll have to create our Camera,Object holder, Object and Scene. Now we’ll tackle having it interact with the mouse.

Here is the new jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

//Mouse x and y
var mouseX,mouseY = 0;

//x and y value of container
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;

//rotation speed
var speed = 6000;

//when the mouse moves...
$().mousemove(function(e){

//Figure out how far it is from the center of the container
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

var animateIt = function(){

//Rotate along the y axis when the mouse is moved left and right
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed
}

//Rotate along the x axis when the mouse moves up and down.
if (mouseY != undefined){
axisRotation.x -= mouseY / speed;
}

//Render the scene.
scene.renderCamera(camera);

};

//keep calling function every 20 milliseconds.
setInterval(animateIt, 20);

Anytime the mouse moved we would figure out how far the mouse is from the center of the object. Then we assign it to variables that will be used in a function that is called at set intervals. In that function we simply divide the mouse value by a speed variable and apply it to the axisRotation. You can adjust the sensitivity of the mouse by increasing or decreasing the speed value. You might be wondering why we’re applying the mouseX to the y value of axisRotation. This is because we want to control rotating on the y axis with our mouse moving left and right. Kind of like opening and closing a door.

Here is the code all together:

<html>
<head>
<title>3d engine</title>
<style type="text/css" media="screen">
#item{
width:100px;
height:100px;
margin:0 auto;
top:300px;
position: relative;

}
ul{
list-style-type: none;
}
body{
background-color: #111;
color: #69c;
font-family: Arial, "MS Trebuchet", sans-serif;
font-weight: bold;
font-size:2em;
}
</style>
</head>
<body>
<div id="item">
</div>
</body>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="Plane.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//

$(document).ready(function() {

var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item")

var item = new Object3D(container);

item.addChild(new Plane(100));

var scene = new Scene3D();
scene.addToScene(item);

var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

var animateIt = function(){
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed
}

if (mouseY != undefined){
axisRotation.x -= mouseY / speed;
}

scene.renderCamera(camera);

};

setInterval(animateIt, 20);

});
//]]>
</script>
</html>

Next Step

Now that the mouse Interaction is taken care of. The next shape I’m going to take a stab at is the ring. Stay tuned for more 3D shapes.

Download Example

3D Engine

Grabbing Content from Other Pages with Ajax and jQuery

Shawn — Mon, 14 Sep 2009 21:48:33 +0000

Sometimes it is useful to grab content from one of your other pages and use it on another. This tutorial will go over how to pull in the other content, and use selectors to get what you want.

What we’re building

Essentially we will be building two pages. One with static HTML. The other with jQuery to steal the content from there and display it on it’s own page. Pretty cool stuff. It is just standard Ajax, but with one cool feature, it allows you to select what you pull from the site using selectors. If you haven’t used Ajax with jQuery before I recommend you checking out the Beginners Guide to Using Ajax with jQuery.

Download Example

The HTML page

First we’ll create a simple HTML page. I’m just going to use a header and an unordered list, just to show you can pick and choose what you want.

Here is the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Content Page</title>
</head>
<body>
<h1 id="title">This is a title</h1>
<ul>
<li>Web</li>
<li>jQuery</li>
<li>Ajax</li>
<li>HTML</li>
</ul>
</body>
</html>

Not much too it huh. This isn’t going to be the page that displays, so really you just have to make sure it has the content you want in here.

The jQuery / Ajax Page

This page is pretty bare as well. We’re just going to have a div that will be are holder, and the jQuery to pull the content from the other page.

Here is the page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Ajax and Jquery: Remote Pages</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#list').load("Content.html ul");
});
</script>
</head>
<body>
<h2>Here is the list from the other page:</h2>
<div id="list"></div>
</body>
</html>

Basically the load() function does all the work. You pass in the url of the page, and the selector you want to get and it gets the HTML and puts it in the selector that is calling the load function. Just a note, you might run into some caching issues if you have dynamic content, so it might be a good idea to add some unique id at the end of the url; perhaps a random number that you generate. e.g. (htmlPage.html?cacheBuster=1231321)

Server Side Pages

This also handles server side pages. e.g.(PHP, ASP, etc) The beauty of the load function is it has extra arguments you can pass in. It has 3 in total

The page URL / selector
Any Post Data you want to pass to the URL
A Callback function.

So if you pass an object into the second parameter it will send a post variable with those values.

1
2
3
4
5

$('#selector').load("content.html #selector",
{data:value},
function(){
alert("Callback Function");
});

For example, say we want to get the navigation from a certain page, and index.php loads the navigation based on what a certain post variable might be. This would be a prime example of when you might use the load function over other Ajax functions in jQuery. The ability to use a selector would help a great deal if you needed to pull a needle from a haystack of content.

Conclusion

More than likely this function isn’t going to be used everyday, but it’s good to keep in mind for those special occasions.

Download Example

Devirtuoso » How to

Triggering Navigation with Scrolling in JQuery

What we’re building

Steal the Previous Code

The New CSS

The JQuery

That’s it!

Toggle Switches with JQuery and Checkboxes

What are we building?

Getting Started: The HTML

The jQuery

CSS: The Styling of the Toggle Switch

That’s it

Tooltips the JQuery way

What we’re building

Building the Form

jQuery It Up : Handling the Label’s Rollover

Tooltip Removal

CSS Styles

Good to Go

Quick Tip: Validate Email Addresses with PHP

Filtering Variables the PHP 5 Way

How to Make a Jquery Back to Top Link

What We are Building

Step 1: The Content

Step 2: The jQuery

Quick Tip: Using Google Fonts for your website

Google Font Directory

Step 1: Select a Font

Step 2: Get the Code

Step 3: Use the Code

3D Sphere Using jQuery

What We Are Building

Getting Started

The Sphere

The jQuery / Html

Disclaimer

Creating a Wobbling 3D Carousel

What We’re Building

Building the Ring

The HTML

The jQuery

Voila!

3D Plane for jQuery 3D Engine

What We’re Making

Getting Started

Mouse Interaction

Next Step

Related

Grabbing Content from Other Pages with Ajax and jQuery

What we’re building

The HTML page

The jQuery / Ajax Page

Server Side Pages

Conclusion