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:

Friday, 31 August 2012

XSLT


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:
  1. xsl:apply-imports
  2. xsl:apply-templates
  3. xsl:attributes
  4. xsl:call-template
  5. xsl:choose
  6. xsl:comment
  7. xsl:copy
  8. xsl:copy-of
  9. xsl:element
  10. xsl:fallback
  11. xsl:for-each
  12. xsl:if
  13. xsl:message
  14. xsl:number
  15. xsl:processing instruction
  16. xsl:text
  17. xsl:value-of
  18. 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

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