Friday, 4 January 2013

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:

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

Friday, 30 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, 4 January 2013

XSLT

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

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.

current() Function

document() Function

element-available() Function

format-number() Function

function-available() Function

generate-id() Function

key() Function

system-property() Function

unparsed-entity-uri() Function

Friday, 30 November 2012

JQuery Slide Panel

How to Create New Menu with HTML

Zoom an Image with Mouse Move