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”
<body>
<div id=”scroller”>
<img src=”image1.jpg” width=150px height=150px class=”image”/>
</div>
</body>
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
B.M.Harwani is founder and owner of Microchip Computer Education (MCE), based in Ajmer, India that provides computer education in all programming and web developing platforms. He graduated with a BE in computer engineering from the of Pune, and also has a ‘C’ Level (master’s diploma in computer technology) from DOEACC, Government Of India. Being involved in teaching field for over 16 years, he has developed the art of explaining even the most complicated topics in a straight forward and easily understandable fashion. He has written several books on various subjects that includes JSP, JSF, EJB, PHP, .Net, Joomla, jQuery and Smartphones. To know more, visit his blog, http://bmharwani.com/blog
Article from articlesbase.com
Revisions
There are no revisions for this post.
No comments yet.