jQuery and XML

It is delightful to find an elegant way to read, parse XML file and put parts of its content to the HTML file on the fly. It would be cumbersome for a HTML file if it
keeps all the content in itself. And we can separate the content and its way of presentation. Thanks to the jQuery Ajax function. Terse and easy. Save me lots of efforts!

1. First you may have a XML file like this:
<project type="group">
<name>MyEBag</name>
<time>2009 Fall</time>
<description>Online Transaction Processing</description>
<skill>Oracle</skill>
<skill>SQL</skill>
</project>
<project type="group">
<name>MOCC</name>
<time>2010 Fall</time>
<description>Museum website</description>
<skill>JSP</skill>
<skill>Javascript</skill>
<skill>SQL</skill>
</project>

2. in the HTML file,
//put the code in the jQuery document ready function, the code will be loaded after the page is loaded
$(document).ready(function(){

$.ajax({
type: "GET",
url: "project.xml", //the xml file name
dataType: "xml",
success: function(xml){ // if the xml file is loaded successfully then execute....
//for each project, append its name to the html element id=#prjdesc
//"project" and "name" are the labels in the xml file
$(xml).find("project").each(function(){
$("#prjdesc").append("<h3>"+$(this).find("name").text()+"</h3>");
$("#prjdesc").append($(this).attr("type"));
$("#prjdesc").append($(this).find("time").text());
});
}
});

3. the html file may end like this
<div id="#prjdesc">
<h3>MyEBag</h3>
group2009Fall
<h3>MOCC</h3>
group2010Fall
</div>




Reference: XML.com

CSS- Two layer Navigation bar

Two-layer navigation bar is neat and commonly seen. Today while I was going through some jQuery examples, I found it can be implemented purely through editing CSS style-sheet

image reference

First, edit the navigation bar to be two layer UL (unordered list) like this:

• Item1
  
  
  
  • Item1.1
  
  
  • Item1.2
  
  
  
  


• Item2
  
  
  
  • Item2.1
  
  
  • Item2.2
  
  
  
  

Then edit the CSS Style-sheet
(1) let's say the class="nav" for the first layer ul element
(2) how to remove the marker in front of list-item? and remove margin and padding from list:

.nav,.nav ul{
list-style: none;
margin: 0px;
padding: 0px;
}

(3) how to display the first layer of navigation as horizontal?

.nav li{
float: left;
position: relative;
}

(4) how to display the second layer of navigation vertically while the first layered of navigation link is hovered?
a. hide the second layer of navigation at first by setting its absolute position (relative to its first parent) as a very negative number (such as -1000px, out of window)

.nav ul{
width: 100px;
position: absolute;
top: -1000px;
left: -1px;
}

b. set the width of the second layer as 100px. If the width is too long or the font-size of list-item is small, there might be more than one list-items appear in the same row.

.nav a{
font: bold 25px Arial;
display: block;
}

c. while the list item of the first navigation layer is hovered, its descendent ul appears relative to it

.nav li:hover ul{
top:25px;
}

(5)change the background color of a link in the second navigation list when it is hovered

.nav ul a:hover {
background: #ccc;
color: #000;
}

A great example: here
You can click on "View" the source code to see its stylesheet. :)

prevent robot from crawling your site

Today, my prof. asked me to prevent our website from robot's crawling. After google, I found it is quite simple. There are two ways to prevent robots from crawling your web pages
One way is to ask search engine to remove your whole site from index and prevent its crawling in the future. And the other way is to control access to your website on a page-by-page basis.

To prevent robot from crawling your website, put an robot.txt in your root directory
The content of robots.txt is like:

User-agent: *
Disallow: /

To control the access to your website on a page-by-page basis:

Add the following tag to the head in the web page you are going to restrict the access

<meta name="robots" content="noindex">

How to check your robots.txt?
The Google Webmaster Tools help to check. But you must have a google account.
Block or remove pages from using a robots.txt , click on 'Test A robots.txt file'

Reference
Using Meta Tags to Block Access to your site
About the Robot Meta Tag