How do I switch external CSS files?


Tags: javascript,jquery,css,ajax

Problem :

I've got a couple books that I'm reading on AJAX, but still quite new. All the tutorials and these books have the ubiquitous examples of: an auto-populating search bar and an asynchronous form validator. Those are both great, but not what I'm looking for. Specifically, I want to click a button and switch the external CSS file in my header include. Is this possible? Well... I know it's possible, but how do you do it?

PS: I have jQuery in this project, so if there is something built in from there, even better!

PPS: I'm realizing I have not included important information (don't shoot me!):

  1. The final goal of this will be to have a user settings section where the user can click a radio button and decide the color scheme they want to use for our app. So we will eventually have something like 8 different CSS styles to choose from. Not sure if this will alter the best method to achieve this.

  2. The user is logging into their account and changing their setting there. I want their changes to 'stick' until they decide to change the stylesheet again. I can do this manually in MySQL as we have a table called stylesheets with the various user stylesheets numbered... so in actuality, what I'm needing to do is change that MySQL value asynchronously so the CSS is immediately loaded.



Solution :

Stylesheet Switcher in jQuery.

In response to the 'newbie followup' comment, I will try to make it a little more instructional.

The page I was playing with to test on while writing can be found here.

Page Display

You're going to want to have your current stylesheet displayed in a <link> tag in the <head> of each of your pages. The <link> tag will need an id for reference later in JavaScript. Something like:

<?php 
  // Somewhere in the server side code, $current_stylesheet is read from the user's 
  // "preferences" - most likely from a database / session object
  $current_stylesheet = $user->stylesheet;
?>
<link href='<?php echo $current_stylesheet ?>' rel='stylesheet' type='text/css' id='stylelink' />

Changing the preference

Once you are displaying the users stylesheet, you need a way to change it. Create a <form> that will send a request to the server when the user changes their stylesheet:

<form method="GET" id="style_form" >
  <select name="stylesheet" id="styleswitch">
    <option value="css1.css">Black &amp; White</option>
    <option value="css2.css" selected="selected">Shades of Grey</option>
   </select>
   <input value='save' type='submit' />
</form>

Server Side

Now, without jQuery, submitting this form should GET (you could change it to POST if you like) stylesheet={new stylesheet} on the current page. So somewhere in your bootstrap / sitewide include file, you do a check for it, a php sample:

$styles = array(
  'css1.css' => 'Black &amp; White',
  'css2.css' => 'Shades of Grey',
);

if (!empty($_GET["sytlesheet"]) {
  // VALIDATE IT IS A VALID STYLESHEET - VERY IMPORTANT
  // $styles is the array of styles:
  if (array_key_exists($_GET["stylesheet"], $styles)) {
    $user->stylesheet = $_GET["stylesheet"];
    $user->save();
  }
}

Live Preview

At this point, you have a functioning styleswitcher for the lame people without javascript. Now you can add some jQuery to make this all happen a little more elegantly. You'll want to use the jQuery Form Plugin to make a nice ajaxForm() function, that will handle submitting the form. Add the jQuery and jQuery Form library to the page:

<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery.form.js'></script>

Now that we have the libraries included -

$(function() {
  // When everything has loaded - this function will execute:


  $("#style_form").ajaxForm(function() {
    // the style form will be submitted using ajax, when it succeeds:
    // this function is called:
    $("#thediv").text('Now Using: '+$('#styleswitch').val());
  });

  $("#styleswitch").change(function() {
    // When the styleswitch option changes, switch the style's href to preview
    $("#stylelink").attr('href', $(this).val());
    // We also want to submit the form to the server (will use our ajax)
    $(this).closest('form').submit();
  });

  // now that you have made changing the select option submit the form,
  // lets get rid of the submit button
  $("#style_form input[type=submit]").remove();
});

    CSS Howto..

    How to use `attr` when not on `content` property [duplicate]

    How Do I Add CSS Class to body Element in Meteor?

    How to decrease the page load time when multiple css are used

    How to make a custom clickable shape with CSS to cover the exact needed area?

    How to create a box with line and add icon on side [closed]

    How to make dynamic content positioning?

    How to stop text from overlapping CSS?

    How to style an iframe?

    How do I make circles within a larger circle, and text within the center of all the circles, in CSS?

    How can I use Javascript to allow navigation between sections using keyboard shortcuts?

    How do I remove all of the borders from an HTML ? [closed]
    Bootstrap is adding a top border to all td elements in .table containers. Adding ! important to your no-borders rule will override that: td { border: none !important; } ...
    Read more

    How to make div height fit the content using css

    How to use jQuery to horizontally center an object in the viewport?

    How to position the whole site? css positioning problem [closed]

    How to prevent the scroll of table when click to header on Chrome?

    How to remove and override CSS attribute from parent class?

    How to Fix this CSS and Center the Menu Horizontally?

    How do I use CSS to position a fixed variable height header and a scrollable content box?

    How to adjust the size of background image with browsers window using media queries

    How is table cell height calculated?

    how to center horizontally div and span elements using css

    How to solve CSS -webkit-appearance issue

    How to make all my div's same height based on breathing content

    How can I align my adsense graphics?

    CSS: How do I keep the text from wreaking havoc on the layout?

    how do I give a div a responsive height

    How to strike through obliquely with css

    How to force text to wrap inside inline-block div?

    How to theme Options of select box

    How to connect css to html in Google Apps Scripts