Code Solution Gallery: JQuery

Saturday, 29 September 2012

Zoom an Image with Mouse Move

This is done by using JQuery. In Jquery give a function named 'zoom()'. When i move a mouse on picture then picture is zoomed as like a Magnifier used on any object i.e. picture, newspaper etc. in real life. To give the zooming effect you will followed the below steps :

1.   First Open a Text Editor and Type the following html codes :

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Zoom by MouseMove on Picture</title>

<script type='text/javascript' src="jquery-1.7.js"></script>
<script type='text/javascript' src="jquery.zoom.js"></script><link rel="stylesheet" type="text/css" href="normalize.css">
<style type='text/css'>
    .zoom
    {
        display:inline-block;
        position:relative;
    }
    .zoom img
    {
        display: block;
    }
</style>
</head>
<body>
<span class='zoom' id='ex'>
<img src="love_blooms_roses,_bunch_of_flowers.jpg" alt="Picture of Flowers" width='500' height='300' />
</span>
</body>
</html>

2. In the above code we use Two JS Files "jquery-1.7.js" and "jquery.zoom.js" and one CSS File named "normalize.css".
3. In the next lines we give style for Image file by creating two CSS classes named zoom and zoom img. The zoom class is for <span> tag in which we give an Image file for give the zooming effect. The <span> tag id 'ex' used in Javascript code with zoom() function as given below.

<script type='text/javascript'>
    $(window).load(function () {
        $(document).ready(function () {
            $('#ex').zoom();
        });
    });
</script>

I have given a Screenshot and Example to illustrate this which has given follows :

Zoom an Image with Mouse Move Using JQuery

Thursday, 27 September 2012

JQuery Slide Panel

o Create a JQuery Slide Panel used the following steps..

First download Jquery.js file and add this file into a folder.
Now type the following codes in HTML Files.

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideToggle("slow");

});

</script>

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<p>Because time is valuable, we deliver quick and easy learning.</p>

<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>

</div>

<p class="flip">Show/Hide Panel</p>

</body>

</html>

In above file we create a div. Now we create a css class "div.panel" and give the css code as above.
Now we create another css class named 'p.flip' which used to flip the div panel in top or bottom. we give the name of this class as 'div.panel, p.flip' means flip to div top or bottom which is clarify by using ',' sign.
Now we give a Jquery script which is used to flip top or bottom div panel. this script is as follows.