JQuery CSS Changer Not Functioning

Question

So I posted a question earlier about this and after a helpfull reponse, I've proceeded to attempt to try the code. I've not used JQuery before so this was a step into the beyond for me.

What I'm doing is using the below code to change the CSS of a website, almost like a template, however, when pressing the buttons, there's no change. I've included the JQuery script linked to Google. The code itself is pretty self explanitory, when you press the button, it should load a different stylesheet. I'm not sure if it's a permanant change or not, but just testing a the moment. Any help is appreciated!

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>

<script type="text/javascript">

$("button#grayscale").click(function() { 
    $("link[rel=stylesheet2]").attr({href : "css2.css"}); });

$("button#original").click(function() { 
    $("link[rel=stylesheet]").attr({href : "css.css"}); });
});

<button id="original">Original</button><br />
                <button id="grayscale">Grayscale</button>

Why not adding a class to body element? 'stylesheet2' is not a valid value for rel attribute. — Ram
– Ram, Commented Dec 9, 2012 at 20:26

score 2 · Accepted Answer · 2012-12-09 20:37:25Z

2

I think you should follow @undefined's suggestion and apply class prefixes to all your rules. You can then apply the class to an element high up, which means if you change the class everything follows suit:

CSS:

body.grayscale div{
    color: gray;
}

body.normal div{
    color: green;
}

JS:

$("button#original").click(function() { 
    $("body").removeClass("grayscale"); 
    $("body").addClass("normal"); 
});

$("button#grayscale").click(function() { 
    $("body").removeClass("normal"); 
    $("body").addClass("grayscale"); 
});

edited Dec 9, 2012 at 20:37

answered Dec 9, 2012 at 20:31

user1726343

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

5 Comments

UKPixie Over a year ago

Thanks for the prompt response, I'll give this a go. Would these changes be permanent to any user that views the page?

user1726343 Over a year ago

@UKPixie Nope, whenever the page is refreshed the changes are lost. You could store the data in cookies.

UKPixie Over a year ago

How difficult would making the changes permanant, like changing the theme in Wordpress?

user1726343 Over a year ago

@UKPixie You could store changes server side if your users use a login system, or you could use cookies, which are much simpler. You should have a look at some tutorials on how to use cookies.

UKPixie Over a year ago

Thanks for the response but the aim would be a web admin changing the look of the website without having to code themselves. Like loading a new theme for all users to see, opposed to just those logged in.

jjenzz · Accepted Answer · 2012-12-09 23:41:34Z

0

Something like this would switch the stylesheet but it won't be a permanent change:

HTML:

<div id="theme-switcher">
    <button data-theme="css2.css">Greyscale</button>
    <button data-theme="css.css">Original</button>
</div>

jQuery:

$('#theme-switcher').on('click', 'button', function() {
    $('link[rel=stylesheet]').attr('href', $(this).data('theme'));
});

To make it permanent you could send the value via an AJAX request to a server-side scripted page that saves the value in the database. That value can then be pulled from the database server-side and inserted into the HTML when rendering the <link /> tag.

Updated jQuery with example AJAX:

$('#theme-switcher').on('click', 'button', function() {
    var theme = $(this).data('theme');

    // if it was a PHP based project
    $.post('save-theme.php', { theme: theme }).done(function() {
        $('link[rel=stylesheet]').attr('href', theme);
    });
});

What happens in save-theme.php is server-side stuff so not my area of expertise unfortunately, sorry!

answered Dec 9, 2012 at 23:41

jjenzz

1,5591 gold badge14 silver badges19 bronze badges

3 Comments

UKPixie Over a year ago

Thanks for the response Jenna, much appreciated. Will give it a whirl!

UKPixie Over a year ago

Hi Jenna, am I missing something in order for JQuery to work?I assume the script type is text/javascript and you reference the googleapi? The code is containined within my index.php

jjenzz Over a year ago

If you want to use jQuery then yes, you need to include jQuery with a script tag on your page.

Collectives™ on Stack Overflow

JQuery CSS Changer Not Functioning

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related