On click - Change Layout

HTML & CSS
1

Hi.

Whats a best practice approach to switching layouts on the fly. What i’m thinking of is very similar to the buttons on codepen.io to switch the various positions of the boxes.

http://codepen.io/ziga-miklic/pen/Fagmh (Bottom right hand corner // (just a random codepen)).

Are there solutions that don’t involve Javascript / jQuery?

2

Hi,

It depends on exactly what you are talking about but generally any behavior like that is best done with JavaScript. Usually if you are just switching a few things around you can simply add a class to the body element with js and use that new class to modify existing rules and change things around.

There are some tricks you can do with CSS for IE9+ if you are after something simple.

Rough CSS demo.

I would still think it best to use JS for this though.

3

Absolutely.
CSS for appearance, JS for behaviour (although the lines are becoming more and more blurred).
If you need any help with a JS solution, just shout.

4

Thanks for that guys. I may just do that @Pullo but I will have a little play first. I have used the script below before, I’m sure I can adapt it and add a click event. I’m just starting to get the feeling I can solve everything with jQuery but I get a guilty feeling for doing it lol.

function readyresize() {
    var pirate = $("body").height();
    var booty = $("body").width();
    $('#browserInfo').css({
    height: pirate,
    width: booty,
    margin: 0,
    padding: 0
    });
    };
$(document).ready(readyresize);
$(window).resize(readyresize);
5

Here is how I did it back when I did that. I used a style sheet switcher. At the time dynamic drive had the best one I could find. I’m sure jquery has many.
http://www.websitecodetutorials.com/code/javascript/style-sheet-switcher.php

1 Like
6

Ok. That looks like a more elegant solution than what I was thinking of.
Will look in to that. Thanks.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.