Displaying a Scrolling image at center of browser window

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

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:


#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. On clicking the image, it will start scrolling to the left and will disappear slowly.

Posted under JavaScript

Published on 15/05/2011

Tags: , , , , ,

 

Leave a Comment

Name (required)

Email (required)

Website

Comments

More Blog Post