javascript - Custom CSS does not apply to Body element with jQuery -


my custom css not apply body element , when page loads, of elements overridden jquery css. if not put jquery css, adds 'div' tag @ end of page text 'loading'.

my html:

<!doctype html> <html> <head> <meta name="viewport" content="width=device-width"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <link rel="stylesheet" href="custom.css" /> <title>title</title> </head> <body> <p id="rssfeedload">loadin...</p> <p id="rssfeed"> </p> <script> //debugger; var yquery = 'http://news.google.com/news?geo=somezip&output=rss'; var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeuricomponent("select * xml url='" + yquery + "'") + '&format=json&callback=?'; //debugger; (function(){     //debugger;     $.getjson(yql)          .done(function(data){         //debugger;         var rssfeed = document.getelementbyid("rssfeed");         $.each(data.query.results.rss.channel.item, function(i,item){             var rsslink = document.createelement("a");             rsslink.id = 'news' + i;             rsslink.href = item.link;             rsslink.innertext = item.title;             rssfeed.appendchild(rsslink);             var br = document.createelement("br");             rssfeed.appendchild(br);         });         linkify( 'a' );      }); })(); //debugger; var supports3dtransforms =  document.body.style['webkitperspective'] !== undefined ||                              document.body.style['mozperspective'] !== undefined; //debugger; function linkify( selector ) {     if( supports3dtransforms ) {          var nodes = document.queryselectorall( selector );          for( var = 0, len = nodes.length; < len; i++ ) {             var node = nodes[i];              if( !node.classname || !node.classname.match( /roll/g ) ) {                 node.classname += ' roll';                 node.innerhtml = '<span data-title="'+ node.text +'">' + node.innerhtml + '</span>';             }         };     } } </script> </body> </html> 

my custom css has following definition body element. have other styles a element , applied links. of now, body element styles not work.

body {     font-family: sans-serif;     background: #333 !important;     color: #eee; } 

when check chrome dev tools, notice custom background style has been overridden (i see them stricken through).

i searched through stackoverflow , other forums problem , found following 3 solutions:

  • add data-role="none" elements. tried well, however, not work. @ least body element seems.
  • list custom css after jquery css in head element. doing it. not working.
  • add !important style properties of body (in example showing one). tried add on 3 properties, none worked.

i not sure if missing here (may syntax error?). pretty new front-end techs. pardon silly mistake here. following various tutorials/examples learn. here appreciated.

regards, rumit

over body there div. must style div this:

div[data-role="page"] {     font-family: sans-serif;     background: #333 !important;     color: #eee; } 

Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -

php - Accessing static methods using newly created $obj or using class Name -