Tutorials

Fade In and Fade Out in jQuery

Tuesday, April 27th, 2010

I have been working a lot more with jQuery lately, so I thought I would show you how to do the simple fade in or fade out jQuery hover effect that occurs to the navigation when you go to the Google homepage. You know the one that I am talking about, its occurs when your mouse goes over the page of the google homepage, all the navigation at the top appears.

For the first example, I will show you how to make the fade in jQuery hover effect. Hover over the box below to see the effect.

 

The rest of the content of the page

To do this, first place this jQuery code in the <head></head> section of your html file.

1
2
3
4
5
6
7
8
9
10
11
//the first line gets the latest jquery scripts
<script src="http://code.jquery.com/jquery-latest.js"></script>
//this function is called when the page is ready
<script>
$(document).ready(function() {
        //first hide the div with the id of googlenav
	$("div#googlenav").hide();
        //then when you rollover the specified div fade in the googlenav
	$("div#googlediv").hover(function(){$("div#googlenav").fadeIn('slow');});
});
</script>

Then add this html code into the <body></body> of your html document

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="googlediv" style="width:500px; height:200px; border:1px solid #ffffff;">
<div id="googlenav">
	<ul>
    <li><a href="#">Web</a></li>
    <li><a href="#">Images</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Maps</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Shopping</a></li>
    <li><a href="#">Gmail</a></li>
  </ul>
</div>
<div style="margin:0px auto; width:500px; text-align:center;">
<p>&nbsp;</p><p>The rest of the content of the page</p>
</div>
</div>

You can style the content hover you like, I tried to keep all the links inline like google does. Here is my styling, you can add this in the <head></head> section too.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
#googlenav {
	padding:0px;
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	border-bottom:1px solid #c9d7f1;
	height:26px;
	position:absolute;
	width:500px;
}
#googlenav ul {
	padding:3px 0px;
	margin:0px;
	padding-left:15px;
}
#googlenav ul li{
	display:inline;
	padding:0px 3px;
	margin:0px;
}
</style>

Now google fades in their links and navigation when you roll over the page, not a specific div. So if you wanted it to be exactly like that, you would target the page instead of that particular div. So in your jQuery instead of this:

$("div#googlediv").hover(function(){$("div#googlenav").fadeIn('slow');});

You would put this:

$(document.body).hover(function(){$("div#googlenav").fadeIn('slow');});

And style accordingly. Now if you want to fade out in jQuery, instead of fadeIn(), you would use the fadeOut() function. And Remember you don’t have to hide the content first, so the jQuery would look like this.

1
2
3
4
5
6
7
8
9
//the first line gets the latest jquery scripts
<script src="http://code.jquery.com/jquery-latest.js"></script>
//this function is called when the page is ready
<script>
$(document).ready(function() {
        //then when you rollover the specified div fade in the googlenav
	$("div#googlediv").hover(function(){$("div#googlenav").fadeOut('slow');});
});
</script>

An example of the fadeOut function is below using the code above.

 

The rest of the content of the page

That’s really about it, if this helps you out please leave a comment.

Cya

jQuery Cycle Plugin – A Slideshow Creator Javascript File

Tuesday, February 16th, 2010

Here is another useful script that I wanted to write a quick post about. Its called jQuery Cycle Plugin, and its an additional javascript file that basically allows you to create a slideshow very easily and it supports many different types of transition effects. It ‘s dual licensed under the MIT and GPL licenses which is great so you can use it in basically any project. If you don’t want to use Flash this is a really simple way to setup a slideshow that will show in all browsers. Some of the transitions are: scrollup, scrollleft, scrollright, scrolldown, shuffle, and turndown. The images above is an example of it in action, and here is the code to it, really simple.

There are two things you need to add to your <head> section in your html, the css and javascript import lines:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
.banner {  
    height:  82px;  
    width:   82px;  
    padding: 0;  
    margin:  0;  
} 
 
.banner img {   
    border:  1px solid #fff;   
    width:  80px; 
    height: 80px; 
    top:  0; 
    left: 0 
} 
.banner img { display: none } //these lines hide all the rest of the pictures on startup 
.banner img.first { display: block } //except the first image
 
</style>
1
2
3
4
5
6
7
8
9
10
11
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.banner').cycle({
			fx: 'scrollLeft' //  transition type, scrollleft
		});
	});
</script>

And here is the image code, just add this anywhere in your <body>, just make sure the class name is the same as what the javascript is looking for:

1
2
3
4
5
6
7
<div class="banner"> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/233158.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/271131.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/216505.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/260178.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/115908.jpg" width="80" height="80" /> 
</div>

Flash AS3 Preloader

Thursday, November 19th, 2009

I wanted to write a basic tutorial on creating a simple flash AS3 (actionscript 3) preloader. Also, I am going to talk about some of the issues that I came across during the process that might help out other designers and developers. You can see the preloader in action by clicking the image below and the code is below that. The comments in the code should help explain exactly what I am doing and be a basic tutorial for any beginner. This preloader is easy to use, just change one line of code, the line defining the name of the swf you want to load, and you can easily change the color too. The download link is below the code, but please give me credit when using it.

One of the first problems I encountered is when I add the url loader with this line of code, “addChild(loader);” Most other tutorials will tell you to put this in your eventlistener complete function, but I have come across several problems when doing that such as the ugly “1009 cannot access a property or method of a null object reference” error.” The reason you get this is because you are trying to do something with the loader before its actual loaded into memory. So I just add the “addChild(loader)” outside of any eventlistener and it resolves it. Then, I add another function inside of the eventlistener complete function to handle any tweens or effects on the preloader itself after its done loading.

Another problem I come across is the text field not fading away when tweening it. This is a textfield problem, I can’t explain why its doing it, it just is, so the work around there is to make it a movie clip and change that movieclip’s blend mode to anything but normal and then the tweens will handle it correctly.

Make sure to check out some of my advanced preloaders for sale on my activeden portfolio and please buy one if they spark your interest. A nicely designed preloader can really impress your client and its only costs a few bucks.

flashas3preloader

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
//import tweening libraries
import fl.transitions.Tween;
import fl.transitions.easing.*;
 
//stop command
stop();
 
//initalize percent, loaded, and total variables for preloader
var percent:Number = 0;
var loaded:Number;
var total:Number;
 
//intialize loader variable
var loader:Loader = new Loader();
 
//set up the listener for the loader object to get the progress of the download
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, getBytesLoop);
//set up the listener for the loader object to call loadingDone function when loading is done
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadingDone);
//set up the listener for the on enterframe event, this is called all the time
mypreloader.addEventListener(Event.ENTER_FRAME,preloaderMotion);
 
//load the swf you want
//***change this swf name to the one you want to load****
loader.load(new URLRequest("testContent.swf"));
 
//add the loader to the stage
addChild(loader);
 
//getbytesloop function sets the info of the loaded swf during the progress of the load
function getBytesLoop(e:ProgressEvent):void {
 
	//set the total and loaded variable for the progress of the preloader
	total = e.bytesTotal;
	loaded = e.bytesLoaded;
	percent = Math.floor((loaded / total) * 100);
 
	//make the text on the screen show how much is loaded
	textMC.myText.text = percent.toString();
}
 
//loadingDone function hides the preloader when its done
function loadingDone(e:Event):void {
	hidePreloader();
}
 
//preloader motion function give motion to the preloader, add effects here to make your preloader move
function preloaderMotion(e:Event):void {
	mypreloader.rotation += 5;
}
 
//hidepreloader function, fades away all the objects in the preloader and shows the loaded content on the screen
function hidePreloader():void {
	var myTween2:Tween = new Tween(mypreloader, "alpha", Strong.easeOut, 1, 0, 1, true);
	var myTween3:Tween = new Tween(textMC.myText, "alpha", Strong.easeOut, 1, 0, 1, true);
}

Download Flash AS3 Preloader

Cya

Flash ipod Style Volume Controller

Thursday, August 20th, 2009

I am almost finished with the mp3player that I have been working on. I will make a post once it gets live on Flashden.  I just wanted to share how the volume controller works and the code with it. As you will see, I used the Math.atan2 function which basically returns the arc tangent of a point, and I used this to get the angle of where the mouse is compared to where you slide it. Click and hold over the circle and then move your mouse while still holding the mouse down to see the circle rotating. Look to my comments in my code for further explanation.

ipodVolumeController

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
//create a boolean variable for when the volume button is being pushed, and variables for the new and old rotation of that button
var buttonCircleMovement:Boolean = false;
var newAngle:Number = 0;
var oldAngle:Number = 0;
 
//create the inital volume variables, start at .5 or 50% volume
var volumePercent:Number = .5;
var currentVolume:Number = .5
 
//masks the volume tracker to what the currentVolume is times the width of the volume bar
volumeTracker.volumeBarMask.width = 80 * currentVolume;
 
//on mouse down allow the the volume to change, on mouse up make it so the volume can't change
buttonCircle.addEventListener(MouseEvent.MOUSE_DOWN, volumeOn);
buttonCircle.addEventListener(MouseEvent.MOUSE_UP, volumeOff);
 
//add event listeners for mouse movements and call the button circle move functions for the button circle
buttonCircle.addEventListener(MouseEvent.MOUSE_MOVE, buttonCircleMove);
 
//function is called when the mouse is down on the circle movieclip
function volumeOn(e:MouseEvent):void {
 
	//set the button circle movement variable to true
	buttonCircleMovement = true;
	// get the initial angle of where your mouse click was before the rotating the object
	oldAngle = Math.atan2(buttonCircle.y - mouseY, buttonCircle.x - mouseX) * 180/Math.PI;
}
 
//function is called when the mouse is up off of the circle movieclip
function volumeOff(e:MouseEvent):void {
 
	//set the button circle movement variable to false
	buttonCircleMovement = false;
}
 
//function that controls the volume bar
function buttonCircleMove(e:MouseEvent):void {
 
	//if the button circle movement variable is set to true
	if (buttonCircleMovement) {
 
		//as your mouse moves, calculate the angle by where your mouse is located
		newAngle = Math.atan2(buttonCircle.y - mouseY, buttonCircle.x - mouseX) * 180/Math.PI;
 
		//make a temporary variable hold the difference between the new and old angle
		var tempVar = (newAngle - oldAngle) - 360 * Math.round((newAngle - oldAngle) / 360);
 
		//rotate the circle to the new angle that is being calculated
		buttonCircle.rotation = newAngle;
 
		//make the old angle where the new angle is now
		oldAngle = newAngle;
 
		//get the new volume percent by adding the old percent to the temporary variable divided by 360
		volumePercent = volumePercent + tempVar / 360;
 
		//if the volume percent is greater than 1 then just make it 1
		if (volumePercent >= 1) {
			volumePercent = 1;
		}
		//if the volume percent is less than 0 then just make it 0
		if (volumePercent <= 0) {
			volumePercent = 0;
		}
 
		//make the current volume equal to the volume percent
		currentVolume = volumePercent;
 
		//changes the width of the mask for the volume bar
		volumeTracker.volumeBarMask.width = 80 * currentVolume;
 
	}
}

Cya

Flash Text Ticker / Scrolling Text in Actionscript 3.0

Wednesday, July 29th, 2009

Update: I have created a text ticker / scrolling text component based off of this tutorial that is integrated with a XML file so users have more options and can make easy changes.  Click the image below to learn more.

So I have been working on a mp3player that is designed similar to a ipod with a little bit different functionality. I needed the text fields to scroll back and forth so you could see all the text written inside of it, if the field was shorter than the width of the text. After looking around for a tutorial or another persons help and not finding a thing for Actionscript 3, I decided to write my own. I am using Tweenlite to handle the tweens because its really low on weight and its a very smooth and powerful tweening engine. I am almost done with the mp3player and I will show you that very soon, but I wanted to post an example of the scrolling text or flash ticker (as some people call them) to you first before then. The example and code is below. I use one movieclip with an instance name of item that has two items inside of it, a dynamic textfield holding the text and a mask to only show the part I want shown.

scrollingText

//import libraries
import flash.utils.*;
import flash.text.TextField;
import gs.*;
import gs.easing.*
 
//make the text too long for the textfield and assign the mask for it
item.menuItemText.text = "This text is too long to fit in this tiny textfield, here is the end";
item.menuItemText.mask = item.menuItemMask;
 
//call the scrollWords function
scrollWords();
 
//the scrollWords function
function scrollWords():void {
        //make the textfield wordwrap false and autosize to textFieldAutoSize.LEFT
	item.menuItemText.wordWrap = false;
	item.menuItemText.autoSize = TextFieldAutoSize.LEFT;
 
        //if the textwidth is longer than the masks width which is 173 then call goforwardtween
	if(item.menuItemText.textWidth &gt; 173) {
		goForwardTween(item.menuItemText);
	}
}
 
//go forward tween, on complete it calls go back tween
function goForwardTween(tf:TextField):void {
	TweenLite.to(tf, 3, {x:-(item.menuItemText.textWidth) + 163, delay:1, onComplete:goBackTween, onCompleteParams:[tf] });
}
 
//go back tween, on complete it calls go forward tween
function goBackTween(tf:TextField):void {
	TweenLite.to(tf, 3, {x:10, delay:1, onComplete:goForwardTween, onCompleteParams:[tf] });
}

Cya