cookies - Jquery Style switcher - How to remove style flickering while a .css loads? -

-

i have simple code change styles simple clic. works fine has style flickering prevent - little timeout between 1 disabled , other not totaly loaded -

also add cookie user won't have select prefered style everytime he/she enters. i'm not sure how i'm new jquery. if able me great!

thanks reading!

i have code switch styles on site:

html call main style , main color

   <style type="text/css"> @import url("style.css");</style>    <link href="yellow.css" rel="stylesheet" type="text/css" title="yellow theme" />

then call scripts usual

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>     <script type="text/javascript" src="script.js"></script>

each button has this: 

    <a class="colorbox colorred" href="?theme=red" title="red theme"><img src="red.png" width="x" height="x" /></a>

now here script.js code: 

    google.load("jquery", "1.3.1");     google.setonloadcallback(function()     {  // color changer $(".colorblack").click(function(){     $("link").attr("href", "black.css");     return false; });  $(".colorred").click(function(){     $("link").attr("href", "red.css");     return false; });  $(".colorwhite").click(function(){     $("link").attr("href", "white.css");     return false; });  $(".coloryellow").click(function(){     $("link").attr("href", "yellow.css");     return false; });      });

ok. i've done little more research , experimentation this, , think i've found solution. first background info. far can tell, problem have flickering css not being loaded. want loading done @ page load long it's not major performance issue. load them dynamically needed leads problem have here, trying use data not yet loaded. best solution can see load of css @ start , change precedence dynamically. have tested , work. cascading style sheets (css), cascading part of name means when load style sheet , load one, last 1 takes overriding precedence. first thought add style sheet override previous one. way, loaded, old style sheet still being used , there no flicker. problem ran linked style sheet precedence reversed, meaning have override first 1 , not last one. here code illustrating process:

<html> <head> <link href="yellow.css" rel="stylesheet" type="text/css" title="yellow theme" /> <link href="black.css" rel="stylesheet" type="text/css" title="black theme" /> <link href="white.css" rel="stylesheet" type="text/css" title="white theme" /> <link href="red.css" rel="stylesheet" type="text/css" title="red theme" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){    $(".colorblack").click(function(){     $("link:first").attr("href", "black.css");     return false;   });    $(".colorred").click(function(){     $("link:first").attr("href", "red.css");     return false;   });    $(".colorwhite").click(function(){     $("link:first").attr("href", "white.css");     return false;   });    $(".coloryellow").click(function(){     $("link:first").attr("href", "yellow.css");     return false;   });  }); </script> </head> <body>  <a class="colorbox colorred" href="?theme=red" title="red theme">red theme</a></br>  <a class="colorbox colorblack" href="?theme=black" title="black theme">black theme</a></br>  <a class="colorbox colorwhite" href="?theme=white" title="white theme">white theme</a></br>  <a class="colorbox coloryellow" href="?theme=yellow" title="yellow theme">yellow theme</a></br> </body> </html>

and css pretty simple. e.g.

body {   background-color:yellow; }

this works in chrome , ff, not work in ie or opera. replacing link nodes seems not work in two. basically, that's how it. :)


Comments

Post a Comment

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

-
my group , running server based upon django , uses mod_wsgi run apache server. not working on project after over, attempting set cronjob similar functionality check if apache server has shut down(system restart or power failure), , if has, restart server me. i've found documentation on how check if apache server down , restart server if is, our server uses https , our start command pretty verbose. can use functionality provided in these examples: https://askubuntu.com/questions/277389/cron-job-to-restart-apache https://www.digitalocean.com/community/tutorials/how-to-use-a-simple-bash-script-to-restart-server-programs or need more complicated process make happen? the command use start server is python manage.py runmodwsgi --host 0.0.0.0 --port 8001 --https-port 8000 --ssl-certificate (certificate location) --server-name (domain name) i'm pretty new linux , using both mod-wsgi apache appreciated. you better off using --setup-only option mod_wsgi-expres...
Read more

actionscript 3 - TweenLite does not work with object -

-
i got following problem: i have object called tempscore game. this object blitted canvas renderer via copypixels method. object not display object. it's score-object (self made). score-object extends object called basicblitarrayobject. basicblitarrayobject extends eventdispatcher (therefore no display object). i tried apply several different tweenlite-plugins tempscore-object (i.e. transformaroundcenter, colormatrixfilter, etc.). nothing happens. absolutely nothing. sometimes error messages (when plugin requires display object , object not display object). far good. according greensock (maker of tweenlite) engine can tween numeric property of object. when plugin transformaroundcenter requires display object tweening have modify plugin working non-display object (tempscore). can't because it's way hard me. my game rests upon code: http://www.8bitrocket.com/book/ch11_blastermines.zip try apply tweenlite object called tempmine inside game class blastermines. ...
Read more

jQuery Ajax Render Fragments OR Whole Page -

-
i'm in throes of building application wraps mess of legacy code. page working on, need substitute fragment divs constructed on back-end -- or else need replace entire page altogether. idea there dynamically controlled flow needs satisfied before can forward legacy product. substituting fragments works fine, seen in below my_body_content swap. trouble comes when i'm trying render not fragment, whole page, in "body" swap. @ point page goes blank. i want similar errors returned server. want nice rest 404 error messages displayed on screen, legacy-product 404s show in legacy-product 404 page. yes, requirements project weird. that's not problem can fix. here's jquery invocation, names changed protect guilty: $.ajax({ url: "places/things", type: "post", data: json.stringify(somebadassobject), datatype: "text", accepts: "text/html", contenttype: "application/json; charset=...
Read more