I'm new to this, I just want to take Data from the xml file that I wrote
here's my HTML code, I'm trying to change the text inside the li tags at the top
<div class = "container-fluid" style = "padding: 0px;" data-role="page">
<div class = "col-xs-12" style = "padding: 0px; background-color: rgb(255,255,255);">
<p style = "transform: translateY(13px); float: left; width: 70%; margin-left: 10px;">Articles Types</p>
<button id = "scrollmenu" data-role="button" data-icon="bullets" data-iconpos="notext" data-theme="b" data-inline="true" style = "float: right;"> </button>
<ul id = "mylist" class = "col-xs-12 text-center" style = "list-style-type: none; display: none;">
<li><a href = "#">Fun</a></li>
<li><a href = "#">News</a></li>
<li><a href = "#">Sports</a></li>
</ul>
</div>
<div class = "col-xs-12" style = "padding: 0px;">
<img src = "Backgroundimage.png" style = "width: 100%;"/>
<div style = "background-color: rgba(0,0,0, 0.6); width: 100%; position: absolute; bottom: 0;">
<p style = "transform: translateY(13px); float: left; width: 70%; color: white; margin-left: 10px;">Boats in Hawai</p>
<button id = "pressthis" data-role="button" data-icon="carat-d" data-iconpos="notext" data-theme="b" data-inline="true" style = "float: right;">My button</button>
</div>
</div>
<div id = "b1" class = "col-xs-12 text-center" style = "width: 100%; display:none; background-color: rgba(220,220,220, 0.7);">
<p>Khaled is just testing the phonegap</p>
<img src = "Backgroundimage2.png" style = "width: 200px; display: inline-block;"/>
<p>Thank you for helping him</p>
</div>
<div class = "col-xs-12" style = "padding: 0px;">
<img src = "Backgroundimage3.png" style = "width: 100%;"/>
<div style = "background-color: rgba(0,0,0, 0.6); width: 100%; position: absolute; bottom: 0;">
<p style = "transform: translateY(13px); float: left; width: 70%; color: white; margin-left: 10px;">Best Places for Vacation</p>
<button id = "pressthis2" data-role="button" data-icon="carat-d" data-iconpos="notext" data-theme="b" data-inline="true" style = "float: right;">My button</button>
</div>
</div>
<div id = "b2" class = "col-xs-12 text-center" style = "width: 100%; display:none; background-color: rgba(220,220,220, 0.7);">
<p>Khaled is just testing the phonegap</p>
<img src = "Backgroundimage2.png" style = "width: 200px; display: inline-block;"/>
<p>Thank you for helping him</p>
</div>
<div class = "col-xs-12" style = "padding: 0px;">
<img src = "Backgroundimage.png" style = "width: 100%;"/>
<div style = "background-color: rgba(0,0,0, 0.6); width: 100%; position: absolute; bottom: 0;">
<p style = "transform: translateY(13px); float: left; width: 70%; color: white; margin-left: 10px;">Boats in Hawai</p>
<button id = "pressthis3" data-role="button" data-icon="carat-d" data-iconpos="notext" data-theme="b" data-inline="true" style = "float: right;">My button</button>
</div>
</div>
<div id = "b3" class = "col-xs-12 text-center" style = "width: 100%; display:none; background-color: rgba(220,220,220, 0.7);">
<p>Khaled is just testing the phonegap</p>
<img src = "Backgroundimage2.png" style = "width: 200px; display: inline-block;"/>
<p>Thank you for helping him</p>
</div>
<div class = "col-xs-12" style = "padding: 0px;">
<img src = "Backgroundimage3.png" style = "width: 100%;"/>
<div style = "background-color: rgba(0,0,0, 0.6); width: 100%; position: absolute; bottom: 0;">
<p style = "transform: translateY(13px); float: left; width: 70%; color: white; margin-left: 10px;">Best Places for Vacation</p>
<button id = "pressthis4" data-role="button" data-icon="carat-d" data-iconpos="notext" data-theme="b" data-inline="true" style = "float: right;">My button</button>
</div>
</div>
<div id = "b4" class = "col-xs-12 text-center" style = "width: 100%; display:none; background-color: rgba(220,220,220, 0.7);">
<p>Khaled is just testing the phonegap</p>
<img src = "Backgroundimage2.png" style = "width: 200px; display: inline-block;"/>
<p>Thank you for helping him</p>
</div>
<div class = "col-xs-12" style = "padding: 0px; text-align: center; height: 50px; background-color: cadetblue;">
<p style = "margin-top: 10px;">Just a Footer</p>
</div>
Here's my XML
<?xml version="1.0" encoding="UTF-8"?>
<site>
<scrollbar>
<scrollname> Articles Types </scrollname>
<ul>
<li>Success</li>
<li>Success</li>
<li>Success</li>
</ul>
</scrollbar>
<articles>
<article>
<thumbimg> <img src = "Backgroundimage2.png" /> </thumbimg>
<articletitle>Boats in Hawai</articletitle>
<articlebody>
<p>Khaled is just testing the phonegap</p>
<img src = "Backgroundimage2.png" />
<p>Thank you for helping him</p>
</articlebody>
</article>
<article>
<thumbimg> <img src = "Backgroundimage2.png" /> </thumbimg>
<articletitle>Best Places for Vacation</articletitle>
<articlebody>
<p>Khaled is just testing the phonegap</p>
<img src = "Backgroundimage2.png" />
<p>Thank you for helping him</p>
</articlebody>
</article>
<article>
<thumbimg> <img src = "Backgroundimage2.png" /> </thumbimg>
<articletitle>Boats in Hawai</articletitle>
<articlebody>
<p>Khaled is just testing the phonegap</p>
<img src = "Backgroundimage2.png" />
<p>Thank you for helping him</p>
</articlebody>
</article>
<article>
<thumbimg> <img src = "Backgroundimage2.png" /> </thumbimg>
<articletitle>Best Places for Vacation</articletitle>
<articlebody>
<p>Khaled is just testing the phonegap</p>
<img src = "Backgroundimage2.png" />
<p>Thank you for helping him</p>
</articlebody>
</article>
</articles>
<footer>
<p>Just a Footer</p>
</footer>
</site>
and here's my Javascript, it supposed to get the text from the xml but it doesn't!
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","http://atomkit.com/khaledsan/pgtest/content.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x = xmlDoc.getElementsByTagName("article");
var u = xmlDoc.getElementsByTagName("ul");
for (i = 0; i < u.length; i++){
var t = u[i].getElementsByTagName("li")[0].childNodes[0].nodeValue;
document.getElementsByTagName("li")[i].innerHTML;
}
<!-- for the buttons -->
$(document).ready(function(){
$("#pressthis").click(function(){
$("#b1").slideToggle(800);
});
$("#pressthis2").click(function(){
$("#b2").slideToggle(800);
});
$("#pressthis3").click(function(){
$("#b3").slideToggle(800);
});
$("#pressthis4").click(function(){
$("#b4").slideToggle(800);
});
$("#scrollmenu").click(function(){
$("#mylist").slideToggle(800);
});
});
No comments:
Post a Comment