subject: Displaying a Scrolling image at center of browser window [print this page] Displaying a Scrolling image at center of browser window
In this article, we will learn to display an image that initially appears at the center of the browser window. On clicking the image, it will scroll to the left and will become invisible. That is, we will learn to surround the image in an invisible window so that when we click the image, it should scroll to the left (in the boundary of the invisible window) and disappears gradually.
Let us make an HTML file to define the image element to display the image that we want to appear on the screen. The HTML file may appear as shown below:
HTML code for "Displaying a Scrolling image at center of browser window"
In the HTML code, we can see that the img element is enclosed within a div element which is assigned the id: scroller'. The reason of making use of the div element is to assign the width and height to the invisible window for the image (within which we want it to scroll).
Style Sheet code for "Displaying a Scrolling image at center of browser window"
We write the id selector #scroller' in the style sheet so that the style properties defined in it can be automatically applied to the div element of id:'scroller' without any need of jQuery code. The style sheet will also contain the class selector .image' to assign relative' property to position' property to the img element that is very necessary to make the image scroll.
The style sheet: style.css may appear as shown below:
style.css
#scroller{
width:155px;
height:155px;
margin:auto;
overflow:hidden;
position:relative;
}
.image{
position:relative;
}
We can see that the id selector #scroller' contains the width and height property set to value '155px' to define the width and height of the invisible window for the image. The margin property is set to value auto' so that window takes the margin space from the browser window automatically making the window to appear at the center of the width of the browser window. The value of the overflow property is set to hidden to make the region of the image that has scrolled out of the boundary of the window to become invisible. The position property is assigned the value relative' to make the image scroll relative to the enclosed window
The class selector .image' contains the position property set to value relative' to make the image scroll from its current position
jQuery code for "Displaying a Scrolling image at center of browser window"
The jQuery code to attach the click event to the image and the animate method (defined in the event handling function) to make the image scroll to the left and stop at the distance of -160px from the left side of the enclosing window (to become completely invisible) is as shown below:
$(document).ready(function() {
$('.image').click(function (event){
$(this).animate({'left': -160}, 'slow');
});
});
Initially, the image will appear completely at the center of the browser window as shown in Figure 1.
Figure 1. Image that appears on loading the web page
On clicking the image, it will start scrolling to the left and will disappear slowly and slowly as shown in Figure 2.
Figure 2. Image partially visible as being scrolled to the left
More Articles :
How to Validate an Email Address Through jQuery
For more information, refer my book : "jQuery Recipes A Problem-Solution Approach" available at : http://www.amazon.com/jQuery-Recipes-Problem-Solution-Approach-Development/dp/1430227095/ref=sr_1_1?ie=UTF8&s=books&qid=1287320549&sr=8-1
