jQuery style switcher

By Anonymous
It's often the case that you want to provide more than one CSS stylesheet for your app or website. You can do this by including a style switching function in your app. Here's how to do it in jQuery.


The solution uses jStorage to store the user's preference between sessions, but you could use cookies instead.

Here is the jQuery:
$(document).ready(function () {
    var myStyle = $.jStorage.get('myStyle', '');
    if (myStyle !== '') {
        $("#colors").attr("href", myStyle);
    }
    $('.styleswitch').on('click', function () {
        $("#colors").attr("href", $(this).attr('resource'));
        $.jStorage.set('myStyle', $(this).attr('resource'), { TTL: 28800000 });
        return false;
    });
});
Here is the HTML in the <head> section:
<link rel="stylesheet" type="text/css" href="css/colors.css" id="colors"/>

And here are the buttons for selecting styles (in the <body> section):
<h4>Colour scheme</h4><button type="button" class="button styleswitch" resource="css/colors.css">Pink</button><br/><button type="button" class="button styleswitch" resource="css/colors-lime.css">Lime</button><br /><button type="button" class="button styleswitch" resource="css/colors-muted.css">Muted colours</button><br /><button type="button" class="button styleswitch" resource="css/colors-dark.css">Dark  colours</button><br /> 

Comments

Post a Comment

Popular posts from this blog

We're in Onstream

By Anonymous
The pilot phase of the Brookes ID project was announced in the latest issue of Onstream , the staff magazine of Oxford Brookes University: Brookes ID (Individual Development) is an inclusive co-curricular framework which has been created with students and is a PESE (Programme to enhance the Student Experience) project. It recognises and rewards student engagement and commitment beyond their programme of study and is aligned to the Brookes Guiding Principles. As part of the Brookes ID initiative a new app has been launched which will run this semester as a pilot, leading up to the official launch of Brookes ID expected in September 2017. The Brookes ID app has been developed by the project team (Professor Alison Honour ADSE, Dr Bob Champion PLSE, Lindsay Williams PLSE, Yvonne Aburrow) and the Student Experience team in OBIS, in partnership with students. It monitors the extra and co-curricular activities of students and rewards them with ‘achievements’. Initially the number of activiti
Read more

Agile methodology in the wild

By Anonymous
Image
Agile methodologies like Scrum sound amazingly efficient when presented by people who have implemented them in a non-hostile environment. But conditions are not always perfect, and things can sometimes go wrong. One of the key features of agile project methodologies is that they have different types of meetings . Each different type of meeting has a very specific function. They can become tedious and unproductive if they deviate from the prescribed form and function. With that in mind, let's look at the different types of meeting, how they are meant to work, and what can go wrong. Three Amigos     © Copyright  Peter Trimming  and licensed for  reuse  under this  Creative Commons Licence . Three Amigos This is a relatively new type of meeting in the agile toolkit, and was developed in 2013 . Essentially, this is a meeting during which the business analyst (BA) presents the requirements and tests for a new feature. The Three Amigos (BA, developer, and QA) discuss the new feature and
Read more