Hide / Show Content: XML & DOM

Video tutorial illustrating the mechanism of hiding and unhiding / showing the XML content inside the DIV tag using DOM.

Before proceeding watch:

Display XML Data With DOM( innerHTML ): XML & Javascript

Business card Content
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
<html>
 <head><title>Our Business Card!</title>
 <link rel="stylesheet" href="Style.css" />
  <script language="javascript" type="text/javascript">
 
  function display1() {
 
   var base    = document.getElementById("myBiz");
   var person1 = base.getElementsByTagName("companyName")[0];
   var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
   var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
   var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
   var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
   var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
   var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
   var company;
  company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
 
  document.getElementById("name").innerHTML = name;
  document.getElementById("phone1").innerHTML = phone1;
  document.getElementById("phone2").innerHTML = phone2;
  document.getElementById("email").innerHTML = email;
  document.getElementById("company").innerHTML = company;
 }
 
 function display2() {
 
  var base = document.getElementById("myBiz");
  var person1 = base.getElementsByTagName("companyName")[1];
  var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
  var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
  var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
  var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
  var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
  var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
  var company;
 company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
 
   document.getElementById("name").innerHTML = name;
   document.getElementById("phone1").innerHTML = phone1;
   document.getElementById("phone2").innerHTML = phone2;
   document.getElementById("email").innerHTML = email;
   document.getElementById("company").innerHTML = company;
 }
 
 function hide() {
          document.getElementById("email").style.display = 'none';
      }
 
      function show() {
          document.getElementById("email").style.display = '';
      }
 
  </script>
 
 </head>
 <body onload="display2()">
 
 <xml id="myBiz" style="display: none;">
 <companynames>
 
  <companyname>
    <name>Satish B</name>
    <phone type="home" primary="call me">(91) 9844552841</phone>
    <phone type="work">(91) 9844119841</phone>
    <email>satish@technotip.org</email>
    <company>Technotip IT Solutions</company>
  </companyname>
 
  <companyname>
    <name>Shwetha</name>
    <phone type="home">(91) 123456789</phone>
    <phone type="work" primary="call me">(91) 987654321</phone>
    <email>shwetha@microsoft.com</email>
    <company>Microsoft</company>
  </companyname>
 
 
</companynames>
 </xml>
 <div class="companyName">
<div class="Name" id="name"></div>
<div class="phone1" id="phone1"></div>
<div class="phone2" id="phone2"></div>
<div class="email" id="email"></div>
<div class="company" id="company"></div>
 </div>
<a href="javascript:hide()">Hide Email</a> || 
<a href="javascript:show()">Show Email</a>
 
 </body>
</html>

Here we get the element by its id and set its display style property to none, to hide it from the user. Later when the user clicks on Show link, we remove the display property none and leave it blank.

Video Tutorial: Hide / Show Content: XML & DOM


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=CFoBb-4PJ8A [Watch the Video In Full Screen.]



Business card Styling
Style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
    display: block;
    padding: 10px;
    margin: 20px;
    background-color: ivory;
    width: 400px;
    border: 5px;
    border-color: gray;
    text-align: left;
}
 
.Name 
{
    display: block;
    font-weight: bold;
}
 
.phone 
{
    display: block;
}
 
.company
{
    display:block;
}
 
.email
{
    display: block;
    color: Green;
}

This simple feature can be used to hide and unhide user profile information to the search boots or unauthorized users.
By default, set the email and other fields as hidden. Once the user is logged in or is a friend of the person whose profile is being viewed, then allow the person to access data via show function.

Display XML Data With DOM( innerHTML ): XML & Javascript

Fetch data / content from XML and display it inside the html div tags using innerHTML property of DOM.

Follow this video tutorial before proceeding: Read / Access XML Data With DOM: XML & Javascript

Only change we’re doing from previous day tutorial is to:
Call the javascript function in the body of html.
Display XML data inside DIV tags using innerHTML property of the DOM.

Business card Content
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html>
 <head><title>Our Business Card!</title>
 <link rel="stylesheet" href="Style.css" />
  <script language="javascript" type="text/javascript">
 
  function display1() {
 
   var base    = document.getElementById("myBiz");
   var person1 = base.getElementsByTagName("companyName")[0];
   var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
   var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
   var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
   var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
   var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
   var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
   var company;
  company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
 
  document.getElementById("name").innerHTML = name;
  document.getElementById("phone1").innerHTML = phone1;
  document.getElementById("phone2").innerHTML = phone2;
  document.getElementById("email").innerHTML = email;
  document.getElementById("company").innerHTML = company;
 }
 
 function display2() {
 
  var base = document.getElementById("myBiz");
  var person1 = base.getElementsByTagName("companyName")[1];
  var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
  var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
  var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
  var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
  var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
  var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
  var company;
 company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
 
   document.getElementById("name").innerHTML = name;
   document.getElementById("phone1").innerHTML = phone1;
   document.getElementById("phone2").innerHTML = phone2;
   document.getElementById("email").innerHTML = email;
   document.getElementById("company").innerHTML = company;
 }
 
 
  </script>
 
 </head>
 <body onload="display2()">
 
 <xml id="myBiz" style="display: none;">
 <companynames>
 
  <companyname>
    <name>Satish B</name>
    <phone type="home" primary="call me">(91) 9844552841</phone>
    <phone type="work">(91) 9844119841</phone>
    <email>satish@technotip.org</email>
    <company>Technotip IT Solutions</company>
  </companyname>
 
  <companyname>
    <name>Shwetha</name>
    <phone type="home">(91) 123456789</phone>
    <phone type="work" primary="call me">(91) 987654321</phone>
    <email>shwetha@microsoft.com</email>
    <company>Microsoft</company>
  </companyname>
 
 
</companynames>
 </xml>
 <div class="companyName">
<div class="Name" id="name"></div>
<div class="phone1" id="phone1"></div>
<div class="phone2" id="phone2"></div>
<div class="email" id="email"></div>
<div class="company" id="company"></div>
 </div>
 </body>
</html>

We’re fetching the XML data using getElementById and getElementsByTagName properties and storing them in javascript variables.
Later using innerHTML property assigning the value to the DIV tags.

Video Tutorial: Display XML Data With DOM( innerHTML ): XML & Javascript


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=JHiw8oB_TF4 [Watch the Video In Full Screen.]



Also some stylesheet / CSS coding to make it look good while presenting on the browser.

Business card Styling
Style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
    display: block;
    padding: 10px;
    margin: 20px;
    background-color: ivory;
    width: 400px;
    border: 5px;
    border-color: gray;
    text-align: left;
}
 
.Name 
{
    display: block;
    font-weight: bold;
}
 
.phone 
{
    display: block;
}
 
.company
{
    display:block;
}
 
.email
{
    display: block;
    color: Green;
}

For these basic CSS, look at our Cascading Stylesheet Tutorials.

By displaying the contents on the html page we could facilitate the users to add / remove / modify the XML contents. Going forward, we would show you how to do these using some simple DOM properties.

Output on the browser
Name: Shwetha
home: (91) 123456789
work: (91) 987654321
email: shwetha@microsoft.com
Company: Microsoft

Read / Access XML Data With DOM: XML & Javascript

Video tutorial illustrating the manipulation of XML data using DOM [ Document Object Model ]

Using CSS Level 2, we couldn’t change the order in which we would display / access the XML data. To solve that and many more limitations, we make use of DOM.
In this tutorial you can learn, accessing the required XML content and arrange it as you need it.

Business card Content
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
 <head><title>Our Business Card!</title>
 
  <script language="javascript" type="text/javascript">
 
  function display1() {
 
   var base    = document.getElementById("myBiz");
   var person1 = base.getElementsByTagName("companyName")[0];
   var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
   var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
   var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
   var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
   var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
   var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
   var company;
   comanyy = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
 
   alert("Business Card: \n\n" + name + "\n" + phone1 + "\n" 
            + phone2 + "\n" + email + "\n" + company);
  }
 
 
 function display2() {
 
   var base = document.getElementById("myBiz");
   var person2 = base.getElementsByTagName("companyName")[1];
   var name = "Name: " + person2.getElementsByTagName("Name")[0].firstChild.data;
   var phLable1 = person2.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
   var phone1 = phLable1 + person2.getElementsByTagName("phone")[0].firstChild.data;
   var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
   var phone2 = phLable2 + person2.getElementsByTagName("phone")[1].firstChild.data;
   var email = "email: " + person2.getElementsByTagName("email")[0].firstChild.data;
   var company;
   comapany = "Company: " + person2.getElementsByTagName("company")[0].firstChild.data;
 
   alert("Business Card: \n\n" + name + "\n" + phone1 + "\n" 
            + phone2 + "\n" + email + "\n" + company);
 }
 
  </script>
 
 </head>
 <body>
 
 <xml id="myBiz" style="display: none;">
 
 <companynames>
 
  <companyname>
    <name>Satish B</name>
    <phone type="home" primary="call me">(91) 9844552841</phone>
    <phone type="work">(91) 9844119841</phone>
    <email>satish@technotip.org</email>
    <company>Technotip IT Solutions</company>
  </companyname>
 
  <companyname>
    <name>Shwetha</name>
    <phone type="home">(91) 123456789</phone>
    <phone type="work" primary="call me">(91) 987654321</phone>
    <email>shwetha@microsoft.com</email>
    <company>Microsoft</company>
  </companyname>
 
</companynames>
 
 
 </xml>
 
 <a href="javascript:display1()">Satish: Technotip IT Solutions</a><br />
 <a href="javascript:display2()">Shwetha: Microsoft</a>
 
 </body>
</html>

Here we’ve written entire thing in one file, for the purpose of demonstration.
We would highly recommend you to write javascript, css in external file and link it to the html file.

Video Tutorial: Read / Access XML Data With DOM: XML & Javascript


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=pJiJWWKEbU0 [Watch the Video In Full Screen.]



First we fetch the root tag and assign it to a javascript variable called base. Using this as a reference, we fetch the sub-element and using which we fetch all its child elements and inturn get the data present inside them.

Remember, the string inside the tags Name, phone email and company is also considered separate node.

Inside the index.html file we have taken two anchor tags:
Satish: Technotip IT Solutions
Shwetha: Microsoft

which invoke the javascript functions and then display the information of respective people.

If in case we have hundreds or thousands of people in our XML file, we could use looping and dynamically fetch XML data and display it more meaningfully and with less effort(due to proper programmatical automation).

Business Card Design: XML & CSS Level 2

Video tutorial to show the design of business cards using XML and Cascading Stylesheet Level 2.

Continuing the tutorial from previous day: Business Card Design: XML & CSS

In the previous tutorial there was no facility to display the labels using CSS.
To over come that problem, we step into CSS Level 2, wherein we include the label information to the presentation layer using CSS level 2 coding.

Business card Content
companyNames.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< ?xml version="1.0" encoding="utf-8"?>
< ?xml-stylesheet type="text/css" href="Style.css" ?>
<companynames>
 
  <companyname>
    <name>Satish B</name>
    <phone type="home" primary="call me">(91) 9844552841</phone>
    <phone type="work">(91) 9844119841</phone>
    <email>satish@technotip.org</email>
    <company>Technotip IT Solutions</company>
  </companyname>
 
  <companyname>
    <name>Shwetha</name>
    <phone type="home">(91) 123456789</phone>
    <phone type="work" primary="call me">(91) 987654321</phone>
    <email>shwetha@microsoft.com</email>
    <company>Microsoft</company>
  </companyname>
 
 
</companynames>

There is no change with the companyName.xml file.
To know more details, please visit Business Card Design: XML & CSS

Business card Styling Information + CSS Level 2 coding
Style.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
    display: block;
    padding: 10px;
    margin: 20px;
    background-color: ivory;
    width: 400px;
    border: 5px;
    border-color: gray;
    text-align: left;
}
 
Name 
{
    display: block;
    font-weight: bold;
}
 
phone 
{
    display: block;
}
 
company
{
    display:block;
}
 
email
{
    display: block;
    color: Green;
}
 
email:before { content: "email: " }
phone:before  { content: attr(type) ": " }
phone[primary]:after { content:"(" attr(primary) ")" }

Last 3 lines of coding is the only thing changed from previous day tutorial.
Those 3 lines are CSS Level 2 coding!

using :before pseudo class selector we tell the parser to include email: as content before displaying the actual email id.

similarly, using :after we include the label after the actual content.

attr(type) this selects the value assigned to the attribute type from companyNames.xml file and displays it.
phone[primary]:after There are multiple phone numbers, one of which is made primary. So phone[primary] points to the phone number which has the attribute primary.

Video Tutorial: Business Card Design: XML & CSS Level 2


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=GHNx22hRwwM [Watch the Video In Full Screen.]



I’ve shown CSS Level 2 working on all 3 browsers: Internet Explorer, Mozilla Firefox and Google Chrome.
But some older versions of Internet Explorer doesn’t support CSS Level 2 coding.
To solve this issue( cross browser compatibility issue ), we can make use of XSLT [ eXtensible Stylesheet Language Transformations ]. We’ll see it in coming video tutorials.

Output on the browser
Satish B
home: (91) 9844552841(call me)
work: (91) 9844119841
email: satish@technotip.org
Technotip IT Solutions

Shwetha
home: (91) 123456789
work: (91) 987654321(call me)
email: shwetha@microsoft.com
Microsoft


Business Card Design: XML & CSS

Video tutorial to show the design of business cards using XML and Cascading Stylesheet.

In this example we apply styling to business cards of two people.
The primary information i.e., the content is in XML and the presentation is taken care by CSS.

Base tag or the root tag name is companyNames
and the elements inside root tag is companyName
Other tags present inside companyName tag are Name, phone, email, company.

Example:
Two people are Satish B and Shwetha, they are working in Technotip IT Solutions and Microsoft respectively.

Business card Content
companyNames.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< ?xml version="1.0" encoding="utf-8"?>
< ?xml-stylesheet type="text/css" href="Style.css" ?>
<companynames>
 
  <companyname>
    <name>Satish B</name>
    <phone type="home" primary="primary">(91) 9844552841</phone>
    <phone type="work">(91) 9844119841</phone>
    <email>satish@technotip.org</email>
    <company>Technotip IT Solutions</company>
  </companyname>
 
  <companyname>
    <name>Shwetha</name>
    <phone type="home">(91) 123456789</phone>
    <phone type="work" primary="primary">(91) 987654321</phone>
    <email>shwetha@microsoft.com</email>
    <company>Microsoft</company>
  </companyname>
 
 
</companynames>

This file has already been connected to a external stylesheet.

Business card Styling Information
Style.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
    display: block;
    padding: 10px;
    margin: 20px;
    background-color: ivory;
    width: 300px;
    border: 5px;
    border-color: gray;
 
 
}
 
Name 
{
    display: block;
    font-weight: bold;
}
 
phone 
{
    display: block;
}
 
company
{
    display:block;
}
 
email
{
    display: block;
    color: Green;
}

Here we make all the elements display as block. Next add some padding and margin..and a light background color.

Video Tutorial: Business Card Design: XML & CSS


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=cb3vZ08H3Hw [Watch the Video In Full Screen.]



output on browser

Satish B
(91) 9844552841
(91) 9844119841
satish@technotip.org
Technotip IT Solutions

Shwetha
(91) 123456789
(91) 987654321
shwetha@microsoft.com
Microsoft


Attach CSS StyleSheet To XML Document

Video tutorial illustrating: attaching css stylesheet to XML document to give better appearance to it on the browser. In short: for presentation purpose.

To achieve this, we need to first create a stylesheet file, and attach it or associate our XML file with this stylesheet. We do it with the help of a processing instruction.

Processing Instruction

1
< ?xml-stylesheet type="text/css" href="Style.css" ?>

you can give absolute or relative path in href.

This tells the XML parser that the attached css file has to be referenced while rendering the XML file content.

Complete code
companyNames.xml

1
2
3
4
5
6
< ?xml version="1.0" encoding="utf-8"?>
< ?xml-stylesheet type="text/css" href="Style.css" ?>
<companyname>
  IBM, Oracle, Apple, Maestro, Microsoft ..
  <!-- Google, Yahoo! -->
</companyname>

Stylesheet code
Style.css

1
2
3
4
5
6
companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
}

This way we have separated the content and styling information and made it into two separate files.
Helps keep the XML and Design/CSS coding separate and we could hire separate teams to work on these things.

Video Tutorial: Attach CSS StyleSheet To XML Document


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=7WH6dMI_cfE [Watch the Video In Full Screen.]



Output on the browser:
IBM, Oracle, Apple, Maestro, Microsoft ..

Output will have red color with 18px size and with font-family of verdana.

Basic XML: Starting With Root Tag

Video tutorial explains the basics of XML and some rules to be followed to write the XML elements.
Also illustrating the way the raw XML files are displayed on the modern browsers.

Its a tag based language much like HTML, the difference is we can makeup our own tags.
XML is used to structure and describe the information.

Header Information

1
< ?xml version="1.0" encoding="utf-8"?>

it informs about the xml version and the encoding, i.e., the standard encoding utf-8
This is optional. But still recommended by W3C
And it is automatically generated by many tools, so lets keep it! It doesn’t hurt 🙂

Full code

1
2
3
4
5
< ?xml version="1.0" encoding="utf-8"?>
<xml>
  IBM, Oracle, Apple, Maestro, Microsoft ..
  <!-- Google, Yahoo! -->
</xml>

Each XML document must have only 1 root tag.
Multiple root tag gives errors.

Rules To Write Elements(Tags) Names
Can begin with underscore or letter ..followed by zero or more letters, digits, hyphens, periods and underscores.

Video Tutorial: Starting With Root Tag: Basic XML


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=6KUzJSEixXI [Watch the Video In Full Screen.]



Output in the browsers
this is on Chrome

1
2
3
4
5
6
This XML file does not appear to have any style information associated with it. 
The document tree is shown below.
<companynames>
IBM, Oracle, Apple, Maestro, Microsoft ..
<!-- Google, Yahoo! -->
</companynames>