Just when i though i have completely writing all the effect tutorial available, i neglected inner fade effect that has been around for quite some time. Maybe it look exactly like fade effect in jQuery and didn't really notice the differences. Just to explain what does inner fade effect differ from normal fade effect in jQuery, inner fade effect will display the combination of both images when the first image gets fade in. This produces an asynchronous effect of image being displayed together. On the other hand, normal fade effect produces fade in an synchronous way when one fade ended the other fade occurs. The demo can be view at the bottom of this tutorial.
Concept
The concept for an inner fade is much troublesome than a normal fade effect in jQuery. A normal fade effect in jQuery will only required the fadeIn,fadeOut or fadeTo method to be called by the chaining process. Inner fade effect will require an additional step which is to arrange the images into a stack. Similar to the shuffle concept but we will just have to use the built-in feature of jQuery, animate to complete this tutorial. Imagine you have a deck of cards, each touch will make the card slowly fade till disappear and display the next card. So, what happen to the disappeared card? Similarly, we set the displayed index to a lower value and hide it behind of the deck of cards. So when the deck of cards completely disappeared, it will fade to the start card again!
The CSS and HTML code will be pretty much the same as the shuffle effect tutorial. The only differences we will see in this tutorial compare to the shuffle effect tutorial is the jQuery code used to perform the task.
$(function(){
var i = 0;
$('div.card').click(function(){
$(this)
.animate({opacity: 0}, 1000, function(){$(this).css("z-index", i)})
.animate({opacity: 1}, 1000);
i--;
});
});
Notice that i did not use fadeTo method because the z-index command takes longer than the next animation to be display and cause the whole inner fade to fail. Thus, i use animate function instead and instruct jQuery to immediately set the z-index to i depth where i is the variable to keep track of the deepness of the container. This way i won't have to worry about the next animation coming forward quicker than the z-index rule. The other reason is that it seems buggy to use fadeTo function during this tutorial. Since, animate function work perfectly i will just stick to that then. From the demo page, you can notice that sometimes the colors are being combined and turn to some other color although there are only 4 colors available! This is the differences between inner fade and the normal fade. You can download the tutorial file at jquery-inner-fade-effect
i think after you have read most of my effect tutorial on jQuery, you will notice that effect is just playing around with CSS. Nonetheless, without jQuery help using pure JavaScript to achieve the same result will really take a lot of time than the usually time we spend on jQuery. Anyway, back to the topic that i am going to write. In this tutorial, i will demonstrate another very simple concept to shuffle your containers or images. I believe this should be the last effect available in the market currently. Most of the effect i should have covered them up.
Tutorial
i find this way of writing tutorial is easy for me to understand and its much more neat and clearer compare to my other tutorial which is quite a mess. So i will continue using such structure to write my tutorial as much as possible. If you have any feedback or improvement that i can make, please send me an email or just leave a comment. =)
Concept
Let's imagine you have a set of poker card. The poker cards should be shown on the screen in a z-axis way. When we shuffle, we take the highest card, pull it out and placed at the back (Sound like a first in last out concept to me). Let's assume each container is a card. We will have to stack the card together in a z-axis row in order to simulate the pattern of a poker card deck. Well, since its programming we can really just have 2 containers and placed the image on the second level so that when the first image is being shuffled down, the second level image is being displayed during the shuffling of the first card. But let's not do such complex stuff, we are doing a simple tutorial right? Opps.
CSS
from the description in the concept section, the necessary and required CSS rule to apply on the containers are most probably something that can help us stack n containers together. Below listed the approximate rule required for shuffle effect to work.
position: absolute - so that every container in the deck has a MUST obey position
z-index: x - so that every element is being position in an z-axis level
top: x em - the vertical position of the container
left: x em - the horizontal position of the container
float: left - we float all element so that they are no longer on the ground
where x is an integer value. Please take note that if you do not provide a type for your top and left, it may post a problem later when you try to shuffle your containers. Another thing to take note, z-index don't take in types like em or px, it is a pure number without type.
HTML
with the CSS rule declared, its time to setup our structure for each container. The structure of the container is fairly easy to setup. We just need a set of n containers in order to display different container during shuffling.
Coding
This part always get a bit confusing when there are piece and pieces of code flying around the place. But i will try my best to explain what is happening in here.
On the HTML page, i have allocated the following containers as describe above.
On the CSS external script, the amount of code required is also smaller compare to other tutorial since there is only 1 type of container we are dealing in this tutorial. The stylesheet is as follow,
div.card
{
width: 25em; /* width of each container*/
height: 20em; /* height of each container*/
position: absolute; /* instructure each container to obey the position absolutely*/
float: left; /* float all the container so that they overlapped each other*/
left: 34%; /* align them to the center of the screen */
border: #000 solid 10px; /* give it a border to make it look nice*/
}
div#box1
{
background-color: #66A666;/*green*/
}
div#box2
{
background-color: #E37373;/*pink*/
}
div#box3
{
background-color: #B2B2B2;/*grey*/
}
div#box4
{
background-color: #A51515;/*red*/
}
There is something interesting in here that you might want to know, when we set position of a div tag, the z-index property is being set to auto in default. Thus, the last container in our example(box4) will be the one display on the top of the stack. Unless we overwrite the z-index css properly. This is what we will see after we have our structure and CSS done.
shuffle structure image
IT IS JUST A BOX! Definitely, this is a box alright. Other containers are behind the container shown on the image. Notice that the last container on the HTML structure is being displayed instead of the first container? This is the reason why z-index is important later when shuffling the containers.
Lastly, we will be on our way to tackle jQuery coding after we have complete the structure required for our shuffle effect. So what i will be going to do is to attach an event handler on each container. Once the event is being triggered, we will animate the top object to the right and pull it back down the queue by setting it z-index to a lower value. The code is presented below,
$(function(){
var i = 0;
$('div.card').click(function(){
$(this)
.animate({left: 15+'%', marginTop: 2+'em'},500, 'easeOutBack',function(){i--;$(this).css('z-index', i)})
.animate({left: 38+'%', marginTop: 0+'em'},500, 'easeOutBack');
});
});
The code done as what i instructed. Igive a variable i to hold the current level of z-index. adding event handler to all of my elements, once an event occurs, i will move the call object to the left and bottom 2em with the easing ability of easeOutBack from the jQuery plugin made available by George. After the animation has completed, i set the z-index of the container to a lower level and pull it back in with another animation. And this will give you a nice shuffle effect as shown in the demo. You can download the tutorial file at jquery-shuffle-effect
That is all i have for you in this tutorial hope you enjoy this! I sure did! Cheers~
The effect i show up till now are all discontinuous effect that can be easily create using CSS and jQuery. Some people may wonder how continuous sliding effect is being achieved. In this tutorial, i will demonstrate the concept and a plugin which i build immediately during this tutorial on how to simultaneously pull out the containers in the easily way. The demo can be view at the bottom of this post.
Concept
The concept for continuously sliding effect is really not that difficult. Imagining you have a photo frame and a long list of photo arranged in a straight row. The list is placed behind the photo frame and you started to pull it accordingly to display a new photo within the frame. Anything outside the frame is being blocked which restrict the display only within the frame itself. This way you will see a continuously slide effect being displayed.
CSS
From the description above, it is clear that css is required to assist on building the effect (every type of effect cannot escape the demon hand of CSS! RAWR!). And below listed the required CSS rule from the description written above.
float: left - to flow all containers in a straight row
position: relative - so that the container can be hidden in IE and FF
overflow: hidden - we want to hide all other element outside the frame
margin-left or left: - this is where we adjust the element so that it get pull to the left or right within the frame
HTML
On the description above, we will have a rough idea how many containers are required to built the effect and plugin. The following list down the approximate container required.
Main Frame
container to contain x element
the x number of elements in the frame
next button
right button
Everything is put it simple so that we have a clear idea how this is being done. The reason why we need the extra container to contain the x element is because the element WILL NOT float side by side if you do not define a length that is big enough for all elements to go side by side.
Coding
This part always get a bit confusing when there are piece and pieces of code flying around the place. But i will try my best to explain what is happening in here.
On the HTML page, i have allocated the following containers as describe above.
It should be clear that there is 3 main containers which are the frame,next and right button. And within the frame there is another container which contain the 4 element that we will be interested to slide them around. The reason why both navigation button are within the frame so that the button will always be within the container.
On the CSS external script, the below listed out all the necessary elements that we mention on the CSS section.
body{
margin: 0 auto; /*align the display at the center*/
text-align: center; /*align the display at the center*/
}
div#frame{
margin: 0 auto; /*align the frame at the center*/
width: 50em; /*frame width*/
height: 25em; /*frame height*/
border: #000 solid 10px; /*frame border*/
position: relative; /*position relative so that it gets hide in IE*/
overflow: hidden; /*hide all overflow element out of the frame*/
}
div#container
{
position: relative; /*position relative so that it gets hide in IE*/
width: 200em; /*the width must be big enough so that all elements can align side by side*/
height: 25em; /*container height*/
}
div.box
{
float: left; /*float each element side by side*/
width: 50em;
height: 25em;
position:: relative;
}
div#box1
{
background-color: #66A666;
}
div#box2
{
background-color: #E37373;
}
div#box3
{
background-color: #B2B2B2;
}
div#box4
{
background-color: #A51515;
}
div#next
{
width: 3em;
height: 5em;
top: 50%; /*align it vertically center*/
margin-top: -2.5em; /*align it vertically center*/
right: 0em;
position: absolute;
background: transparent url(../images/next.png);
}
div#prev
{
width: 3em;
height: 5em;
left: 0em;
top: 50%; /*align it vertically center*/
margin-top: -2.5em; /*align it vertically center*/
position: absolute;
background: transparent url(../images/prev.png);
}
If you wonder how the left and right button is aligned on center, you can see the explanation at How to align center on the screen when using position absolute with CSS
i have indicated the comment on the code itself so that it can be self explain instead. After all of these settings, you should be able to get something like this.
sliding container
Look pretty decent right? Now come the real code in jQuery. So we want to pull to the next element to the right to simulate continuously sliding, we will attach an event handler to both next and previous button. Using the animate() function in jQuery, this will be a piece of cake.
The first sentence in the code indicate that if previous button is pressed, we add the counter and check whether it is more than the available container. If the counter has go pass the available containers, we will push it to the last container available. We did the same for the next button too! but in descending order. Finally, we animate the scrolling according to the the given counter with the size of each element.
Plugin
I really do not know whether there is a need for such plugin since its really quite simple. But i will still provide it like i said previously. So with the explanation above, i will refractor the code a bit so that it is flexible enough to become a plugin.
Parameter
prevImageID: previous button image id
nextImageID: next button image id
noOfContainer: number of container
containerW: width of container
duration: duration of animation
in order to change the display, just change the css code in ini.css. No hardcoded code in the javascript itself. There can be more flexibility in the future of this plugin which i will place in more feature if i get the time. If you would like to support me, you can always throw in some bucks for the maintance of this plugin.
There are many reason people want to disable or stop caching by broswer. Especially when we are dealing with dynamic content that required the latest version to be displayed on the browser. However, due to security reason there are no perfect methods in javascript that can disabled caching for all browsers. In this tutorial, i will demonstrate a few way both javascript and jQuery used to stop or disable caching by browsers.
jQuery
On the later version of jQuery v1.2 above, jQuery has provided a method to stop caching by browser with its ajax class. You can visit jQuery website to see the list of update on v1.2 and you will notice that they have now included a function to disable caching! You can either choose to control the way each individual dynamic content cached by setting the properties to true/false or you can just set a default to disabled all browser caching.
In order to determine each ajax call caching properties,
which is being reflected on the jQuery example. And in order to disable all caching by the browser we can do the following,
$.ajaxSetup({cache: false}});
This will have to be placed on top of the script in order for it to work.
Javascript
The reason why browsers are able to cache a particular document is due to the url being passed to the browser are identical. In order to make it unique for each passes, we can place in a random number behind the url as shown below,
var img.src = 'www.hungred.com'+'?'+Math.random()*Math.random();
return $(img).load(function()
{
alert('completed!');
});
This method will ensure all document to be unique for every dynamic passes you throw to the browser which i find it more reliable and useful as this method has been there for quite sometimes and almost all of the browser will support such way of retrieving dynamic content.
HTML (16/04/2009)
You can also disable or stop caching using the following meta tag,
It is always annoying to look at codes that are created in a plugin or website that perform millions of complicated actions without comments to find the one effects contain in the plugin.
In this tutorial, i will demonstrate an easy to create jQuery flip effect with minimum amount of complication so that you will be able to inherit this effect into your plugin.
Before we start, i believe the below resources will be useful to create your own simple flip effect program plugin
How to shrink/zoom center of a container with jQuery
Once you read the above tutorial, you should have an idea how jQuery flip actual work. The key point to flip is speed. And in order to create a jQuery flip effect plugin, we will apply the same concept on all other types of effect that is being used in other tutorial. Of course, the demo guy will be the ghost again. Opps. You can view the demo page below,
In order for the flip to work. There must be a swap between two images or containers. If there is only one element, we don't really need the flip effect on it. The code for the demo above can be seen via view source or the one that i'm going to show below,
i attached an event click to the image tag so that whenever user click on the image it will flip. There is a bit of maths in here so that we can determine user click by using modulus. The important part for flipping to occurs is shown below,
whereby it compress the image at the center and flip it out from the center again which creates a flip effect when its quick enough. If the speed of the animate function is set to a larger value such as 2000, you will notice the flip effect became a zoom effect instead. Throw this into a plugin code and you get yourself a very simple jQuery flip effect plugin!
