WebMuch » jQuery

Image Flip Using jQuery

Aayush — Wed, 17 Jun 2009 00:11:42 +0000

Alright, first of all this is not a real image flip but sort of an illusion, the image does not flip itself in 3D since jQuery does not provide us with an image rotation or a distort feature for HTML elements. I know their are some image rotation plug-ins out their but they don’t work out very well with animate method of jQuery.

Preview:

Note: Image flip with reflection is for demo purposes only, it’s done using the PHP GD Library and it’s source files are also included in the source code, so meddle with them if you like.

DEMO-1 | DEMO-2

HTML Code:





Image Flip Illusion Using jQuery





	Image Flip Illusion Using jQuery

CSS Code:

body{
	background-color:#000;
}
h1{
	color:#FFFFFF;
	font-family:Arial;
	font-size:24px;
	font-weight:bold;
}
#container{
	width:400px;
	margin:0px auto;
	height:380px;
	margin-top:50px}
#image1{
	position:absolute;
	cursor:pointer;
	width:300px;
	height:190px;
}
#image2{
	display:none;
	position:absolute;
	cursor:pointer;
}

As you can see in the above code, I’ve placed the two images in a division and given them absolute positioning to assign their positions in the division.

To achieve the Horizontal flip we are basically reducing the width of the first image to 0 pixels, increasing the left side margin from zero to half it’s width and as soon as we finish that, Increase the width of the second image from zero to it’s actual width and do the opposite for left side margin what we did for the first image i.e reduce it from half the width of the image to zero.

This process takes place when you click on the first image (#image1) and the same process also takes place when you click on second image (#image2) except for the obvious shuffle in their ids.

Just look at the jQuery code below and you will have a better idea of what’s happening:

jQuery:

$(document).ready(function(){
var margin =$("#image1").width()/2;
var width=$("#image1").width();
var height=$("#image1").height();

$("#image2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#reflection2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px'});

	$("#image1").click(function(){
		$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
		window.setTimeout(function() {
		$("#image2").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
		},500);
	});

	$("#image2").click(function(){
		$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
		window.setTimeout(function() {
		$("#image1").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
		},500);
	});

});

If you want to perform a Vertical flip the jQuery code for that too is included in the source code.

Feel free to leave comments if you appreciate the tutorial or if you have any queries. You can also criticize the work but don’t be rude.

You can always find some good tutorials and articles on the Resources page. You can always reach it using the menu up-top.

Thanks for Reading!

Download the Source Code

Animated Navigation Bar Using jQuery

Aayush — Thu, 04 Jun 2009 00:07:58 +0000

This is my first guest tutorial at WebMuch so please bear with me if I miss out on anything.

Preview:

DEMO!

I am assuming that the readers are well versed with CSS and HTML.

HTML Code:


    
       	
       		Home
                News
                Blog
                Pictures
                Videos
                Gallery
                About
                Contact

*NOTE: I do not encourage inline styling, I did it because It’s a sin I was willing to commit.

CSS Code:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body{
background-color:#1f1f1f;
}
.container{
	width:960px;
	margin:0px auto;
	color:#FFFFFF;
	font-family:Arial,sans-serif;
	font-size:20px;
	font-weight:bold;
}
#navbar1{
	float:left;
	width:960px;
	height:36px;
	font-size:14px;
	margin:20px 0 0 0;
	background:url(images/navbar_bg.png);
}
#navbar1 ul{
	float:left;
	width:585px;
	height:36px;
	margin-left:188px;
	color:#000000;
}
#navbar1 ul{
	background: url(images/anim_3.png) no-repeat;
	background-position:1px 4px;
}
#navbar1 ul li{
	float:left;
	width:72px;
	margin:3px 0 0 0;
	height:22px;
	display: inline;
	text-align:center;
	padding:7px 0 0 0;
	border-left:1px solid #1f1f1f;
	cursor:pointer;
}

*NOTE: This tutorial is only effective when using a predefined width for each button or list item as shown in the above image, this can also be implemented on navigation bars using dynamic widths, but you might have to change the jQuery and the image sprite quite a bit to achieve any kind of consistency in your design. Well to give you a basic explanation as to how we will animate the navigation bar from here on in, we will take a background image equal to the size of the list item, which, on mouse-over positions itself to the left of each respective list item. So, as you can see in my HTML code I have named(id) my unordered list as ‘sprite’ with a backround image. I have also named(id) my list items b0,b1,b2,b3….b7, depending on the number of list items you wish to have in your navigation bar. I’ll explain why we are doing this in a bit, after you read through the jQuery code.

jQuery Code:

$(document).ready(function(){
	var selected=0; // Default background position
	var position=0;

	$("#sprite").css({backgroundPosition:''+selected+'px 4px'});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseover(function(){
	position=$(this).attr("id").slice(1,2)*($(this).outerWidth());
	/*width of your list item*/
	$("#sprite").stop().animate({backgroundPosition:''+position+'px 4px'},{duration:200});
	});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseout(function(){
	$("#sprite").stop().animate({backgroundPosition:''+selected+'px 4px'},{duration:200});
	});
});

Step By Step Read Through:

In the first line, we define the default background position of the background image of #sprite (even though, we’ve already mentioned the default background position in the CSS file, we still have to declare the default background position in jQuery, because for some reason, Internet Explorer shows an error after repeated mouse-over states).
Now, on mouse-over of any of the list items, we simply calculate the background position of the image in the background of #sprite and using the animate method of jQuery we move it to its destined location. For example: On mouse-over of b0, in my case I moved it 0 * 73(width of my button) i.e. 0 pixels from the left of #sprite. On mouse-over of b1, I moved it 1 * 73 i.e. 73 pixels from the left of #sprite. On mouse-over of b2, I moved it 2 * 73 i.e. 146 pixels from the left of #sprite, so on and so forth. That is the very reason I named (id) my list items b0, b1, b2…, so that I can slice out the numerical values from it using slice(1,2).
Using the sliced numerical values we calculate the position of the background image, finally animate it and avoid a list of if else statements for each list item.
On mouse-out of any of the list items the background image comes back to its original position i.e. 0px (var selected;) from the left and 4px from the top.
Now, if you got any of the stuff I’ve explained there is one question popping in your head that do I have to manually give value to the variable “selected” for every page , well to avoid this you just have to edit the jQuery from the top to the one below.

Now we can easily name the class a0 or a1 or a2 or a4 of our list item (active list item) in our HTML to set the default background position of our background in #sprite and the script basically looks for the class with prefix “a” then slices out the next element i.e. 0 or 1 or 2 or 3, etc and multiplies it to the width of the element and gives it a default position from the left.

Feel free to leave comments if you appreciate the tutorial or if you have any problems implementing it.

Thanks for reading.

Download the Source Code

How & why you should use Google CDN

Aayush — Sat, 30 May 2009 14:47:37 +0000

What is Google’s CDN?

Google CDN stands for Google Content Distribution Network. It provides a loading architecture for the most popular, open source JavaScript libraries.

Why should I use Google’s CDN links?

Most of the websites I see, still host their JavaScript Library on their own server (Most, not all). Actually never have I ever seen any Web Development Blog hosting the library on their own server. They always use Google CDN, which is great because it has a number of advantages:

Google’s Content Distribution Network has libraries on their various servers across the world and if you use their CDN link, when a user’s browser resolves the URL, their browser will automatically download the file from the closest available server, which will be a much faster download than if you force a user to download the file from your host server in whichever country your website is hosted.
Google’s Content Distribution Network will save you a great deal of bandwidth if you have large traffic on your website and a limited bandwidth with your host.
There is a good chance that the Google hosted version of that library is already cached on the user’s browser cache, as lot of big websites and portals use Google’s CDN links including Google itself and Google’s servers instruct browsers to cache the file for one year if there are quite a few requests for the same hosted file.

How to use Google CDN?

Google’s CDN provides most of the popular, open source JavaScript Libraries with two ways of using each of them via the direct path in the

The Google AJAX Libraries API provides a simple and powerful google.load() method which accepts two arguments, the first argument to google.load is the name of a library. The second argument is the version of the library:

But to use this API, there is a different approach for the ready functions of all the libraries. For example, in the above code, we use google.setOnLoadCallback(function(){ }); instead of jQuery’s ready function. In-fact we use google.setOnLoadCallback(function(){ }); instead of all different library’s ready functions. This can be seen as a drawback or a good feature; I see it as a good feature as it gives me a single ready function for all libraries.

The second method to use Google’s CDN links is by the direct paths of the libraries in the

In the above code, we started a count from 1 as we will need to increase the value of background position with each click. But first we set the background position of the division with the id of “slideshow” to zeros. This is a good thing to do as we live in a world where Internet Explorer still survives. Then when the anchor (a.next) is clicked we initiate a function where we catch the count multiplied by 300 in a variable (x_position) and a minus sign for animating leftwards and then we animate the background-position with that value. Finally we increase the count by 1 for the next click, therefore, the first time we click the value of x_position is -300, the second time we click, it is -600 and so on.

Note: make sure to comment out or remove the console.log statement as it creates problems in all the browsers except Firefox.

Thanks for reading.

Download the Source Code

Website Build-Up Series – Sidebar

Aayush — Mon, 13 Apr 2009 21:33:14 +0000

Preview:

So as per the preview picture above we will be creating the sidebar of the website and make the main content container ready to work with, for the next part of this tutorial series.

Preparing:

First we will go to the jQueryUI website and click on build custom download.
Now we deselect all the options and then reselect only the ones we need.

What we need:

We need the UI Core.
We need only one widget: Accordion.
We need only Effects Core.
Make sure to make the download 1.5.3 (Legacy release, for jQuery 1.2.6).

Now, open the zip file downloaded and go into the js folder and copy the file “jquery-ui-1.5.3.custom.min.js” into a new folder in your website directory, call the folder js. We will not be needing the jQuery JavaScript because we will be using google’s CDN to jQuery as it saves us bandwidth and it is cached on a lot of computers already, therefore, makes the site faster.

Now, for our curved corners go to: blue-anvil and download the Anti-Aliased rounded corners with jQuery zip file. Open the zip file and copy “jquery.curvycorners.packed.js” into the js folder of our website directory.

We then include all the JavaScript files in our web page right before ending the body tag:

So from here we finally start coding. Open our index.html in a text editor and start right where we left off i.e. after closing the header division and we will finish our code right before the end of the main container tag which we made in the last tutorial.





	

		Products:
		
			
				
					Recent Entries
					
						Recent Entry Title
						Recent Entry Title
						Recent Entry Title
						Recent Entry Title
						Recent Entry Title
					
				
				
					Popular Entries
					
						Recent Entry Title
						Recent Entry Title
						Recent Entry Title
						Recent Entry Title
						Recent Entry Title
					
				
				
					Categories
					
						Category Name
						Category Name
						Category Name
						Category Name
						Category Name
					
				
				
					Archive
					
						January 2009
						January 2009
						January 2009
						January 2009
						January 2009
					
				
			

		

		Latest Updates:
		
			
				This is a curved box where you can post latest news. Put up a slider or something.
				This is a curved box where you can post latest news. Put up a slider or something.
				This is a curved box where you can post latest news. Put up a slider or something.
				This is a curved box where you can post latest news. Put up a slider or something.
				This is a curved box where you can post latest news. Put up a slider or something.
				This is a curved box where you can post latest news. Put up a slider or something.
				This is a curved box where you can post latest news. Put up a slider or something.
				This is a curved box where you can post latest news. Put up a slider or something.
				This is a curved box where you can post latest news. Put up a slider or something.
				This is a curved box where you can post latest news. Put up a slider or something.
				This is a curved box where you can post latest news. Put up a slider or something.
			
		


	

	
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.

In the above code: we opened a new container division in which we floated two divisions: a sidebar division to the left and a content division to the right. I gave the content division just a basic padding and then pasted in some gibberish text which we will remove the next time we start working on it. Then, In the sidebar container there are two main elements the accordion container inside which is an unordered list in which there is another unordered list inside each list item and then there a curved-box division inside which is a marquee tag which I don’t recommend using but I still have placed it there so the page looks a little more lively. I’d recommend a great slider you can use instead made with jQuery called Easy Slider. Now back to what we are making, below is my CSS code which is quite self explanatory as it is well commented.

#content-container{
	width:100%;
	height:auto;
	overflow:hidden; /* for clearing the floats inside it */
	float:left;
}
#sidebar{
	width:300px;
	margin-right:5px;
	float:left;
}
#sidebar h3{ /* these are the two headings. Products and Latest Updates */
	font-family:Arial;
	font-size:15px;
	color:#000;
	padding:10px;
}
#content{
	float:left;
	width:634px; /* because of 1px border to this element, else it would be 635px  */
	height:800px; /* temporary */
	padding:10px;
	background:#c4c4c4;
	border-bottom: 1px solid #444; /* temporary */
	border-left: 1px solid #444;
}
/* Accordion */
#accordion-container {
	width: 290px;
	margin:0 0 10px 7px; /* top right bottom left */
}
ul#accordion, ul#accordion ul { background:#f8f7f7; }
ul#accordion { border-bottom: 1px solid #444; }
ul#accordion li {
	border: 1px solid #444;
	border-bottom: none; /* to avoid double borders at bottom */
}
ul#accordion ul li {
	border: none; /* to remove the excess borders from previous properties */
	border-bottom: 1px solid #C2C8D1; /* and then put what we like. */
	padding: 5px 10px;  /* [top | bottom] [left | right] */
}
ul#accordion ul li:last-child { border-bottom: none; } /* to remove the borders from the last list element */
ul#accordion a.heading { /* the big menu names in the accordion */
	background: #d9d4ce;
	color: #46382f;
	display: block;
	font-size: 18px;
	line-height: 18px;
	padding: 10px 5px;
	text-decoration: none;
}
ul#accordion a.heading:hover { /* mouseover the big menu names in the accordion */
	background: #46382f;
	color: #fff;
}
ul#accordion li ul a { /* the inside-menu elements */
	color: #000;
	text-decoration:none;
}
ul#accordion li ul a:hover { border-bottom: 1px dotted #46382f; } /* to give the inside-menu elements mouseover */
/* End Accordion */
#curved-box{
	background:#d9d4ce;
	width:288px;
	height:205px;
	padding:10px;
	border:1px solid #444;
	margin:10px 0 10px 7px;
}
#curved-box p{
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom: 1px dotted #444;
}

Even though you have styled all the elements the accordion is not together and the curved box doesn’t have the curved corners yet. Not to worry we only have to write a few more lines of code to accomplish that. Right before the body tag we inserted our scripts, but if you look carefully we inserted three scripts and a fourth empty script tag with only a comment in it saying jQuery code here. Remove that comment and paste the code below in it’s place.

$(function(){
	$('#accordion').accordion();
	$('.corner-this').corner();
});

Refresh your page and play around with the accordion and admire the anti-aliased curved corners.

Also, I have started my community link feed as you can see in the sidebar (Thanks to Collis Ta’eed’s Great Tutorial) So please contribute to it. It takes less than a minute to submit a link there. So if you happen to have or know a link to a great tutorial or tip or a great article about web design & development please submit it here

Thank You

Links:

Download the Source Code