AngularJS 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 AngularJS.



In the HTML, create a button for each stylesheet that you want to switch between, and pass in the filename of the stylesheet as a variable:
<button ng-click="changeStyle('colors.css')" id="pink">Brookes Pink</button><br />
 <button ng-click="changeStyle('colors-lime.css')" id="lime">Brookes Lime</button><br />
 <button ng-click="changeStyle('colors-muted.css')" id="muted">Muted colours</button><br />
 <button ng-click="changeStyle('colors-dark.css')" id="dark">Dark colours</button>
You will also need to put the ng-app attribute in the <html> element, and an angular variable in the path to the stylesheet:
<html ng-app="myApp">

<head>

<link rel="stylesheet" data-ng-href="css/{{ filename }}" />
In the Angular (app.js), create a settings controller with a changeStyle function. Note that the stylesheet variable is a rootscope variable because the variable we are changing is in the <head>, outside of any block governed by a controller.
 .controller('settingsCtrl',
['$rootScope', '$scope', '$uibModal', '$routeParams', '$log', '$timeout', '$http',
    function ($rootScope, $scope, $uibModal, $routeParams, $log, $timeout, $http) {
        $scope.settings = [];
        $rootScope.filename = $.jStorage.get('myStyle', '') || 'colors';
        $scope.changeStyle = function (stylesheet) {
            $rootScope.filename = stylesheet;
            $.jStorage.set('myStyle', stylesheet, { TTL: 28800000 });
        };
    }])
I have used jStorage to store the user's preference for a stylesheet, but you could also use cookies.

Comments

Post a Comment

Popular posts from this blog

Personas

By Anonymous
A persona describes one category of the target users of your system as a fictitious but realistic person with goals and needs. It is useful because it summarises the user, their role, their skills and aptitudes, their preferences, and their goals. Personas give rise to user stories, and keep the user stories focused on the goals of real users. The persona needs to include a name and a picture, so that developers, business analysts, and testers can relate to it as if it was a real person.  It should include the following details: their demographic characteristics (e.g. age, disability) that might affect their interaction with the product, and their requirements in using it their role in using the software (e.g.  admin, editor, contributor, supervisor) what their job title is activities they do in their spare time which might affect their performance (either beneficially or adversely) their goals in using the software common tasks they will want to carry out using the software W...
Read more

Prototyping

By Anonymous
Sometimes prototyping can seem like a big investment of time, but I find it is always worth it. In this article on User Experience Prototyping , Paul Boag, who has been in the field of user experience for over a decade, writes about the benefits of prototyping. When most people think of prototyping they are thinking about mocking up a user interface. There is no doubt that prototyping can help in this area. Organisations use prototyping to define and test experiences using all kinds of interfaces. Interfaces from mobile apps to enterprise systems. He identifies three key benefits of prototypes: they are inspiring , and allow people to understand what is being proposed, because they show stakeholders what it will look like; they ensure a common vision - it is much easier to agree to something and come away with a shared understanding of it if you have actually seen what it will look like; they are testable - you can actually do usability testing with them and fix any usability issues b...
Read more

How to embed a Google Doc in Blogger

By Anonymous
So you have a Google document that you want to display on your Blogger blog or website. It's actually fairly simple to embed Google Documents in a Blogger blogpost or page. How to embed a Google Document Open your Google Document for viewing Click View, then Full Screen Copy the URL of the Google Document from the address bar of your browser Go to Blogger, create a new blgopost or edit an existing one Switch to HTML view Paste the URL that you copied in Step 3 anywhere in the code (this is only temporary) Copy the following code, and paste it into your HTML where you want the document to be embedded. < iframe   src =" https://docs.google.com/document/d/1GVBowL69OnrHbNLwnFGJDiNuoS1Fs712tpdQkfu9DDc/ " width ="480" height ="520" > < /iframe > Replace the highlighted URL above with the URL that you copied in step 3.
Read more