How to create a DIV style switcher in JavaScript?


Tags: javascript,html,css

Problem :

I want to make a CSS style switcher in JavaScript, same as digg.com does here: http://digg.com/add-digg

I am having a div, in which I want to change the style of the div box on the basis of theme selection. Please give me any link or code, how I can do this.

I don't want to use Jquery, I want to develop this cod ein pure javascript.

Thanks



Solution :

Inspecting the source code and how it changes as you change themes, it is really quite simple. Digg is harnessing the awesomeness of CSS to drastically change content by simply changing the class of an element. All you have to do is this:

<div id="theme_viewer">
<!-- HTML code for your widget/thing to be styled -->
</div>

And then you can have your themes:

<ul>
  <li><a href="#" onclick="return switchTheme('theme1');">theme 1</a></li>
  <li><a href="#" onclick="return switchTheme('theme2');">theme 2</a></li>
  <li><a href="#" onclick="return switchTheme('theme3');">theme 3</a></li>
  <li><a href="#" onclick="return switchTheme('theme4');">theme 4</a></li>
</ul>

All switchTheme needs to then do is change the class of theme_viewer to the class passed:

function switchTheme(theclass) {
    var viewer = document.getElementById('theme_viewer');
    viewer.className = theclass;
    return false;
}

Your CSS stylesheets can then do whatever the different styles call for:

#theme_viewer.theme1 {
    background-color: red;
}

#theme_viewer.theme2 {
    background-color: blue;
}

#theme_viewer.theme3 {
    background-color: black;
    color: white;
}

#theme_viewer.theme4 {
    background-color: orange;
}

here is an example of this at work

As mentioned in the comments by J-P and in edeverett's answer, it is not a good idea to have your events inline as I have them in this example (ie, with the onclick attribute). I did it for simplicity, but it's not a good idea. The better idea is to wait for your document to load and attach the event handlers dynamically with Javascript. This is known as unobtrusive Javascript, and it is a Good ThingTM.

An example of the above example following good practices would look like this:

<ul id='theme_options'>
  <li><a href="#" id='theme1'>theme 1</a></li>
  <li><a href="#" id='theme2'>theme 2</a></li>
  <li><a href="#" id='theme3'>theme 3</a></li>
  <li><a href="#" id='theme4'>theme 4</a></li>
</ul>

And then we use this cross browser addEvent function (written by John Resig, author of jQuery):

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}

To add the event handlers:

addEvent(window, 'load', function() {
    var opts = document.getElementById('theme_options');
    var links = opts.getElementsByTagName('a');
    for(var x = 0; x < links.length; x++) {
        addEvent(links[x], 'click', function() {
            switchTheme(links[x].id);
        });
    }
});

It might be a little more verbose than inline Javascript, but it is worth it. I know you said you'd like to avoid jQuery, but something as simple as this makes you start appreciating the library, as you could do it with jQuery with something as simple as this:

$(function() {
    $('a','#theme_options').click(function() {
        switchTheme($(this).attr('id'));
        return false;
    });
});

    CSS Howto..

    How to make hover-active whole
  • , not just ?
  • How to remove hover effect for some of the cells in angularjs

    How is better to do with CSS sprites [closed]

    How to wrap between letter and punctuation to avoid extra blank space in the end of line?

    On textbox focus, how can you change the background color of the element prior to it with only CSS?

    How do I vertically center align a position:relative element

    How to set the text absolutely (CSS) in the middle of a div despite a changing width div behind him?

    how to reference elements in CSS or JS files for fastest parsing?

    Show or hide div based on selected value

    How to prevent CSS hover style from firing unless hover time reached as defined in jQuery routine?

    Multiple DIVs, same Classes, how to reduce css markups?

    How to add a z-index to separate image from div border

    How to tell what in CSS files that is not used? [duplicate]

    How do you extend a Django project root HTML file in project apps?

    How can I style dynamically created elements within an iframe?

    How to keep website footer at bottom even when page expands downwards

    Conflicting CSS Overflow Property - How to Fix?

    How do I ONLY add a box-shadow to the bottom with the following css?

    How to apply global styles with CSS modules in a react app?

    How can I get these Bootstrap column divs to be uniform length inside of a well?

    How to get rid of the left and top margins in css when using html2pdf

    How to prevent right-to-left text appearence while using arabic language?

    How do I convert a text to css hex value?

    How to make this slider more fluid?

    How to overlay “transformed” element?

    How to send HTML to an embedded WebView without running a local webserver?

    How to emulate Google greyed-out suggested text in input element?

    How to apply padding to a column using and CSS in Firefox?

    CSS - how to apply styles to first elements in a static generated list

    css: how to make the third div line up with the first div