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
Post a Comment