views:

44

answers:

2

Hi, I wrote this very simple backgroung chooser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <title>jQuery Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="Normal.css" />

    <script type="text/javascript">

    $(document).ready(function(){

        $("#StyleContrast").click(function() {
           $("link[media='screen']").attr("href", "Contrast.css");
         });

         $("#StylePrint").click(function() {
           $("link[media='screen']").attr("href", "Print.css");
         });

         $("#StyleNormal").click(function() {
           $("link[@media='screen']").attr("href", "Normal.css");
         });

     });

       </script>

 </head>
 <body>
    <h1>Choose A Style:</h1>
    <ul>
       <li><a id="StyleContrast" href="#">Contrast</a></li>
       <li><a id="StylePrint" href="#">Print</a></li>
       <li><a id="StyleNormal" href="#">Normal</a></li>
     </ul>
 </body>
 </html>

I have: Normal.css Print.css Contrast.css

in the same folder with a very basic:

body {background-color:#000000;}

When I go to the url it chooses Normal.css (as it should)

Then it changes to just fine to Print.css or Contrast.css (as it should)

But then it doesn´t go back (doesn´t choose) Normal.css again?

Can you help me spot whats wrong with the code?

Thanks in advance!!

Regards!

Trufa

+6  A: 
 $("#StyleNormal").click(function() { 
       $("link[@media='screen']").attr("href", "Normal.css"); 
     }); 

Should be

 $("#StyleNormal").click(function() { 
       $("link[media='screen']").attr("href", "Normal.css"); 
     }); 

Also, I would update the version of jQuery you're using to 1.4.2

You used [@media='screen'] instead of just [media='screen']

In jQuery 1.4.2 (and I think in jQuery 1.3) @ for attribute selection is deprecated. Notice that you had it right in the first two calls of your code, just not the last one. :D

Levi Hackwith
Hey! thank you very much!! worked like a charm!! I don´t really understand why, could you explain jut a bit please? Thanks!
Trufa
Sure! See my edit. Also, if this worked for you, please mark my answer as accepted :D
Levi Hackwith
Ok great I really couldn´t spot it!! specially because the jQuery "oficial" tutorial is wrong http://docs.jquery.com/Tutorials:5_Quick_jQuery_Tips#Switch_A_Stylesheet I will try to edit it!! Thanks a lot! The site is telling me that I have to wait 5 minutes to accept the answer as soon as the waiting time is over I will. Cheers!!
Trufa
A: 

If you want to optimize, you could add a class (say "switcher") to your links, and change your jQuery to this:

 $(function(){
    $(".switcher").click(function() {
       $("link[media=screen]").attr("href", $(this).text() + ".css");
     });
 });
Ender
Thanks!! I will will give it a try now that the basic switching problem is solved...
Trufa