Devin R. Olsen Web Developer » JavaScript Tutorials

Combat Extreme – Facebook 3D Shooter

Devin R. Olsen — Mon, 05 Dec 2011 17:48:49 +0000

Hi readers! I thought I would take a different pace today, and instead of teaching lets play some games shall we? For over a year now I and my little brother have been working tirelessly on our first “Third-person shooter” video game.

CLICK HERE TO START PLAYING OUR GAME!

So what makes this game so different you ask? Well the game is completely browser-based. That’s right, a full 3D environment third person shooting game that is playable through your web browser!

It’s a simple game of Marines vs. Insurgents based in a mideast town (for the BETA at least, we have three total levels for full release of the video game).

We used the Unity3d game engine to develop this game, and although our game is still in a official “BETA” title, I felt it was finally time to share this awesome work with the rest of my readers and the world.

In order to play Combat Extreme (the 3d third-person shooter) on Facebook through your web browser, you must have the unity3d web player installed. The web player is designed specifically to render geometry and post process effects directly through ones browsers (Yes even IE).

Combat Extreme (the 3d third-person shooter) is indeed exclusive to facebook.com right now and may or may not be opened to further social gaming markets. We really wanted to create a seamless experience for our UX, and insisting the user create a new account with an email address conformation + allow the app on their page was asking way too much. Thus, we eliminated the biggest step and allow our users to login to Combat Extreme (the 3d third-person shooter game) through their facebook account.

CLICK HERE TO START PLAYING OUR GAME!

Basic jQuery touchmove Event Setup

Devin R. Olsen — Mon, 10 Jan 2011 05:13:53 +0000

I was recently tasked with replicating a “mousemove()” event on the iPad using the “touchmove()” event. I ran into a few snags and felt it was worthy enough to document my findings.

Here is the basic setup for using the “touchmove()” event:

$('#someElm').bind('touchmove',function(e){
      e.preventDefault();
      //CODE GOES HERE
});

Nothing really different about the setup behind the “touchmove()” event and any other native jQuery event. The only difference is that when using a “touchmove()”, you must always start your event handler with a event preventDefault();.

Next, its important to point out that if our script is ran as is, you will run into some issues with events being sent to your touch handlers, and none of them having whats called “e.touches” or “e.changedTouches” properties.

“After deep debugging, I eventually discovered that the source of this problem was the fix method in jquery’s event code. The fix method tries to copy the event object in order to fix various cross browser issues. Unfortunately, it seems that mobile safari does not allow the e.touches and e.changedTouches properties on event objects to be copied to another object. This is weird and annoying. Luckily you can get around this issue by using e.originalEvent.” - http://www.the-xavi.com/articles/trouble-with-touch-events-jquery

So to fix our issue we can simply create a new “touch” variable, then condition both “.originalEvent” and “.changedTouches” to this variable, like so:

$('#someElm').bind('touchmove',function(e){
      e.preventDefault();
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
      //CODE GOES HERE
      console.log(touch.pageY+' '+touch.pageX);
});

I included a little console.log() demo showing how you could test your “touchmove()” event coordinates.

The Problem:

There is one slight problem (depending on your functionality needs) when using this “touchmove()”. The event continues to fire even when your “touch” has moved out side the element.

So in other words, it seems that once the event has started, it’s no longer confined to the element its being assigned to.

The Fix:

There is no real solid fix for this issue yet, however you can band-aid the issue with a little math.

Basically, by trimming the elements top and left offset from both of the touchmove’s x and y event coordinates. You can then condition these trimmed values against both the elements width and height (respectively of course).

Completed touchmove() Event with jQuery with Confined Fix:

$('#someElm').bind('touchmove',function(e){
      e.preventDefault();
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
      var elm = $(this).offset();
      var x = touch.pageX - elm.left;
      var y = touch.pageY - elm.top;
      if(x < $(this).width() && x > 0){
	      if(y < $(this).height() && y > 0){
                  //CODE GOES HERE
                  console.log(touch.pageY+' '+touch.pageX);
	      }
      }
});

Vole! No matter where the location of the element to the page, or the width and height of the element, the event will only be fired in side of the element.

And that’s your basic setup for a “touchmove()” event using jQuery alone.

Have fun.

jQuery Selector Chain Conditions

Devin R. Olsen — Mon, 10 Jan 2011 04:19:02 +0000

There has been a few times while writing a few jQuery plugins, that I came across a condition that basically does the same thing in both the if and else, and it always bothers me. I always wondered if their was a way to condense such a condition and help lower my file size, and after a little bit of tweaking I figured it out.

Take this scenario for instance:

The Problem:

if(animate == true){
    $('#someElm').animate({
        width:'512px',
        height:'512px'
    });
}else{
    $('#someElm').css({
        width:'512px',
        height:'512px'
    });
}

We have a bool variable (animate) that we condition against to either animate or set our element’s (#someElm) width and height. So why is the above bad exactly?

Wasted bytes in our script by using this if/else condition.
We have to use two selectors that point to the same element.
Both conditions are altering the same styles thus it’s again a waste of script bytes.

Hopefully you look at the above little piece of code in shame as much as I do now, and ponder on how one could possibly condense such a condition?

The Solution:

$('#someElm')[(animate == true) ? 'animate' : 'css']({
    width:'512px',
    height:'512px'
});

In the above solution, we have inserted ([...]) an area that we can use to condition our jquery chaining. So in the above solution I have opened this condition area up, and conditioned our bool animate variable again. Depending on the results from our bool animate variable, our selector chooses to either use the animate or css in our chain.

So in a nut shell we have solved the following:

No more wasteful if/else condition.
No more need for two selectors.
The values that are either set via “animate” or “css” are only declared once.

Thanks!

(If you wanted, you could take this optimization a step further by learning how to sum up repeated style values.)

Here is the artice on how to sum up repeated style values when using jquery animate or css.

Realtime Image Typesetting with PHP GD

Devin R. Olsen — Wed, 05 Jan 2011 07:51:35 +0000

Today I wanted to go over some of the really cool things that can be done with both jQuery and PHP’s Graphical library. To begin, let’s go ahead and take a look at the demo of what I will be breaking down over this tutorial.

Click to see demo of Business Card Builder

The Markup

Realtime Business Card Builder

    scripts/server-side.php" />

Notice how the preview image’s “src” attribute is not pointing to a graphical file, but rather a server side php script? This is important because although we could use PHP to render new images out on our web server on every change, its best to view a single rendering through a static image element.

The client side code

By simply building up a query string that contains the values of our form fields, we can get a realtime performance. The first thing we want to create is a variable named “base” that will contain our preview image’s “src” orignal attribute value.

var base = $(".preview img").attr("src");

We make the “base” variable so that we may reference to the original URL of the server side file later on.

Next we want to gather our image from server side when the document is done loading for the first time. By utilizing jQuery’s serialize we will gather all our form’s fields and their values and request our image from php like so:

var base = $(".preview img").attr("src");

//GATHER IMAGE FOR FIRST TIME
$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());

As you can see, we set our image’s source attribute to be that of our base url, plus a serialized string of all our form’s input names and values.

Finally we want to setup our keyup event so as the user types into any of our form inputs, a “change request” for our image to be updated will be sent to php.

var base = $(".preview img").attr("src");

//GATHER IMAGE FOR FIRST TIME
$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());

//KEYUP EVENT AND NEW IMAGE GATHER
$("input,textarea").keyup(function(){
	$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());
});

Notice how within our new keyup event we are basicly repeating our previous step of gather our image the first time? This is how we both gather changes the user has made, and request a new version of our image at the same time.

The server side code

Now lets take a look at our PHP image rendering file. The first thing we want to do in this file is to declare what format of image should it be rendering:

header ("Content-type: image/png");

We pass a content type of “image/png” to our files header so that we can have alpha transparency ability that is natural to png image formats.

Next we need to gather every possible value that is being sent to this file via our URI string. We do this by creating new variables and setting their value to each URI string value, like so:

$companyName = $_GET["companyName"];
$companySlogan = $_GET["companySlogan"];
$fullName = $_GET["fullName"];
$jobTitle = $_GET["jobTitle"];
$businessAddress = $_GET["businessAddress"];
$businessAddress = str_replace("\\n","\n",$businessAddress);
$businessAddress = str_replace("\\","",$businessAddress);
$phoneOne = $_GET["phoneOne"];
$phoneTwo = $_GET["phoneTwo"];
$emailAddress = $_GET["emailAddress"];
$siteUrl = $_GET["siteUrl"];

Notice how on some of the value gatherings I am using a str_replace() function? Again, we are replacing any instance of our hard return character (\\n) into an actual hard return upon rending our image and copy.

Next we are going to gather a temp image we will use to create the actual image we render on dynamically, like so:

$handle = $img = imagecreatefrompng( 'template.png' );

(‘template.png’ is a image file that lives on your server.)

Now we need to setup a few more variables that will come in handy when rendering our results:

$brown = ImageColorAllocate ($handle, 84, 48, 26);
$lightBrown = ImageColorAllocate ($handle, 145, 116, 94);
$white = ImageColorAllocate ($handle, 255, 255, 255);
$peach = ImageColorAllocate ($handle, 238, 222, 200);

We setup different font colors by making use of the “ImageColorAllocate()” PHP GD function and assigning it to our new “template.png” image ($handle). The array of numbers that proceeds “$handle” are RGB color values.

Now that we have everything (variable wise) setup to render our image, we need to place and setup our text in our image. Here is an example of how to do just that.

//company name
ImageTTFText ($handle, 18, 0, 20, 35, $brown, "timesbd.TTF", $companyName);

By using the “ImageTTFText()” PHP GD function, we can setup an array of parameters to place and render our copy in our image.
First, we point to our “template.png” image ($handle) want to place this copy onto. Next is an array of numerical values and they are in order as follows:

Font Size of Copy
Rotation of Copy
X Position to Image’s size
Y Position to Image’s size

After the “size, rotation and position” values, we set our desired font color via our pre-defined color variables. Next we can choose to use a custom font file that live along side this php file. Last is the copy value it’s self that we gathered from our URI string and turned into variables.

The very last part to rending our image with PHP GD, is to do some clean up work like so:

imagealphablending( $handle, false );
imagesavealpha( $handle, true );
ImagePng ($handle);
imagedestroy( $handle );

We finish off our file format of “.png” and its transparency, and lastly destroy the image when completed to free up server memory.

(Some may notice that the web address copy is rendered from an align of center on out, I show this example in the demo download.)

That’s it everyone! With a little JavaScript and PHP GD you can do some really cool stuff, and I hope to see some great examples soon.

~ Download a copy of the demo

All jQuery Google Hosted Repository Links

Devin R. Olsen — Tue, 04 Jan 2011 22:26:27 +0000

If you were not aware, you not longer need to store the jQuery or jQuery-UI JavaScript frameworks on your servers anymore. Google now hosts all the JavaScript, CSS and Images in both these frameworks for you!

Ok with all that said, I still find myself on Google now and then trying to hunt down Google repository links to most things jQuery. So I only felt it was necessary to compile everything into one place for other developer to quickly reference and gather their needed jQuery parts.

jQuery – Google Hosted Repository Links

Minified

Full Source

jQuery UI – Google Hosted Repository Links

Minified

Full Source

jQuery UI – Google Hosted Repository Theme Links

Google is also hosting each of the following theme’s images and sprites, so there is no need to fiddle with hosting and images for any theme on your own server.

Base:

Black Tie: (preview theme)

Blitzer: (preview theme)

Cupertino: (preview theme)

Dark Hive: (preview theme)

Dot Luv: (preview theme)

Eggplant: (preview theme)

Excite Bike: (preview theme)

Flick: (preview theme)

Hot Sneaks: (preview theme)

Humanity: (preview theme)

Le Frog: (preview theme)

Mint Chocolate: (preview theme)

Overcast: (preview theme)

Peper Grinder: (preview theme)

Redmond: (preview theme)

Smoothness: (preview theme)

South Street: (preview theme)

Start: (preview theme)

Sunny: (preview theme)

Swanky Purse: (preview theme)

Trontastic: (preview theme)

UI Darkness: (preview theme)

UI Lightness: (preview theme)

Vader: (preview theme)

The Beginners Guide to jQuery Plugins

Devin R. Olsen — Mon, 03 Jan 2011 10:14:46 +0000

I was recently given the opportunity to read over the new book “jQuery Plugin Development Beginners Guide” by Giulio Bai, and I must admit this is a must have guide! This book is perfect for beginners to gather not only a solid foundation of jQuery plugin concepts, but also best practices. The book it’s self is aimed at teaching the absolute basics jquery plugin development such as:

What is jQuery
Plugin Basics
Your First Plugin

What makes this book so great is how the “basics and best practices” are covered early on, while a series of introductions to actual real world plugin topics are also covered later on, such as:

Media Plugins
- Image Plugins
- Video Plugins
- Audio Plugins
Forms and Validation Plugins
UI Plugins

What also makes this book top notch is that after each chapter, they tend to pose a optional 5 to 10 question quiz to help with all learning types. Now, as if that was not enough, this book also covers other topics such as:

Top jQuery Plugins
Reference and bibliography
Blogs to follow
Browsers: compatibility, comparisons, and plugins

If your looking to dive head first into the world of jquery plugin development, then this the must have guide that all developers should carry with them. I recommend you grab this great book if your looking to invest into anything jQuery right now and enjoy it as much as I have these past weeks.

jQuery zLayers Parallax Plugin

Devin R. Olsen — Fri, 03 Dec 2010 08:34:57 +0000

What is zLayer?

zLayers is a jQuery parallax plugin that allows you to orientate an element based on the position of your mouse to the page’s window, or element’s parent.

zLayer is perfect for interactive illustrations and rich user experience through creative methods through a parallax effect.

Best part about zLayer is how easy, lightweight, and quick the plugin is!
zLayer Example

Click here for a larger version of this example

zLayer Example

Tutorial on how to setup your zLayers

Download a copy of zLayer v0.2 (Dec 10th, 2010)

Version 0.2 is now out!.

Script has been optimized to use less memory between gathering and delivering each elements coordinates.
Script size has now been reduced in size by 9.5% from its original size from v0.1.
Bug with IE has been fixed and should be working correctly now.

jquery.zlayer.min.js (461bytes)
jquery.zlayer.full.js (905bytes)
jquery.zlayer.full.js (v0.3-Beta) (1.7kb)
Download the Example

API & Options

Installing a zLayer
How to install a zlayer on an element:

$('#someElement').zlayer();

Mass

Mass gives parallax movement distance limitation. The more mass you give an element the less it will move from its original position.

$('#someElement').zlayer({
    mass:15
});

Default is 10

Canvas

Sometimes you want a parent element to be the event for moving your zlayers. By using canvas and pointing to this parent element, we contain the zLayers movements to our parent element.

$('#someElement').zlayer({
    canvas:'#parentElement'
});

Default is window

Confine

Confine is a way to stop either x or y axis’ from any movement what so ever (Such as our above example’s background).

$('#someElement').zlayer({
    confine:'y'
});

Default is none

Force

Force allows you to control if an element should be pushed or pulled away from your mouse’s position. This is a fun one to mix up with different elements and create many effects.

$('#someElement').zlayer({
    force:'push'
});
or
$('#someElement').zlayer({
    force:'pull'
});

Default is push

Offsetting zLayers, Styles and JavaScript

To position elements and fine tune their locations to the page or parent element do NOT use top or left styles. The top and left styles are reserved for zLayer movement. Instead of top and left use positive or negative margins to better position your elements.

Here is our above examples CSS

.background,.guy,.guys {position:absolute;}
.background {z-index:1; margin-left:-290px;}
.guy {z-index:4; margin-left:-305px;}
.guys {z-index:2; margin-left:-329px; margin-top:200px;}

Notice how all elements have a position of absolute, this is important for zLayer success. Also notice how each element has a unique z-index, one higher than the other to properly position our zLayers on top of each other.

Last notice how each element has a margin-top and or margin-left to better offset their location of movement around in the parent element. This again is how we better position or rather fine tune our zLayers.

Above examples JavaScript

$(document).ready(function(){
    $('.background').zlayer({mass:15,confine:'y',canvas:'#container'});
    $('.guy').zlayer({mass:8,force:'push',canvas:'#container'});
    $('.guys').zlayer({mass:5,force:'push',canvas:'#container'});
});

Thanks, I hope you have fun and enjoy my plugin!
Devin R. Olsen

jQuery Image Swapping with Fade Effect

Devin R. Olsen — Wed, 01 Dec 2010 05:38:21 +0000

Today we are going to cover how to properly change the source of a single image using jQuery. We will also learn how to fade the image out prior to swapping the source, and fade the image back in after the new source has been fully downloaded.

So lets setup a scenario for our script. Lets say we have a bunch of little thumbnails below a larger image. Lets also say our desired functionality here is to have any thumbnail that is clicked on show up as a larger version in the above larger image. Presuming the small thumbnail images have links wrapped around them with a href attribute pointing to the larger version of each thumbnail, we have something to work with.

Demo of scenario in action

To begin, we want to set up new click events for each thumbnails anchor tag and prevent the user from acutely being directed to this image file in the browser.

$('a.thumbnail').click(function(){
    return false;
});

So in the above code we find all anchor elements with a class of “thumbnails” and run over each instance of one. When we find an anchor element that meets this requirement we setup a new click event with an empty anonymous function. Finally in our empty function, we use the “return false;” to prevent the browser from performing the redirect to the image file.

Next we need to gather the clicked anchor tag’s “href” attribute value, and place it into a variable that we will use later on.

$('a.thumbnail').click(function(){
    var src = $(this).attr('href');
    return false;
});

Next, lets prevent from loading images we have already clicked on by comparing our gathered src, to our already set large image’s src, like so:

$('a.thumbnail').click(function(){
    var src = $(this).attr('href');
    if (src != $('img#largeImg').attr('src')) {
    }
    return false;
});

Basically all we are doing is is saying, “If our gathered src is NOT equal to our larger image’s already set ssrc, proceed on to changing the large image’s source”.

Great, now that we have the larger version’s source of our clicked thumbnail, we can proceed on to swapping the image with this new source:

$('a.thumbnail').click(function(){
    var src = $(this).attr('href');
    if (src != $('img#largeImg').attr('src')) {
        $('img#largeImg').stop().animate({opacity:'0'},function(){
                $(this).attr('src',src);
        });
    }
    return false;
});

So here we are pointing the larger image who has and id of “largeImg”, and starting to animate the image’s opacity to 0. Because there is a callback when using jQuery animate, we make use of it to set the source (src=”") of our larger image to our gather thumbnail’s source. We make use of the callback in our animate to prevent the “image source swapping” from happening while the image is still visible.

Next, we want to make sure that our image has fully been downloaded prior to actually making the image indeed visible again. To do this, we make use of the jQuery .load() functionality that will listen to our large image, and perform what we need when the image is ready to be visible.

$('a.thumbnail').click(function(){
    var src = $(this).attr('href');
    if (src != $('img#largeImg').attr('src')) {
        $('img#largeImg').stop().animate({opacity:'0'},function(){
                $(this).attr('src',src);
        }).load(function(){
                $(this).stop().animate({opacity:'1'});
        });
    }
    return false;
});

So as you can see out last step in the .load() callback functionality is to animate our image back to an opacity of 1 again.

Also, note how I use a .stop() prior to any .animate() call. We make use of .stop() prior to .animate() to prevent the animation fires from collecting if the user clicks our thumbnails rapidly.

So our above code is very compact and meets all our requirements of swapping in larger versions of thumbnail sources while performing a fade effect. Drum roll please….

The Problem:

Erik Kraft helped me reproduce the IE error some people might run into with this method. Apparently because we are making use of the .load() Ajax feature of jQuery and images, IE has a hard time with caching the requests. Because IE caches the requests, any second attempt to load up an already cached image, fails.

The Solution:

Lucky for us, this is a little fix. The solution is to make all requests unique to IE, so no matter if the request is cached or not our script wont fail. We can make each request unique by appending a random number to the end of our src variable, that then gets evaluated by our .load(). Like so:

$('a.thumbnail').click(function(){
    var src = $(this).attr('href');
    if (src != $('img#largeImg').attr('src')) {
        $('img#largeImg').stop().animate({opacity:'0'},function(){
                $(this).attr('src',src+'?'+Math.floor(Math.random()*(10*100)));
        }).load(function(){
                $(this).stop().animate({opacity:'1'});
        });
    }
    return false;
});

So now our images that will be requested from .load(), will be looking something like this:

img/img-three.jpg?691

My random number is between 1 and 100. This random number gives me a 100 to 1 odds that out of my 4 images, the one I click will be a unique request. I will take those odds sir!

Finally, because we have introduced unique requests into the mix, we have a broken our condition that prevents us from loading images we have already clicked. The reason this breaks is cause we are now trying to compare our large image’s source to a unique version of the same url. We can fix this issue by trimming off our unique number at the end of the images url in our condition statement. Like so:

$('a.thumbnails').each(function(){
    $(this).click(function(){
        var src = $(this).attr('href');
        if (src != $('img#largeImg').attr('src').replace(/\?(.*)/,'')) {
            $('img#largeImg').stop().animate({opacity:'0'},function(){
                    $(this).attr('src',src+'?'+Math.floor(Math.random()*(10*100)));
            }).load(function(){
                    $(this).stop().animate({opacity:'1'});
            });
        }
        return false;
    });
});

And that's it. Enjoy!

Demo of script in action

Devin R. Olsen

Javascript Mobile Orientation Detection

Devin R. Olsen — Fri, 19 Nov 2010 08:19:18 +0000

Today I wanted to share with you how to detect the orientation of a mobile device such as iPhone, iPad, Blackberry even the Android with JavaScript alone. Before we start we should talk about “Media Queries” for CSS3.

CSS3 media queries allow you to change the layouts/look and feel of your site by means of screen side detection. The problem however with CSS3 media queries you can’t manipulate the DOM markup of a document based on these screen sizes that are detected.

With the help of JavaScript however, we can now manipulate DOM markup by determining the orientation of a mobile device. With the window.onorientationchange feature of most grade A mobile devices we can both listen for orientation change or detect orientation upon page loadings.

Here is our script:

	detectOrientation();
	window.onorientationchange = detectOrientation;
	function detectOrientation(){
		if(typeof window.onorientationchange != 'undefined'){
			if ( orientation == 0 ) {
				 //Do Something In Portrait Mode
			}
			else if ( orientation == 90 ) {
				 //Do Something In Landscape Mode
			}
			else if ( orientation == -90 ) {
				 //Do Something In Landscape Mode
			}
			else if ( orientation == 180 ) {
				 //Do Something In Landscape Mode
			}
		}
	}

With the above JavaScript, upon the page loading we determine right away what the orientation of our device is by calling the function “detectOrientation();”. From here we have a condition that checks the “typeof” our “window.onorientationchange” to see if truly the feature exists for the device or not. If indeed the ability of “window.onorientationchange” is there for a device we travel further down into more conditions based on the devices orientation direction (0,90,-90,180).

In each orientation detection we cause begin to manipulate our document however we wish! Very nifty!

Down side is there is only one portrait detection, leaving some devices such as iPad unable to detect it being in portrait mode with the device held upside down.

So to conclude, with the power of most new mobile devices utilizing CSS3 media queries and now “window.onorientationchange” we have the power to manipulate almost all of our document however we like to best fit our visitors devices.

Thanks to the original creator of the above script:
http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/

A Faster More Flexible Way to Write jQuery CSS

Devin R. Olsen — Fri, 15 Oct 2010 04:58:02 +0000

In most instances its always better to keep your styles inside a style sheet. There are times however, when you need JavaScript to set or animate some styles.

In just such an instance, we find ourselves sometimes writing things like this:

The Problem:

$('#someElm').css({
	width:'100px',
	height:'100px',
	textAlign:'center',
	fontSize:'14px',
	lineHeight:'100px'
});

There really is no problem with this script, the issue that stands out is that we are repeating “100px” three times over. If you are like me, you also wonder if there is a way to sum up these repeated values. Well, as matter of fact there is a way to cut down on repeated CSS values.

The Solution:

var css = {};
css['width'] = css['height'] = css['lineHeight'] = '100px';
css['textAlign'] = 'center';
css['fontSize'] = '14px';
$('#someElm').css(css);

COOL! We just summed up three style rule’s values into a single call!

We did this by first instating a empty object called css (css= {};), then we assigned our style rules and values to this object (css['fontSize'] = ’14px’).

A Step Further

Being able to sum up our styles values into a single call is very helpful indeed, but that’s not all we can now do with this method folks. With this approach, you have set the platform for a whole new level at making this single calls more dynamic if you will.

Lets say that we want to have a condition on the values our elements style receives. We can do so more efficiently now that we have installed an object.

Lets have a look see:

var css = {};
var start = false;
var condition = (start == false) ? '100px' : '50px' ;

css['width'] = css['height'] = css['lineHeight'] = condition;
css['textAlign'] = 'center';
css['fontSize'] = '14px';
$('#someElm').css(css);

WOW, now that’s some sweet stuff!

Instead of writing essentially two different calls to “$(‘#someElm’)” thats nested in a long if/else condition, we can still sum up our css value and make use of Javascript Ternary Operator.

So to recap, we can install an empty object and toss our styles and repeated values into and assign the styles to elements. We can also make use of Javascript Ternary Operator to better assist us in summing up our repeated values dynamically.

Thanks!

How to Build a jQuery Lava Lamp Menu

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

Example:

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

The Video Tutorial:

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!