Code Solution Gallery

Zoom an Image with Mouse Move

2012-09-29T17:41:00.003+05:30

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

JQuery Slide Panel

2012-09-27T11:46:00.001+05:30

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 Menus With HTML

2012-09-11T11:40:00.003+05:30

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

Confirm Dialog box with JavaScript

2012-09-03T14:47:00.008+05:30

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 :

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

Set Letter Case of Textbox with CSS

2012-09-03T12:25:00.002+05:30

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 :

Open a Text Editor i.e. notepad or wordpad etc., and type the following code.

<head>

<title>Untitled Page</title>

</head>

<input id="txtcap" type="text" class="forcapital" />  * For Capital Case</p>

<input id="txtup" type="text" class="forUpper" /> * For Upper Case</p>

<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.

.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 :

To illustrate this, we give the example as follows:

Set Lettercase of Textbox with CSS

Add Keypress in HTML File with Javascript

2012-09-01T17:37:00.001+05:30

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

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>

</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 :

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

XSLT

2012-08-31T16:53:00.007+05:30

XSLT stands for EXtensible Stylesheet Language, and is a style sheet language for XML documents.

XSLT also stands for XSL Transformations. In this tutorial you will learn how to use XSLT to transform XML documents into other formats, like XHTML.

XSLT Functions

Functions are often called with the fn: prefix, such as fn:string(). However, since fn: is the default prefix of the namespace, the function names do not need to be prefixed when called.

In addition, there are the following built-in XSLT functions:

Name

Description

current()

Returns the current node

document()

Used to access the nodes in an external XML document

element-available()

Tests whether the element specified is supported by the XSLT processor

format-number()

Converts a number into a string

function-available()

Tests whether the function specified is supported by the XSLT processor

generate-id()

Returns a string value that uniquely identifies a specified node

key()

Returns a node-set using the index specified by an <xsl:key> element

system-property()

Returns the value of the system properties

unparsed-entity-uri()

Returns the URI of an unparsed entity

current() Function

Usage of Current() : The current() function returns a node-set that contains only the current node. Usually the current node and the context node are the same.

<xsl:value-of select="current()"/>

is equal to

<xsl:value-of select="."/>

However, there is one difference. Look at the following XPath expression: "catalog/cd". This expression selects the <catalog> child nodes of the current node, and then it selects the <cd> child nodes of the <catalog> nodes. This means that on each step of evaluation, the "." has a different meaning.

The following line:

<xsl:apply-templates select="//cd[@title=current()/@ref]"/>

will process all cd elements that have a title attribute with value equal to the value of the current node's ref attribute.

Example :

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<xsl:for-each select="catalog/cd/artist">
Current node: <xsl:value-of select="current()"/>
<br />
</xsl:for-each>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

document() Function

Usage of document() : The document() function is used to access nodes in an external XML document. The external XML document must be valid and parsable.

One way to use this function is to look up data in an external document. For example we want to find the Celsius value from a Fahrenheit value and we refer to a document that contains some pre-computed results:

<xsl:value-of select="document('celsius.xml')/celsius/result[@value=$value]"/>

element-available() Function

Usage and Example of element-available() : The element-available() function returns a Boolean value that indicates whether the element specified is supported by the XSLT processor.

This function can only be used to test elements that can occur in a template body. These elements are:

xsl:apply-imports

xsl:apply-templates

xsl:attributes

xsl:call-template

xsl:choose

xsl:comment

xsl:copy

xsl:copy-of

xsl:element

xsl:fallback

xsl:for-each

xsl:if

xsl:message

xsl:number

xsl:processing instruction

xsl:text

xsl:value-of

xsl:variable

Example :

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<xsl:choose>
<xsl:when test="element-available('xsl:comment')">
<p>xsl:comment is supported.</p>
</xsl:when>
<xsl:otherwise>
<p>xsl:comment is not supported.</p>
</xsl:otherwise>
</xsl:choose>
<xsl:choose>
<xsl:when test="element-available('xsl:delete')">
<p>xsl:delete is supported.</p>
</xsl:when>
<xsl:otherwise>
<p>xsl:delete is not supported.</p>
</xsl:otherwise>
</xsl:choose>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

format-number() Function

Usage and Example of function-number() : The format-number() function is used to convert a number into a string.

Example :

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<xsl:value-of select='format-number(500100, "#")' />
<br />
<xsl:value-of select='format-number(500100, "0")' />
<br />
<xsl:value-of select='format-number(500100, "#.00")' />
<br />
<xsl:value-of select='format-number(500100, "#.0")' />
<br />
<xsl:value-of select='format-number(500100, "###,###.00")' />
<br />
<xsl:value-of select='format-number(0.23456, "#%")' />
</body>
</html>
</xsl:template>

</xsl:stylesheet>

function-available() Function

Usage and Example of function-available(): The function-available() function returns a Boolean value that indicates whether the function specified is supported by the XSLT processor.

Example : <?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<xsl:choose>
<xsl:when test="function-available('sum')">
<p>sum() is supported.</p>
</xsl:when>
<xsl:otherwise>
<p>sum() is not supported.</p>
</xsl:otherwise>
</xsl:choose>
<xsl:choose>
<xsl:when test="function-available('current')">
<p>current() is supported.</p>
</xsl:when>
<xsl:otherwise>
<p>current() is not supported.</p>
</xsl:otherwise>
</xsl:choose>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

generate-id() Function

Usage and Example of generate-id() : The generate-id() function returns a string value that uniquely identifies a specified node. If the node-set specified is empty, an empty string is returned. If you omit the node-set parameter, it defaults to the current node.

Example :

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<h3>Artists:</h3>
<ul>
<xsl:for-each select="catalog/cd">
<li>
<a href="#{generate-id(artist)}">
<xsl:value-of select="artist" /></a>
</li>
</xsl:for-each>
</ul>
<hr />
<xsl:for-each select="catalog/cd">
Artist: <a name="{generate-id(artist)}">
<xsl:value-of select="artist" /></a>
<br />
Title: <xsl:value-of select="title" />
<br />
Price: <xsl:value-of select="price" />
<hr />
</xsl:for-each>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

key() Function

Usage and Example of key() : The key() function returns a node-set from the document, using the index specified by an <xsl:key> element.

Example :

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:key name="cdlist" match="cd" use="title" />

<xsl:template match="/">
<html>
<body>
<xsl:for-each select="key('cdlist', 'Empire Burlesque')">
<p>
Title: <xsl:value-of select="title" />
<br />
Artist: <xsl:value-of select="artist" />
<br />
Price: <xsl:value-of select="price" />
</p>
</xsl:for-each>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

system-property() Function

Usage and Example of system-property(): The system-property() function returns the value of the system property specified by the name.

System properties in the XSLT namespace:

xsl:version - The version of XSLT implemented by the processor

xsl:vendor - The vendor of the XSLT processor

xsl:vendor-url - The URL identifying the vendor of the XSLT processor

Example :

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<p>
Version:
<xsl:value-of select="system-property('xsl:version')" />
<br />
Vendor:
<xsl:value-of select="system-property('xsl:vendor')" />
<br />
Vendor URL:
<xsl:value-of select="system-property('xsl:vendor-url')" />
</p>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

unparsed-entity-uri() Function

Usage and Example of unparsed-entity-uri() : The unparsed-entity-uri() function returns the URI of an unparsed entity. The name of the entity must match the passed argument. If there is no such entity an empty string is returned.

If the DTD contains the following declaration:

<!ENTITY pic SYSTEM "http://www.abc.com/hello.jpg" NDATA JPEG>

the following expression:

unparsed-entity-uri('pic')

will return the URI for the file "hello.jpg".

In the following line we show an Example for Create HTML file from xml and xslt files :

To illustrate this I have given an example given below :

Create HTML from XSLT

How can I show Messagebox with HTML Code

2012-08-25T13:46:00.000+05:30

In HTML we cannot use not use 'vbscript' command 'msgbox' to display the messagebox or any other window message commands, becuse html viewed in web browser. So thewindow message not display on It.

We can display message on web form by use the following code.

<!DOCTYPE html>

<html>

<head>

function myFunction()

{

alert("Hello! I am an alert box!");

}

</script>

</head>

<body>

</body>

</html>

In above html code we type a 'javascript functon' named 'myFunction()'. We use 'alert' command in this function. This command is used to display message on Web Browser.

Playing Videos in HTML

2012-08-25T11:42:00.003+05:30

To Play movie in HTML File Pls. use the following steps

First create a folder i.e. we create a folder named "Play movie with html code"
Now add two files in this folder in which one file is movie file which is of any format like '.mp4', '..webm','.ogg' etc. and second file is '.swf' format. We used two files 'movie.ogg' and 'movie.swf'
Now open a notepad file and paste the following code

  <!DOCTYPE html>
  <html>
  <body>
  <video width="320" height="240" controls="controls" autoplay="autoplay">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
  <embed width="320" height="240" src="movie.swf" />
  </object>
  </video>
  </body>
  </html>

Now saved the above file with any name along with .html' extension. i.e. we used 'playmovie.html'

4 Now when we browse the 'playmovie.html' file in any browser then it play your movie.

Video play with HTML code

Name	Description
current()	Returns the current node
document()	Used to access the nodes in an external XML document
element-available()	Tests whether the element specified is supported by the XSLT processor
format-number()	Converts a number into a string
function-available()	Tests whether the function specified is supported by the XSLT processor
generate-id()	Returns a string value that uniquely identifies a specified node
key()	Returns a node-set using the index specified by an <xsl:key> element
system-property()	Returns the value of the system properties
unparsed-entity-uri()	Returns the URI of an unparsed entity