Andrew Sellick » JavaScript

JavaScript Clone Object Function

andy — Thu, 20 Mar 2008 15:15:24 +0000

Here’s a pretty useful function that clones objects with the use of recursion allowing deep cloning:

function cloneObj(o) {
   if(typeof(o) != ‘object’) return o;
   if(o == null) return o;

   var newO = new Object();

   for(var i in o) newO[i] = cloneObj(o[i]);
      return newO;
}

Original source snipplr.com.

JavaScript GUID Generator

andy — Wed, 19 Mar 2008 12:37:40 +0000

I recently found an interesting forum post which detailed how to generate GUIDs using JavaScript on the fly. Its very simple and looks as follows:

function S4() {
return (((1+Math.random())*0×10000)|0).toString(16).substring(1);
}

function generateGuid(){
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()).toUpperCase();
}

Originally posted by Dr John Stockton on thescripts.com.

HTML Forms on the fly

andy — Tue, 19 Feb 2008 22:45:01 +0000

I have been looking about at form generators recently and I think it’s fair to say pForm have created one of the best. The generator offers many options including; theme/colour scheme selection, the choice of a multitude of field elements (from a textbox to a file upload) to add to your form, editable form and form field properties and finally ability to download your recently created form.

This is a really nice generator so if your interested have a look at pForm (HTML Forms on the fly).

Script of the week

andy — Fri, 15 Feb 2008 14:51:15 +0000

Script of the week this week goes to the CSS Text Wrapper. On the website they state " The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website" and I have to say it is very impressive.

The site covers every angle from XHTML with inline CSS, to XHTML with external CSS styles and finally an unobtrusive JavaScript. This is all neatly created for you on the fly from the website by using their flash tool to sculpt your desired shape.

The image to the left shows just how effective this technique can be producing some superb shapes to enrich your sites design and layout.

Have a look for yourself at the CSS Text Wrapper and if your still not decided why not have a look at the CSS Text Wrapper demo page.

JavaScript Table Row Highlighter Class using Mootools

andy — Wed, 09 Jan 2008 20:22:14 +0000

Well Christmas has been and gone (I hope you all had a fantastic Christmas/New Year), and now it’s time to get back down to some work.

I have developed a simple little class to highlight table rows using Mootools and I thought I would share it with the world.

code

As you can see below the HTML code is very basic and uses an ID to define the region which requires highlightling. In this example an ID of "highlight" has been applied to the tbody.

Finally all that is left is to instantiate the "tableHighlighter" class using the ID of "highlight" to reference the table (or part of) required.

One	Two	Three	Four	Five	Six
1	40cm	Quaterfold	100	1000	3346005
1	40cm	Quaterfold	100	1000	3346005
1	40cm	Quaterfold	100	1000	3346005
1	40cm	Quaterfold	100	1000	3346005
1	40cm	Quaterfold	100	1000	3346005
1	40cm	Quaterfold	100	1000	3346005

class options

The Hightlighter class comes with several options built in to allow for easy customisation. These include:

rowColourClass - Can be named as you wish and referenced through css to produce your desired results.
rowHoverColourClass - Can be named as you wish and referenced through css to produce your desired results.
highlightRow - odd or even

An example of how this could be used is as follows:

mootools modules

The modules required for this class is as follows:

Core

Core

Class

Class

Native

Array
String
Function
Number
Element

Element

Element.Event

download

Please feel free to download the JavaScript Table Row Highlighter code.

demo

Have a look for yourself at the JavaScript Table Row Highlighter demo.

JavaScript Request Querystring Function

andy — Sun, 09 Dec 2007 17:32:34 +0000

After searching for some time for a good request querystring solution, for JavaScript, I believe I have finally found it.

Netlobo.com have developed a very useful function that breaks the querystring up into parameters using regular expressions. This enables you to request the individual parameter you require and with very little added weight on the the load time of the page as the code is only 11 lines in total.

Check ou the JavaScript Request Quesrystring function for yourself.

Simple 3D JavaScript Engine

andy — Tue, 06 Nov 2007 15:21:06 +0000

Carrying on from the theme of developing 3d effects in JavaScript I decided to keep researching flash examples and tutorials, trying to recode them into JavaScript. I was then pointed to another really handy website that has some superb flash examples.

Kirupa had one demo in particular that I wanted to see if I could emulate called Scripting 3D in Flash. This example showed how to create a camera movement in flash giving a feeling of perspective.

Having looked at the code I decided this was most definitely possible in JavaScript and here’s what I came up with…

code

HTML

The HTML as seen below is pretty simplistic. Firstly we have a sceneContainer that wraps the whole 3D Engine, then we have a scene3D container which acts very much as a view for the the engine as will be described below and finally we have the individual images within the scene, each with an id allowing individual styling.

CSS

The CSS details simple styling for the engine. Points to note are as follows:

sceneContainer has a fixed width/height and an overflow of hidden. This allows us to mask the images as they move back and forth in perspective.
Next we have the scene3D positioned absolutely with a width of 100% of it’s container (sceneContainer). This allows for easy resizing and positioning of the container within the sceneContainer.
Finally we have styles for each individual image within the containers. This allows us to position all the images within the scene3d container.

#sceneContainer{
   border:1px solid #CCCCCC;
   position:absolute;
   width:800px;
   height:500px;
   overflow:hidden;
}

#scene3d{
   position:absolute;
   left:0%;
   width:100%;
}

#joe{
position:absolute;
left:0px;
}

#joe2{
position:absolute;
right:0px;
}

#joe3{
position:absolute;
left:25%;
}

#joe4{
position:absolute;
right:25%;
}

#joe5{
position:absolute;
left:50%;
}

#joe6{
position:absolute;
right:50%;
}

#joe7{
position:absolute;
left:75%;
}

#joe8{
position:absolute;
right:75%;
}

JavaScript

Lastly we have the JavaScript. This is strongly based on the kirupa example and works by looping through the images included in the scene and scaling them based on the variables set in the movie. To achieve the effect of the images zooming in and out we also have to scale and reposition the scene3D container at the same time hiding the overflow within the sceneContainer.

Have a play about with the variables to get to grips with how they control the effect and more over, have fun!

var sceneContainer = document.getElementById(’sceneContainer’);
var scene3d = document.getElementById(’scene3d’);

x = 0;
y = 100;
z = 300;

cameraView = new Object();
cameraView.x = 0;
cameraView.y = 0;
cameraView.z = 500;

focalLength = 300;

dir = -1;
speed = 20;

backAndForth = function(){
   cameraView.z += speed*dir;
   if (cameraView.z > 500){
       cameraView.z = 500;
       dir = -1;
   }else if (cameraView.z < 0){
       cameraView.z = 0;
       dir = 1;
   }

   var sprites = scene3d.getElementsByTagName(’img’);
   var spritesLength = sprites.length;

   var scaleRatio = focalLength/(focalLength + z - cameraView.z);

   for( var i = 0; i < spritesLength; i++ ){
       var sprite = sprites[i];

       sprite.style.top = ((y - cameraView.y) * scaleRatio)+’px’;
       sprite.style.width = sprite.style.height = (100 * scaleRatio)+’px’;
       scene3d.style.width = (100 * scaleRatio)+’%';
       scene3d.style.left = ‘50%’;
       scene3d.style.marginLeft = ‘-’+(100 * scaleRatio)/2+’%';
   }



};
setInterval(’backAndForth()’, 30);

demo

Have a look at the Simple 3D JavaScript Engine Demo.

download

Feel free to download the Simple 3D JavaScript Engine Code.

Script of the week

andy — Fri, 19 Oct 2007 22:08:39 +0000

Well this week I knew as soon as I found this script it had it in the bag. I have recently been searching for a good Flash 3D Carousel a found some amazing demos over at GOTOANDLEARN.COM which show you exactly how to achieve that effect, however, it then got me into thinking "Has anybody created a JavaScript 3D Carousel?". Well the answer is yes…

Interface elements for jQuery have developed a really nice implementation of the 3D Carousel which is worth a look. An implementation guide can be found at Interface Elements.

Fancy Sliding Menu for Mootools

andy — Tue, 09 Oct 2007 20:19:39 +0000

Due to the popularity of the script.aculo.us version of the Fancy Sliding Menu I decided a Mootools version was now in order.

It looks exactly the same as the the script.aculo.us, it works exactly the same as the script.aculo.us version, the only difference is it runs on Mootools.

Right well thats enough of the introductions, click on the demo and download the code below.

Have a look for yourselves and enjoy.

demo

Feel free to view the Fancy Sliding Menu for Mootools demo.

download

Please download the Fancy Sliding Menu for Mootools code.

Script of the week

andy — Thu, 04 Oct 2007 23:06:24 +0000

It’s been a while since I last posted a script of the week, however, as soon as I found this script I knew I had to put it on my site. Well this week it is a script called LightWindow that claims the prize. Before you all moan at yet another light-’whatever’ as it is so well put on the LightWindow site please read on as this one is really worth a look.

Now I have seen a lot of LightBox esq effects out there but this one wins the prize. Not for aesthetics as on that front it is just the same as the others, however, if you look at the media types that LightWindow is compatible with you gain an understanding as to why exactly it is that this script is so impressive (In fact LightWindow claims to support every media type). Couple this with superior Browser compatibility and the sheer versatility and flexibility and you have a winning package.

The code is slightly heavy at 63KB and when taking in to account that it also uses Prototype and Script.aculo.us you can gather that it is a big bit of kit, however, the scalability of this code leads me to believe it is totally worth it.

Finally the list of features that LightWindow offers is phenomenal and well worth a browse. Have a look for your self at the LightWindow feature list.