Changing CSS stylesheet src onChange of select box

Question

<script type="text/javascript">
    function achat_change_themes() {
        var rel = $('link[title="chat_theme"]');
        var select = $('#achat_times').attr('value');
  if(select == "GrayScale") {
       rel.attr('src' , 'www.avacwebthemes.vacau.com/css/mario_theme.css');
    }
  else if (select == "Mario") {
     rel.attr('src' , 'www.avacwebthemes.vacau.com/css/mario_theme.css');
    }
  else if (select == "Eartone") {
     rel.attr('src' , 'www.avacwebthemes.vacau.com/css/mario_theme.css');
     }
  else if (select == "Dark") {
     rel.attr('src' , 'www.avacwebthemes.vacau.com/css/mario_theme.css');
     }
  else if (select == "Floral") {
     rel.attr('src' , 'www.avacwebthemes.vacau.com/css/mario_theme.css');
     }
  else if (select == "Military") {
     alert(www.avacwebthemes.vacau.com/css/mario_theme.css);
     }

  }
 </script>

THE HTML MOCK

<select id="achat_themes" onChange="achat_change_themes();">
  <option value="GrayScale">GrayScale</option>
    <option value="Mario">Mario</option>
      <option value="EarthTone">EarthTone</option>
        <option value="Dark">Dark</option>
          <option value="Floral">Floral</option>
            <option value="Military">Military</option>
  </select>

Basically what I want to do is on the change event of the select it will change the src of the link tag in the head...such as

<link type="text/css" rel="stylesheet" title="chat_theme" href="http://sourcefile.com/css/file.css">

And would like to change it each time I have the last selection alerted out for when I was testing this, just something 5 mins threw together, and trying out the javascript function with jQuery. It is not running any suggestions?

I tried taking out the entire inner code and I keep getting achat_change_themes undefined? I must be writing the function incorrectly?

asifrc · Accepted Answer · 2013-02-03 08:17:34Z

1

I have a few suggestions, both trying to answer your questions directly and, if you don't mind, also trying to help improve your code:

Suggestion 1: I think you're looking for the 'href' property of the link, not 'src'.

Suggestion 2: I'm guessing it's just to make the point, but just in case (I've forgotten many things like this): make sure to change 'www.avacwebthemes.vacau.com/css/mario_theme.css' to the appropriate address when the time comes.

Suggestion 3: Use the javascript switch statement in your function instead of a bunch of if's. It's way cleaner:

switch(select)  
{  
    case "Grayscale":     
    {
        rel.attr('href', 'www.avacwebthemes.vacau.com/css/mario_theme.css');  
        break;
    }

    case "Mario":  
    {
        rel.attr('href', 'www.avacwebthemes.vacau.com/css/mario_theme.css');  
        break;
    }
    //Etc
}

Suggestion 4: If you are trying to get into jQuery, I'd recommend using something like the following code (the script block goes inside the body, not the head):

<script>
$(function() {
        $('#achat_themes').change( function() {
                var rel = $('link[title="chat_theme"]');
                switch($(this).val())
                {  
                    case "Grayscale":     
                    {
                        rel.attr('href', 'www.avacwebthemes.vacau.com/css/mario_theme.css');  
                        break;
                    }

                    case "Mario":  
                    {
                        rel.attr('href', 'www.avacwebthemes.vacau.com/css/mario_theme.css');  
                        break;
                    }
                    //Etc
                }
            });
    });
</script>

edited Feb 3, 2013 at 8:17

answered Feb 3, 2013 at 7:46

asifrc

5,8412 gold badges20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

EasyBB Over a year ago

Thank you for the Explanations, now why not the head and inside the body if I can ask?

asifrc Over a year ago

Glad to help. Placing it in the body allows all the non-script elements from the body load first, then triggers the document.ready event. The "$(function() { ... });" binds to document.ready , so it will fire once all the html elements have loaded into the DOM. This is faster since everything in the head has to load before it will start on the body, and saving these scripts for document.ready will display the body to the user first and then (mostly instantaneously) perform your script.

asifrc Over a year ago

As an additional note, binding to events using jQuery, i.e using $(selector).change(fn(){ ...}) in a script as opposed to defining fn() in the head and placing onChange='fn()' in the tag of each element you need that function for will make your life much easier by making you do it only once. (You can adjust the selector to accomodate new elements, e.g. going from $(".oldelementclass").change(fn(){..}); to $(".oldelementclass, #newelementid, .newelementclass").change(fn(){..}); It also makes it easier to dynamically change the .change (among other events) functions.

asifrc Over a year ago

Also I forgot to mention: putting it in the body actually runs the script, whereas nothing in the head is run until it is called upon.

ylysyym · Accepted Answer · 2013-02-03 07:02:10Z

0

Use the jQuery change() event instead of onChange:

attr("src",link); is wrong - you should be changing the href instead.

And instead of using attr("val") to get the value of a dropdown, you need val().

You also misspelled #achat_themes as #achat_times.

Here's a fiddle with all of your problems fixed:

http://jsfiddle.net/498Z5/

answered Feb 3, 2013 at 7:02

ylysyym

4405 silver badges22 bronze badges

3 Comments

EasyBB Over a year ago

That fiddle is not working. value attribute inlines the values that I set. the src part yes I did overlook that as well as the id selector. I'll work on this some more and see how it goes.

ylysyym Over a year ago

@EasyBB Not sure what you mean when you say that value attribute inlines the values that I set. And the fiddle is working for me - it's more easily seen here. You do want the external stylesheet's source to be changed whenever the dropdown is, right?

EasyBB Over a year ago

lol yeah i got it working, just checked the console area and checked, didn't know you had all the css to mario.css lol. Sorry. Could you possibly help me with my other issue here on SO? stackoverflow.com/questions/14658850/…

Jai · Accepted Answer · 2013-02-03 09:20:14Z

0

Why don't you try this way:

Try the fiddle out: http://jsfiddle.net/Ng24P/

$(function () {
    $('#achat_themes').change(function () {
        changeTheme($(':selected').val());
    });
});

function changeTheme(theme) {
    var stylshit = $('[title="chat_theme"]');
        stylshit.attr('href','http://sourcefile.com/css/'+theme.toLowerCase()+'.css');
        alert(stylshit.attr('href'));
}

answered Feb 3, 2013 at 9:20

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

Changing CSS stylesheet src onChange of select box

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related