Devirtuoso » CSS

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

Minify and Gzip CSS in JavaScript

Shawn — Wed, 21 Sep 2011 13:30:03 +0000

Found a pretty cool site. It allows users to minify and compress both their CSS and JavaScript. So I thought I would just share it with you so you can bask in it’s speed inducing glory.

zBugs

Although still in beta at this point in time, zBugs has an easy to use interface which makes compressing and minifying easy. The coolest thing of all, if you sign up they give you a FREE CDN link to your compressed and minified files…..SWEEET. They also have an xml sitemap generator, which is handy. Be sure to check them out, well worth the look in my humble opinion.

http://www.zbugs.com

Creating a 3D Scrolling Carousel with CSS3 and JQuery

Shawn — Wed, 14 Sep 2011 18:57:36 +0000

How do you make your CSS3 awesome? By creating something 3D of course. I thought that was a given This tutorial will show how to do just that….awesomify your CSS3.

CSS3 Scrolling Carousel

What we’re trying to build here is a carousel that scrolls when the user uses the browser’s scroll bar. Allowing the user to navigate in a way they’re already familiar with.

Note: This will only work with webkit browsers (I found Chrome to be finicky, works on mac…not so much on pc). Safari is your best bet. Transform 3D still isn’t fully supported yet.

Download Example

The HTML

Really we just need something to scroll, and a container to hold everything pretty simple HTML. We’re just going to make sure each item has a class associated with it so we can reference it later in 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

<html>
<head>
<meta charset="UTF-8">
<title>3d Carousel</title>

</head>
<body>
<div id="main">
<div id="slide1" class="slide">
Slide 1
</div>

<div id="slide2" class="slide">
Slide 2
</div>

<div id="slide3" class="slide">
Slide 3
</div>

<div id="slide4" class="slide">
Slide 4
</div>

<div id="slide5" class="slide">
Slide 5
</div>

<div id="slide6" class="slide">
Slide 6
</div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>

</body>
</html>

The CSS

There are 3 important things that are going to happen in the CSS.

Give the body a big min-height to enable scrolling.
Give our main container a fixed position so it doesn’t move when we scroll and setting the transform style so it acts like a 3d space. (Things closer to the user are in front of things further away)
Setup each slide to be position absolute to move freely.

Most of the heavy lifting will be done in the jQuery. The CSS will just set up each slide so it can move freely in 3d space, and make sure the screen has a scroll bar. The jQuery will link the scroll bar to the each slide.

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

body{
/* Enable the scroll bar */
min-height:5000px;

/* Centering the carousel */
width:200px;
margin:30px auto 0px;
}

#main{
/* Make sure everything works in a 3d space. */
-webkit-transform-style: preserve-3d;

/* Adjusting the perspective...make it look more roundish */
-webkit-perspective: 1800px;

/* Rotating the angle a bit so it isn't face on */
-webkit-transform: rotateY(10deg);

/* Make sure the carousel doesn't move when we scroll */
position: fixed;
}
.slide{
/* Make sure it can move freely */
position:absolute;
display:block;

/* Set the dimensions */
width:200px;
height:200px;

/* Positioning text in the middle of the box */
text-align:center;
line-height:200px;

/* An easing effect*/
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);

}

/*
* Change the colors of each slide so we can tell them apart.
*/

#slide1{
background:green;
}
#slide2{
background:blue;
}
#slide3{
background:pink;
}
#slide4{
background:orange;
}
#slide5{
background:silver;
}
#slide6{
background:purple;
}

A couple of things that were used that might need some explanation.

-webkit-perspective: 1800px; – The -webkit-perspective adjusts how the 3d will look, or in camera terms what kind of lens. Do we want it to look fish eye or relatively flat.
-webkit-transform: rotateY(10deg); – This just rotates everything along the y axis.
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); – cubic-bezier just creates a nice easing effect after a user stops scrolling. You can play around with the values to get it how you want it to look. This was just used to increase the geekiness of the code.

The JQuery

So here comes the cool part. The JQuery sets up each slide on the carousel. Once a user scrolls, it then updates each slide in the carousel, rotating it accordingly.

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

$(document).ready(function() {

//Go through each slide.
$('.slide').each(function(index) {

//Figure out how many slides, then give each slide a slice of the pie.
var length = $('.slide').length;
var degree = (360 / length) | 0;

//Set the slide's reference to the starting point on the carousel.
$(this).attr("data",degree * index)

//Position the slide on the carousel using css
$(this).css({"-webkit-transform": 'translate3d(0,100%,0) rotateX('+degree * index+'deg) translate3d(0,100%,0)'});
});

//When the window scrolls....
$(window).scroll(function(e) {

//Figure out how far down we've scrolled. (Value from 0 - 1)
var percent = (($(this).scrollTop()) / ($('body').height() - $(window).height()));

//The new rotation based on how far down the user scrolled
degrees = (percent * 360) | 0;

//Go through each slide..
$('.slide').each(function(index) {
var startDegree = $(this).attr("data");

//Add the degrees to whatever the starting point was.
var val = degrees + parseInt(startDegree);

//Apply the css
$(this).css({"-webkit-transform": 'translate3d(0,100%,0) rotateX('+val+'deg) translate3d(0,100%,0)'});

});

});
});

A little explanation. We first figure out where each slide should be on the carousel, by figuring out how many degrees should separate each slide. So we divide 360 degrees by how many slides we have. That should tell us where on the circle each slide should reside.

As for the CSS transform, we first position the slide in the center of the carousel. Rotate the slide to the desired degree. Then push it away from the center along the axis that it was rotated.

That’s it

Feel free to play around with the values. You can easily change it from verticle to horizontal by playing around with the axis it rotates and which direction it is pushed with the translate3d. Have fun with it!

Here is everything all together:

<html>
<head>
<meta charset="UTF-8">
<title>3d Carousel</title>
<style>

body{
/* Enable the scroll bar */
min-height:5000px;

/* Centering the carousel */
width:200px;
margin:30px auto 0px;

}

#main{
/* Make sure everything works in a 3d space. */
-webkit-transform-style: preserve-3d;

/* Adjusting the perspective...make it look more roundish */
-webkit-perspective: 1800px;

/* Rotating the angle a bit so it isn't face on */
-webkit-transform: rotateY(10deg);

/* Make sure the carousel doesn't move when we scroll */
position: fixed;
}
.slide{
/* Make sure it can move freely */
position:absolute;
display:block;

/* Set the dimensions */
width:200px;
height:200px;

/* Positioning text in the middle of the box */
text-align:center;
line-height:200px;

/* An easing effect*/
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);

}

/*
* Change the colors of each slide so we can tell them apart.
*/

#slide1{
background:green;
}
#slide2{
background:blue;
}
#slide3{
background:pink;
}
#slide4{
background:orange;
}
#slide5{
background:silver;
}
#slide6{
background:purple;
}

</style>
</head>
<body>
<div id="main">
<div id="slide1" class="slide">
Slide 1
</div>

<div id="slide2" class="slide">
Slide 2
</div>

<div id="slide3" class="slide">
Slide 3
</div>

<div id="slide4" class="slide">
Slide 4
</div>

<div id="slide5" class="slide">
Slide 5
</div>

<div id="slide6" class="slide">
Slide 6
</div>

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

//Go through each slide.
$('.slide').each(function(index) {

//Figure out how many slides, then give each slide a slice of the pie.
var length = $('.slide').length;
var degree = (360 / length) | 0;

//Set a reference to the starting point on the carousel.
$(this).attr("data",degree * index)

//Position the slide on the carousel using css
//-webkit-transform: Pushes the whole carousel down from top : Rotates the carousel : The radius of the carousel
$(this).css({"-webkit-transform": 'translate3d(0,100%,0) rotateX('+degree * index+'deg) translate3d(0,100%,0)'});
});

//When the window scrolls....
$(window).scroll(function(e) {

//Figure out how far down we've scrolled. (Value from 0 - 1)
var percent = (($(this).scrollTop()) / ($('body').height() - $(window).height()));

//The new rotation based on how far down the user scrolled
degrees = (percent * 360) | 0;

//Go through each slide..
$('.slide').each(function(index) {
var startDegree = $(this).attr("data");

//Add the degrees to whatever the starting point was.
var val = degrees + parseInt(startDegree);

//Apply the css
//-webkit-transform: Pushes the whole carousel down from top : Rotates the carousel : The keeps the radius of the carousel
$(this).css({"-webkit-transform": 'translate3d(0,100%,0) rotateX('+val+'deg) translate3d(0,100%,0)'});

});

});
});

</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

WebKit Animated Valentines Heart

Shawn — Mon, 14 Feb 2011 14:57:22 +0000

Tis the season to be romantic with geekery. So why not give your loved one a throbbing Webkit heart…nothing says love like Webkit…trust me. In this post I’ll show you a quick way to animate a heart image in a love inducing rhythmic motion.

Webkit Animation

It’s a pretty simple build, one image and some handy dandy webkit key frames. So seeing as this uses webkit a little disclaimer is in order…ahem…THIS ONLY WORKS IN CHROME AND SAFARI.

Download Example

Getting Started : The HTML

It doesn’t get much simpler than this. Simply put an image of your heart on the page. I also put a message just for kicks.

1 2	<h1>Happy Valentines</h1> <img src="heart.jpg" alt="" />

Webkit Wickedness

And now comes the brains of the operation, Webkit. We setup our img tag with the specifics of our animation (name, duration,looping and easing)..all the essential nutrients for a kick ass animation. After that we assign key frames to that animation.

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

img {
-webkit-animation-name: resize;
-webkit-animation-duration: 1.3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes resize {
0% {
-moz-transform: scale(1);
-webkit-transform: scale(1);
}
15% {
-moz-transform: scale(.8);
-webkit-transform: scale(.8);
}
30% {
-moz-transform: scale(1);
-webkit-transform: scale(1);
}
50% {
-moz-transform: scale(.8);
-webkit-transform: scale(.8);
}
70% {
-moz-transform: scale(1);
-webkit-transform: scale(1);
}

}

The Webkit Explanation

The animation is assigned to the img based on the animation name that we gave it (resize). Once the selector is good to go we can assign any CSS at any point in the animation just by specifying at what percentage you want it appear at. For example, at 0% we have it starting at full size, then at 15% we shrink it down…and repeat. That’s all there is to it. Just be sure you use this knowledge on someone that is worthy of such excellence. Happy Valentines!

Download Example

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: 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

Development Tool: Zen Coding

Shawn — Fri, 13 Aug 2010 13:25:11 +0000

Zen Coding is by far my favorite development tool. It makes website development quick and easy, and like the name suggests it instills a state of calm

So What is Zen Coding?

Zen Coding is a variety of snippets to make your life easier. Their demo video explains it all too well.

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

The best part about all of this is how many IDEs it’s available for. There is 21 versions of it in the downloads. Check them out, there is probably one for your favorite IDE.

Be sure to get your copy at Zen Coding’s website. I guarantee you’ll love it. Haven’t met a developer who hasn’t.

Enjoy!

Development Tool: CSS3 PIE for Internet Explorer

Shawn — Thu, 12 Aug 2010 14:12:06 +0000

Gone are the days of using images for rounded corners. With CSS3 PIE internet explorer can now use CSS3 awesomeness.

What is it?

Quite simply CSS3 PIE is a file that you include in your CSS definitions to enable CSS3 styling (rounded corners, shadows, etc.) Internet Explorer is one of the last browsers that doesn’t support it natively, either by browser specific hack or proper CSS3.

Creating Rounded Corners

Here is a quick demo to show how simple it is to implement the htc file.

HTML

1	<div class="sampleBox"></div>

CSS

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

.sampleBox{
/* Initial Layout */
display:block;
background:#014A8D;
color:#fff;
width:200px;
height:200px;
border:1px solid #000;

/*Rounded Corners for Firefox*/
-moz-border-radius:10px;

/*Rounded Corners for Safari / Chrome*/
-webkit-border-radius:10px;

/*Standard CSS3*/
border-radius:10px;

/*THE MAGIC...includes htc file for IE*/
behavior: url(PIE.htc);
}

.sampleBox:hover{

-moz-box-shadow: 5px 5px 5px #666; /* FF3.5 */
-webkit-box-shadow: 5px 5px 5px #666; /* Saf3.0 , Chrome */
box-shadow: 5px 5px 5px #666; /* Opera 10.5, IE 9.0 */

/* Don't need to include PIE here because it's inherited.*/
}

Download Example

There is a bit of a delay as the script is run, so it’s not completely seamless. Beggers can’t be choosers though. Also one thing I noticed while working with it, your element needs to be a block element. So if you’re have problems just throw up a display:block to fix any problems. Otherwise a great tool.

For more examples visit CSS3 PIE’s demo page

Be sure to check out the main site as well.

A Quick Way to Use Page Scrolling to Reveal an Image

Shawn — Fri, 14 Aug 2009 14:33:46 +0000

From time to time you may see a website that reveals some image in the background when the user scrolls. More times than not it displays advertising. We’re going to create a super quick and easy web page that reveals an image as the user scrolls down.

What We Are Building

Here is a look at what we’ll be building. Not too fancy but it gets the job done. It gives your site a nice little Easter egg for you users to find when surfing.

Download Example

Getting Started

The first thing we’re going to have to do is image work. Decide which image you want to reveal. I just found a picture of a cat on the internet. Second of all you’re going to have to create a fairly large image that goes from your background color to transparent. It needs to be large enough to cover even your largest browser. I made mine about 2000px square with a little texture in the gradation. Once you have that made, simply save it as a transparent PNG and your ready to go. The idea here is that the transparent PNG is going to sit on top of your hidden image. Your PNG is going to scroll up, but your hidden image is going to stay in place. Kind of like the curtains at a theatre.

The Code

There is not much to this. There is a single div wrapper which will have the PNG overlay as it’s background, and the body will have the hidden image as it’s background. In this tutorial I also added some text and an arrow just to show that it is scrolling.

Just a couple of notes. For this to work in IE6 your going to have to find a PNG transparency fix. There are 10 million out there, just pick one. I used the jQuery pngFix plugin. Also be sure to get rid of any margin padding on the body. You’re PNG overlay won’t go to the edges if you have this margin in place.

Here is the Code:

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
/* Get rid of any margins*/
*{
margin:0px;
padding:0px;
}
/* Give the body your hidden image as the background
and maked sure it is FIXED*/
body{
background: #000 url(1Fail.jpg) no-repeat fixed 50% bottom;
}

/*Give the wrapper your overlay image as the background
and make sure it SCROLLS*/
#wrapper{

/* Just making sure you can scroll...probably will not need
this if you have enough content */
height:2000px;
width:100%;

background: transparent url(overlay.png) no-repeat scroll left top;

color:white;
font-family: Arial, "MS Trebuchet", sans-serif;

}

/* Centering and styling text/image within the wrapper */
#wrapper h1, #wrapper img{
text-align:center;
width:700px;
margin:0 auto;
padding:100px 0px 0px;
display:block;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.pngFix.pack.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>

</head>

<body>

<div id="wrapper">

<h1>Scroll Down to see the hidden image.</h1>
<img src="arrow.gif" alt="" title="" />

</div>

</body>
</html>

That’s all there is too it. Nice and quick for a pretty cool effect. Enjoy.

Download Example