What We Are Building

This one can bog down a system in a hurry, but that’s the fun with experimenting with JavaScript.  We will be building a sphere that rotates depending on which way the mouse moves….exciting.

Getting Started

This tutorial is a continuation of a line of 3D jQuery posts.  I would recommend you having a look at the previous post so you’re up to speed.

• Making a 3D Engine in jQuery
• 3D Plane for jQuery Engine
• Creating a Wobbling 3D Carousel

Now that is out of the way lets get started.  For this project we’ll have 3 files. 

• 3DEngine.js
• Sphere.js
• sphere.html

The 3DEngine.js is the same file that was in the previous posts so we won’t be covering that. The Sphere.js holds the Sphere class which is used by the 3D Engine.  Lastly the html file puts everything together.

The Sphere

With the sphere class we’ll be creating a set of 3d points (x,y,z) in an array.  To build the sphere we’re simply going to create a whole bunch of rings that start off small, get larger, then small again.  I’m not sure if this the best way of building a sphere, but it works so I’m not going to worry too much.

Here is the JavaScript:

There are two loops.  One for the number of rings, the other for the points within each ring.  Inside the inner loop we first figure out where each point should lie, then figure out how that would translate into the x, y and z co-ordinates.

The jQuery / Html

Not much has changed in our jQuery / HTML since the 3d Plane post.  The only thing that has changed is we imported the Sphere.js and instead of adding a plane, we’re adding a sphere.

Here is the HTML:

Disclaimer

Be careful adding points on this one.  Because the 3D engine doesn’t use html’s canvas just yet, it really can’t handle too many points. I can get away with 100 points on my machine without too much delay.  Chrome handles it the best out of all the browsers I tried.  So use it at your own discretion, you might have some angry viewers if you go too nuts.  This is just meant to be experimental…and cool.

The next step will be to optimize the 3D Engine a bit using the canvas so there won’t be this problem in the future.

Here is all the code together:

JavaScript

HTML

What We’re Building

We’ll be creating a carousel with the help of the 3d Engine we built in a previous post.  The idea is we’ll create a ring by plotting points in 3d space, then we’ll rotate it so it’s almost perpendicular to the viewer.  Because it’s not 100% flat, it will look like it’s wobbling up and down, giving your carousel a little more flavor.

Building the Ring

If you haven’t read up on the 3d Engine just yet I recommend you do so.  Creating objects for the engine isn’t overly complicated.  It’s just an array of 3d points.  With the ring, we’re going to use math to plot the points for us.  We’re going to be creating a circle and plot it in 3d space.

Here is the JavaScript: (Ring.js)

The Ring class takes 2 parameters, the first is the radius of the ring, and the second is how many items are going to be on the ring.

We then proceed to step through all the points, and place them at equal distances around the ring.

The HTML

There isn’t much too the html.  We’re simply going to create a <ul> with a bunch of words in it.

Here is the HTML:

The jQuery

There is not much changed from our previous post on how to create a 3d plane for jQuery 3D Engine.  The only difference here is we’re going to give an initial value to the axisRotation x value.  This will rotate the ring towards the viewer.  Through trial and error I figured out the value that worked for me.

Then we’ll animate the axisRotation y value when the mouse moves left and right.

Here is the jQuery:

Voila!

That’s all there is too it. 

Here is all the code together:

Ring.js:

Just a small tip. If you wanted to create a carousel that doesn’t wobble, your first instinct might be to adjust the axisRotation x value until you get it.  You can do it this way, it just might take a bit to get it right on the money.  The easier way is to adjust the Ring.js file, and switch the y and z values.  This will create a totally flat ring and you don’t have to worry about using the axisRotation x value to try and flatten it out.

What We’re Making

I decided not to tackle too tough a shape as I wanted to show how to interact with the mouse.  We’ll be making a plane that rotates the further you get from the center.

Getting Started

If you haven’t seen how the 3D engine works I recommend visiting Making a 3D Engine in jQuery and getting caught up.  The first thing we’re going to tackle is the plane.  We’re going to create a JavaScript file that we’ll import into our HTML file. The code isn’t too complicated.  We’re creating an array of 3d points. 

Lets look at the code.

It’s pretty much the same as the Cube in the previous post.  The only difference is it’s less points.  This would be a good opportunity to walk you through how each point is placed.  The Plane class has 1 argument.  The size of the Plane.  We’ll use this size to plot our points.  Let’s look at the first point. (-size,size,0)  So if we pass in a size of 100, then the 3d point would be (-100,100,0) Which puts a point 100 points to the left and 100 up.  The z value is at zero because it’s a plane.  All the points are going to sit line up along the z axis.  The next point is (100,100,0). This is the top right point.  (100,-100,0) is bottom left. Lastly (-100,-100,0)  is bottom right.

Mouse Interaction

Now that we have our plane made, we’ll just import it into our html file.  Just like our previous post we’ll have to create our Camera,Object holder, Object and Scene. Now we’ll tackle having it interact with the mouse.

Here is the new jQuery:

Anytime the mouse moved we would figure out how far the mouse is from the center of the object.  Then we assign it to variables that will be used in a function that is called at set intervals.  In that function we simply divide the mouse value by a speed variable and apply it to the axisRotation.  You can adjust the sensitivity of the mouse by increasing or decreasing the speed value.  You might be wondering why we’re applying the mouseX to the y value of axisRotation.  This is because we want to control rotating on the y axis with our mouse moving left and right.  Kind of like opening and closing a door.

Here is the code all together:

Next Step

Now that the mouse Interaction is taken care of.  The next shape I’m going to take a stab at is the ring.  Stay tuned for more 3D shapes.

Related

3D Engine

What we’re building

Essentially we will be building two pages.  One with static HTML.  The other with jQuery to steal the content from there and display it on it’s own page.  Pretty cool stuff.  It is just standard Ajax, but with one cool feature, it allows you to select what you pull from the site using selectors.  If you haven’t used Ajax with jQuery before I recommend you checking out the Beginners Guide to Using Ajax with jQuery.

The HTML page

First we’ll create a simple HTML page.  I’m just going to use a header and an unordered list, just to show you can pick and choose what you want.

Here is the HTML:

Not much too it huh.  This isn’t going to be the page that displays, so really you just have to make sure it has the content you want in here.

The jQuery / Ajax Page

This page is pretty bare as well.  We’re just going to have a div that will be are holder, and the jQuery to pull the content from the other page.

Here is the page:

Basically the load() function does all the work. You pass in the url of the page, and the selector you want to get and it gets the HTML and puts it in the selector that is calling the load function.  Just a note, you might run into some caching issues if you have dynamic content, so it might be a good idea to add some unique id at the end of the url; perhaps a random number that you generate.  e.g. (htmlPage.html?cacheBuster=1231321)

Server Side Pages

This also handles server side pages. e.g.(PHP, ASP, etc) The beauty of the load function is it has extra arguments you can pass in.  It has 3 in total

1. The page URL / selector
2. Any Post Data you want to pass to the URL
3. A Callback function.

So if you pass an object into the second parameter it will send a post variable with those values.

1 2 3 4 5

$('#selector').load("content.html #selector",     {data:value},     function(){         alert("Callback Function");     });

For example, say we want to get the navigation from a certain page, and index.php loads the navigation based on what a certain post variable might be.  This would be a prime example of when you might use the load function over other Ajax functions in jQuery.  The ability to use a selector would help a great deal if you needed to pull a needle from a haystack of content.

Conclusion

More than likely this function isn’t going to be used everyday, but it’s good to keep in mind for those special occasions.

Download Example

 

]]> http://www.devirtuoso.com/2009/09/grabbing-content-from-other-pages-with-ajax-and-jquery/feed/ 4 http://www.devirtuoso.com/2009/09/making-a-3d-engine-in-jquery/ http://www.devirtuoso.com/2009/09/making-a-3d-engine-in-jquery/#comments Mon, 14 Sep 2009 14:48:49 +0000 Shawn http://www.devirtuoso.com/?p=1124 In the previous post “3D tag cloud” I received quite a few requests for different shapes besides the ring.
The problem is how the tag cloud was created it doesn’t lend itself to different shapes very well. So
this post will show how to create a 3D engine in jQuery / JavaScript for those more exciting shapes.

 

What We’re Building

We’re going to create a 3D engine that will allow us to create shapes simply by creating an array of points. This engine will have a Camera, a Scene and an Object. It’ll work pretty well the same as in real life. The closer the camera is to the object the larger it gets. This won’t be a complete rendering engine, as this won’t render multiple objects at this point.

Download Example

 

 

Display Object

The Display Object is more or less a way to give each object a set of properties and methods. Say I wanted to create a cube, it would first have to inherit the DisplayObject3D class for it to work. It gives the object the tools it needs to get the job done. Kind of like a tool box for a handy man.

Here is the JavaScript Class:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

var DisplayObject3D = function(){     return this; }; DisplayObject3D.prototype._x = 0; DisplayObject3D.prototype._y = 0; //Create 3d Points DisplayObject3D.prototype.make3DPoint = function(x,y,z) {     var point = {};     point.x = x;     point.y = y;     point.z = z;     return point; }; //Create 2d Points DisplayObject3D.prototype.make2DPoint = function(x,y, depth, scaleFactor){     var point = {};     point.x = x;     point.y = y;     point.depth = depth;     point.scaleFactor = scaleFactor;     return point; }; //Holds the container DisplayObject3D.prototype.container = undefined; //Holds an array of 3d points. DisplayObject3D.prototype.pointsArray = []; // Set the container and create place holders if // there is no <ul> in the container DisplayObject3D.prototype.init = function (container){         this.container = $(container);     this.containerId = this.container.attr("id");         //if there isn't a ul than it creates a list of +'s     if ($(container+":has(ul)").length === 0){         for (i=0; i < this.pointsArray.length; i++){             this.container.append('<b id="item'+i+'">+</b>');         }     } };

 

If this seems a little foreign to you, you might want to check out the post Object Oriented Programming with JavaScript.

Make 3d/2d Points

These functions basically create objects, one meant for 3d (x,y,z) and one meant for 2d(x,y,depth).  These will come in handy when the scene is rendered.

Initialization

The init function assigns a variable to the container passed in.  The container is where ever you want the 3d object to display.  There is also a part of this function that checks to see if the container has an unordered list.  If it doesn’t it just creates a bunch of +’s  Really these lines aren’t necessary, I just put it in so I don’t always have to create a unordered list to see if my object is rendering.

 

Camera

I’m guessing from the name you can probably figure out what this class does.  It’s just like a real life camera.  It basically creates a point of reference.

Here is the Camera Class:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var Camera3D = function (){}; //The x,y,z of the camera Camera3D.prototype.x = 0; Camera3D.prototype.y = 0; Camera3D.prototype.z = 500; //Determines the zoom Camera3D.prototype.focalLength = 1000; //Figure out how large the object should be in //reference to the camera. Camera3D.prototype.scaleRatio = function(item){     return this.focalLength/(this.focalLength + item.z - this.z); }; //Initialize the camera with values. Camera3D.prototype.init = function (x,y,z,focalLength){     this.x = x;     this.y = y;     this.z = z;     this.focalLength = focalLength; };

 

The focal length basically determines how large the object is going to look in reference to how close it is from the camera.  Think of it like a zoom lens.  You can zoom in, or zoom out.

The scaleRatio does the magic. It figures out how large the item should be in reference to the camera.

 

Object 3D

This class isn’t overly important.  I basically made this class so I can add more than one object in the future.  Right now the engine can only deal with one object at a time. Object3D is a glorified array.  Anytime you add an item to the array, it runs the init function on that item.

Here is the code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// class creates an array of objects to // be rendered, and initializes them. var Object3D = function (container){     this.container = $(container); }; Object3D.prototype.objects = []; //Add object to the list of objects. Object3D.prototype.addChild = function (object3D){             this.objects.push(object3D);         object3D.init(this.container);         return object3D; };

 

Scene

This is where all the complicated stuff happens.  I won’t get into great detail with the mathematics.  High school math was boring enough   I will give you a high overview of what the code does though, so at least you have an understanding of what it does.

Here is the Scene Class:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

var Scene3D = function (){}; Scene3D.prototype.sceneItems = []; //Adds objects to the list of items to be rendered. Scene3D.prototype.addToScene = function (object){     this.sceneItems.push(object); }; //Converts a 3d point into a 2d point. Scene3D.prototype.Transform3DPointsTo2DPoints = function(points, axisRotations,camera){     var TransformedPointsArray = [];     var sx = Math.sin(axisRotations.x);     var cx = Math.cos(axisRotations.x);     var sy = Math.sin(axisRotations.y);     var cy = Math.cos(axisRotations.y);     var sz = Math.sin(axisRotations.z);     var cz = Math.cos(axisRotations.z);     var x,y,z, xy,xz, yx,yz, zx,zy, scaleFactor;     var i = points.length;         while (i--){         x = points[i].x;         y = points[i].y;         z = points[i].z;         // rotation around x         xy = cx*y - sx*z;         xz = sx*y + cx*z;         // rotation around y         yz = cy*xz - sy*x;         yx = sy*xz + cy*x;         // rotation around z         zx = cz*yx - sz*xy;         zy = sz*yx + cz*xy;                 scaleFactor = camera.focalLength/(camera.focalLength + yz);         x = zx*scaleFactor;         y = zy*scaleFactor;         z = yz;                 var displayObject = new DisplayObject3D();         TransformedPointsArray[i] = displayObject.make2DPoint(x, y, -z, scaleFactor);     }         return TransformedPointsArray; }; //Takes the converted 2d and applies the appropriate CSS. Scene3D.prototype.renderCamera = function (camera){     // Loop through all objects in the scene.     for(var i = 0 ; i< this.sceneItems.length; i++){         var obj = this.sceneItems[i].objects[0];                 //transform the points in the object to 2d points.         var screenPoints = this.Transform3DPointsTo2DPoints(obj.pointsArray, axisRotation, camera);                         //does the container have a ul inside of it.         var hasList = (document.getElementById(obj.containerId).getElementsByTagName("ul").length > 0);                         //Cycle through each point in the object.         for (k=0; k < obj.pointsArray.length; k++){             var currItem = null;                         //if the container has a list then select the lis             if (hasList){                 currItem = document.getElementById(obj.containerId).getElementsByTagName("ul")[0].getElementsByTagName("li")[k];             }else{                                 //otherwise select whatever is there.                 currItem = document.getElementById(obj.containerId).getElementsByTagName("*")[k];             }                         //If there are items to render then...             if(currItem){                 currItem._x = screenPoints[k].x;                 currItem._y = screenPoints[k].y;                 currItem.scale = screenPoints[k].scaleFactor;                                                 //Render the CSS.                 currItem.style.position = "absolute";                 currItem.style.top = currItem._y+'px';                 currItem.style.left = currItem._x+'px';                 currItem.style.fontSize = 100*currItem.scale+'%';                                 $(currItem).css({opacity:(currItem.scale-.5)});             }                     }     } }; //Center for rotation var axisRotation = new DisplayObject3D().make3DPoint(0,0,0);

 

Add To Scene

First thing you’ll see is the addToScene function.  This basically populates the array that is used to render the scene.  If you object is in this array it will get rendered, if it isn’t….it missed the bus.

 

Transform 3D point to 2D

Next is the Transform3DPointsTo2DPoints function.  This is probably the most important part of the engine.  What it does is it takes a 3D point in space (x,y,z) and through a little magic converts it into a 2D point that can be displayed on screen.

 

Render Camera

The renderCamera function doesn’t do anything too complicated.  It’s sole purpose is to display the items on screen.  It does this by looping through the objects in the scene, and passes each one into the Transform3DPointsTo2DPoints function.  The function will return a 2D point that can be plotted using CSS.  You might have noticed I’m using JavaScript for the CSS and selecting of the DOM instead of jQuery.  Initially I used jQuery but found the browser was crawling, so I went back to the old fashion way.

 

The Cube

I’ve put the Cube class in a separate file so you can import objects as you need them instead of having to load ones you aren’t using. 

The class isn’t overly complicated.  It’s creating an array and placing all the points on the cube into that array.  It uses the make3DPoint function from the DisplayObject3D class to create each point.

Here is the code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

var Cube = function (size){         //if the size is not set then give a default     if (size === undefined){         size = 10;     }         //Create a 3d point for every point on the cube.     this.pointsArray = [         //make3dpoint is a function inherited from     //DisplayObject3D             this.make3DPoint(-size,-size,-size),         this.make3DPoint(size,-size,-size),         this.make3DPoint(size,-size,size),         this.make3DPoint(-size,-size,size),         this.make3DPoint(-size,size,-size),         this.make3DPoint(size,size,-size),         this.make3DPoint(size,size,size),         this.make3DPoint(-size,size,size),         this.make3DPoint(0,size,-size),         this.make3DPoint(size,size,0),         this.make3DPoint(0,size,size),         this.make3DPoint(-size,size,0),         this.make3DPoint(0,-size,-size),         this.make3DPoint(size,-size,0),         this.make3DPoint(0,-size,size),         this.make3DPoint(-size,-size,0),         this.make3DPoint(-size,0,-size),         this.make3DPoint(size,0,-size),         this.make3DPoint(size,0,size),         this.make3DPoint(-size,0,size)     ];     }; //Inherit DisplayObject3d methods and properties Cube.prototype = new DisplayObject3D();

 

 

Using the 3D Engine

There are a few steps that need to be done in order for this to work.   First we’ll need some HTML. I’ll just create a div with an id and place a <ul> full of smiley faces.  If you wanted you can leave the div blank and it will automatically create a bunch of +’s for you.

Here is the HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<body>     <div id="item">         <!-- List of smiley faces -->         <ul>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>             <li>&#x263A;</li>         </ul>     </div> </body> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script src="3DEngine.js" type="text/javascript" charset="utf-8"></script> <!--     Each 3d object is a seperate js so you only     have to import what you need. --> <script src="Cube.js" type="text/javascript" charset="utf-8"></script>

 

Next comes the jQuery. There are a couple of steps you need to do:

1. Create a camera and initialize it.
2. Create an Object Holder (Object3D)
3. Create an Object and put it in the holder.
4. Create a Scene and put the holder in it.

Here is the jQuery:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

$(document).ready(function() { //Create a camera var camera = new Camera3D(); //initialize it. camera.init(0,0,0,300); //Create an object holder. var item = new Object3D($("#item")); //add a new cube. item.addChild(new Cube(100)); //Create a scene var scene = new Scene3D(); //Place the object Holder in the scene. scene.addToScene(item); //Animates the cube. var animateIt = function(){     //rotates on the y and x axis.     axisRotation.y += .01     axisRotation.x -= .01         //Render the scene.     scene.renderCamera(camera); }; setInterval(animateIt, 20); });

 

I didn’t get a chance to make it interact with the mouse. You can do that just by adjusting the axisRotation x, y and z values when the mouse moves.  Perhaps I’ll do this in my next post.

 

That’s All For Now

Stay tuned for the next couple of posts.  I plan to make a couple different shapes for this.  If you feel frisky by all means try and create your own shapes.  Just create an array with a bunch of 3D Points.  

There are still a couple of kinks to work out, but for now here is all the code together.

3DEngine.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197

/* * DisplayObject3D ---------------------------------------------- */ var DisplayObject3D = function(){     return this; }; DisplayObject3D.prototype._x = 0; DisplayObject3D.prototype._y = 0; //Create 3d Points DisplayObject3D.prototype.make3DPoint = function(x,y,z) {     var point = {};     point.x = x;     point.y = y;     point.z = z;     return point; }; //Create 2d Points DisplayObject3D.prototype.make2DPoint = function(x,y, depth, scaleFactor){     var point = {};     point.x = x;     point.y = y;     point.depth = depth;     point.scaleFactor = scaleFactor;     return point; }; DisplayObject3D.prototype.container = undefined; DisplayObject3D.prototype.pointsArray = []; DisplayObject3D.prototype.init = function (container){         this.container = $(container);     this.containerId = this.container.attr("id");         //if there isn't a ul than it creates a list of +'s     if ($(container+":has(ul)").length === 0){         for (i=0; i < this.pointsArray.length; i++){             this.container.append('<b id="item'+i+'">+</b>');         }     } };  /* * DisplayObject3D End ---------------------------------------------- */ /* * Camera3D ---------------------------------------------- */ var Camera3D = function (){}; Camera3D.prototype.x = 0; Camera3D.prototype.y = 0; Camera3D.prototype.z = 500; Camera3D.prototype.focalLength = 1000; Camera3D.prototype.scaleRatio = function(item){     return this.focalLength/(this.focalLength + item.z - this.z); }; Camera3D.prototype.init = function (x,y,z,focalLength){     this.x = x;     this.y = y;     this.z = z;     this.focalLength = focalLength; }; /* * Camera3D End ---------------------------------------------- */ /* * Object3D ---------------------------------------------- */ var Object3D = function (container){     this.container = $(container); }; Object3D.prototype.objects = []; Object3D.prototype.addChild = function (object3D){             this.objects.push(object3D);         object3D.init(this.container);         return object3D; }; /* * Object3D End ---------------------------------------------- */ /* * Scene3D ---------------------------------------------- */ var Scene3D = function (){}; Scene3D.prototype.sceneItems = []; Scene3D.prototype.addToScene = function (object){     this.sceneItems.push(object); }; Scene3D.prototype.Transform3DPointsTo2DPoints = function(points, axisRotations,camera){     var TransformedPointsArray = [];     var sx = Math.sin(axisRotations.x);     var cx = Math.cos(axisRotations.x);     var sy = Math.sin(axisRotations.y);     var cy = Math.cos(axisRotations.y);     var sz = Math.sin(axisRotations.z);     var cz = Math.cos(axisRotations.z);     var x,y,z, xy,xz, yx,yz, zx,zy, scaleFactor;     var i = points.length;         while (i--){         x = points[i].x;         y = points[i].y;         z = points[i].z;         // rotation around x         xy = cx*y - sx*z;         xz = sx*y + cx*z;         // rotation around y         yz = cy*xz - sy*x;         yx = sy*xz + cy*x;         // rotation around z         zx = cz*yx - sz*xy;         zy = sz*yx + cz*xy;                 scaleFactor = camera.focalLength/(camera.focalLength + yz);         x = zx*scaleFactor;         y = zy*scaleFactor;         z = yz;                 var displayObject = new DisplayObject3D();         TransformedPointsArray[i] = displayObject.make2DPoint(x, y, -z, scaleFactor);     }         return TransformedPointsArray; }; Scene3D.prototype.renderCamera = function (camera){     for(var i = 0 ; i< this.sceneItems.length; i++){         var obj = this.sceneItems[i].objects[0];             var screenPoints = this.Transform3DPointsTo2DPoints(obj.pointsArray, axisRotation, camera);                 var hasList = (document.getElementById(obj.containerId).getElementsByTagName("ul").length > 0);                 for (k=0; k < obj.pointsArray.length; k++){             var currItem = null;                         if (hasList){                 currItem = document.getElementById(obj.containerId).getElementsByTagName("ul")[0].getElementsByTagName("li")[k];             }else{                                 currItem = document.getElementById(obj.containerId).getElementsByTagName("*")[k];             }                         if(currItem){                 currItem._x = screenPoints[k].x;                 currItem._y = screenPoints[k].y;                 currItem.scale = screenPoints[k].scaleFactor;                                 currItem.style.position = "absolute";                 currItem.style.top = currItem._y+'px';                 currItem.style.left = currItem._x+'px';                 currItem.style.fontSize = 100*currItem.scale+'%';                                 $(currItem).css({opacity:(currItem.scale-.5)});             }                     }     } }; /* * Scene3D End ---------------------------------------------- */ //Center for rotation var axisRotation = new DisplayObject3D().make3DPoint(0,0,0);

Cube.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

var Cube = function (size){         if (size === undefined){         size = 10;     }         this.pointsArray = [         this.make3DPoint(-size,-size,-size),         this.make3DPoint(size,-size,-size),         this.make3DPoint(size,-size,size),         this.make3DPoint(-size,-size,size),         this.make3DPoint(-size,size,-size),         this.make3DPoint(size,size,-size),         this.make3DPoint(size,size,size),         this.make3DPoint(-size,size,size),         this.make3DPoint(0,size,-size),         this.make3DPoint(size,size,0),         this.make3DPoint(0,size,size),         this.make3DPoint(-size,size,0),         this.make3DPoint(0,-size,-size),         this.make3DPoint(size,-size,0),         this.make3DPoint(0,-size,size),         this.make3DPoint(-size,-size,0),         this.make3DPoint(-size,0,-size),         this.make3DPoint(size,0,-size),         this.make3DPoint(size,0,size),         this.make3DPoint(-size,0,size)     ];     }; Cube.prototype = new DisplayObject3D();

index.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

<html>     <head>         <title>Untitled Page</title>         <style type="text/css" media="screen">             #item{                 width:100px;                 height:100px;                 margin:0 auto;                 top:300px;                 position: relative;             }             ul{                 list-style-type: none;             }             body{                 background-color: #111;                 color: #69c;                 font-family: Arial, "MS Trebuchet", sans-serif;                 font-weight: bold;                 font-size:2em;             }         </style>     </head>     <body>         <div id="item">             <ul>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>                 <li>&#x263A;</li>             </ul>         </div>     </body>         <script type="text/javascript" src="jquery-1.3.2.min.js"></script>     <script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>     <script src="Cube.js" type="text/javascript" charset="utf-8"></script>     <script type="text/javascript">         //<![CDATA[                 $(document).ready(function() {             var camera = new Camera3D();             camera.init(0,0,0,300);                         var item = new Object3D($("#item"));                         item.addChild(new Cube(100));                         var scene = new Scene3D();             scene.addToScene(item);                 var animateIt = function(){                 axisRotation.y += .01                 axisRotation.x -= .01                 scene.renderCamera(camera);             };                                     setInterval(animateIt, 20);                                     });         //]]>     </script> </html>

 

Download Example

 

Related

3D Plane

Wobbling Carousel

3D Sphere

]]> http://www.devirtuoso.com/2009/09/making-a-3d-engine-in-jquery/feed/ 8 http://www.devirtuoso.com/2009/09/object-oriented-programming-with-javascript/ http://www.devirtuoso.com/2009/09/object-oriented-programming-with-javascript/#comments Tue, 08 Sep 2009 05:53:39 +0000 Shawn http://www.devirtuoso.com/?p=1064 For all those that use Object Oriented Programming know the benefits.  The ability to write reusable code is a real time saver in the long run.  This post will cover how to write the basic structure of Object Oriented Programming in JavaScript.

 

The Basics

For those of you that don’t know what Object Oriented Programming (oop) is, it’s simply a way of writing code that allows you to reuse the same code in several other projects.  Everything is encapsulated into nice little packages.  This post won’t go over the actual theory of OOP, but I would definitely recommend looking into it.  I’m sure if you Googled it, thousands of entries would come up.

 

The Ways

There are a couple of ways to handle creating a class in JavaScript.

• Placing everything inside a function
• Placing everything inside an object
• Using prototype to build a class

Placing Everything Inside a Function

In my opinion this is probably the easiest to read out of all of them.  However it isn’t the most efficient from a processor point of view. 

Say were going to build a Dog class.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function Dog () {     this.name = "";     this.position = 0;     this.bark = function (){         alert("wuff");     };     this.walk = function(){         this.position += 1;         alert("position = "+this.position);     }     this.getName = function (){         return this.name;     } } var dog = new Dog(); dog.name = "Ralph"; dog.bark(); //Popup box with "wuff" dog.walk(); //Position increases by 1; alert(dog.getName()); //Outputs dog's name*/

Class methods are simply variables assigned to functions, and public variables simply use “this” infront of their names. If you wish to make a private variable, you would just create a regular variable
using “var” (e.g. var test = 1;)

 

Placing Everything Inside an Object

This is handy if you don’t want to instantiate the class every time you want to use it.  The downside is that it makes inheritance a little more difficult.

Here is the same Dog class but using an Object.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

var Dog = {     name    :   "",     position:   0,     bark    :   function(){ alert("wuff") },     walk    :   function(){         this.position += 1;         alert("position = "+this.position);     },     getName :   function(){         return this.name     } } Dog.name = "Ralph"; Dog.bark(); //Popup box with "wuff" Dog.walk(); //Position increases by 1; alert(Dog.getName()); //Outputs dog's name

This method uses JavaScript Object Notation (JSON) to layout the class. Keys go on the left, and values go on the right. Once again methods are simply functions assigned to variables.

 

Using prototype to Build a Class

This is probably the preferred method of OOP in JavaScript.  It’s a little harder to read, but say if we were to create thousands of dog objects, this would out perform the other methods.  Using prototypes it doesn’t store the functions within the class. This means you aren’t creating thousands of functions, you’re only create one function that is pointed to a thousand times.  Plus it’s easier to deal with inheritance.

Here is the Dog class yet again.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function Dog (){} Dog.prototype.name = ""; Dog.prototype.position = 0; Dog.prototype.bark = function (){     alert("wuff"); } Dog.prototype.walk = function (){     this.position += 1;     alert("position = "+this.position); } Dog.prototype.getName = function(){     return this.name; } var dog = new Dog(); dog.name = "Ralph"; dog.bark(); //Popup box with "wuff" dog.walk(); //Position increases by 1; alert(dog.getName()); //Outputs dog's name

What the prototype keyword is doing here is creating a framework. So when the class is instanciated it will have all the methods and properties that it needs.

 

Here is a Puppy class to show how inheritance is done.  It inherits all the methods of the Dog class, but overwrites the bark method for a more puppy like bark.

1 2 3 4 5 6 7 8 9 10 11 12 13

function Puppy (){} Puppy.prototype = new Dog(); Puppy.prototype.bark = function (){     alert("Yelp"); } var puppy = new Puppy(); puppy.name = "Ralph"; puppy.bark(); //Popup box with "Yelp" puppy.walk(); //Position increases by 1; alert(puppy.getName()); //Outputs puppy's name

 

Conclusion

This is by no means a complete tutorial of everything OOP.  This shows the basic structures of how JavaScript can handle OOP.  Out of the three that were outlined, it is probably best to stick with the prototype method. If there are any Actionscript 2 people out there, you’ll feel right at home with this method.

 

]]> http://www.devirtuoso.com/2009/09/object-oriented-programming-with-javascript/feed/ 3 http://www.devirtuoso.com/2009/09/beginners-guide-to-jquery-sorting-part-2/ http://www.devirtuoso.com/2009/09/beginners-guide-to-jquery-sorting-part-2/#comments Thu, 03 Sep 2009 21:56:03 +0000 Shawn http://www.devirtuoso.com/?p=1040 In the last tutorial we covered how to reorder a list by dragging and dropping.  In this tutorial we will show how to save the order of the list via Ajax.

Where We Left Off

We should be at a point where we now know how to reorder a list.  If you haven’t read the previous tutorial or aren’t certain on how to reorder lists in jQuery, I encourage you to check out Beginners Guide to jQuery Sorting part 1.

Here is the code from the previous post:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head>     <title>jQuery UI Sortable - Drop placeholder</title>               <style type="text/css">         body{             background-color: #111;             color:white;             font-family: Arial, "MS Trebuchet", sans-serif;         }         #sortable {             list-style-type: none;             margin: 0;             padding: 0;             width:300px                     }         #sortable li {             margin: 0 5px 5px 5px;             padding: 5px 20px;             font-size: 1.2em;             height: 1.5em;             background-color: #678;             cursor:pointer;                     }         #sortable li.highlight {             height: 1.5em;             line-height: 1.2em;             background-color: #036;             background-image: none;             border:none;         }     </style>         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>     <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>     <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>     <script type="text/javascript">     $(function() {         $("#sortable").sortable({             placeholder: 'highlight'         });         $("#sortable").disableSelection();     });     </script> </head> <body> <ul id="sortable">     <li>Item 1</li>     <li>Item 2</li>     <li>Item 3</li>     <li>Item 4</li>     <li>Item 5</li>     <li>Item 6</li>     <li>Item 7</li> </ul> </body> </html>

 

What We’re Building

This time around we’re just going to take the current order of the list and save it to the database for future use.

Download Example



 

Reworking the List

Previously we had a simple HTML un-ordered list.  This time we’re going to make it a little more complicated, with good reason of course.  In order to view the updates we make to the database, we first have to have a list  pulling from the database.  For this we will be using PHP and MySQL.

First we’re going to create a file called db.php.  In this file we’re going to do two things.  First connect to the database, and second select all the items from the database and create a list from them.  I’m not going to go into too much detail with the connection info.  If you want a little refresher, we went into more depth in our Beginners Guide to Using Ajax with jQuery post.

Here is the PHP code for connecting to the database:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<?php //Connection Info $username="root"; $password=""; $host="localhost"; $database = "DragDrop"; //Connect to database $mysqli =  new mysqli($host, $username, $password, $database); // check connection if (mysqli_connect_errno()) {     printf("Connect failed: %s\n", mysqli_connect_error());     exit(); } ?>

 

I guess at this point it might be helpful to see what the database looks like.  We have 3 columns:

•  itemID (unique identifier),
• content (the text inside our list)
• Order (keep track of the order)



 

 

Now we’ll create a function that selects all the items from the database and outputs an un-ordered list.

Here is the PHP:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

//Display a list of all entries function displayAll (){     global $mysqli;         //Get all Entries     if ($result = $mysqli->query("SELECT * FROM `Items` ORDER BY `Order` ASC")) {                         //start list             $returnValue = "<ul id='sortable'>";                         while ($row = $result->fetch_array())             {                 //add a new list item each iteration                 $returnValue .= "<li id='item_".htmlentities($row['itemID'])."'>".htmlentities($row['content'])."</li>";             }             //close list             $returnValue .= "<ul>";                         //display list             echo $returnValue;             /* free result set */         $result->close();     } }

 

First we query the database with the mysqli object we created when we connected to the database.  If it returns results without errors then we can go ahead with making our list. 

Making the list isn’t too hard, we’re simply creating a variable that holds our list.  We then cycle through all of the items returned from the database and add it to the end of our variable.  After we have all the info in our variable, we display it for the world to see.  One special note, you’ll see that we are giving each <li> an id.  We’re going to use this when we get to the Ajax portion of the tutorial.  For now just know that the id is required.

 



 

The New HTML

Now that we have our db.php file ready to go, we can now make use of it in our main file.

First off we’re going to import the file to use it.  At the very top we’ll just put:

1	<?php require("db.php"); ?>

 

Now we can use the function displayAll() that we just created.  We’ll be replacing the un-ordered list with this function.  When the page is processed, the function will pull the data from the database and output a brand spankin’ new list.  Pretty sweet huh.

1 2 3 4 5 6 7 8 9 10

<body> <?php //Displays the list. displayAll(); ?> </body>

 

The jQuery

The jQuery changed a bit.  We’re adding a new update parameter to the sortable function.  This will be called whenever the order has been changed.

In the update function we’ll be doing 3 things.

• Prepping the info to be sent via Ajax
• Send the info via Ajax
• Display the new updated list

Here is the jQuery:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$(function() {     $("#sortable").sortable({         placeholder: 'highlight',                 //NEW----Called when order is changed         update: function() {                         //Prep the list order for transfer             var listOrder = $(this).sortable("serialize");                         //send info to our php file.             $.post("update.php", listOrder, function(response){                                 //update the list with the new list.                 $("sortable").html(response);             });         }     });         $("#sortable").disableSelection(); });

 



 

Prepping the Info

First thing we tackle is prepping the info by serializing it.  This just means that we’re taking the order of the list and preparing them in a way that they can be attached to a url.(e.g. www.domain.com?serialized=data )  For this serialize function to work we have to create ids for our list items in a particular way.  If I want an array called “item”  then I would give my li tags an id of item_1, item_2, item_3, etc. The serialize function will take the text before the underscore as the array name, and the number after as it’s value.  So a list with ids of item_1, item_2 would be serialized to item[]=1&item[]=2 .   When we created the function displayAll() we took this into consideration, and put the items ID value from the database after the underscore so we can reference it later.

 

Send Info

Next comes the Ajax.  We’re going to use the post function.  We simply have to give it a url, any data we want to send to the url and the function we want to call when we receive something back from the url.

 

Display New List

The function that handles the response simply just switches out the list’s HTML with the new HTML.

 

Updating the Database

The first thing we’re going to do is create a file called update.php.  This is the file that will be called by the Ajax.  In this file a couple of things are going to happen.

• Get the array sent in by the Ajax
• Cycle through each item in the array
• Update the database with the new value
• Display a new list

Here is the PHP:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<?php //Get the Array from Ajax //Make sure it is an array. if (is_array($_POST['item'])){     $items = $_POST['item']; }else{     $items = ""; } if ($items != ""){     //Connect to database. require 'db.php';         //Cycle through Array.     for ($i=0; $i < count($items); $i++) {             //Make sure the value of the item is numeric.         if (is_numeric($items[$i])){             $id = $items[$i];         }else{             die("Invalid ID");         }                         //Set the database order to match the order of the array.         $query = "UPDATE `Items` SET `Order` = " . $i . " WHERE `itemID` = " . $items[$i];                 $mysqli->query($query) or die('Error, insert query failed');                             }         /* Display a new list */     if ($result = $mysqli->query("SELECT * FROM `Items` ORDER BY `Order` ASC")) {                         $returnValue = "";             while ($row = $result->fetch_array())             {                 $returnValue .= "<li id='item_".htmlentities($row['itemID'])."'>".htmlentities($row['content'])."</li>";             }                         echo $returnValue;             /* free result set */         $result->close();     }     } ?>

 

Get the Array from Ajax

Since we used the post method in our jQuery, PHP’s $_POST variable will be populated by what we pasted in.  In our case it was the item array. It’s always good practice to make sure you’ll be receiving what you’re expecting.  In this case we’re expecting an array, so we check and make sure it is an array.

 

Cycle through the Array

After we’re sure we have an array on our hands, we cycle through each element in the array.  For each element we’re going to check and make sure the value is a number.  If we didn’t malicious users could pass in some harmful stuff.

 

Update the Database

After we have verified that array’s value is a number, we then pass it into our SQL statement.  The array is ordered in the same manner as the list was.  So the first item in the array is also the first item in the list.  The SQL will  then set the Order of the item to where it is in the array.

 

Display a New List

The code for this is pretty well the same as displayAll().  The only difference is that we’re leaving the <ul></ul> off, as these will already be in place, and we’re just replacing the innards.

 

That’s IT

That’s pretty well it.  Now we have our initial code that display’s our list.  Then our jQuery that passes on the order of the list via AJAX.  Then our update PHP file that checks to make sure the values are good, and passes them to the database.  After all that it passes the new list back to the jQuery to display.  Voila!

db.php :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<?php //Connection Info $username="root"; $password=""; $host="localhost"; $database = "DragDrop"; //Connect to database $mysqli =  new mysqli($host, $username, $password, $database); // check connection if (mysqli_connect_errno()) {     printf("Connect failed: %s\n", mysqli_connect_error());     exit(); } //Display a list of all entries function displayAll (){     global $mysqli;         //Get all Entries     if ($result = $mysqli->query("SELECT * FROM `Items` ORDER BY `Order` ASC")) {                         //start list             $returnValue = "<ul id='sortable'>";                         while ($row = $result->fetch_array())             {                 //add a new list item each iteration                 $returnValue .= "<li id='item_".htmlentities($row['itemID'])."'>".htmlentities($row['content'])."</li>";             }             //close list             $returnValue .= "<ul>";                         //display list             echo $returnValue;             /* free result set */         $result->close();     } } ?>

 

Here is the HTML / jQuery / PHP:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

<?php require("db.php"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head>     <title>jQuery UI Sortable - Drop placeholder</title>     <style type="text/css">         body{             background-color: #111;             color:white;             font-family: Arial, "MS Trebuchet", sans-serif;         }         #sortable {             list-style-type: none;             margin: 0;             padding: 0;             width:300px                     }         #sortable li {             margin: 0 5px 5px 5px;             padding: 5px 20px;             font-size: 1.2em;             height: 1.5em;             background-color: #678;             cursor:pointer;                     }         #sortable li.highlight {             height: 1.5em;             line-height: 1.2em;             background-color: #036;             background-image: none;             border:none;         }     </style>         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>     <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>     <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>     <script type="text/javascript">     $(function() {         $("#sortable").sortable({             placeholder: 'highlight',                         //NEW----Called when order is changed             update: function() {                                 //Prep the list order for transfer                 var listOrder = $(this).sortable("serialize");                                 //send info to our php file.                 $.post("update.php", listOrder, function(response){                                         //update the list with the new list.                     $("sortable").html(response);                 });             }         });         $("#sortable").disableSelection();     });     </script> </head> <body> <?php //Displays the list. displayAll(); ?> </body> </html>

 

update.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<?php //Get the Array from Ajax //Make sure it is an array. if (is_array($_POST['item'])){     $items = $_POST['item']; }else{     $items = ""; } if ($items != ""){     //Connect to database. require 'db.php';         //Cycle through Array.     for ($i=0; $i < count($items); $i++) {             //Make sure the value of the item is numeric.         if (is_numeric($items[$i])){             $id = $items[$i];         }else{             die("Invalid ID");         }                         //Set the database order to match the order of the array.         $query = "UPDATE `Items` SET `Order` = " . $i . " WHERE `itemID` = " . $items[$i];                 $mysqli->query($query) or die('Error, insert query failed');                             }         /* Display a new list */     if ($result = $mysqli->query("SELECT * FROM `Items` ORDER BY `Order` ASC")) {                         $returnValue = "";             while ($row = $result->fetch_array())             {                 $returnValue .= "<li id='item_".htmlentities($row['itemID'])."'>".htmlentities($row['content'])."</li>";             }                         echo $returnValue;             /* free result set */         $result->close();     }     } ?>

 

Download Example
]]> http://www.devirtuoso.com/2009/09/beginners-guide-to-jquery-sorting-part-2/feed/ 3 http://www.devirtuoso.com/2009/09/beginners-guide-to-jquery-sorting/ http://www.devirtuoso.com/2009/09/beginners-guide-to-jquery-sorting/#comments Tue, 01 Sep 2009 23:05:42 +0000 Shawn http://www.devirtuoso.com/?p=1029 Beginners might often steer away from trying to reorder lists by dragging and dropping.  The thought of doing something like that sounds daunting.  Luckily jQuery has made it relatively simple. Here is a tutorial on how to make a list sortable.

What We’re Building

Quite simply, we’re trying to give the user the ability to sort a list by dragging and dropping items into place.  We’re also going to give a nice place holder to help guide the user.

Download Example



 

Building the HTML

Fortunately the HTML is pretty simple.  All you will need is a simple un-ordered list, with some items in it.

HTML:

1 2 3 4 5 6 7 8 9

<ul id="sortable">     <li>Item 1</li>     <li>Item 2</li>     <li>Item 3</li>     <li>Item 4</li>     <li>Item 5</li>     <li>Item 6</li>     <li>Item 7</li> </ul>

 

The CSS

The CSS is solely for appearances.  You don’t have to use what I used here, feel free to experiment with different styles.  The only class that needs any sort of explanation is the highlight class.  This class is for the placeholder for when the user starts dragging. So more than likely you’ll want to make this subdue, it’s just suppose to be a hint of where to drag the box.

CSS:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

/*Styling the body*/ body{     background-color: #111;     color:white;     font-family: Arial, "MS Trebuchet", sans-serif; } /* Get rid of bullets and list indent,    also adjust the width to what we want*/ #sortable {     list-style-type: none;     margin: 0;     padding: 0;     width:300px     } /* Styling each of the list elements*/ #sortable li {     margin: 0 5px 5px 5px;     padding: 5px 20px;     font-size: 1.2em;     height: 1.5em;     background-color: #678;     cursor:pointer;     } /* Styling the placeholder for when    the user starts dragging an item */ #sortable li.highlight {     height: 1.5em;     line-height: 1.2em;     background-color: #036;     background-image: none;     border:none; }

 

 

The jQuery

We’ll be using a library from the jQuery UI.  This does all the complicated code so you don’t have to.  You’re going to have to import 3 files

1. jQuery : http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
2. jQuery UI Core file : http://jqueryui.com/latest/ui/ui.core.js
3. jQuery UI Sortable file : http://jqueryui.com/latest/ui/ui.sortable.js

Once we have these imported then we’re good to go.  The jQuery that we’ll have to write isn’t overly complicated.

jQuery:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//When everything is loaded... $(document).ready(function() {         //makes the list with the id "sortable" sortable.             //the placehoder option is not necessary.     //the highlight is the CSS class applied     //to the placeholder.         $("#sortable").sortable({         placeholder: 'highlight'     });         //prevents the list from being selectable.      $("#sortable").disableSelection(); });

 

 

Conclusion

Now that you realize how easy it is to create a sortable list, use and abuse it.  Keep an eye out for part two of this tutorial where I will show how to interact with the database via AJAX.

Here is the code all together:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head>     <title>jQuery UI Sortable - Drop placeholder</title>               <style type="text/css">         body{             background-color: #111;             color:white;             font-family: Arial, "MS Trebuchet", sans-serif;         }         #sortable {             list-style-type: none;             margin: 0;             padding: 0;             width:300px                     }         #sortable li {             margin: 0 5px 5px 5px;             padding: 5px 20px;             font-size: 1.2em;             height: 1.5em;             background-color: #678;             cursor:pointer;                     }         #sortable li.highlight {             height: 1.5em;             line-height: 1.2em;             background-color: #036;             background-image: none;             border:none;         }     </style>         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>     <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>     <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>     <script type="text/javascript">     $(function() {         $("#sortable").sortable({             placeholder: 'highlight'         });         $("#sortable").disableSelection();     });     </script> </head> <body> <ul id="sortable">     <li>Item 1</li>     <li>Item 2</li>     <li>Item 3</li>     <li>Item 4</li>     <li>Item 5</li>     <li>Item 6</li>     <li>Item 7</li> </ul> </body> </html>

 

Download Example

 

]]> http://www.devirtuoso.com/2009/09/beginners-guide-to-jquery-sorting/feed/ 2 http://www.devirtuoso.com/2009/08/beginners-guide-to-jquery-mouse-events/ http://www.devirtuoso.com/2009/08/beginners-guide-to-jquery-mouse-events/#comments Sun, 23 Aug 2009 04:56:51 +0000 Shawn http://www.devirtuoso.com/?p=933 If you’re just starting out in jQuery, one of the most important things is to learn to make things interactive.  This tutorial will show the basics of working with the mouse in jQuery.

What We Will Be Making

To keep things simple, we’re going to make a tooltip that pops up when you roll over a link.  Also we’re going to make it so when a user clicks on the link, it displays a click message within the tooltip box.

Download Example



 

HTML

For us to make a tooltip we’re going to have some links to work with, and a container for our tooltip.  There is nothing too special here.  I placed the links in a header tag just to make the links a bit easier to see.

Here is the HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>     <head>         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />         <title>Mouse Events</title>     </head>     <body>         <!-- Center Links-->         <div id="wrapper">                         <!-- Links -->             <h1 id="link">                 <a href="#">Empty Link</a><br /><br />                  <a href="http://www.google.com">Link to Google</a>             </h1>                         <!-- Tooltip Container-->             <span id="toolTip"></span>         </div>     </body> </html>

 

CSS

The only thing that we really need to do here is make sure the tooltip is initially hidden, and give the tooltip a position of absolute so it can freely move around the page.  All of the other CSS is purely for aesthetics.

Here is the CSS:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

/* Make everything Beautiful */ body{     background-color: #111;     color: #ddd;     font-family: Arial, "MS Trebuchet", sans-serif; } a{     color:#777; } /* Center Links */ #wrapper{     width:600px;     margin:0 auto;     padding-top:100px;     text-align: center; } /* Make sure tooltip is initially hidden,    and can move around freely */ #toolTip{     padding:5px;     background-color: #577FAF;     display:none;     position:absolute; }

 

How Events Work

If you’ve never used events before you might be wondering how they work.  They really aren’t that difficult.  If you think of them like events in real life they’re a little easier to understand.  For example, you set your alarm clock to go off at 6am.  This is an event, it’s going to let you know when this event happens.  Then it’s your choice to do what ever you want at that time…hit the snooze button or throw the alarm clock across the room.



In terms of jQuery, we might set up an event for when a mouse button is clicked.  jQuery will then run the function we assign to that event auto magically.  This function is generally referred to as the event Handler.

In jQuery there are a couple of ways to create an mouse event.

• $(‘#selector’).eventName( [function to call])
• $(‘#selector’).bind(“eventName”, [function to call]);

Where [function to call] is the function that will be called when the event is triggered, and  eventName is  the event you want to call (“click” or “mousemove”).  You can see a complete list of events in jQuery’s Documentation.



 

Building the Tooltip

The first thing we’re going to handle is having the tooltip display whenever your mouse is moved over top of a link.  For this we’ll be using the event “mousemove” .

The event handler for the mouse event can be passed an argument.  This argument will hold an event object that holds a bunch of information that you can use.  Each event might have slightly different information in their object.  For example, the mousemove event has a pageX value and a pageY value.  These values tell the event handler what the mouse x and y co-ordinates are.  We’re going to use these co-ordinates to move our tooltip container to where the mouse is.

Here is the jQuery:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

/*Once everything is loaded */ $(document).ready(function() {         /* Offset for the tool tip so it does not sit right on the cursor */                var offsetX = +40;     var offsetY = -20;         /*When the mouse is moved trigger the event */     $('a').mousemove(function(event) {                 /*Put page coordinates in the tooltip*/         $('#toolTip').html("Page Co-ordinates: "+ event.pageX+' , '+event.pageY);                 /*Move the tool tip to where the mouse is. */         $('#toolTip').css({top:event.pageY + offsetY+ "px", left: event.pageX + offsetX +"px"})                 /* Display the tooltip */         $('#toolTip').show("fast");     });     });

 

On the mousemove event we simply add text to the tooltip container, adjusted the top and left CSS properties of the tooltip container, then displayed it for the world to see.  You might have noticed an offset.  This is so the tool tip doesn’t sit directly on top of the mouse cursor.

At this point when we roll off of the link, the tooltip is still displaying.  Lets add an event for when the mouse rolls off of a link.

jQuery:

1 2 3 4

/* When the mouse is off the link hide the tooltip */ $('a').mouseout(function(){     $('#toolTip').hide("fast"); });

 

We didn’t need the event object this time, simply because we didn’t need any information that it offers.  All we did was hide the tooltip when the mouseout event is triggered.

 

Click Event

Now we’re going to tackle the click event.  The idea behind this is we’re going to give each link an index.  When the user clicks on each link it will display the index.  Since they’re links, the default action is to take you somewhere else.  We’re going to have to prevent this from happening, then do what we need to.

jQuery:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/* Step through each link*/ $("a").each(function(i) {      /* i contains a count - 1st link = 0, 2nd link = 1, etc.*/            /*Bind click event, {index:i} can be retrieved by event object inside event handler */     $(this).bind("click",{index:i},function(event){                 /* Prevents the link from taking us off the page. */         event.preventDefault();                 /* event.data retrieves any parameters passed into the bind method.            in this case the index. */         $('#toolTip').html("You Click link # "+event.data.index);     }); });

 

The each function gives us an id for each link.  You’ll noticed we used the bind function this time.  This is so we can pass an object in the argument e.g. {index:i} .  This argument can then be accessed via the event object.  So why go all the trouble of using an event object?  Can’t you just use the i variable from the each function?  In short you can’t use the i, because the i variable isn’t attached to each link.  If you did use it, it would display the current value of i, which would be the last links index., even if you clicked on the first link.

You might have noticed a function that the event object had called preventDefault().  This just prevents the default action of link so we can do what we need to and not be taken elsewhere.

 

Conclusion

That’s it for now.  There are quite a few events out there that you can play with.  I recommend going to jQuery’s website and check them out.  It might also be a good idea to check out all the methods and properties of the event object.  I just scratched the surface with this tutorial, there is a lot more out there that can make you life easier, and your websites cooler.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Mouse Events</title> <style type="text/css" media="screen">     body{         background-color: #111;         color: #ddd;         font-family: Arial, "MS Trebuchet", sans-serif;     }     a{         color:#777;     }     #wrapper{         width:600px;         margin:0 auto;         padding-top:100px;         text-align: center;     }     #toolTip{         padding:5px;         background-color: #577FAF;         display:none;         position:absolute;     } </style> </head> <body>     <div id="wrapper"> <h1 id="link">     <a href="#">Empty Link</a><br /><br />      <a href="http://www.google.com">Link to Google</a> </h1> <span id="toolTip"></span> </div> </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() {         var offsetX = +40;     var offsetY = -20;         $('a').mousemove(function(event) {                 $('#toolTip').html("Page Co-ordinates: "+ event.pageX+' , '+event.pageY);         $('#toolTip').css({top:event.pageY + offsetY+ "px", left: event.pageX + offsetX +"px"})         $('#toolTip').show("fast");     });         $('a').mouseout(function(){         $('#toolTip').hide("fast");     });     $("a").each(function(i) {             $(this).bind("click",{index:i},function(event){             event.preventDefault();             $('#toolTip').html("You Click link # "+event.data.index);         });     });     }); </script> </html>

 

Download Example

 

]]> http://www.devirtuoso.com/2009/08/beginners-guide-to-jquery-mouse-events/feed/ 4 http://www.devirtuoso.com/2009/08/3d-flying-text-in-jquery/ http://www.devirtuoso.com/2009/08/3d-flying-text-in-jquery/#comments Wed, 19 Aug 2009 10:01:07 +0000 Shawn http://www.devirtuoso.com/?p=917 It’s just a matter of time before some creates a jQuery plug-in much like Papervision for Flash.  Until then the 3D experiments in jQuery continue.  Here is a tutorial that will show you how to make 3D flying text in jQuery.

What We Will Be Building

Here’s the plan. Build a jQuery component that takes the text from a <ul> and make it fly towards the screen at random intervals.  The affect will look something like traveling through space, or a title sequence for some cheesy space flick.

 

Download Example



 

Getting Started

The first thing we’re going to need is some text to animate.  We’re going to use a <ul> that has the alphabet in it, we might run the risk of the component looking like a scene from sesame street, but I think we’ll be okay this time.  The html is pretty basic so I won’t go into to much detail. 

Here is the HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>     <head>         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />         <title>3D Flying Text</title>     </head>     <body>         <ul>             <li><a href="#">A</a></li>             <li><a href="#">B</a></li>             <li><a href="#">C</a></li>             <li><a href="#">D</a></li>             <li><a href="#">E</a></li>             <li><a href="#">F</a></li>             <li><a href="#">G</a></li>             <li><a href="#">H</a></li>             <li><a href="#">I</a></li>             <li><a href="#">J</a></li>             <li><a href="#">K</a></li>             <li><a href="#">L</a></li>             <li><a href="#">M</a></li>             <li><a href="#">N</a></li>             <li><a href="#">O</a></li>             <li><a href="#">P</a></li>             <li><a href="#">Q</a></li>             <li><a href="#">R</a></li>             <li><a href="#">S</a></li>             <li><a href="#">T</a></li>             <li><a href="#">U</a></li>             <li><a href="#">V</a></li>             <li><a href="#">W</a></li>             <li><a href="#">X</a></li>             <li><a href="#">Y</a></li>             <li><a href="#">Z</a></li>         </ul>     </body>     <!-- Load jQuery -->     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script> </html>

 

The jQuery

There isn’t much to this one.  We’re basically going to step through each item in the list, check to see if it’s still on the screen, if it is, move it down and enlarge the text.  Through the magic of perspective it looks like the letters are coming right towards us.

Here is the jQuery:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

//Setup Arrays that will hold the x,y,z of each element. var x = new Array(); var y = new Array(); var z = new Array(); //Get the list of items. var items = $('li'); //Animate the items. function animate() {         //Step through each item.     for(i = items.length - 1; i >= 0; i--){                         //variables for movement.                   var xVar = 50 + x[i]            // x value         var yVar = 50 + y[i] * z[i]++;  // y value, move towards bottom of screen         var zVar = 10 * z[i]++;         // z value, text get larger.                         //Check to see if text position is still on the screen.         // the #'s are %.   100 is far right or bottom, 0 is top or left.         // for z value it's the font size in %.         if (!xVar | xVar < 0 | xVar > 90|             yVar < 0 | yVar > 90 |             zVar < 0 | zVar > 1500)         {             //if it's off the screen randomly pick a starting place.             x[i]= Math.random() * 2 - 1;             y[i] = Math.random() * 2 - 1;             z[i] = 2;                     }         else         {             //if it's still on the screen apply the appropiate styles.                         $(items[i]).css("position", "absolute"); // make sure we can move the text around.             $(items[i]).css("top", xVar+"%");  // y value             $(items[i]).css("left", yVar+"%"); // x value                         $(items[i]).css("fontSize", zVar+"%"); // font size (illusion of perspective.)             $(items[i]).css("opacity",(zVar)/3000); // fade in from the distance.         }     }     setTimeout(animate, 9); } animate();

 

Just a couple of notes on speed.  I initially tried using jQuery’s each() function but found a dramatic slowdown in comparison to the for loop.  The each() method is great to work with, but if speed is an issue don’t bother using it.  Also just another small thing, in the for loop I decremented each value (i—) instead of incrementing.  This is also another speed boost that some people might not know about.  It’s easier for your computer to process a for loop counting down then up.  In this case there might not be a huge speed difference, but it is something to consider.

 

That’s all Folks

That’s all there is to it.  You can add some CSS to style things to make it pretty, but that isn’t necessary.

Here is all the code together:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head>     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />     <title>3D Flying Text</title>     <style type="text/css" media="screen">         body{             background:#000;             margin:0;             overflow:hidden;             padding:0;         }         li{             color:#fff;             font:bold 13px Arial,sans-serif;             list-style: none;         }         a{             text-decoration:none;         }         </style> </head> <body>     <ul>         <li><a href="#">A</a></li>         <li><a href="#">B</a></li>         <li><a href="#">C</a></li>         <li><a href="#">D</a></li>         <li><a href="#">E</a></li>         <li><a href="#">F</a></li>         <li><a href="#">G</a></li>         <li><a href="#">H</a></li>         <li><a href="#">I</a></li>         <li><a href="#">J</a></li>         <li><a href="#">K</a></li>         <li><a href="#">L</a></li>         <li><a href="#">M</a></li>         <li><a href="#">N</a></li>         <li><a href="#">O</a></li>         <li><a href="#">P</a></li>         <li><a href="#">Q</a></li>         <li><a href="#">R</a></li>         <li><a href="#">S</a></li>         <li><a href="#">T</a></li>         <li><a href="#">U</a></li>         <li><a href="#">V</a></li>         <li><a href="#">W</a></li>         <li><a href="#">X</a></li>         <li><a href="#">Y</a></li>         <li><a href="#">Z</a></li>     </ul>     </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //Setup Arrays that will hold the x,y,z of each element. var x = new Array(); var y = new Array(); var z = new Array(); //Get the list of items. var items = $('li'); //Animate the items. function animate() {         //Step through each item.     for(i = items.length - 1; i >= 0; i--){                         //variables for movement.                   var xVar = 50 + x[i]            // x value         var yVar = 50 + y[i] * z[i]++;  // y value, move towards bottom of screen         var zVar = 10 * z[i]++;         // z value, text get larger.                         //Check to see if text position is still on the screen.         // the #'s are %.   100 is far right or bottom, 0 is top or left.         // for z value it's the font size in %.         if (!xVar | xVar < 0 | xVar > 90|             yVar < 0 | yVar > 90 |             zVar < 0 | zVar > 1500)         {             //if it's off the screen randomly pick a starting place.             x[i]= Math.random() * 2 - 1;             y[i] = Math.random() * 2 - 1;             z[i] = 2;                     }         else         {             //if it's still on the screen apply the appropiate styles.                         $(items[i]).css("position", "absolute"); // make sure we can move the text around.             $(items[i]).css("top", xVar+"%");  // y value             $(items[i]).css("left", yVar+"%"); // x value                         $(items[i]).css("fontSize", zVar+"%"); // font size (illusion of perspective.)             $(items[i]).css("opacity",(zVar)/3000); // fade in from the distance.         }     }     setTimeout(animate, 9); } animate(); </script> </html>

 

Download Example

 

]]> http://www.devirtuoso.com/2009/08/3d-flying-text-in-jquery/feed/ 5