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?

HTML, CSS, AJAX and Javascript Books

The Best e-books for HTML, CSS, Ajax and Javascript is available here. Anyone can download the given files from the torrent or can visit the site directly from where the refernce has taken.

HTML, CSS, AJAX and Javascript Books 2007

It contains the following files:

AJAX - Creating Web Pages With Asynchronous JavaScript And XML (2006).chm
AJAX And PHP - Building Responsive Web Applications (2006).pdf
Ajax Design Patterns (2006).chm
Ajax For Dummies (2006).pdf
Ajax For Web Application Developers (2006).chm
Ajax Hacks - Tips & Tools For Creating Responsive Websites (2006).chm
Ajax In Action (2006).pdf
Ajax On Rails (2006).chm
Ajax Patterns And Best Practices (2006).pdf
Beginning Ajax With ASP.NET (2006).pdf
Beginning Ajax With PHP - From Novice To Professional (2006).pdf
Beginning Google Maps Applications With PHP And Ajax - From Novice To Professional (2006).pdf
Beginning JavaScript With DOM Scripting And Ajax - From Novice To Professional (2006).pdf
Beginning XML With DOM And Ajax - From Novice To Professional (2006).pdf
CSS - The Definitive Guide, 3rd Edition (2006).chm
CSS - The Missing Manual (2006).chm
CSS Cookbook, 2nd Edition (2006).chm
CSS Hacks & Filters - Making Cascading Stylesheets Work (2005).pdf
CSS Instant Results (2006).chm
CSS Web Design for Dummies (2005).pdf
Creating Cool Web Sites With HTML, XHTML, And CSS (2004).pdf
Foundations Of Ajax (2006).pdf
Foundations Of Atlas - Rapid Ajax Development With ASP.NET 2.0 (2006).pdf
HTML & XHTML - The Definitive Guide, 6th Edition (2006).chm
HTML 4 For Dummies, 5th Edition (2005).pdf
HTML In 10 Simple Steps Or Less (2004).pdf
HTML Mastery - Semantics, Standards, And Styling (2006).pdf
HTML, XHTML, & CSS - Visual QuickStart Guide, 6th Edition (2006).chm
HTML, XHTML, & CSS Bible, 3rd Edition (2004).pdf
JavaScript & AJAX For The Web - Visual QuickStart Guide, 6th Edition (2006).chm
JavaScript Bible - Gold Edition (2001).pdf
JavaScript Bible, 5th Edition (2004).pdf
JavaScript In 10 Simple Steps Or Less (2004).pdf
JavaScript Phrasebook - Essential Code And Commands (2006).chm
JavaScript Programmer's Reference (2001).pdf
Learning JavaScript (2006).chm

Download Tutorial Books

8 Amazing Websites by Rafaël Rozendaal's

Usability and Accessibility means single serving sites with explosion, and it shows in his work's standout beauty and interactivity. His homepage documents years of acclaimed work, but in case you're unfamiliar (or just looking for a simplistic internet retreat), here are a few of our favorites to get you started.

read more | digg story

Basics of DTD (Document Type Definition)

In this section, we have explained about the DTD XML file. Basically, DTD XML file uses for various applications like HTML, XHTML, WML (wireless markup language) and DOM. Below is the example of DTD file written in XML format for XHTML Transitional DTD for Web.

DTD XHTML Transitional Code:

<!--
   Extensible HTML version 1.0 Transitional DTD



   This is the same as HTML 4 Transitional except for
   changes due to the differences between XML and SGML.



   Namespace = http://www.w3.org/1999/xhtml



   For further information, see: http://www.w3.org/TR/xhtml1



   Copyright (c) 1998-2002 W3C (MIT, INRIA, Keio),
   All Rights Reserved. 



   This DTD module is identified by the PUBLIC and SYSTEM identifiers:



   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"



   $Revision: 1.2 $
   $Date: 2002/08/01 18:37:55 $



-->



<!--================ Character mnemonic entities =========================-->



<!ENTITY % HTMLlat1 PUBLIC
   "-//W3C//ENTITIES Latin 1 for XHTML//EN"
   "xhtml-lat1.ent">
%HTMLlat1;



<!ENTITY % HTMLsymbol PUBLIC
   "-//W3C//ENTITIES Symbols for XHTML//EN"
   "xhtml-symbol.ent">
%HTMLsymbol;



<!ENTITY % HTMLspecial PUBLIC
   "-//W3C//ENTITIES Special for XHTML//EN"
   "xhtml-special.ent">
%HTMLspecial;



<!--================== Imported Names ====================================-->



<!ENTITY % ContentType "CDATA">
    <!-- media type, as per [RFC2045] -->



<!ENTITY % ContentTypes "CDATA">
    <!-- comma-separated list of media types, as per [RFC2045] -->



<!ENTITY % Charset "CDATA">
    <!-- a character encoding, as per [RFC2045] -->



<!ENTITY % Charsets "CDATA">
    <!-- a space separated list of character encodings, as per [RFC2045] -->



<!ENTITY % LanguageCode "NMTOKEN">
    <!-- a language code, as per [RFC3066] -->



<!ENTITY % Character "CDATA">
    <!-- a single character, as per section 2.2 of [XML] -->



<!ENTITY % Number "CDATA">
    <!-- one or more digits -->



<!ENTITY % LinkTypes "CDATA">
    <!-- space-separated list of link types -->



<!ENTITY % MediaDesc "CDATA">
    <!-- single or comma-separated list of media descriptors -->



<!ENTITY % URI "CDATA">
    <!-- a Uniform Resource Identifier, see [RFC2396] -->



<!ENTITY % UriList "CDATA">
    <!-- a space separated list of Uniform Resource Identifiers -->



<!ENTITY % Datetime "CDATA">
    <!-- date and time information. ISO date format -->



<!ENTITY % Script "CDATA">
    <!-- script expression -->



<!ENTITY % StyleSheet "CDATA">
    <!-- style sheet data -->



<!ENTITY % Text "CDATA">
    <!-- used for titles etc. -->



<!ENTITY % FrameTarget "NMTOKEN">
    <!-- render in this frame -->



<!ENTITY % Length "CDATA">
    <!-- nn for pixels or nn% for percentage length -->



<!ENTITY % MultiLength "CDATA">
    <!-- pixel, percentage, or relative -->



<!ENTITY % Pixels "CDATA">
    <!-- integer representing length in pixels -->



<!-- these are used for image maps -->



<!ENTITY % Shape "(rect|circle|poly|default)">



<!ENTITY % Coords "CDATA">
    <!-- comma separated list of lengths -->



<!-- used for object, applet, img, input and iframe -->
<!ENTITY % ImgAlign "(top|middle|bottom|left|right)">



<!-- a color using sRGB: #RRGGBB as Hex values -->
<!ENTITY % Color "CDATA">



<!-- There are also 16 widely known color names with their sRGB values:



    Black  = #000000    Green  = #008000
    Silver = #C0C0C0    Lime   = #00FF00
    Gray   = #808080    Olive  = #808000
    White  = #FFFFFF    Yellow = #FFFF00
    Maroon = #800000    Navy   = #000080
    Red    = #FF0000    Blue   = #0000FF
    Purple = #800080    Teal   = #008080
    Fuchsia= #FF00FF    Aqua   = #00FFFF
-->



<!--=================== Generic Attributes ===============================-->



<!-- core attributes common to most elements
  id       document-wide unique id
  class    space separated list of classes
  style    associated style info
  title    advisory title/amplification
-->

<!ENTITY % coreattrs
 "id          ID             #IMPLIED
  class       CDATA          #IMPLIED
  style       %StyleSheet;   #IMPLIED
  title       %Text;         #IMPLIED"
  >



<!-- internationalization attributes
  lang        language code (backwards compatible)
  xml:lang    language code (as per XML 1.0 spec)
  dir         direction for weak/neutral text
-->

<!ENTITY % i18n
 "lang        %LanguageCode; #IMPLIED
  xml:lang    %LanguageCode; #IMPLIED
  dir         (ltr|rtl)      #IMPLIED"
  >



<!-- attributes for common UI events
  onclick     a pointer button was clicked
  ondblclick  a pointer button was double clicked
  onmousedown a pointer button was pressed down
  onmouseup   a pointer button was released
  onmousemove a pointer was moved onto the element
  onmouseout  a pointer was moved away from the element
  onkeypress  a key was pressed and released
  onkeydown   a key was pressed down
  onkeyup     a key was released
-->

<!ENTITY % events
 "onclick     %Script;       #IMPLIED
  ondblclick  %Script;       #IMPLIED
  onmousedown %Script;       #IMPLIED
  onmouseup   %Script;       #IMPLIED
  onmouseover %Script;       #IMPLIED
  onmousemove %Script;       #IMPLIED
  onmouseout  %Script;       #IMPLIED
  onkeypress  %Script;       #IMPLIED
  onkeydown   %Script;       #IMPLIED
  onkeyup     %Script;       #IMPLIED"
  >



<!-- attributes for elements that can get the focus
  accesskey   accessibility key character
  tabindex    position in tabbing order
  onfocus     the element got the focus
  onblur      the element lost the focus
-->

<!ENTITY % focus
 "accesskey   %Character;    #IMPLIED
  tabindex    %Number;       #IMPLIED
  onfocus     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED"
  >



<!ENTITY % attrs "%coreattrs; %i18n; %events;">



<!-- text alignment for p, div, h1-h6. The default is
     align="left" for ltr headings, "right" for rtl -->



<!ENTITY % TextAlign "align (left|center|right|justify) #IMPLIED">



<!--=================== Text Elements ====================================-->



<!ENTITY % special.extra
   "object | applet | img | map | iframe">


 
<!ENTITY % special.basic
 "br | span | bdo">



<!ENTITY % special
   "%special.basic; | %special.extra;">



<!ENTITY % fontstyle.extra "big | small | font | basefont">



<!ENTITY % fontstyle.basic "tt | i | b | u | s | strike ">



<!ENTITY % fontstyle "%fontstyle.basic; | %fontstyle.extra;">



<!ENTITY % phrase.extra "sub | sup">
<!ENTITY % phrase.basic "em | strong | dfn | code | q |
                   samp | kbd | var | cite | abbr | acronym">



<!ENTITY % phrase "%phrase.basic; | %phrase.extra;">



<!ENTITY % inline.forms "input | select | textarea | label | button">



<!-- these can occur at block or inline level -->
<!ENTITY % misc.inline "ins | del | script">



<!-- these can only occur at block level -->
<!ENTITY % misc "noscript | %misc.inline;">



<!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">



<!-- %Inline; covers inline or "text-level" elements -->
<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">



<!--================== Block level elements ==============================-->



<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl | menu | dir">
<!ENTITY % blocktext "pre | hr | blockquote | address | center | noframes">



<!ENTITY % block
    "p | %heading; | div | %lists; | %blocktext; | isindex |fieldset | table">



<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">



<!--================== Content models for exclusions =====================-->



<!-- a elements use %Inline; excluding a -->



<!ENTITY % a.content
   "(#PCDATA | %special; | %fontstyle; | %phrase; | %inline.forms; | %misc.inline;)*">



<!-- pre uses %Inline excluding img, object, applet, big, small,
     font, or basefont -->



<!ENTITY % pre.content
   "(#PCDATA | a | %special.basic; | %fontstyle.basic; | %phrase.basic; |
    %inline.forms; | %misc.inline;)*">



<!-- form uses %Flow; excluding form -->


<!ENTITY % form.content "(#PCDATA | %block; | %inline; | %misc;)*">



<!-- button uses %Flow; but excludes a, form, form controls, iframe -->



<!ENTITY % button.content
   "(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
      table | br | span | bdo | object | applet | img | map |
      %fontstyle; | %phrase; | %misc;)*">



<!--================ Document Structure ==================================-->



<!-- the namespace URI designates the document profile -->



<!ELEMENT html (head, body)>
<!ATTLIST html
  %i18n;
  id          ID             #IMPLIED
  xmlns       %URI;          #FIXED 'http://www.w3.org/1999/xhtml'
  >



<!--================ Document Head =======================================-->



<!ENTITY % head.misc "(script|style|meta|link|object|isindex)*">



<!-- content model is %head.misc; combined with a single
     title and an optional base element in any order -->



<!ELEMENT head (%head.misc;,
     ((title, %head.misc;, (base, %head.misc;)?) |
      (base, %head.misc;, (title, %head.misc;))))>



<!ATTLIST head
  %i18n;
  id          ID             #IMPLIED
  profile     %URI;          #IMPLIED
  >



<!-- The title element is not considered part of the flow of text.
       It should be displayed, for example as the page header or
       window title. Exactly one title is required per document.
    -->


<!ELEMENT title (#PCDATA)>
<!ATTLIST title 
  %i18n;
  id          ID             #IMPLIED
  >



<!-- document base URI -->



<!ELEMENT base EMPTY>
<!ATTLIST base
  id          ID             #IMPLIED
  href        %URI;          #IMPLIED
  target      %FrameTarget;  #IMPLIED
  >



<!-- generic metainformation -->
<!ELEMENT meta EMPTY>
<!ATTLIST meta
  %i18n;
  id          ID             #IMPLIED
  http-equiv  CDATA          #IMPLIED
  name        CDATA          #IMPLIED
  content     CDATA          #REQUIRED
  scheme      CDATA          #IMPLIED
  >



<!--
  Relationship values can be used in principle:

   a) for document specific toolbars/menus when used
      with the link element in document head e.g.
        start, contents, previous, next, index, end, help
   b) to link to a separate style sheet (rel="stylesheet")
   c) to make a link to a script (rel="script")
   d) by stylesheets to control how collections of
      html nodes are rendered into printed documents
   e) to make a link to a printable version of this document
      e.g. a PostScript or PDF version (rel="alternate" media="print")
-->



<!ELEMENT link EMPTY>
<!ATTLIST link
  %attrs;
  charset     %Charset;      #IMPLIED
  href        %URI;          #IMPLIED
  hreflang    %LanguageCode; #IMPLIED
  type        %ContentType;  #IMPLIED
  rel         %LinkTypes;    #IMPLIED
  rev         %LinkTypes;    #IMPLIED
  media       %MediaDesc;    #IMPLIED
  target      %FrameTarget;  #IMPLIED
  >



<!-- style info, which may include CDATA sections -->
<!ELEMENT style (#PCDATA)>
<!ATTLIST style
  %i18n;
  id          ID             #IMPLIED
  type        %ContentType;  #REQUIRED
  media       %MediaDesc;    #IMPLIED
  title       %Text;         #IMPLIED
  xml:space   (preserve)     #FIXED 'preserve'
  >



<!-- script statements, which may include CDATA sections -->
<!ELEMENT script (#PCDATA)>
<!ATTLIST script
  id          ID             #IMPLIED
  charset     %Charset;      #IMPLIED
  type        %ContentType;  #REQUIRED
  language    CDATA          #IMPLIED
  src         %URI;          #IMPLIED
  defer       (defer)        #IMPLIED
  xml:space   (preserve)     #FIXED 'preserve'
  >



<!-- alternate content container for non script-based rendering -->

<!ELEMENT noscript %Flow;>
<!ATTLIST noscript
  %attrs;
  >



<!--======================= Frames =======================================-->



<!-- inline subwindow -->



<!ELEMENT iframe %Flow;>
<!ATTLIST iframe
  %coreattrs;
  longdesc    %URI;          #IMPLIED
  name        NMTOKEN        #IMPLIED
  src         %URI;          #IMPLIED
  frameborder (1|0)          "1"
  marginwidth %Pixels;       #IMPLIED
  marginheight %Pixels;      #IMPLIED
  scrolling   (yes|no|auto)  "auto"
  align       %ImgAlign;     #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  >



<!-- alternate content container for non frame-based rendering -->



<!ELEMENT noframes %Flow;>
<!ATTLIST noframes
  %attrs;
  >



<!--=================== Document Body ====================================-->



<!ELEMENT body %Flow;>
<!ATTLIST body
  %attrs;
  onload      %Script;       #IMPLIED
  onunload    %Script;       #IMPLIED
  background  %URI;          #IMPLIED
  bgcolor     %Color;        #IMPLIED
  text        %Color;        #IMPLIED
  link        %Color;        #IMPLIED
  vlink       %Color;        #IMPLIED
  alink       %Color;        #IMPLIED
  >



<!ELEMENT div %Flow;>  <!-- generic language/style container -->
<!ATTLIST div
  %attrs;
  %TextAlign;
  >



<!--=================== Paragraphs =======================================-->



<!ELEMENT p %Inline;>
<!ATTLIST p
  %attrs;
  %TextAlign;
  >



<!--=================== Headings =========================================-->



<!--
  There are six levels of headings from h1 (the most important)
  to h6 (the least important).
-->



<!ELEMENT h1  %Inline;>
<!ATTLIST h1
  %attrs;
  %TextAlign;
  >



<!ELEMENT h2 %Inline;>
<!ATTLIST h2
  %attrs;
  %TextAlign;
  >



<!ELEMENT h3 %Inline;>
<!ATTLIST h3
  %attrs;
  %TextAlign;
  >



<!ELEMENT h4 %Inline;>
<!ATTLIST h4
  %attrs;
  %TextAlign;
  >



<!ELEMENT h5 %Inline;>
<!ATTLIST h5
  %attrs;
  %TextAlign;
  >



<!ELEMENT h6 %Inline;>
<!ATTLIST h6
  %attrs;
  %TextAlign;
  >



<!--=================== Lists ============================================-->



<!-- Unordered list bullet styles -->



<!ENTITY % ULStyle "(disc|square|circle)">



<!-- Unordered list -->



<!ELEMENT ul (li)+>
<!ATTLIST ul
  %attrs;
  type        %ULStyle;     #IMPLIED
  compact     (compact)     #IMPLIED
  >



<!-- Ordered list numbering style



    1   arabic numbers      1, 2, 3, ...
    a   lower alpha         a, b, c, ...
    A   upper alpha         A, B, C, ...
    i   lower roman         i, ii, iii, ...
    I   upper roman         I, II, III, ...



    The style is applied to the sequence number which by default
    is reset to 1 for the first list item in an ordered list.
-->


<!ENTITY % OLStyle "CDATA">



<!-- Ordered (numbered) list -->



<!ELEMENT ol (li)+>
<!ATTLIST ol
  %attrs;
  type        %OLStyle;      #IMPLIED
  compact     (compact)      #IMPLIED
  start       %Number;       #IMPLIED
  >



<!-- single column list (DEPRECATED) --> 
<!ELEMENT menu (li)+>
<!ATTLIST menu
  %attrs;
  compact     (compact)     #IMPLIED
  >



<!-- multiple column list (DEPRECATED) --> 
<!ELEMENT dir (li)+>
<!ATTLIST dir
  %attrs;
  compact     (compact)     #IMPLIED
  >



<!-- LIStyle is constrained to: "(%ULStyle;|%OLStyle;)" -->
<!ENTITY % LIStyle "CDATA">



<!-- list item -->



<!ELEMENT li %Flow;>
<!ATTLIST li
  %attrs;
  type        %LIStyle;      #IMPLIED
  value       %Number;       #IMPLIED
  >



<!-- definition lists - dt for term, dd for its definition -->



<!ELEMENT dl (dt|dd)+>
<!ATTLIST dl
  %attrs;
  compact     (compact)      #IMPLIED
  >



<!ELEMENT dt %Inline;>
<!ATTLIST dt
  %attrs;
  >



<!ELEMENT dd %Flow;>
<!ATTLIST dd
  %attrs;
  >



<!--=================== Address ==========================================-->



<!-- information on author -->



<!ELEMENT address (#PCDATA | %inline; | %misc.inline; | p)*>
<!ATTLIST address
  %attrs;
  >



<!--=================== Horizontal Rule ==================================-->



<!ELEMENT hr EMPTY>
<!ATTLIST hr
  %attrs;
  align       (left|center|right) #IMPLIED
  noshade     (noshade)      #IMPLIED
  size        %Pixels;       #IMPLIED
  width       %Length;       #IMPLIED
  >



<!--=================== Preformatted Text ================================-->



<!-- content is %Inline; excluding 
        "img|object|applet|big|small|sub|sup|font|basefont" -->



<!ELEMENT pre %pre.content;>
<!ATTLIST pre
  %attrs;
  width       %Number;      #IMPLIED
  xml:space   (preserve)    #FIXED 'preserve'
  >



<!--=================== Block-like Quotes ================================-->



<!ELEMENT blockquote %Flow;>
<!ATTLIST blockquote
  %attrs;
  cite        %URI;          #IMPLIED
  >



<!--=================== Text alignment ===================================-->



<!-- center content -->
<!ELEMENT center %Flow;>
<!ATTLIST center
  %attrs;
  >



<!--=================== Inserted/Deleted Text ============================-->



<!--
  ins/del are allowed in block and inline content, but its
  inappropriate to include block content within an ins element
  occurring in inline content.
-->


<!ELEMENT ins %Flow;>
<!ATTLIST ins
  %attrs;
  cite        %URI;          #IMPLIED
  datetime    %Datetime;     #IMPLIED
  >



<!ELEMENT del %Flow;>
<!ATTLIST del
  %attrs;
  cite        %URI;          #IMPLIED
  datetime    %Datetime;     #IMPLIED
  >



<!--================== The Anchor Element ================================-->



<!-- content is %Inline; except that anchors shouldn't be nested -->



<!ELEMENT a %a.content;>
<!ATTLIST a
  %attrs;
  %focus;
  charset     %Charset;      #IMPLIED
  type        %ContentType;  #IMPLIED
  name        NMTOKEN        #IMPLIED
  href        %URI;          #IMPLIED
  hreflang    %LanguageCode; #IMPLIED
  rel         %LinkTypes;    #IMPLIED
  rev         %LinkTypes;    #IMPLIED
  shape       %Shape;        "rect"
  coords      %Coords;       #IMPLIED
  target      %FrameTarget;  #IMPLIED
  >



<!--===================== Inline Elements ================================-->



<!ELEMENT span %Inline;> <!-- generic language/style container -->
<!ATTLIST span
  %attrs;
  >



<!ELEMENT bdo %Inline;>  <!-- I18N BiDi over-ride -->
<!ATTLIST bdo
  %coreattrs;
  %events;
  lang        %LanguageCode; #IMPLIED
  xml:lang    %LanguageCode; #IMPLIED
  dir         (ltr|rtl)      #REQUIRED
  >



<!ELEMENT br EMPTY>   <!-- forced line break -->
<!ATTLIST br
  %coreattrs;
  clear       (left|all|right|none) "none"
  >



<!ELEMENT em %Inline;>   <!-- emphasis -->
<!ATTLIST em %attrs;>



<!ELEMENT strong %Inline;>   <!-- strong emphasis -->
<!ATTLIST strong %attrs;>



<!ELEMENT dfn %Inline;>   <!-- definitional -->
<!ATTLIST dfn %attrs;>



<!ELEMENT code %Inline;>   <!-- program code -->
<!ATTLIST code %attrs;>



<!ELEMENT samp %Inline;>   <!-- sample -->
<!ATTLIST samp %attrs;>



<!ELEMENT kbd %Inline;>  <!-- something user would type -->
<!ATTLIST kbd %attrs;>



<!ELEMENT var %Inline;>   <!-- variable -->
<!ATTLIST var %attrs;>



<!ELEMENT cite %Inline;>   <!-- citation -->
<!ATTLIST cite %attrs;>



<!ELEMENT abbr %Inline;>   <!-- abbreviation -->
<!ATTLIST abbr %attrs;>



<!ELEMENT acronym %Inline;>   <!-- acronym -->
<!ATTLIST acronym %attrs;>



<!ELEMENT q %Inline;>   <!-- inlined quote -->
<!ATTLIST q
  %attrs;
  cite        %URI;          #IMPLIED
  >



<!ELEMENT sub %Inline;> <!-- subscript -->
<!ATTLIST sub %attrs;>



<!ELEMENT sup %Inline;> <!-- superscript -->
<!ATTLIST sup %attrs;>



<!ELEMENT tt %Inline;>   <!-- fixed pitch font -->
<!ATTLIST tt %attrs;>



<!ELEMENT i %Inline;>   <!-- italic font -->
<!ATTLIST i %attrs;>



<!ELEMENT b %Inline;>   <!-- bold font -->
<!ATTLIST b %attrs;>



<!ELEMENT big %Inline;>   <!-- bigger font -->
<!ATTLIST big %attrs;>



<!ELEMENT small %Inline;>   <!-- smaller font -->
<!ATTLIST small %attrs;>



<!ELEMENT u %Inline;>   <!-- underline -->
<!ATTLIST u %attrs;>



<!ELEMENT s %Inline;>   <!-- strike-through -->
<!ATTLIST s %attrs;>



<!ELEMENT strike %Inline;>   <!-- strike-through -->
<!ATTLIST strike %attrs;>



<!ELEMENT basefont EMPTY>  <!-- base font size -->
<!ATTLIST basefont
  id          ID             #IMPLIED
  size        CDATA          #REQUIRED
  color       %Color;        #IMPLIED
  face        CDATA          #IMPLIED
  >



<!ELEMENT font %Inline;> <!-- local change to font -->
<!ATTLIST font
  %coreattrs;
  %i18n;
  size        CDATA          #IMPLIED
  color       %Color;        #IMPLIED
  face        CDATA          #IMPLIED
  >



<!--==================== Object ======================================-->
<!--
  object is used to embed objects as part of HTML pages.
  param elements should precede other content. Parameters
  can also be expressed as attribute/value pairs on the
  object element itself when brevity is desired.
-->



<!ELEMENT object (#PCDATA | param | %block; | form | %inline; | %misc;)*>
<!ATTLIST object
  %attrs;
  declare     (declare)      #IMPLIED
  classid     %URI;          #IMPLIED
  codebase    %URI;          #IMPLIED
  data        %URI;          #IMPLIED
  type        %ContentType;  #IMPLIED
  codetype    %ContentType;  #IMPLIED
  archive     %UriList;      #IMPLIED
  standby     %Text;         #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  name        NMTOKEN        #IMPLIED
  tabindex    %Number;       #IMPLIED
  align       %ImgAlign;     #IMPLIED
  border      %Pixels;       #IMPLIED
  hspace      %Pixels;       #IMPLIED
  vspace      %Pixels;       #IMPLIED
  >



<!--
  param is used to supply a named property value.
  In XML it would seem natural to follow RDF and support an
  abbreviated syntax where the param elements are replaced
  by attribute value pairs on the object start tag.
-->
<!ELEMENT param EMPTY>
<!ATTLIST param
  id          ID             #IMPLIED
  name        CDATA          #REQUIRED
  value       CDATA          #IMPLIED
  valuetype   (data|ref|object) "data"
  type        %ContentType;  #IMPLIED
  >



<!--=================== Java applet ==================================-->
<!--
  One of code or object attributes must be present.
  Place param elements before other content.
-->
<!ELEMENT applet (#PCDATA | param | %block; | form | %inline; | %misc;)*>
<!ATTLIST applet
  %coreattrs;
  codebase    %URI;          #IMPLIED
  archive     CDATA          #IMPLIED
  code        CDATA          #IMPLIED
  object      CDATA          #IMPLIED
  alt         %Text;         #IMPLIED
  name        NMTOKEN        #IMPLIED
  width       %Length;       #REQUIRED
  height      %Length;       #REQUIRED
  align       %ImgAlign;     #IMPLIED
  hspace      %Pixels;       #IMPLIED
  vspace      %Pixels;       #IMPLIED
  >



<!--=================== Images ===========================================-->



<!--
   To avoid accessibility problems for people who aren't
   able to see the image, you should provide a text
   description using the alt and longdesc attributes.
   In addition, avoid the use of server-side image maps.
-->



<!ELEMENT img EMPTY>
<!ATTLIST img
  %attrs;
  src         %URI;          #REQUIRED
  alt         %Text;         #REQUIRED
  name        NMTOKEN        #IMPLIED
  longdesc    %URI;          #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  ismap       (ismap)        #IMPLIED
  align       %ImgAlign;     #IMPLIED
  border      %Length;       #IMPLIED
  hspace      %Pixels;       #IMPLIED
  vspace      %Pixels;       #IMPLIED
  >



<!-- usemap points to a map element which may be in this document
  or an external document, although the latter is not widely supported -->



<!--================== Client-side image maps ============================-->



<!-- These can be placed in the same document or grouped in a
     separate document although this isn't yet widely supported -->



<!ELEMENT map ((%block; | form | %misc;)+ | area+)>
<!ATTLIST map


  %i18n;
  %events;
  id          ID             #REQUIRED
  class       CDATA          #IMPLIED
  style       %StyleSheet;   #IMPLIED
  title       %Text;         #IMPLIED
  name        CDATA          #IMPLIED
  >



<!ELEMENT area EMPTY>


<!ATTLIST area


  %attrs;
  %focus;
  shape       %Shape;        "rect"
  coords      %Coords;       #IMPLIED
  href        %URI;          #IMPLIED
  nohref      (nohref)       #IMPLIED
  alt         %Text;         #REQUIRED
  target      %FrameTarget;  #IMPLIED
  >



<!--================ Forms ===============================================-->



<!ELEMENT form %form.content;>   <!-- forms shouldn't be nested -->



<!ATTLIST form
  %attrs;
  action      %URI;          #REQUIRED
  method      (get|post)     "get"
  name        NMTOKEN        #IMPLIED
  enctype     %ContentType;  "application/x-www-form-urlencoded"
  onsubmit    %Script;       #IMPLIED
  onreset     %Script;       #IMPLIED
  accept      %ContentTypes; #IMPLIED
  accept-charset %Charsets;  #IMPLIED
  target      %FrameTarget;  #IMPLIED
  >



<!--
  Each label must not contain more than ONE field
  Label elements shouldn't be nested.
-->


<!ELEMENT label %Inline;>


<!ATTLIST label
  %attrs;
  for         IDREF          #IMPLIED
  accesskey   %Character;    #IMPLIED
  onfocus     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED
  >



<!ENTITY % InputType
  "(text | password | checkbox |
    radio | submit | reset |
    file | hidden | image | button)"
   >



<!-- the name attribute is required for all but submit & reset -->



<!ELEMENT input EMPTY>

     <!-- form control -->
<!ATTLIST input


  %attrs;
  %focus;
  type        %InputType;    "text"
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED
  checked     (checked)      #IMPLIED
  disabled    (disabled)     #IMPLIED
  readonly    (readonly)     #IMPLIED
  size        CDATA          #IMPLIED
  maxlength   %Number;       #IMPLIED
  src         %URI;          #IMPLIED
  alt         CDATA          #IMPLIED
  usemap      %URI;          #IMPLIED
  onselect    %Script;       #IMPLIED
  onchange    %Script;       #IMPLIED
  accept      %ContentTypes; #IMPLIED
  align       %ImgAlign;     #IMPLIED
  >



<!ELEMENT select (optgroup|option)+>  <!-- option selector -->
<!ATTLIST select
  %attrs;
  name        CDATA          #IMPLIED
  size        %Number;       #IMPLIED
  multiple    (multiple)     #IMPLIED
  disabled    (disabled)     #IMPLIED
  tabindex    %Number;       #IMPLIED
  onfocus     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED
  onchange    %Script;       #IMPLIED
  >



<!ELEMENT optgroup (option)+>   <!-- option group -->
<!ATTLIST optgroup
  %attrs;
  disabled    (disabled)     #IMPLIED
  label       %Text;         #REQUIRED
  >



<!ELEMENT option (#PCDATA)>     <!-- selectable choice -->
<!ATTLIST option


  %attrs;
  selected    (selected)     #IMPLIED
  disabled    (disabled)     #IMPLIED
  label       %Text;         #IMPLIED
  value       CDATA          #IMPLIED
  >



<!ELEMENT textarea (#PCDATA)>     <!-- multi-line text field -->
<!ATTLIST textarea
  %attrs;
  %focus;
  name        CDATA          #IMPLIED
  rows        %Number;       #REQUIRED
  cols        %Number;       #REQUIRED
  disabled    (disabled)     #IMPLIED
  readonly    (readonly)     #IMPLIED
  onselect    %Script;       #IMPLIED
  onchange    %Script;       #IMPLIED
  >



<!--


  The fieldset element is used to group form fields.
  Only one legend element should occur in the content
  and if present should only be preceded by whitespace.
-->


<!ELEMENT fieldset (#PCDATA | legend | %block; | form | %inline; | %misc;)*>
<!ATTLIST fieldset
  %attrs;
  >



<!ENTITY % LAlign "(top|bottom|left|right)">



<!ELEMENT legend %Inline;>     <!-- fieldset label -->
<!ATTLIST legend
  %attrs;
  accesskey   %Character;    #IMPLIED
  align       %LAlign;       #IMPLIED
  >



<!--


 Content is %Flow; excluding a, form, form controls, iframe
--> 
<!ELEMENT button %button.content;>  <!-- push button -->
<!ATTLIST button
  %attrs;
  %focus;
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED
  type        (button|submit|reset) "submit"
  disabled    (disabled)     #IMPLIED
  >



<!-- single-line text input control (DEPRECATED) -->
<!ELEMENT isindex EMPTY>
<!ATTLIST isindex
  %coreattrs;
  %i18n;
  prompt      %Text;         #IMPLIED
  >



<!--======================= Tables =======================================-->



<!-- Derived from IETF HTML table standard, see [RFC1942] -->



<!--
 The border attribute sets the thickness of the frame around the
 table. The default units are screen pixels.



 The frame attribute specifies which parts of the frame around
 the table should be rendered. The values are not the same as
 CALS to avoid a name clash with the valign attribute.
-->


<!ENTITY % TFrame "(void|above|below|hsides|lhs|rhs|vsides|box|border)">



<!--


 The rules attribute defines which rules to draw between cells:



 If rules is absent then assume:
     "none" if border is absent or border="0" otherwise "all"
-->



<!ENTITY % TRules "(none | groups | rows | cols | all)">
 

 
<!-- horizontal placement of table relative to document -->
<!ENTITY % TAlign "(left|center|right)">



<!-- horizontal alignment attributes for cell contents



  char        alignment char, e.g. char=':'
  charoff     offset for alignment char


-->


<!ENTITY % cellhalign
  "align      (left|center|right|justify|char) #IMPLIED
   char       %Character;    #IMPLIED
   charoff    %Length;       #IMPLIED"
  >



<!-- vertical alignment attributes for cell contents -->
<!ENTITY % cellvalign
  "valign     (top|middle|bottom|baseline) #IMPLIED"
  >



<!ELEMENT table


     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
<!ELEMENT caption  %Inline;>
<!ELEMENT thead    (tr)+>
<!ELEMENT tfoot    (tr)+>
<!ELEMENT tbody    (tr)+>
<!ELEMENT colgroup (col)*>
<!ELEMENT col      EMPTY>
<!ELEMENT tr       (th|td)+>
<!ELEMENT th       %Flow;>
<!ELEMENT td       %Flow;>



<!ATTLIST table


  %attrs;
  summary     %Text;         #IMPLIED
  width       %Length;       #IMPLIED
  border      %Pixels;       #IMPLIED
  frame       %TFrame;       #IMPLIED
  rules       %TRules;       #IMPLIED
  cellspacing %Length;       #IMPLIED
  cellpadding %Length;       #IMPLIED
  align       %TAlign;       #IMPLIED
  bgcolor     %Color;        #IMPLIED
  >



<!ENTITY % CAlign "(top|bottom|left|right)">



<!ATTLIST caption
  %attrs;
  align       %CAlign;       #IMPLIED
  >



<!--


colgroup groups a set of col elements. It allows you to group
several semantically related columns together.
-->


<!ATTLIST colgroup
  %attrs;
  span        %Number;       "1"
  width       %MultiLength;  #IMPLIED
  %cellhalign;
  %cellvalign;
  >



<!--


 col elements define the alignment properties for cells in
 one or more columns.



 The width attribute specifies the width of the columns, e.g.



     width=64        width in screen pixels
     width=0.5*      relative width of 0.5



 The span attribute causes the attributes of one
 col element to apply to more than one column.
-->
<!ATTLIST col
  %attrs;
  span        %Number;       "1"
  width       %MultiLength;  #IMPLIED
  %cellhalign;
  %cellvalign;
  >



<!--
    Use thead to duplicate headers when breaking table
    across page boundaries, or for static headers when
    tbody sections are rendered in scrolling panel.



    Use tfoot to duplicate footers when breaking table
    across page boundaries, or for static footers when
    tbody sections are rendered in scrolling panel.



    Use multiple tbody sections when rules are needed
    between groups of table rows.
-->
<!ATTLIST thead
  %attrs;
  %cellhalign;
  %cellvalign;
  >



<!ATTLIST tfoot
  %attrs;
  %cellhalign;
  %cellvalign;
  >



<!ATTLIST tbody
  %attrs;
  %cellhalign;
  %cellvalign;
  >



<!ATTLIST tr
  %attrs;
  %cellhalign;
  %cellvalign;
  bgcolor     %Color;        #IMPLIED
  >



<!-- Scope is simpler than headers attribute for common tables -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">



<!-- th is for headers, td for data and for cells acting as both -->



<!ATTLIST th
  %attrs;
  abbr        %Text;         #IMPLIED
  axis        CDATA          #IMPLIED
  headers     IDREFS         #IMPLIED
  scope       %Scope;        #IMPLIED
  rowspan     %Number;       "1"
  colspan     %Number;       "1"
  %cellhalign;
  %cellvalign;
  nowrap      (nowrap)       #IMPLIED
  bgcolor     %Color;        #IMPLIED
  width       %Length;       #IMPLIED
  height      %Length;       #IMPLIED
  >



<!ATTLIST td


  %attrs;
  abbr        %Text;         #IMPLIED
  axis        CDATA          #IMPLIED
  headers     IDREFS         #IMPLIED
  scope       %Scope;        #IMPLIED
  rowspan     %Number;       "1"
  colspan     %Number;       "1"
  %cellhalign;
  %cellvalign;
  nowrap      (nowrap)       #IMPLIED
  bgcolor     %Color;        #IMPLIED
  width       %Length;       #IMPLIED
  height      %Length;       #IMPLIED
  >

Generally, we use

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

for creating a transitional page dtd for validation, but if you want to use your custom transitional DTD then you can use

<!DOCTYPE html SYSTEM ...>

, SYSTEM is used to create you own dtd with customized format using XML. It is not accessible by other users.

For more details, you can directly visit the sites:

• Basics of DTD
• Introduction of DTD's

Object-Oriented JavaScript: Using the `Prototype` Property

# Object-Oriented JavaScript: Using the `Prototype` Property# Prototyping objects: looking at the “prototype” property# Object interaction in JavaScript: applying Inheritance through the “prototype” property# Traversing object properties: using the “for in” loop structure

read more | digg story

Drag Div with Cursor using JavaScript

Event Handling
For this context, we generally use window.event method for creating drag functionality with the help of javascript.

First of all, we need take the position of mouse or cursor within the document with the help of clientX for X position of mouse, clientY for Y position of the cursor.

Example:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drag Div</title>
<script language="JavaScript" type="text/javascript">

function abc()
{
<!--
var IE = document.all;

var tempX = 0;
var tempY = 0;

var element=document.getElementById("x");

//element.onclick=see();

document.onmousemove=function getMouseXY(abc) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX;
tempY = event.clientY;
} else { // grab the x-y pos.s if browser is NS
tempX = abc.pageX;
tempY = abc.pageY;
}
// catch possible negative values in NS4
// if (tempX < 0){tempX = 0}
// if (tempY < 0){tempY = 0}
// in the text fields named MouseX and MouseY
//document.Show.MouseX.value = tempX;
//document.Show.MouseY.value = tempY;

element.style.marginLeft = tempX + "px";
element.style.marginTop = tempY + "px";
}

}
//-->
</script>

</head>

<body onload="abc();">
<div id="x" style="background:#FFCC33; padding:10px; width:150px;">This is Testing!!</div>
</body>
</html>

See other useful Events

Complete Tutorial Reference:- HTML, CSS & JavaScript

This is the place, where u can find the good JavaScript Tutorials ever. It includes DOM, Advanced JavaScript, HTML Reference Tutorial (for Beginner, Intermediate and Advanced Learners), Css Advanced Reference Tutorials for Web, Javascript Quick Tutorial with Examples and AJAX.

read more | digg story

Ajax : Basic to Advance

Ajax stands for Asynchronous JavaScript and XML, it is a method of creating/developing interactive web based applications so that user requests immediately. Ajax includes major web tools like JavaScript, Document Object Model (DOM), Dynamic HTML (DHTML), Extensible Markup Language (XML), XSLT, Cascading Style Sheets (CSS), HTML (Hype-Text Markup Language), ActiveXObjects and XMLHttpRequest.

In short, AJAX is a method for retriving dynamic data very Easily with lots of data.

The Major role of Ajax is to handle responseText and responseXML parsing.

The responseXML method is very handy to use, for this context developer has to create the XML for that further it requires data parsing. The first thing developer will have to do is target the root node of the XML response:

" var client = data.get.responseXML.documentElement; "

For more help, simply you can visit the site: www.w3schools.com/ajax/default.asp

25 Excellent Ajax Techniques and Examples

If you’re interested in expanding your understanding of Ajax techniques and practices, check out these 25 hand-picked Ajax articles and tutorials that outline various methods and concepts involved in the development of Ajax-based applications.

read more | digg story

Top 5 javascript and Ajax frameworks

A list of the top 5 javascript frameworks and features. These are the best and mostly used frameworks which have integrated technologies related to Ajax, XML, DTD, etc.

read more | digg story

Best Ajax and Javascript Solutions

Mocha UI
Mocha is a rich web Based applications UI Library built on the MooRD Tools javascript and ajax frameworks. The Mocha Core UI components are made with advanced canvas tag graphics.

This is the best use of ajax frameworks, is developed by Moo RD Tools and for advanced learners anyone can visit Moo Tools.net (its a completely javascript frameworks source).



Facebook Ajax Search
The autocomplete functionality of adding multiple users to messages used on Facebook. “I’d seen it in Facebook before, generally based on core Ajax and Javascript Tool search which has a really decent implementation of this concept is a modern programming principles”.

These days there are lots of APIs available for this kind of functionality. Which have unique features for using XML file into that Frameworks.






In this context, there is a UI control that replaces a standard HTML textarea. The Rich Text Editor’s Toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. The tool is based upon Yahoo UI Library.

CSS Science: CSS Frameworks and Code Reusability

No one has to write the duplicate CSS Code or XHTML-Markup over and over again. At some point you have to define classes and IDs throughout the web-projects. To avoid unnecessary mistakes or codes you might have to start not from a dummy file, but from an almost standard format. The latter might contain some basic definitions you’d write in your code anyway. However, once you’ve decided to create such a standard format then you need to make sure it is really bulletproof — besides, if the CSS Stylesheet also sets up optimal typographic rules and basic form styling, that would be the best.

And this is how, CSS Frameworks and CSS Reusability of Code are becoming important.Get CSS Frameworks and CSS Reusability

Using them, you can get yourself a perfect CSS stylesheet and markup master, save your time and ensure the best quality of your code from the very beginning to advanced level. But what are CSS Frameworks? And why do you need the Reset for?

so the answer is here....

u can simply download the advanced css book Download CSS Book

Best Book for HTML & CSS Tutorial

The highly used web browsers like — Firefox 3, Opera 9.5 and Internet Explorer 7 — provides a lot of features which seems to save and secure lots of work time for web-developers in future.

In that Reference, the Best Tutorial e-Book over HTML & CSS can be found here.

Download Now!

Reference Tutorials in Technorati.com

All user those who are interested and are used to Web, AJAX, CSS, Javascript Tutorials for thei Rich Web Application can found here.

Users can see my profile over Technorati.com mentioned below or can directly visit Technorati.com

Technorati Profile

Hottest Online Gaming!!

This section covers the best online games over the website which includes action games, puzzling games, arcade games, etc., named Games Flame.

About Games Flame

Recently created site with major online games for all kind of users.more...

or you can visit the complete details of the site by reading this blog Learn More About GamesFlame.com