Devin R. Olsen Web Developer » JavaScript Tutorials

How to Build jQuery Lava Lamp Menu Tabs

Devin R. Olsen — Fri, 25 Dec 2009 09:05:00 +0000

Click Here to See This Tutorial’s Example Demo

How to Build jQuery Lava Lamp Menu Tabs from Devin R. Olsen on Vimeo.

This effect is called “animated rounded menu tabs”. It’s a neat little effect that will work in all browsers including IE6+. somethings to note is that this technique uses a single image for its four corners and is stretchy in both width and height!

We are also using the jQuery JS lib to ensure our JS works across all browsers but also to cut down on the amount of JS we uses to make this great effect. Here is the link I use in the video tutorial to use the jQuery lib from Google’s online repository.

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

Here is the full source if you want to just get down to studying the code.





Devin R. Olsen - Lava Lamp Menu Tabs





	
    	
        	Short
            Longer
            Kinda Long
            Kinda Longer
            Really Longer
            A Really Lot Longer

How to build a jQuery lightbox!

Devin R. Olsen — Thu, 17 Dec 2009 05:56:59 +0000

Today I want to talk about EVERYTHING lightbox. I want to show you how to build your own lightbox using jQuery and CSS. Not only build it but explain to you the road blocks and work arounds any normal developer would run into. We will go over each step on how to make the lightbox work in IE6, IE7 and IE8 as well as all other browsers.

Here is the completed code if you just want to study the little guy.





Everything You Need to Know About a Lightbox!







	
    	X
    	HELLO This is my very own custom built lightbox!!

Thanks Everyone!

Drag 2 Share with CSS and jQuery

Devin R. Olsen — Tue, 15 Dec 2009 04:43:47 +0000

Download your copy HERE!

Ok here we are going to learn how to build the “Drag 2 Share” feature you see on my blogs. This little guy is just what your visitors need to feel like they are having fun when sharing. In its own little way it finally makes sharing FUN!

Learning The Basics of jQuery Faster Than Ever!

Devin R. Olsen — Sat, 17 Oct 2009 12:00:41 +0000

When ever someone is talking about jQuery the frist thing that should come to your mind is JavaScript, or rather client side (for the most part). jQuery was made so that you could “Write less, do more” in JavaScript as jQuery’s slogan says. To really understand jQuery you must think about what it is you need to know first:

What is jQuery?
When do I use jQuery?
How do I use jQuery?

What is jQuery?

jQuery was made by John Resig and the jQuery Team. jQuery is a JavaScript library that sums up popular JavaScript functionality and or methods into neat, very cross browser / version friendly little functions if you will.

jQuery now is broken up into two areas of library’s, we have the standard jQuery library that mainly sums up most JavaScript standard functionality. We also have the jQuery UI library for helping to build rich and interactive internet application user interfaces.

Both jQuery and jQuery UI, separate or together are considerably tiny in comparison to all you can accomplish with one or the other. In a nut shell jQuery can do all the standard things JavaScript alone can do and then some, but much quicker and with less code.

When Should I use jQuery?

JavaScript should be used as the icing on the cake for most web sites however when dealing with internet applications that use AJAX as its crux JavaScript can be vital. So its up to the developer to determine what areas of his or her site / application should use JavaScript and how it should be able to fall back and still function without JavaScript.

NOW STOP, just at the point where you start to realize what areas should be using JavaScript, replace standard JavaScript with jQuery. It’s as simple as that folks. jQuery is not this big next gen method or scary tactics but simply a newer way to write the same old stuff, just quicker.

So to answer the question of when to use jQuery, I would have to say any time you use JavaScript in your sites or applications. With that said it is very important to note that you should not ditch the old methods of DOM and Traversing elements with JavaScript because jQuery still has a few little areas to improve on and being able to mix the old and the new can create some really great stuff.

How do I use jQuery?

First things first, be sure to download a copy of either standard jQuery or both jQuery and jQuery UI and include them into the header of your document like so:
[sourcecode language='html']

[/sourcecode]
Next is jQuery syntax so lets talk about the infamous $ cash char. When ever your documents are accessing the jQuery lib(s) and you use the $ followed by () parentheses you are stating you are performing a jQuery action and its lib(s) better listen up.

Most of the time with jQuery you will first point to elements to perform some sort of action or gathering. With jQuery there are many ways to do this that previously, were very long and cross browser tedious. Like the old methods of JavaScript, the most basic of ways to point or gather from elements is through class names and elements id but now with jQuery its much simpler and robust.

Here is an example of the old DOM method of class and id element pointing.
[sourcecode language='javascript']var element = document.getElementById(”elementsId”);
var elements = document.getElementsByClassName(”elementsClass”);[/sourcecode]
Now check out jQuerys version:
[sourcecode language='javascript']var element = $(”#elementsId”);
var elements = $(”.elementsClass”);[/sourcecode]
Ok wow right off the bat you can see that’s a lot simpler right?Things to notice are the jQuery innate $ followed by parentheses that surround either an element id or class.

Note that for classes we use the . and for ids we use the #.

We most commonly only use the # pound and . period when writing CSS. Does this mean we can use CSS in some way to gather our elements? That’s right, the developers of jQuery have gone as far as to allow you to not only declare elements one via id and class name, but also use CSS selectors, Holy CRAP Batman!!

If you dont know what CSS selectors are, I suggest you read up on them. To put it simply, it’s a way to point to groups or very specific patterns of children and or sibling elements with CSS alone.

Here is a little example of using CSS selectors in a jQuery element gathering.

Matches all child elements specified by "child" of elements specified by "parent".
var all = $("#main > *");
Finds all inputs that are next to a label.
var inputs = $("label + input");
Matches the first selected element.
var firstOf = $("tr:first");

Check that out, not only can you point to elements with standard DOM class and id methods much quicker but you can use CSS selectors such as element type selector (label or input), Child selectors (>) and even pseudo selectors (:first). There are a great deal more of selector types that jQuery has to offer, click here if you would like to read more.

Ok, this is boring just showing you how to make variables that point to elements… let’s do get more in depth.

jQuery was designed so a developer such as yourself, could write great and very fast scripts and do so in one long string of a function if you will. Lets make simple example of adding a click function to an element in one of our documents. For argument sakes, let’s say we have a element that has an id of “#btn“. How would we add an onclick event to our element with jQuery?
[sourcecode language='javascript']$(”#btn”).click();[/sourcecode]
Again impressive how quickly you can write such things with jQuery. Believe it or not this has assigned a click event to our button element. Now lets add some function to the click event.
[sourcecode language='javascript']$(”#btn”).click(function(){

});[/sourcecode]
Ok I stated above that jQuery was designed for each function or jQuery declaration you make to be one long string. As you can see here we have found our element, assigned a click event and given anonymous function to the click event all with one string of code.

Because we have assigned anonymous function to our click event we can then use yet another jQuery selector the “this” selector. The “this” selector is nothing new to JavaScript, I however just wanted to point out its available also in jQuery.

So let’s do something fun to our button shall we.
[sourcecode language='javascript']$(”#btn”).click(function(){
$(this).animate();
$(this).css();
});[/sourcecode]
Great see how because we are with in this buttons elements click event, its acceptable to use the $(this) selector. Also notice we have introduced two new jQuery calls, animate() and css(). The animate() is, well you guessed it animates certain aspects of an element such as height, width font size and borders. The css() is simply a way to directly set css style to elements without any animations or limitations.

Lets give our button an animated font size of 25px and a background color of black.
[sourcecode language='javascript']$(”#btn”).click(function(){
$(this).animate({
fontSize: “25px”,
color: “#fff”
});

$(this).css({
backgroundColor:”#000″
});
});[/sourcecode]
Here is an example of the above code:

Works great! Lets take a look at what we added shall we.

First with-in both animate() and css() parentheses we add a pair of curly brackets ({ }). We then list out both the style names such as, fontSize a colon : and finally the styles value within quotes. Again notice how we use the same setup for CSS style in both animate and css jQuery calls and how simple it all really is.

If you would like to see all the basic effects such as animate one can do with jQuery simply go here.

In the sakes of making this tutorial short, lets recap what we have learned. We learned what jQuery is and when best to use it. We also learned how to declair the use of jQuery and how to point to different elements with ids, classes and even CSS selectors. We learned how to assign an event to an element and give the event functionality. We even learned how to alter and even animate an elements CSS. I hope you can walk away with a bit of confidence in what jQuery is and how to get started using it. Its up to you to go and read up on all jQuery has to offer, or better yet see if jQuery already offers a quicker way to an old traditional JavaScript method.

jQuery has covered almost all areas of JavaScript and produced better, quicker and far more cross browser friendly ways to do them.

Here is a little list of links that will provide you some great insight into all the areas jQuery offers to assist you the next time you goto write your JavaScripts.

All jQuery Selectors

All jQuery Traversing Methods

All jQuery Manipulation Methods

All jQuery CSS Methods

All jQuery Events

All jQuery Effects

Thats your jQuery crash course everyone.

Thanks!

Devin R. Olsen

Learning Intermediate JavaScript Faster Than Ever!

Devin R. Olsen — Wed, 16 Sep 2009 02:11:46 +0000

“I feel I have painted my self into a corner with these tutorial titles for the simple fact that one persons advance is another persons child’s play. Who is to say whats intermediate and whats really advanced? No one is, and that’s my point.”

“In no way am I saying this is as intermediate or advanced as JavaScript gets! I would also like to point out that this may very well not be what you would consider to be intermediate or advanced JavaScript techniques. So with that said, I ask you to think before you post idiotic comments because, at one point you too were a beginner. This is what this series is about and who it’s for.”

Today we are going to take a step further down the path of JavaScript greatness. Last time we learned a whole bunch about the basics of JavaScript. We learned what a variable is, how we can store information into them and how we can use that information. We also learned how to make a function and pass variables to a function in two different ways. We even learned about if else conditions.

Lets take it up a notch shall we? Instead of plundering into the massive amounts of native function JavaScript has to offer, let’s go a different direction. Let talk a little about Document Object Modeling or DOM Scripting for short.

So how do we begin to learn DOM you ask? Simple in order to learn it we must break it down in to very simple questions.

- What is DOM Scripting?

- When Do I Use DOM Scripting?

- How Do I Use DOM Scripting?

Lets begin shall we…

What is DOM Scripting?

DOM Scripting is an important asset to any JavaScript expert, but what is DOM Scripting and why are we learning DOM Scripting when we are here to learn freaking JavaScript? Ok first, DOM Scripting IS JavaScript you see, its simply a better way of gathering elements, attributes and values to do some really cool stuff. DOM is also W3C recommended for valid JavaScript across all major browsers.

When Do I use DOM Scripting?

If and when you are creating a script and it needs to gather, place or manipulate values or even elements them self’s you are going to be using DOM Scripting FACT.

DOM scripting has taken on its own form aside from JavaScript because it’s a collation of how to do things right across all browser the first time. Many people make the mistake of trying to learn everything about JavaScript first but are left wondering how to gather information out of elements. This is why I took our lesson today to this area proceeding our first tutorial. So again when do you use DOM Scripting? When ever you need to manipulate or receive something from an element.

How Do I use DOM Scripting?

The name says it all my friend.

Document (refers to the document the script is being performed on.)

Object (refers to the object or element our script is trying to get at.)

Modeling (modeling is what we do with the object or get out of the object once we have retrieved it.)

Don’t feel over whelmed if the above did not make sense right now, simple think about it like this.

When ever you visit a web page, each page is a document correct?

Each document is made up of different elements that makes up the web site correct?

If we had some JavaScript to run on one of these pages, most of the JavaScript would be dealing with these elements or values from elements right?

So the whole goal here is to be able to identify a document, grab any of its elements, and model the element or information from the element however we want with our JavaScript.

How do we do such a thing you ask, well lets create an example document like so:




My First DOM Scripting Lesson


    THIS IS MY FIRST DOM ELEMENT!!

See our element between our body tags? It has an id of “myFirstDOMElement” so I am planing on trying to gather information out of this element by finding the element through its id alone. To do this, let’s go down to our script tags in our body and create a new variable like so:

Ok our new variable is named “element” and its equaling its self to first “document” to identify this document, then it’s using a native DOM function called “getElementById“. We fallow up the “getElementById” with a pair of parentheses and a semicolon to finish off the variable declaration. Next lets add the name of the element we wish to equal our variable too.

To give our DOM “getElementById” function a name of an element, we go into the parentheses and add quotation marks and finally the name of the element we wish to gather.

Guess what folks you just made your very first DOM call!

In reality we have only covered the document and object portion of DOM scripting if you will. The next part is the modeling of the element or its information. Lets do something with this element now that we have gathered it shall we.

Let first alert the id of the element out to use like so:

(fun things to try is to change .id to something like .style.background or .style.width or even .innerHTML)
Here we are first using our “element” variable that we gathered with DOM and then, we alert its id attribute or rather the id value “.id“. (In our last tutorial we covered the alert JavaScript feature.)

Holy crap it works!!

Ok to move forward with our lesson lets talk about the different ways a person can gather elements with DOM.

Our above example used “getElementById” but what if an id is not present or available for uses? We can use the “getElementsByTagName” to gather our element simple by the type of element it is.

(PLEASE note that this is “getElements” vs. our above “getElement“.)

This means with “getElementsByTagName” you are literally gathering every element on the page that is of the same type.

So how can one narrow down what element we want to get with “getElementsByTagName“? Well in the eyes of DOM each element is suppose to have a unique array number among each elements siblings elements. Soooo if we wanted to get our “example element” with the “getElementByTagName” we would do something like this:

Notice how we first identify the document, then use the “getElementsByTagName” and use our examples element type. Now see how we have appended a pair of brackets containing a zero.

This appended number at the end our DOM call is this document array number I was talking about. Always note that 0 really means 1 or rather the first element, and it goes up from their.

Because our document only has one div element, we gather it with the “getElementByTagName” followed by its element array number 0.

Lets do something a little tricky with our example script now and learn a little about the parent and sibling DOM calls. Update your HTML to the following:



THIS IS MY FIRST DOM ELEMENT!!


THIS IS MY SECOND DOM ELEMENT!!

Lets make a scenario that needs us to gather the contents of our second element. How would we go about gathering this or its information? The obvious way would be to first gather the first div or rather root element that contains our two other div elements like so:

Then our next step would be to use the “parent” variable with “getElementsByTagName” again to get the second elements contents like so:

But, this is to arbitrary if you ask me… lets do something crazy and learn more shall we! Instead of gathering our first or rather root element if you will, lets point to our element with the id of “myFirstDOMElement“. Then let us introduce a new DOM feature called “nextSibling” like so:

The “nextSibling” is just that, a way to move from one sibling element to another as long as the elements are truly siblings and not nested further from each other. There is also “previousSibing” and the same requirements or rather rules apply to this DOM call as well.

Ok so we now have a “nextSibling” and “previousSibling” but whats up with all these children DOM calls running around without any parents?

Lol well there actually is a “parentNode” DOM call and it simply jumps or traverses from a nested element, out to its parent element and only its parent element.

Great! Lets shake it up one more time and try to use all the DOM calls we have learned thus far. Here is what I have comp up with for fun:

Awesome!

Ok so we know we can get elements by a tag names or even by an id or rather attribute and even how to traverse from sibling to parent elements, but what other attributes can a person gather elements with?

“getElementsByClassName“. Here we are pointing or rather gathering elements with a particular class name or attribute. Because it’s a class name we are after, and classes are non unique attributes like id’s we again are gathering all elements with a class name of our choice. All of this these DOM calls are methods to perform whats commonly called DOM Traversing.

Lets recap here what we have learned shall we?

Today we learned that DOM Scripting is a better way to gather elements or their values to perform JavaScript results out to us. We broke down Document Object Modeling and found it really means that we first identify the object, gather elements and use these elements or their values to model out results to us. We also learned how to use DOM to traverse to and from different elements based on their attributes or element type. We even learned that each element has a unique array number associated to it with in its sibling elements nested level.

There is much more to learn about DOM but I assure you, if you have completely understood this tutorial then you have a strong foundation to work with and gather elements for most scenarios faced with JavaScript.

And that’s your Intermediate JavaScript Lesson everyone!

Next we will be using all that we have learned from our first two lesson while digging deeper in to more native JavaScript features.

Thanks Everyone!

Devin R. Olsen

Procedural Shadow Effect For Your Site Logo

Devin R. Olsen — Sun, 13 Sep 2009 07:16:27 +0000

Do you notice anything dynamic about this logo? If not try moving your mouse around it.

Click & Drag Me

Still nothing? TURN JAVASCRIPT ON!

If you do in fact see this dynamic shadow effect working around this simple logo then this is what we are going to be talking about today! So get your JavaScript hats on cause here we go.

Ok just so I don’t get flamed here, anybody of course you could use flash to pull something like this off but by using flash you are more limited… anyone mad yet? Let me explain, in the above example you can effect the shadow anywhere on the page with ease. You can also can place and drag the logo container anywhere on the page and still receive perfect shadow reaction.

If created in flash then our shadow effect could only be preformed once a user has move their mouse into the actual flash player. You could create a full page flash version of this but then you have to create the rest of your site in flash and that’s a HUGE NO NO for SEO!

So here we are, best of both worlds using JavaScript or rather W3C DOM Scripting and creating something very unique and elegant.

HTML – CSS Portion

Lets talk about the structure of this little guy:


	Click & Drag Me

Here are the basics, we have a div block with an id of wrap and its our main container for the logo and shadow pieces. Within this first div block is a second div block that has an id of element. This second block acts as our two logo images container but also is what makes up our shadow.

In this example we have two images both of the file type PNG24 and have alpha transparency. Our first image is our actual logo, in our example its the letter “D” this image is completely transparent except for the actual shape of the letter “D”. The second image is also using alpha transparency but into an inverted version compared to our first image. So we have two images one that uses alpha transparency to form our logo or rather red letter “D” and the other is a white image that too uses alpha transparency to cut out a shape of the letter “D”.

Notice that the first image is smaller than the second. This is important to keep in mind but and we will get back to why this is so important here in a bit.

Take a look at this diagram of how the images are layered and carry their alpha transparency to one another.

Ok so now that we have and idea of how these two images transparency’s work work off one another lets look at how we place them into our html.

Make your html now look like this:


	Click & Drag Me

Ok so just like in the above figure we have our two images stacked on top of each other. Our first image is named “object.png” and our second “alpha.png” one makes an object (our red letter “D”) and the other creates and alpha mask of the other.

The second image (alpha.png) carry’s some very important inline styles that must remain inline in order for our JavaScript to perform our shadow effect properly. Both top and right are set to -6px; and our left, bottom are set to null or nothing. We set both the top and right to -6px to offset our alpha.png and align it to our object.png image due to alpha.png being 12px larger than object.png. The reason there is no setting for the left and bottom styles is because these will be filled in dynamically by our javascript so its best to leave them empty for now.

Lets look at the rest of our CSS that finishes off our dynamic logos structure. Add the following to your documents header tags.

Ok lets run over why these styles are important to our desired results. First we have our div block element “wrap” and its style rule that gives it both a” width” and “height” of 150px. You can change this to what ever you desire.

Our next rule is for our “element” div block and it too states a width and height but only of 128px and we use 128px because our object.png image is 128px by 128px. We also set a position of relative to give us the ability to use children elements that have a position of absolute with out breaking them out of our structured flow. Our last two important styles are the background-color and overflow styles, we set our background color to be that of a darker one such as a shadow or shade. We set our overflow style to be hidden so that our alpha.png image that is larger than 128px will be hidden but also not bring about scroll bars.

Ok our next CSS rule is called “#object” and its for our element “object” or object.png and we set its position to be absolute so our JavaScript can perform our shadow effect. We have a both a top and left of 0px because with the position of absolute we want to make sure our “object” element is always in the upper left hand corner at all times. Our last rule is working in conjunction with our position of absolute and states our browser rendering hierarchy over any other elements that have a z-index style lower than 1.

Of course our last style rule is for our element “alpha” or alpha.png and it too is set to position of absolute and a z-index of 0. Again the z-index is set to a lower number than that of our #object rule in order to stack our object.png image over our alpha.png image respectively.

JavaScript Portion

There are two actions at distance in play here. Our mouse is feeding a JavaScript function its coordinates (X,Y) of its position on the page while this function makes sure our two images react accordingly.

In order for our mouse to event receive its coordinates a document must have a point of orgin for these coordinates.
The point of orgin is the location of where both our X and Y intersect resulting in both X and Y to be zero. So we make our logo be the point of orgin for our mouse’s coordinates that feed to our JavaScript function.

Why we make our logo the point of orgin is so that placement of the logo on the page results in perfect reaction from both object and mouse.

Here is the JavaScript that handles our point of orgin.

var divObj;
document.onmousemove=getMouseCoordinates;
function zxcMse(zxcevt){
 if(!zxcevt) var zxcevt=window.event;
 if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
 return [zxcevt.pageX,zxcevt.pageY];
}
function zxcDocS(){
 if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.scrollLeft,document.body.scrollTop];
}
function zxcPos(zxcobj){
 zxclft=zxcobj.offsetLeft;
 zxctop=zxcobj.offsetTop;
 while(zxcobj.offsetParent!=null){
  zxcpar=zxcobj.offsetParent;
  zxclft+=zxcpar.offsetLeft;
  zxctop+=zxcpar.offsetTop;
  zxcobj=zxcpar;
 }
 return [zxclft,zxctop];
}

I wont go too much into this but basicly it creates an event handler that is gathering our mouse coordinates and point of orgin and relocating them to be that of an element.
For us to use this event handler though we must also setup a function that shifts our alpha image accordingly. Here is this function:

function getMouseCoordinates(event)
{
	var ev = event || window.event;
	var element = document.getElementById("element");
	var alpha = document.getElementById("alpha");
	var mse=zxcMse(ev);
	var pos=zxcPos(element)
  	var cx=pos[0]+element.offsetWidth/2;
  	var cy=pos[1]+element.offsetHeight/2;
  	var x=(mse[0]-cx);
  	var y=(mse[1]-cy);
}

This function has three parts to it that we must pay close attion to.

The first part is that the function is named “getMouseCoordinate” and is calling to our event handler “event”.
The next part is the element we are pointing too named “element”.
The last part is the second element we are pointing too named “alpha”.

Basicly what this is doing is takeing our “element” and “alpha” elements and setting the point of orgin for our mouse coordinates to them. In theroy now what ever coordinates we recive from our mouse will always be centered around these two objects.

The next thing we must create is our conditions for shifting the alpha image around based off these coordinates.

I never said this was going to be easy…

Lets start talking about what this JavaScript condition that shifts our alpha image is actuly doing. In a nut shell its stateing the following based on the mouse coordinates its recives.

if(x coordinate is greater than 50)
{
	Shift alpha image to the left by so many pixels.
}
else if (x is greater than 75)
{
	Shift alpha image left again and by so many pixels.
}

This conditional statement is also true for our negative numbers as our point of origin falls into both negative and positive numbers along both X and Y. Here is the above examples alpha image conditions for shifting both left right and top bottom.

	///////////////
	//RIGHT SHIFT//
  ///////////////
	if(x<-100){
		alpha.style.left="";
		alpha.style.right="-11px";
	}
	else if(x<-80){
		alpha.style.left="";
		alpha.style.right="-10px";
	}
	else if(x<-60){
		alpha.style.left="";
		alpha.style.right="-9px";
	}
	else if(x<-40){
		alpha.style.left="";
		alpha.style.right="-8px";
	}
	else if(x<-20){
		alpha.style.left="";
		alpha.style.right="-7px";
	}
	//////////////
	//LEFT SHIFT//
	//////////////
 	if(x>100){
		alpha.style.right="";
		alpha.style.left="-11px";
	}
 	else if(x>80){
		alpha.style.right="";
		alpha.style.left="-10px";
	}
 	else if(x>60){
		alpha.style.right="";
		alpha.style.left="-9px";
	}
 	else if(x>40){
		alpha.style.right="";
		alpha.style.left="-8px";
	}
 	else if(x>20){
		alpha.style.right="";
		alpha.style.left="-7px";
	}
	////////////////
	//BOTTOM SHIFT//
	////////////////
	if(y<-100){
		alpha.style.top="";
		alpha.style.bottom="-11px";
	}
	else if(y<-80){
		alpha.style.top="";
		alpha.style.bottom="-10px";
	}
	else if(y<-60){
		alpha.style.top="";
		alpha.style.bottom="-9px";
	}
	else if(y<-40){
		alpha.style.top="";
		alpha.style.bottom="-8px";
	}
	else if(y<-20){
		alpha.style.top="";
		alpha.style.bottom="-7px";
	}
	/////////////
	//TOP SHIFT//
	/////////////
	if(y>100){
		alpha.style.bottom="";
		alpha.style.top="-11px";
	}
	else if(y>80){
			alpha.style.bottom="";
			alpha.style.top="-10px";
	}
	else if(y>60){
			alpha.style.bottom="";
			alpha.style.top="-9px";
	}
	else if(y>40){
			alpha.style.bottom="";
			alpha.style.top="-8px";
	}
	else if(y>20){
			alpha.style.bottom="";
			alpha.style.top="-7px";
	}

Two thing to note here befor you are off to trying to edit this huge conditional statment. First each shifting direction steeps 5 times and based on 5 diffrent numbers given to it by our mouses coordinates. Each number shifts our alpha image either a little less or more in the its designated direction.

Remeber how we talked about the html structure of this above and I told you that our alpha image has to be larger that our actule displaying area. This is true now because we must use this extra image size to allow a proper shifting and seamless bleed off the containers edges.

Here is our script compleated:

var divObj;
document.onmousemove=getMouseCoordinates;
function zxcMse(zxcevt){
 if(!zxcevt) var zxcevt=window.event;
 if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
 return [zxcevt.pageX,zxcevt.pageY];
}
function zxcDocS(){
 if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.scrollLeft,document.body.scrollTop];
}
function zxcPos(zxcobj){
 zxclft=zxcobj.offsetLeft;
 zxctop=zxcobj.offsetTop;
 while(zxcobj.offsetParent!=null){
  zxcpar=zxcobj.offsetParent;
  zxclft+=zxcpar.offsetLeft;
  zxctop+=zxcpar.offsetTop;
  zxcobj=zxcpar;
 }
 return [zxclft,zxctop];
}
function getMouseCoordinates(event)
{
	var ev = event || window.event;
	var element = document.getElementById("element");
	var alpha = document.getElementById("alpha");
	var mse=zxcMse(ev);
	var pos=zxcPos(element)
  	var cx=pos[0]+element.offsetWidth/2;
  	var cy=pos[1]+element.offsetHeight/2;
  	var x=(mse[0]-cx);
  	var y=(mse[1]-cy);
///////////////
//RIGHT SHIFT//
///////////////
if(x<-100){alpha.style.left="";	alpha.style.right="-11px";}
else if(x<-80){alpha.style.left="";	alpha.style.right="-10px";}
else if(x<-60){alpha.style.left="";	alpha.style.right="-9px";}
else if(x<-40){alpha.style.left="";	alpha.style.right="-8px";}
else if(x<-20){alpha.style.left="";	alpha.style.right="-7px";}
//////////////
//LEFT SHIFT//
//////////////
if(x>100){alpha.style.right=""; alpha.style.left="-11px";}
else if(x>80){alpha.style.right=""; alpha.style.left="-10px";}
else if(x>60){alpha.style.right=""; alpha.style.left="-9px";}
else if(x>40){alpha.style.right=""; alpha.style.left="-8px";}
else if(x>20){alpha.style.right=""; alpha.style.left="-7px";}
////////////////
//BOTTOM SHIFT//
////////////////
if(y<-100){ alpha.style.top="";	alpha.style.bottom="-11px";}
else if(y<-80){alpha.style.top=""; alpha.style.bottom="-10px";}
else if(y<-60){alpha.style.top=""; alpha.style.bottom="-9px";}
else if(y<-40){alpha.style.top=""; alpha.style.bottom="-8px";}
else if(y<-20){alpha.style.top=""; alpha.style.bottom="-7px";}
/////////////
//TOP SHIFT//
/////////////
if(y>100){alpha.style.bottom=""; alpha.style.top="-11px";}
else if(y>80){alpha.style.bottom=""; alpha.style.top="-10px";}
else if(y>60){alpha.style.bottom=""; alpha.style.top="-9px";}
else if(y>40){alpha.style.bottom=""; alpha.style.top="-8px";}
else if(y>20){alpha.style.bottom="";alpha.style.top="-7px";}
}

Ok last thing I want to talk about is that in the above conditional statment I did not include the portions that create the highlight’s in the above demo. If you would like to see how this was created then download copy of this compleat script and demo in action and have fun!

DOWNLOAD A COMPLETE COPY OF THE SCRIPT

Thanks.

Devin R. Olsen

PNG 24 Alpha Transparency Fix For IE

Devin R. Olsen — Sun, 13 Sep 2009 06:55:37 +0000

I have been developing web sites and internet applications for many years now and there are many things that have bug me about design approaches but the one that always and still sticks out is the lack of PNG 24 alpha transparency in IE’s rendering engine.

PNG 24 image files support a very well executed alpha transparency that is far superior to that of transparent gif files. One example of this is the alpha transparent gradient that is not supported by transparent gif’s. PNG will gracefully fall off into complete alpha transparency perfectly when performing drop shadows or glow effects around or in images where as gif images that are transparent are either 0 or 1, colored or transparent.

Here is an example of the two.

GIF Transparency

(Note: Arrow is pointing to the 0 and 1 binary transparency gif images only supports)

PNG 24 Transparency

Another thing that is wrong or rather troublesome with gif images is the fact that if you do carry transparency in a gif image, the defining point of where transparency and non-transparency begins becomes jagged with pixels. The only fix for this is to have a matte color that surrounds the gif images defining transparent points that matches the background color of which the image is being laid over. This is not only hokey but sometimes a dead end to your design if you want to have gradient backgrounds that the gif image is going to be laid over.

Here is an example of the gif transparency jagged problem.

GIF Transparency

(Note: See the jagged edges in the GIF image and the matte border

around the image that’s trying to and clear up the jagged edges with
a background color match.)

PNG 24 Transparency

(Note: No jagged edges and no need for matte color matching)

Now that we can see why PNG 24 images are better to use when performing transparency vs gif images, let’s look at the problem we have when trying to use PNG 24 images on IE browsers.

IE rendering engine is not of the best compared to a lot of well used browsers such as Fire fox and Safari and in fact is ridiculed as being the worst browser to develop sites on because of all the hacking and patching users have to do in order to make their designs perform correctly in IE browsers. So it’s no surprise that this is the same when trying to use PNG 24 images and the IE browser.

When IE 7 came out there was a sigh of relief when it was announced that IE7 will finally support PNG 24 images and the alpha transparency we would like to have. Unfortunately this was a blatant lie on IE’s part because we were in fact still left with no PNG 24 support as the previously claimed.

Let’s take a look at what the effect of the PNG 24 looks like when trying to run them on IE.

PNG Transparency in IE

(Note: Any alpha areas are replaced with a mint green color or sometimes gray.)

PNG Transparency in all other browsers

(Note: All alpha transparency areas are working perfectly)

Wow that is just plain ugly!! So how do we fix this issue you might be asking yourself? Well there are lots of fixes out on the net that range from CSS filters to giving up on PNG 24 images and using PNG 8 images. All of these solutions are either breakers for other browser or ugly results of PNG 8 images. This year (2008) however a great little nifty JavaScript code hit the scene that has opened a world of possibilities to web designers and PNG 24 alpha transparency images and is being hailed as the end all solution to fix PNG 24 alpha transparency support in IE browsers.

This light weight and easy to implement JavaScript patch for PNG 24 alpha transparency and IE browser is called

“Unit PNG Fix” and was developed by Unit Interactive:Labs. I of course at first glance was a skeptic as I have been down many roads of the so called PNG Fix and never found one the truly is a fix or easily integrated. This “Unit PNG Fix” however was the one that I as well as many other developers had been long awaiting for and quickly fell in love with. I like it so much I am using it right here on the web site you are reading this tutorial from.

Let’s take a look at how this PNG 24 alpha transparency fix for IE is implemented into our designs.

Download the PNG 24 fix from here http://labs.unitinteractive.com/unitpngfix.php and un-zip it’s contents.

Unitpngfix.js
Clear.gif

There may be other contents in the zip file such as readme.txt files, but for now all we need are these two files.

In your html documents header simply add this IE 7 or later comment argument that calls our unit PNG fix for IE 7 and below.

(Note: Make sure you point this to the proper location you would like to have the JavaScript file reside on your web server.)

Next open up the unitpngfix.js and on the very first line you will see a path to where your clear.gif file is. Make sure you make this path point correctly to where you would like to have this clear.gif reside on your web server as well.

Hit save to the unitpngfix.js and your html document and that’s it!!

Now you can support PNG 24 alpha transparency across all browsers.

Hope you enjoyed this little article as much as I have.

Devin R. Olsen

Simple JavaScript Form Validation

Devin R. Olsen — Fri, 11 Sep 2009 08:47:35 +0000

Today I wanted to write a quick demonstration of how to do a very simple client side form validation.

There are two types of form validation, server-side and client side, today we will cover client side validation with JavaScript.

Example of simple form validation (Click Submit)

Ok lets start with a blank document:





Simple Form Validation

In your body tags add the following simple form:


    First Name:
    

    Last Name:
    
    

    

    Comment:

Ok first thing to point out with our simple form is that the form tag its self. The form tag has a on submit event of “return validate();” that is awaiting the return of either true or false from the function validate().

The second thing I would like to point out is that we gave our form a name of “simpleForm”. We give our form a name so that we can reference to it much quicker in our JavaScript “validate()” function that we will cover here in a second.

Moving onto the actual JavaScript, add the following to your documents header tags:

Great, here we are forming our validate() function and in this function we are going to create a simple condition that checks each of our form fields to validate if their values are empty or not.

Lets point to our first form element like so:

We first point to our document, then to the name of our form “simpleForm”, and then to the name of our first form element “firstName”. Once we are pointing to the first form element, we check its value to see if indeed its value is empty or not (== “”).

Its that simple!

Now lets point to the other two form elements (lastName and message) to bring validation them as well. We can extend our conditional statement to the rest of our form elements by using whats called “Logical Operators” like so:

Notice how we are using the “||” between each form elements we point to? Basically we are saying “if firstName element value is equal to empty, OR (||) lastName element is equal to empty, OR (||) message element is equal to empty, then do the following”.

By using the “||” OR logical operators we can extend our condition to as many form elements as we like. There are more logical operators that you can read about here.

Great so now that we have extended out validation condition to check our three elements value’s, lets move on to the part of the function that cancels the form from being submitted if indeed one or more form element is empty like so:

function validate(){
    if(document.simple_form.firstName.value == "" ||
    document.simple_form.lastName.value == "" ||
    document.simple_form.message.value == "")
    {
        alert("Please fill out all fields before clicking submit!");
        return false;
    }
}

The first thing we want to do is inform the user that we must have all form elements filled out before it will be submitted. We do this by using the JavaScript altert to send our reminder to the user. Next we use “return false;” after altering our message to stop the form submitting and allow the user to correct their error.

And that’s it!

So with our simple condition we have pointed to each of our forms elements and peeked at its value. If the value of any of our form elements is equal to empty or rather nothing, we begin to alert a reminder to the user and halt the form from submitting to allow the user to correct the error. If all form fields pass our simple validation condition then our form continues to submit as normal.

Thanks everyone.

Devin R. Olsen

THE BELOW FORM IS NOT A DEMO!!

JavaScript / Pure CSS Hide and Display Content

Devin R. Olsen — Fri, 11 Sep 2009 08:02:06 +0000

NOTE: If you have not read or downloaded the pure CSS version, this tutorial will not apply to you. I strongly suggest that you first read or at least download the pure CSS version here, before trying to implement this update.

Ok today I am going to extent our pure CSS hide and display method a little bit and add a few extra behavior controls. Basically I was requested quite a few times to keep displaying our content even after our mouse has hovered off our hide and display elements.

Here is an example of our pure CSS version mixed with Javascript to achieve the above(hover over one of the below tabs):

Home
- Home Content
  
  Hi welcome to the live demonstration of the content display and hide method of presenting content to your visitors. This method is sometimes also called content switcher because each tab that you hover over displays content that is only relevant to that particular tab.
  
  This is a great way to divide your content up into sections that the user can reference to quickly instead of scrolling through large amounts of content to find what they might be looking for. The best part of this method is that even though the content is dived up into parts for the visitors, the search engines see this content as a whole and have no knowledge that you are running a hide and display method to your visitors. Its the best of both worlds, user friendly and search engine friendly.
About
- About Content
  
  Often in web development you find the need to divide your content into parts that is best for visitors and crawlers to find that particular content. One good case of this is a web site navigation menu that only allows for a visitor to see a topics submenu links when the user hovers over that topics button. Or if you have a image gallery and a visitor only sees one image upon hovering over that images thumb nail version. This was my need that brought me to develop this version of a content hide and display.
  
  What makes this method of content hide and display or content switcher is the fact that it uses pure CSS and it is compatible with the following browsers.
  
  IE5.5, IE6, IE7, IE8
  
  Firefox
  
  Safari
  
  I created this method out of need and do not consider it to be the best solution to be found out on the net. However this is my solution that I want to share with you so if you like this method or feel like you might be able to improve this method feel free to do so. Please send me a comment or contact me here and let me know if you have improved or tweaked this method because I am always willing to learn new ways to expand my methods.
Contact
- Contact Content
  
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
FAQ
- FAQ Content
  
  [Q] Is this a completely pure css method?
  
  [A] In my opinion yes but some might argue because there is a JavaScript .htc file I use in this method. The .htc file is used to fix that 20% of users who still browse with IE6 and below that cant support CSS2 pseudo hover class.
  
  [Q] Well How come we have to use JavaScript if this is a pure CSS method?
  
  [A] IE6 and below do not support pure CSS methods for elements hover states. With the JavaScript .htc file we give IE6 and below the ability to have the pseudo hover class and us to write pure CSS methods. If the visitor to your site is using IE7 and up or any other browser out there this method will work and they will simply ignore this JavaScript .htc file.
  
  [Q] Why should we care about IE6 and below?
  
  [A] Because the percent of users who surf the net with IE6 and below make up of 20% of all internet users. That’s a huge amount of traffic you might want this method to work with as well.
  
  [Q] Ok IE6 and below has 20% of internet users, but what about the people who have JavaScript turned off?
  
  [A] If the visitor is using anything other than IE6 and below then the javascript is ignored and insignificant. The percent of users who surf the net with JavaScript turned off is about 9%. So 9% of that 20% who still use IE6 and below are the ones that this method will not work for.
  
  Say you have 5000 visitors in one day.
  
  5000 – 20% = 1000 visitors who use IE6 and below
  
  1000 – 9% = 360 visitors use IE6 and below with JavaScript Turned off.
  
  Those 360 visitors will be able to view this method if they simply turn on JavaScript.
  
  The rest of the 4640 visitors will be just fine.

With this script you may have noticed that you are not adding any actual script references to any of our elements, meaning no actual JavaScript resides in our document what so ever.

This is great for search engines that still get confused with JavaScript and even references in elements. Also with no JavaScript references to our elements, we can rest assure that if the user has JavaScript turned off, then our method indeed gracefully degrades back to our original CSS version.

Ok to implement this script and achieve the above version, download a copy this script here.

Once you have downloaded a copy of the script, extract it from the zip file and link it to our desired document’s header with script tags like the following:

(src=”") is pointing to the location to where the script file lives either relatively or absolute to the document.

Ok next there are a few variables you are allowed to edit at the begriming of our script that I suggest you take a look at first. The variables range from the name of the main containers id to hover status button background colors and close button text.

var mainContainer = "contentBox"; //ID NAME OF OUR MAIN CONTAINER
var closeBtn = "[CLOSE]"; //CLOSE BUTTON DISPLAYED TEXT
var overColor = "#fff"; //COLOR OF HOVERED TAB
var offColor = "#999"; //COLOR OF CLOSED TAB

Last we want to add one more CSS style rule to our CSS hide display. This rule is for our close button’s style and structure.

.closeBtn{
height:20px;
position:absolute;
top:-20px;
width:100%;
cursor:pointer;
text-align:right;
left:0px;
}

This gives our “close button” a position of absolute in order to break out of our documents structured flow and always be position to the top right of our content hide and display when content is being displayed.

And that’s it everybody, painless no? Good Enjoy!

Devin R. Olsen

Learning Basic JavaScript Faster Than Ever!

Devin R. Olsen — Fri, 11 Sep 2009 08:00:36 +0000

Before we begin to learn and practices with JavaScript, it’s going to make things a lot smoother if we are all using the same document setup. so for this tutorial I recommend you to practice with the following blank document.





JavaScript 101

Notice that in the above blank documents header tags we have script tags(). This area is where we will be practicing all our JavaScript, so please reference this area as our JavaScript only area.

Let’s begin shall we?

Basiclly there are three areas that JavaScript can be broken down into for one to gather a great grasp of just the basics. The three areas are as follows:

- Variables

- Functions

- Conditions

Variables

A variable is a place to store information. You can store numbers or text in a JavaScript variable. Remember back in middle school when we learned basic algebra and worked on stuff like this?

5 + 5 = x

x is obviously equal to 10, so in JavaScript we can basically stored this number of 10 into a variable called x that we can reference to and use later on. Once we have stored the number of 10 into a variable called x, we could use it in another formula like this.

x-5 = y

Oh no, we now have two variables!

We have x variable that stores our number of 10, and now another variable called y that uses our x variable, minuses 5, equaling 5. So again we have two variables one called x that has a number of 10 stored in it, and now another called y that has a number of 5 stored in it.

Ok let’s stop looking at creepy math shall we, I never liked it anyways. All I want to do is really drive the point home that with JavaScript variables we can store information into them so we may use the stored information at a later time.

Great, so what’s a JavaScript variable look like?

In JavaScript you must always state that you are about to create a variable by using:

var

“var” stands for variable and again every time we want to store some kind of information into a variable, we must start with “var“.
Next we give our variable a name, this name is how we can reference to the variable at a later time by simply calling only its name.

var firstVariable

Ok now that we have created a new variable, and given this newly created variable a name, we have to store some sort of information into it. Storing information into a variable is called assigning values and here is what it would look like.

var firstVariable = "This is my first JavaScript varible!";

Here we simply use the equals sign to equal our varible to this little bit of text.

Text is called a string of text, in JavaScript strings of text must always be surrounded by quotes while numbers do not. Ok last thing is that we ALWAYS close off our variables with a semi-colon “;” to end our statement of “var“.

That wasn’t so bad now was it?

Functions

A function is like a processor that uses our variables to perform desired results. You can think of a JavaScript function like this.

We as humans, always have ideas and thoughts, and these ideas or thoughts would be like JavaScript variables. A function is like the computer, we use the computer to process these ideas and thoughts out for us. So again functions are always being fed variables or working with them to perform or process results out to us. Simple as that.

So what would a function look like? Functions, like variables must also be stated in order to be created but using “function” like so.

function firstFunction()
{
}

After “function” we assign our function a name followed by parentheses. This is a standard way to set up a function and these parentheses are for extending our functions “variable flow” that we will talk about here in a moment.

After our parentheses, we have an open and close curly bracket and in here is where we use our variable to perform or rather process out our results.

Let’s come up with something we can process with our first function. Let’s make two variables and store some numbers in them.

function firstFunction()
{
  var firstVariable = 10;
  var secondVariable = 6;
}

Great now let’s try and find the difference between these two numbers, how would we go about doing this?

Simple, yet another variable.

function firstFunction()
{
  var firstVariable = 10;
  var secondVariable = 6;
  var difference = firstVariable - secondariable;
}

Our third variable is called “difference” and its equaling its self to ( firstVariable – the secondVariable).

Ok, now that we have fed our function all the information it needs to process out some results, how do we relay these results back out to the user?

One way to output results is to use the built-in feature of JavaScript called “alert”. The “alert” feature will take a variable or string of text and alert it out to a user in a pop-up box.

Let try using the “alert” feature to relay our processed variables out to us.

function firstFunction()
{
  var firstVaribile = 10;
  var secondVaribile = 6;
  var difference = firstVariable - secondVariable;
  alert(difference);
}

We have added the “alert” declaration to our function, then parentheses that contains a reference to our “difference” variable followed by a semi-colon.

Now that we have our function ready to be executed we have to add a button or some sort of way to actually execute our function. So add this button to our document.





JavaScript 101

Ok so in this new button, we have an attribute called “onclick” and we equal it to our firstFunction(). This is one of many ways of how to declare your function to being to process and executed. Save this document and run it, and click the button.

Awesome you have created your first script folks!!

Now, remember how when we created this function we created two parentheses that I said I would cover in a bit. Let talk more about these parentheses and how they can help us.

In our firstFunciton() we created our variables and alerted our results out, but this is a very liner method to use functions. Meaning, our function can be provided variables that reside outside of our function to then still process out results to us. Being able to send variables to a function is a vital part of a function, simply because it literally makes the data flow a two-way street instead of a liner avenue of variables and results.

How the heck can we send variables to a function?

Simple, in our parentheses you state the variables name that we are going to want to use down in our curly brackets. Then any element acting as our trigger for executing our function, would be where we pass a value or rather information into our awaiting variable and function.

Lets tweak our firstFunction() just a bit to better see what I am talking about.

function firstFunction(firstVariable, secondVariable)
{
  var difference = firstVariable - secondVariable;
  alert(difference);
}

Ok because we are now sending our variables to our function form another source, the variables them self do not need to be using the “var” simply because this method creates a temporary storing location, not a true storing location for variables.

Ok lets tweak our html documents button “onclick”.

If you haven’t noticed, in our “onclick” we still point to our firstFunction() but here we assign these external variable values to our awaiting function. Here the number ten represents the variable “firstVariable” and the number six still represents the variable “secondVariable” Now the values are no longer residing within our actual function so you can send many different values to our function to receive many diffrent results. You can test it if you like, play with the number values in the “onclick” too.

Conditions

Ok so we have learned that we can create variables and store information in them. Also we learned that functions are constantly being fed our variables to process out desired results. We even learned how to process variables within a function or send variables to a function. Logically we must ask out self, “How can we give our functions even more room to process our results of any given situation not just value?”.

There are plenty of built-in features to JavaScript that really expand the diversity of how information is process in a function, but most widely use is called conditional statements.

Giving conditions to functions means we get to be a bit more divers in how our variables are in fact being processed, a clause if you will.

Basically a simple conditional statement will look like the following.

if()
{}
else
{}

If something meets or fails our requirements do this, else do that, is what a conditional statement is saying. A conditional statement must always begin with the “if” clause followed by parentheses that will hold our deciding factor and then a pair of curly brackets.

In this first set of curly brackets we begin to process our variables and results “if” we either meet or fail our deciding factor depending on how the factor is set up. However there is always two sides to any deciding factor, so this is where the else portion comes in and gives an alternative process to our deciding factor. First stating “else” and then another pair of curly brackets is the second half of a conditional statement. In this second pair of curly brackets we hold the flip side to our deciding factor and how our variables will be processed. Ok let’s make a quick conditional statement in our firstFunction().

function firstFunction(firstVariable, secondVariable)
{
  var difference = firstVariable - secondVariable;
  if(difference == 4)
  {
    alert(difference);
  }
  else
  {
    alert("Sorry we expected something diffrent!");
  }
}

Ok so in our conditional statement you can see that we make our deciding factor to be.

“If the variable “difference” is = to the number 4, then alert out the “difference” to our user, else alert our a sorry message”.

So if in our clicked button, we change any of the two variables we will get alerted this sorry message. Try it out yourself.

One last thing to talk about is the conditional statement before wrapping up this lesson is the alternative ways of using the conditional statements.

What do you do if your one function needs to have a whole array of conditions of how data might be processed? Well we are allowed two ways, one is nesting statements like so.

var difference = firstVariable - secondVariable;
if(difference == 4)
{
alert(difference);
}
else
{
      if(difference == 6)
      {
        alert(difference);
      }
      else
      {
              if(difference == 8)
              {
                alert(difference);
              }
              else
              {
                alert("Sorry we expected something different!");
              }
      }
}

Here we have nested two conditional statements within our “else” clauses, to meet an array of deciding factors for different numbers our “difference” variable is expected to be. Again if our “difference” variable will not meet any of the deciding factors will get alerted our sorry message.

The other method and more standard is not to nest your statements, but harness something called the “else if“. Here are the same conditions as above, but now using the “else if”.

var difference = firstVariable - secondVariable;
if(difference == 4)
{
  alert(difference);
}
else if(difference == 6)
{
  alert(difference);
}
else if(difference == 8)
{
  alert(difference);
}
else
{
  alert("Sorry we expected something different!");
}

Ok so this is a lot cleaner if you ask me, and easy to maintain. Just like a regular conditional statement you have the opening if-clause and ending else clause, but here we introduce between the two the “else if” conditions to break out of our nested habits.

Ok so today we not only learned what a variable is and what it is for, but also how to feed it to a function. We learned about functions and receiving variables in functions and a JavaScript feature called alert to present our results to our viewers. We even learned about conditional statements and how they extend our ability’s to be more diverse in our functions processing.

And that’s your JavaScript 101 crash course everyone!

Thanks.

Devin R. Olsen

Devin R. Olsen Web Developer » JavaScript Tutorials

How to Build jQuery Lava Lamp Menu Tabs

Click Here to See This Tutorial’s Example Demo

How to build a jQuery lightbox!

HELLO This is my very own custom built lightbox!!

Drag 2 Share with CSS and jQuery

Learning The Basics of jQuery Faster Than Ever!

What is jQuery?

When Should I use jQuery?

How do I use jQuery?

Learning Intermediate JavaScript Faster Than Ever!

What is DOM Scripting?

When Do I use DOM Scripting?

How Do I use DOM Scripting?

Procedural Shadow Effect For Your Site Logo

HTML – CSS Portion

JavaScript Portion

PNG 24 Alpha Transparency Fix For IE

Simple JavaScript Form Validation

Example of simple form validation (Click Submit)

THE BELOW FORM IS NOT A DEMO!!

JavaScript / Pure CSS Hide and Display Content

Home Content

About Content

Contact Content

FAQ Content

Learning Basic JavaScript Faster Than Ever!

Variables

Functions

Conditions

Lesson Two: Learning Intermediate JavaScript Faster Than Ever!