Coding Solution Gallery: November 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.

$(document).ready(function(){

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

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

});

</script>

This script is used for initialize the panel beacuse in this script we used $(document).ready() command which is used for initializing.

With this script the web browser toggle the div panel in top or bottom position.
You can also download the example for use the JQuery Slide Panel.

JQuery Slide Panel

How to Create New Menu with HTML

To create a HTML Menu in HTML File, you just follows the below given steps :
1. Open a text Editor and type the following css code in it.

h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
#main
{
padding: 30px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}

ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}

ul#menu li
{
display: inline;
}

ul#menu li a
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
color: #034af3;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}

ul#menu li a:hover
{
background-color: #ffffff;
}

Now save the above file with the name 'site1.css'

2. Now open text editor one more time and type the following code.

<html>
<head>
<title></title>
<link href="site1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
<h1>Hello</h1>
</div>

<ul id="menu">
<li><a href="try_webpages_cs_013.asp">Home</a></li>
<li><a href="try_webpages_cs_014.asp">About</a></li>
</ul>

<div id="main">
<h1>Welcome to Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
<p>© 2012 W3Schools. All rights reserved.</p>
</div>
</body>

</html>

and save the above file as 'menubar.html'

3. Now when you run the menubar.html file in browser then this file is look like as follows :

To illustrate this i have given an example which is as follows :

Menu with HTML

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

Coding Solution Gallery

Menubar

Friday, 30 November 2012

JQuery Slide Panel

How to Create New Menu with HTML

Zoom an Image with Mouse Move