Html5 Tutorial - Future Technology

Wednesday 19 June 2013

PhoneGap tutorial parsing xml file and displaying results on android screen.

Parsing xml file using JavaScript for PhoneGap Applications.

Hi Friends i am going to show how to parse xml file using javascript without using using any jQuery  Mobile Here is the xml file i am going to parse : 
    
    
        MakeMyTrip.com
        MakeMyTrip.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/makemytrip-logo.jpg
    
    
        GoIbibo.com
        GoIbibo.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/goibibo_logo.png
    
    
        Abhibus.com
        Abhibus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/abhibus-logo.png
    
    
        Travelyaari.com
        Travelyaari.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/travelyaari-com-logo-w240.png
    
    
        Redbus.in
        Redbus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/logo_bc9228d_163.jpg
    
    
        Expedia.co.in
        Expedia.co.in is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/expedia-logo.png
    
    
        Other websites
        We Provide more websites that offer good Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/travel-agency-logos.jpg
I am going to parse above xml file and display results as below Here is the JavaScript file source code : Travel.js 
function travel(){	
	if (window.XMLHttpRequest)
	 {	// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	 }
	else
	 {	// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	 }
		xmlhttp.open("GET","Travel.xml",false);
		xmlhttp.send();
		xmlDoc=xmlhttp.responseXML;		
		travels = xmlDoc.getElementsByTagName("website");
		alert("travels:"+travels.length);
		var websites = [];
		var description = [];
		var logos = [];		
		for(var travel=0;travel
Here is the html source code : Coupons.html 


  
    
    
    Minimal AppLaud App


	  
	    

 
  
  
 
  
  
  
 Coupons Shop
Css file used for this page : Styles.css source code 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Verdana, Arial, Tahoma, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

a { text-decoration: none; }

/** content display **/
#view { display: block; max-width: 800px; padding: 0; margin: 0; }

#container { display: block; margin-top: 55px; }
#container ul { }
#container ul a li { 
	display: block;
	width: 100%;
	height: 90px;
	border-bottom: 1px solid #b9b9b9;
	border-top: 1px solid #f7f7f7;
	background: #ebebeb;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff) to(#ebebeb));
  background-image: -webkit-linear-gradient(top, #ffffff, #ebebeb);
  background-image:    -moz-linear-gradient(top, #ffffff, #ebebeb);
  background-image:      -o-linear-gradient(top, #ffffff, #ebebeb);
  background-image:         linear-gradient(top, #ffffff, #ebebeb); 
}

#container ul a { display: block; position: relative; width: 100%; }
#container ul li h2 { font-size: 2.1em; line-height: 1.3em; font-weight: normal; letter-spacing: -0.03em; padding-top: 4px; color: #55678d; }
#container ul li p.desc { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }

#container ul li .price { position: absolute; bottom: 10px; left: 90px; font-size: 1.2em; font-weight: bold; color: #6ea247; }

#container ul li img.thumbnail { 
	background: #fff;
	display: inline-block;
	float: left;
	padding: 2px;
	margin-top: 6px;
	margin-left: 5px;
	margin-right: 8px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

#container ul a:hover li h2 { color: #7287b1; }
#container ul a:hover li p.desc { color: #757575; }

#container ul a:hover li {
background: #efefef;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff) to(#efefef));
background-image: -webkit-linear-gradient(top, #ffffff, #efefef);
background-image:    -moz-linear-gradient(top, #ffffff, #efefef);
background-image:      -o-linear-gradient(top, #ffffff, #efefef);
background-image:         linear-gradient(top, #ffffff, #efefef);
}

/** top header bar **/
header { 
display: block;
position: fixed; 
top: 0;
z-index: 9999;
height: 55px;
width: 100%;
max-width: 800px;
border-bottom: 1px solid #262422;

background: #195d95;

}

header h2 { font-size: 2.4em; font-family: Tahoma, Arial, sans-serif; font-weight: bold; line-height: 55px; text-align: center; color: #efefef; text-shadow: 1px 1px 0px #000;
 animation-duration: 3s;
  animation-name: slidein;
}
 
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }
 
  to {
    margin-left: 0%;
    width: 100%;
  }
}


/** basic media queries **/
@media only screen and (max-width: 480px) {
	#container ul li h2 { font-size: 1.75em; }
	
	#container ul li img.thumbnail { margin-top: 2px; }
}

@media only screen and (max-width: 320px) {
	#container ul li p.desc { display: none; }
}


/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
ScreenShot
Posted by at
Labels: , , , ,

1 comment:

  1. kittu24 January 2020 at 22:11

    Find Redbus Offers, Zoomcar offers, Discount Coupons, Promo Code & Deals For Bus Booking at Lowest Price. Get up to 70% discount while booking bus tickets at Tracedeals. Up to 10% Discount On Bus Ticket Bookings.
    Redbus discount coupons
    Redbus offers
    zoomcar discount offers

    ReplyDelete

Subscribe to: Post Comments (Atom)