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


Posted By at No comments:
Labels:

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>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>

<style type="text/css">
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>

<div class="panel">
<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.
Posted By at No comments:
Labels:

Tuesday 11 September 2012

How to Create Menus 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>&copy; 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

Posted By at No comments:
Labels:

Monday 3 September 2012

Confirm Dialog box with JavaScript


The Confirmbox has been used for prompt the input from user in form or two options Ok or Cancel, Yes or No etc. It is very useful in programming. i.e. When you save or update a record then a Messagebox has been appeared on screen and prompt his acceptance in form of two options yes or No. If user select Yes then It has been saved or Updated the record or if User select No then It has no make any changes. In HTML Form or aspx webpage, we are used the Javascript confirmbox.

To add a JavaScript ConfirmBox in your webpage, you will followed the below steps :

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


<html>
<head>
<title>Confirm Box</title>
</head>
<body>
<button onclick="myFunction()">Click Here to Open a Confirmbox</button>
<br /><br /><br />
<input id="Text1" type="text" />
</body>
</html>

2. In above file, we create a Button and Textbox. Give the text to the button as 'Click Here to Open a Confirmbox' and give the id to textbox as 'Text1'. In Button we set a onclilck event. In which we give a function named "myFunction()". This is a Javascript function and used for give the confirmbox functionality.
3. Now we write a script in Bottom of this web page in which we give the functionality of confirmbox as follows :

<script type="text/javascript">
function myFunction() {
var x;
var r = confirm("Press any Button!");
if (r == true) {
x = "You pressed OK!";
}
else {
x = "You pressed Cancel!";
}
document.getElementById("Text1").value = x;
}
</script>

4. In above script a confirmbox which prompt to user "press any Button" and give to buttons 'Ok' or 'Cancel'. If user click on "Ok" button then a text "You pressed OK!" is show in textbox and either he click on "Cancel" Button then a text "You pressed Cancel!" is shown.

I have given an Example to illustrate this.












Please download the example as follows :

ConfirmBox
Posted By at No comments:
Labels:

Set Letter Case of Textbox with CSS


We can set the lettercase of Textbox with an easy way by using CSS  i.e. CapitalCase, UpperCase, Lowercase etc. CSS Stands for Cascading Style Sheet. It is very important part of any webpage. In HTML, we can easily set the Lettercase of textbox in any Style i.e. Capitalcase, Lowercase or Uppercase etc. 
To set or change the lettercase,  please follows the steps given below :
  1. Open a Text Editor i.e. notepad or wordpad etc., and type the following code.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body style="height: 136px">
<form id="letter" >
     <p style="color: #FF0000">
        <input id="txtcap" type="text" class="forcapital" />&nbsp; * For Capital Case</p>
    <p style="color: #FF0000">
        <input id="txtup" type="text" class="forUpper" /> * For Upper Case</p>
    <p style="color: #FF0000">
        <input id="txtlow" type="text" class="forlower" /> * For Lower Case</p>
</form>
</body>
</html>

    2.    In above code we create three textboxes, "txtcap", "txtup" and "txtlow". 
    3.    Now we type the following CSS in the form of a class for set the LetterStyle of these three textboxes.

    <style type="text/css">
        .forcapital
    {
        text-transform:capitalize;
        }
    
    .forUpper
    {
        text-transform:uppercase;
        }           
        
   .forlower
    {
        text-transform:lowercase;
         }
        
    </style>

     4.    In above css we create three classes, In which first class is used for set the Letterstyle to Capital Case. Capital Case means First letter of any word is capital and other is lowercase and after a blank space when new word is start its first character is capital i.e.
Hello How Are You. 
    5.     The Next class is used for set the LetterStyle to Uppercase. By using this Class when you type any text then it has been appeared  in textbox in Uppercase Letter whether caps locks is on or OFF.
    6.     The Third and Last class is used for change the lettercase to Lowecase. By using this Class when you type any text then it has been appeared  in textbox in Lowercase Letter whether caps locks is on or OFF.
The screen shortshot is as folows :

Textbox Lettercase


To illustrate this, we give the example as follows:

Posted By at No comments:
Labels:

Saturday 1 September 2012

Add Keypress in HTML File with Javascript



In HTML control, If we want to use Keypress event then we use JavaScript code which described as follows


  1. First we Open a Text Editor and type the following codes
<html>
<head>
</head>
<body>
<p>
A function is triggered when the user presses a key in the input field. The function alerts the key pressed.</p>
<input type="text" onkeypress="displayResult()" />
</body>
</html>

2. In the above file we create a html file and add a Textbox for input any value from user. In the above code we declare a Function "displayResult()" for onkeypress. This event is used for add keypress functionality to textbox Now we add javascript function "displayResult()" as like follows :

<script>
function displayResult()
{
var x;
if(window.event) // IE8 and earlier
{
x=event.keyCode;
}
else if(event.which) // IE9/Firefox/Chrome/Opera/Safari
{
x=event.which;
}
keychar=String.fromCharCode(x);
alert("Key " + keychar + " was pressed down");
}
</script>

3. In the above script we used 'event.keyCode' this keyword is used for fetch an assign a keypress value to variable 'x'. In other line we declare a vaiable 'keychar' and then assign the value to it after convert it into character, because 'event.keyCode' keywork only fetch 'ASCII code'. for example if we press 'a' then its ASCII code is 65, which is further convert into string value by using the syntext :
x=event.keyCode;
keychar=String.fromCharCode(x);

4. In the following line of this script we show this keyword on screen in form of a message box by using alert command as like :
alert("Key " + keychar + " was pressed down");
Please download the example given below :
 
Keypress Event



Posted By at No comments:
Labels:
Subscribe to: Posts (Atom)
Twitter Bird Gadget