Entries Tagged as 'DOM'

jquery quick tips to replace javascript code from file learn jquery

The jquery is a simple and quick to use javascript library and provides a
rich set of functionality in just few lines of code.The $ symbol is also set up as
a shortcut for jQuery.If you want the convenience of the $ function for jQuery without colliding with some other use of the global $ function, the jQuery documentation suggests the following idiom:

(function($) {
    // Within this block, $ is a reference to jQuery
    // Neat, and clean
})(jQuery);

Referring elements of document in jquery code.
jQuery(’div.panel’)
    All divs with class=“panel”
jQuery(’p#intro’)
    The paragraph with id=“intro”
jQuery(’div#content a:visible’)
    All visible links inside the div with id=“content”
jQuery(’input[@name=email]‘)
    All input fields with name=“email”
jQuery(’table.orders tr:odd’)
    “odd” numbered rows in a table with class “orders”
jQuery(’a[@href^="http://"]‘)
    All external links (links that start with http://)
jQuery(’p[a]‘)
    All paragraphs that contain one or more links  if (t.val() == title) {
              t.val();
              t.removeClass(‘blur’);

$(‘input:text).hint();

var title = t.attr(‘title’);
    // only apply logic if the element has the attribute
    if (title) {
      // on blur, set value to title attr if text is blank
      t.blur(function (){
        if (t.val() == ) {
          t.val(title);
          t.addClass(‘blur’);
        }
      });
      // on focus, set value to blank if current value 
      // matches title attr
      t.focus(function (){
        if (t.val() == title) {
          t.val();
          t.removeClass(‘blur’);
        }
      });
t.parents(‘form:first()’).submit(function(){
  if (t.val() == title) {
    t.val();
    t.removeClass(‘blur’);
  }
})

$(‘#search, #username, input.hint’).hint(); // etc
 <!--adsensestart-->

Node List Javascript | Traverse nodes Dom Elements In javascript

The NodeList object represents a live collection of Node objects. This means that any alterations to the number or properties of nodes is immediately reflected in the list. This list permits indexed access to individual nodes as well as iteration through the collection. To demonstrate this Object we shall use the following simple XML file ‘library.xml’.

<library>
<book>
<category>fiction</category>
<title>Eyeless in Gaza</title>
<author>Aldous Huxley</author>
</book>
<book>
<category>classics</category>
<title>John Barleycorn</title>
<author>Jack London</author>
</book>
</library>

We shall now create a NodeList object of all the ‘title’ elements using the document’s getElementsByTagName method. The number of nodes in the collection is determined using the length property, and their nodeValue properties are displayed by accessing each in turn through the item method.

Code (JavaScript):
var xml_doc = new ActiveXObject(”Microsoft.XMLDOM”);
xml_doc.async = false;
xml_doc.load(”library.xml”);

var title_nodes = xml_doc.getElementsByTagName(”title”);
var n_titles = title_nodes.length
for (i = 0; i < n_titles; i++)
document.write(title_nodes.item(i).text + “<br>”);

Output:
Eyeless in Gaza
John Barleycorn

There are also Microsoft extensions for this object.
PROPERTIES

length Property
This property returns the number of items in the NodeList collection.

Syntax: NodeList.length

METHODS

item Method
This method returns the item at the specified index of the Node collection. These are numbered from 0 to one less than the value of the length property. Using an invalid index returns null.

Syntax: NodeList.item(index)


Simple Flash and XML sample Learning flash and xml

About this article

This article will show you basic connection between flash and XML, it will show you what to add in the flash file in order to be able to read tags from an XML file and then use that data inside flash.

Few details about the XML file

The XML that we will use will look like this, you can create a file called sample.xml and paste this in it:

<?xml version=“1.0″ encoding= “UTF-8″ ?>
<products>
<product product_name=“Flash Book” price=“25.00″></product>
<product product_name=“Flash CD” price=“10.00″></product>
<product product_name=“Dreamweaver CD” price=“50.00″></product>
</products>

In the above XML file the “products” are called XML tags and “product_name” and “price” are called attributes.
“Products” is the first child of the XML file and the lines inside are child 0,1,2 of the first child.

To get the value “Flash Book” you have to write this in ActionScript:
my_xml.firstChild.childNodes[0].attributes.product_name
To get the value “Flash CD” use this code in ActionScript:
my_xml.firstChild.childNodes[1].attributes.product_name

The flash file preview

Contents of the flash file

In our samples we created 6 text fields where the data (product names and product prices) is written but is not important how you use the data, in this article we want to explain how to read the XML data.

Now the contents in the flash file…. open Macromedia Flash, create a blank file, click on first key frame, open Actions panel and paste this code:

// define an XML object called “my_xml”
my_xml = new XML();
// load data from an external XML file into “my_xml” object
my_xml.load(“sample.xml”);
// what to do when data is loaded … Call a function (”my_function” in this case)
my_xml.onLoad = my_function;
// ignore “white spaces”, text nodes that only contain white space are discarded
my_xml.ignoreWhite = 1;
// function contents
function my_function() {
// take the data from the XML lines (line 0,1,2) and place that data inside text fields
text_field_1.text = my_xml.firstChild.childNodes[0].attributes.product_name;
text_field_2.text = my_xml.firstChild.childNodes[1].attributes.product_name;
text_field_3.text = my_xml.firstChild.childNodes[2].attributes.product_name;
//
text_field_a.text = my_xml.firstChild.childNodes[0].attributes.price;
text_field_b.text = my_xml.firstChild.childNodes[1].attributes.price;
text_field_c.text = my_xml.firstChild.childNodes[2].attributes.price;
}

As you may see, the above code loads data from an external XML file called “sample.xml” and places the data from the XML tags to text fields inside the flash file.

For example: to access the product name on first line (”Flash Book”) the ActionScript line inside the flash file will be like this:

my_xml.firstChild.childNodes[0].attributes.product_name

“my_xml” is the name given to the new XML object at beginning of ActionScript code; the next code are the levels, it reads from first level (”firstChild”) this is “products” tag, from “products” tags it loads first child (”childNodes[0]“) and the attribute name is “product_name”.
So the above line will return the value “Flash Book”.
As you can see counting starts from zero when counting XML lines.

Product_name, price and XML tags are defined by user, in an XML file you can name the tags and the attributes as you wish, the tags are not predefined like in HTML language.