Category: XML

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

 Our Business Card!
   
   
Hide Email || Show Email

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


[youtube https://www.youtube.com/watch?v=CFoBb-4PJ8A]

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



Business card Styling
Style.css

.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

 Our Business Card!

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


[youtube https://www.youtube.com/watch?v=JHiw8oB_TF4]

YouTube Link: https://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

.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: Satish
home: (91) 123456789
work: (91) 987654321
email: [email protected]
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>[email protected]</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>[email protected]</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


[youtube https://www.youtube.com/watch?v=pJiJWWKEbU0]

YouTube Link: https://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>[email protected]</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>[email protected]</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


[youtube https://www.youtube.com/watch?v=GHNx22hRwwM]

YouTube Link: https://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: [email protected]
Technotip IT Solutions

Shwetha
home: (91) 123456789
work: (91) 987654321(call me)
email: [email protected]
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>[email protected]</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>[email protected]</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


[youtube https://www.youtube.com/watch?v=cb3vZ08H3Hw]

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



output on browser

Satish B
(91) 9844552841
(91) 9844119841
[email protected]
Technotip IT Solutions

Shwetha
(91) 123456789
(91) 987654321
[email protected]
Microsoft