Swap Images by XML using XMLHTTP Request

Calling XML file into HTML Page using XMLHTTP Request or ActiveXOject
Here, we have used some features for calling xml file into html document with the help of ajax. In the example mentioned below, we called xml nodes by using

item(0).firstChild.nodeValue

Below find the javascript code as a Example, as a result it shows toggle images effects.

Javascript file Source:

<script type="text/javascript">
function make()
{
var req;

if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}

req.open("GET", "image.xml", true);
//req.load("ajax-get.xml");


req.onreadystatechange = function()
{
if(req.readyState == 4)
{
//alert(imgsrc);

var doc = req.responseXML;
var cont=document.getElementById("data");
var imgsrc=document.getElementById("pic");
var thumb=document.getElementById("pic_s");
var clickhere=document.getElementById("alink");

//var test = doc.getElementsByTagName('thumb');
var smallpic = doc.getElementsByTagName('thumb');
var lnkxml = doc.getElementsByTagName('link');

imgsrc.src = doc.getElementsByTagName('image').item(0).firstChild.nodeValue;
imgsrc.alt = doc.getElementsByTagName('alt').item(0).firstChild.nodeValue;
thumb.src = smallpic.item(0).firstChild.nodeValue;
clickhere.href = lnkxml.item(0).firstChild.nodeValue;


var rot=document.getElementById("spn1");
rot.innerHTML= smallpic.item(0).firstChild.nodeValue;

thumb.onclick=function()
{

//if(thumb.src==smallpic.item(1).firstChild.nodeValue)
if(rot.innerHTML==smallpic.item(1).firstChild.nodeValue)
{
imgsrc.src = doc.getElementsByTagName('image').item(0).firstChild.nodeValue;
imgsrc.alt = doc.getElementsByTagName('alt').item(0).firstChild.nodeValue;
thumb.src = smallpic.item(0).firstChild.nodeValue;
clickhere.href = lnkxml.item(0).firstChild.nodeValue;

rot.innerHTML= smallpic.item(0).firstChild.nodeValue;
}
else
{
imgsrc.src = doc.getElementsByTagName('image').item(1).firstChild.nodeValue;
imgsrc.alt = doc.getElementsByTagName('alt').item(1).firstChild.nodeValue;
thumb.src = smallpic.item(1).firstChild.nodeValue;
clickhere.href = lnkxml.item(1).firstChild.nodeValue;

rot.innerHTML= smallpic.item(1).firstChild.nodeValue;
}
//alert(thumb.src);
};
}


};

/* else if(req.readyState<4)
{
shots.innerHTML="Loading...";
}*/
req.send(null);
}

</script>

XML file Source:

<?xml version="1.0"?>
<root>
<image>images/img-1.jpg</image>
<thumb>images/thumb-1.jpg</thumb>
<alt>XML</alt>
<link>http://javascript-guru.blogspot.com/search/label/ajax/</link>
<image>images/img-2.jpg</image>
<thumb>images/thumb-2.jpg</thumb>
<alt>Ajax</alt>
<link>http://javascript-guru.blogspot.com/</link>
</root>

Quick Tips & Tricks for Websites

Quick Tips for making Websites Sensible

1.Images & animations: Use the alt attribute to describe the function of each visual.

2.Image maps: Use the client-side map and text for hotspots.

3.Multimedia: Provide captioning and transcripts of audio, and descriptions of video.

4.Hypertext links: Use text that makes sense when read out of context. For example, avoid "click here."

5.Page organization: Use headings, lists, and consistent structure. Use CSS for layout and style where possible.

6.Graphs & charts: Summarize or use the longdesc attribute.

7.Scripts, applets, & plug-ins: Provide alternative content in case active features are inaccessible or unsupported.

8.Frames: Use the “noframes” element and meaningful titles.

9.Tables: Make line-by-line reading sensible. Summarize.

10.Check your work: Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

Top 10 CSS image gallery tutorials

There are many tutorials out there on how to create your own image gallery. There are simple ones made from pure CSS, and there are complex ones using css and javascript. By the end of this article you will have the information necessary to start building your own photo gallery.

read more | digg story

CSS hover with JavaScript animation methods

The CSS rollover effects is commonly used in jQuery Frameworks, suppose hover animations that respond to a user's behavior in ways standards-based sites never could before.

read more | digg story

Introduction to Regular Expressions - RegExp( )

Regular Expressions are very useful and commonly used for creating pattern matches, pattern searches, etc. for Strings in JavaScript. There is another method called indexOf() method which works almost same like regular expressions but for advance and complex pattern searches, regular expressions are used.

For creating a regular expression as an object, we can simply write:

new RegExp("\/D\");

Regular expressions are clearly defined by example given below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="JavaScript">
<!--
// created BY: rjs
function demoMatchClick()
{
var re =/[0-9]/g;
// For Numeric Value use /[0-9]/ or /\d/ and for non-numeric value use /\D/ or /[^0-9]/
// /[0-9a-zA-Z] for numeric as well as character(small/caps) for non-aplha --> use this /[^a-zA-Z]/.
// /[^a-zA-Z]/g here (g) for global search anywhere in the string even mix-up string.

// match(), search(), replace(), split()
// For Constructor -----> exec(), compile(), test()

var mat=document.demoMatch.subject.value.match(re);

if (mat)
{
alert(mat);
}
else
{
alert("No match");
}
}

</script>
</head>

<body>
<form id="demoMatch" NAME="demoMatch" METHOD="POST">
<P>Subject Number: <INPUT TYPE=TEXT NAME="subject"
VALUE="" SIZE=50></P>
<P><INPUT TYPE=SUBMIT VALUE="Test Match" ONCLICK="demoMatchClick()"></P>
</form>
</body>

Other Useful Resources:
• Javascript Completed Reference - Regular Expressions
• Basics of Regular Expressions

How to Create a CSS Webpage from Scratch?

In this section, we will learn how to create a css webpage from scratch. This is the first lesson about Basics of CSS concepts using Tutorials. Hope you like it.

read more | digg story

Use of CSS Properties with Variables

Advanced CSS with Variables:
CSS Level 2 Recommendation effects the Web authors' community that has been requesting a way of defining variables in CSS.

Variables allow to define stylesheet-wide values identified by a token and usable in all CSS declarations.

If a value is often used in a stylesheet - a common example is the value of the color or background-color properties - it's then easy to update the whole stylesheet statically or dynamically modifying just one variable instead of modifying all style rules applying the property/value pair.

Example:

#
@variables {
#
CorporateLogoBGColor: #fe8d12;
#
}
#
#
div.logoContainer {
#
background-color: var(CorporateLogoBGColor);
#
}

The Same thing we can define in PHP also. For that thing firstly, you need to create php page for the content. Following example shows how:

Example:

<?php
header("Content-type: text/css");
$color = "green"; // <--- define the variable
echo <<<CSS
/* --- start of css --- */
h2
{
color: $color; /* <--- use the variable */
font-weight: bold;
font-size: 1.2em;
text-align: left;
}
/* --- end of css --- */
CSS;
?>

For more information regarding this, visit:
• CSS Variables
• How to create CSS Variables?