html - JavaScript & XML How to bring in more information? -
i have following javascript brings in data xml file:
function ajaxrequest(){ var activexmodes=["msxml2.xmlhttp", "microsoft.xmlhttp"] //activex versions check in ie if (window.activexobject){ //test support activexobject in ie first (as xmlhttprequest in ie7 broken) (var i=0; i<activexmodes.length; i++){ try{ return new activexobject(activexmodes[i]) } catch(e){ //suppress error } } } else if (window.xmlhttprequest) // if mozilla, safari etc return new xmlhttprequest() else return false } var mygetrequest=new ajaxrequest() if (mygetrequest.overridemimetype) mygetrequest.overridemimetype('text/xml') mygetrequest.onreadystatechange=function(){ if (mygetrequest.readystate==4){ if (mygetrequest.status==200 || window.location.href.indexof("http")==-1){ var xmldata=mygetrequest.responsexml //retrieve result xml object var rssentries=xmldata.getelementsbytagname("tutorial") var output='<ul>' (var i=0; i<rssentries.length; i++){ output+='<li>' output+='<a href="'+rssentries[i].getelementsbytagname('link')[0].firstchild.nodevalue+'">' output+=rssentries[i].getelementsbytagname('title')[0].firstchild.nodevalue+'</a>' output+='</li>' } output+='</ul>' document.getelementbyid("result").innerhtml=output } else{ alert("an error has occured making request") } } } mygetrequest.open("get", "../xml/tutorials.xml", true) mygetrequest.send(null) here xml file:
<?xml version="1.0" encoding="iso-8859-1"?> <rss version="0.91"> <channel> <title>script tutorials</title> <link>http://www.script-tutorials.com</link> <description>web topics tutorials</description> <language>en</language> <tutorial> <date>19/08/2014</date> <category>html/css</category> <title>sliding single-level menu</title> <description>menu 1 of important components of site. today difficult find website without navigation menu. today have prepared modern looking single-level menu. might think again, menu looks interesting, feature sliding panel highlights active elements.</description> <link>http://www.script-tutorials.com/sliding-single-level-menu/</link> </tutorial> <tutorial> <date>01/11/2013</date> <category>html/css</category> <title>whirling css3 dropdown menu</title> <description>various dropdown menus can created css3 of selectors. connect imagination , create new , unique design. in todays lesson, create new css3 drop-down menu new effect: when hover on upper menu items, submenu items appear whirling. follow tutorial see step step process of building menu.</description> <link>http://www.script-tutorials.com/whirling-dropdown-menu/</link> </tutorial> <tutorial> <date>22/03/2012</date> <category>html/css</category> <title>pure css3 lavalamp menu</title> <description>i think have seen animated menus lavalamp effect (based on jquery plugin). today tell how repeat same behavior css3 (without javascript). have use css3 transitions in our menu (to animate elements). so, if ready, lets start.</description> <link>http://www.script-tutorials.com/pure-css3-lavalamp-menu/</link> </tutorial> <tutorial> <date>13/03/2012</date> <category>html/css</category> <title>css3 vertical multicolor 3d menu</title> <description>in our new tutorial create new stylish vertical multicolor , crossbrowser css3 menu 3d animation (i use css3 transition, perspective , transform properties) , pure css3 color switcher. ul-li-based menu</description> <link>http://www.script-tutorials.com/css3-vertical-multicolor-3d-menu/</link> </tutorial> <tutorial> <date>13/02/2012</date> <category>html/css</category> <title>css3 multicolor menu</title> <description>in our new tutorial create new nice multicolor , crossbrowser css3 menu sliding (i use css3 transition) , color pure css3 color switcher. ul-li-based menu.</description> <link>http://www.script-tutorials.com/css3-multicolor-menu/</link> </tutorial> <tutorial> <date>03/01/2012</date> <category>html/css</category> <title>css3 multilevel menu transition , animation</title> <description>in our new tutorial create new nice css3 menu interesting behavior, use css3 transition , animation. ul-li-based multilevel menu.</description> <link>http://www.script-tutorials.com/css3-multilevel-menu-with-transition-and-animation/</link> </tutorial> <tutorial> <date>25/09/2013</date> <category>ajax</category> <title>php ajax calendar</title> <description>the calendar integral part of many websites, frequently, 1 of numerous jquery calendar plugins, can implemented using php. today show how create monthly calendar ability scroll (left , right arrows) through months using ajax technology. besides of ajax, calendar has important advantage, mobile-ready calendar responsive layout. before start writing code, recommend @ our demo see going do.</description> <link>http://www.script-tutorials.com/php-ajax-calendar/</link> </tutorial> <tutorial> <date>16/11/2011</date> <category>ajax</category> <title>creating own ajax poll system</title> <description>today prepared new interesting tutorial creating own poll system (ajax) projects php. polls, answers , results going keep in single sql table. when vote 1 of variants jquery post data, , animate our results in realtime.</description> <link>http://www.script-tutorials.com/creating-own-ajax-poll-system/</link> </tutorial> <tutorial> <date>11/10/2010</date> <category>ajax</category> <title>autocomplete php, jquery, mysql , xml</title> <description>today have new article php. tell implementation autocomplete sites. data can located in different sources directly in js code, in database, , in xml file.</description> <link>http://www.script-tutorials.com/autocomplete-with-php-jquery-mysql-and-xml/</link> </tutorial> <tutorial> <date>23/09/2010</date> <category>ajax</category> <title>creating ajax based file uploaders</title> <description>how upload files without refreshing whole page during submitting. hope interesting you. lets check 2 methods using ordinary iframes , external library. using jquery in work (i it).</description> <link>http://www.script-tutorials.com/ajax-file-upload-methods/</link> </tutorial> <tutorial> <date>05/09/2013</date> <category>javascript</category> <title>how create lightbox ultra using css , javascript</title> <description>the creation of css animation has brought amazing feature web designers , coders tinker on show own creativity. advent of lightbox, have better tool use in creating own images 3d animation effects background dimming capability removes distraction of viewing image better. combining lightbox css , javascript offer web coders valuable tool enhance techniques in creating great 3d animation lightbox using following concepts use in own coding design projects</description> <link>http://www.script-tutorials.com/how-to-create-a-lightbox-ultra-using-css-and-javascript/</link> </tutorial> <tutorial> <date>23/10/2013</date> <category>javascript</category> <title>html5 audio player playlist</title> <description>many of faced task of creating audio player @ least once in life. quite , choose 1 of available players, flash player. however, may have noticed, these flash players not work on mobile devices (iphone / android). today going tell how create own audio player (using html5 technology). player consists of next elements: title, author, cover, basic controls (play / pause, rewind / forward) , 2 sliders (jquery ui sliders): volume slider , and song tracker, , more: have playlist list of available songs.</description> <link>http://www.script-tutorials.com/html5-audio-player-with-playlist/</link> </tutorial> <tutorial> <date>10/08/2012</date> <category>javascript</category> <title>how display twitter posts using javascript</title> <description>i think displaying twitter posts on website wonderful way show people in-time news. feature can useful project. because can can inspire websites visitors follow on twitter. going create simple script loads twitter posts , renders html format using jsrender jquery library. on client side.</description> <link>http://www.script-tutorials.com/how-to-display-twitter-posts-using-javascript/</link> </tutorial> <tutorial> <date>01/02/2012</date> <category>javascript</category> <title>form validation javascript , php</title> <description>in tutorial, show how create attractive, pleasant form website, , explain how dynamically validate using javascript. server-side validation php covered (to make 100% safe). tutorial add more functionality forms leads better user experience , better website quality.</description> <link>http://www.script-tutorials.com/form-validation-with-javascript-and-php/</link> </tutorial> <tutorial> <date>08/09/2010</date> <category>javascript</category> <title>easily animate web buttons/objects using jquery</title> <description>today tell animations in web using jquery. know jquery offer several default methods of effects: fade(in/out/to), hide, show, slide(down/toggle/up), toggle. ok, if need more? so, animation us! slide between 2 states using effects. default, easing optional param, use effects use additional jquery.easing.js library.</description> <link>http://www.script-tutorials.com/easily-animate-web-buttonsobjects-using-jquery/</link> </tutorial> <tutorial> <date>01/06/2010</date> <category>javascript</category> <title>import rss feeds using jfeed (jquery)</title> <description>this simple tutorial show how import rss feeds of site own custom area/block of website. can used news imported yahoo, bbc etc. know, rss feeds used trasnfer news people. today ill tell rss feeds , show how make own rss aggregator. in result, able display various rss feeds on website nite , modern design.</description> <link>http://www.script-tutorials.com/import-rss-feeds-using-jfeed-jquery/</link> </tutorial> <tutorial> <date>04/08/2010</date> <category>javascript</category> <title>importing multiple rss feeds using newswidget (jquery)</title> <description>some times ago told how display rss feed @ our website. times ago friend ask me how display in single box feeds multiple sources. decided investigate , located newswidget library. lets check possibilities. </description> <link>http://www.script-tutorials.com/importing-multiple-rss-feeds-using-newswidget-jquery/</link> </tutorial> <tutorial> <date>27/11/2014</date> <category>design</category> <title>visual structure definitive guide web ui designers</title> <description>creativity works wonders when comes designing ui(user interface) website or web application. right changing composition, color , size else forms crucial component of web design ui; can perform , more revealing creative side of personality. visual hierarchy can give needed push web ui designing initiative. including right type of visual elements web design, can grab attention of targeted audience within small period of time. keep on reading blog find more creating visual structure of web ui(user interface).</description> <link>http://www.script-tutorials.com/visual-structure-a-definitive-guide-for-web-ui-designers/</link> </tutorial> <tutorial> <date>08/07/2014</date> <category>design</category> <title>how design site?</title> <description>in article @ such aspects of website designing as: choosing editor preparing site layout, defining sizes of site, how save sources, how work text , more. article targeted beginning web designers.</description> <link>http://www.script-tutorials.com/how-to-design-the-site/</link> </tutorial> <tutorial> <date>14/05/2014</date> <category>design</category> <title>20 tips , examples creating perfect design portfolio</title> <description>creating , managing portfolio best way market yourself. reflection of work , essential attract clients. designer, must have portfolio. if so, need ask few questions before can begin develop further. how time allow in dedication improving portfolio? think have best stuff on it? 1 thing sure not matter whether portfolio exists physically or digitally, point keep improving i</description> <link>http://www.script-tutorials.com/20-tips-and-examples-for-creating-the-perfect-design-portfolio/</link> </tutorial> <tutorial> <date>25/06/2014</date> <category>design</category> <title>what color model?</title> <description>probably engaged in advertising, had hear such phrases light model, print file should in cmyk, , posting on site rgb. may know existence of such color models greyscale, lab, hsb , hls. these color models? how cmyk color model different rgb or lab?</description> <link>http://www.script-tutorials.com/what-is-a-color-model/</link> </tutorial> </channel> </rss> and outputs html file below:
http://www.imagebam.com/image/2787cc369647181
however, under each link .... date, category , description. line break between each tutorial.
any ideas?
i know how turn off list style ... need other xml data not?
output+=rssentries[i].getelementsbytagname('date')[0].firstchild.nodevalue+ output+=rssentries[i].getelementsbytagname('category')[0].firstchild.nodevalue+ output+=rssentries[i].getelementsbytagname('description')[0].firstchild.nodevalue+ i have tried using these cannot work.
i want this:
sliding single-level menu
html/css
19/08/2014
menu 1 of important components of site. today difficult find website without navigation menu. today have prepared modern looking single-level menu. might think again, menu looks interesting, feature sliding panel highlights active elements.
if want create separation between groups of <li>s in <ul> can insert either or <hr> or both between groups
output+='<li>' output+='<a href="'+rssentries[i].getelementsbytagname('link')[0].firstchild.nodevalue+'">' output+=rssentries[i].getelementsbytagname('title')[0].firstchild.nodevalue+'</a>' output+='</li>' output+='<hr>' output+='<li>< ></li>' so if trying make second line extension of first line can turn off bullet list-style-type: none; whole effect this:
<ul> <li> line 1 </li> <li style="list-style-type: none;" > line 2 </li> <hr> <li style="list-style-type: none;"> </> <li> line 1 </li> <li style="list-style-type: none;" > line 2 </li> <hr> <li style="list-style-type: none;"> </> </ul>
Comments
Post a Comment