CODEWITHSUNDEEP
htmljquerycss
Valentin Vrinceanu
Valentin Vrinceanu

Reputation: 679

HTML Page Options using jquery

I am trying to create a html page options. This option menu is a panel that appear on hover or on click, and from there i can change colors, background pattern and more and i think this is changing the css file or it is doing something else but i do not know how. I tried to find something on Google, but i didn't.

If you didn't understand what i am looking for please take a look at this page, hover the "+" button and you will see. http://themes.fbpixel.com/?theme=Landisimo%20-%20Landing%20Page

EDIT: If anyone know a jquery plugin already done for this kind of thing please submit a link.

EDIT2: What i really want is a plugin that retains the property changes i do, and when i go to another website page, the colors to be the one i selected on the first page. An example is this: My homepage page is red, and i select blue from a panel options and when i go to the blog page, the color on that page to be blue(the color i selected on the previously page).

Thank you.

Upvotes: 1

Views: 199

Answers (1)

Marek Sapota
Marek Sapota

Reputation: 20598

You can do something like this, HTML:

<body class="red">
    <p>Some text</p>
    <a href="#" id="paint-blue">paint blue</a>
    <a href="#" id="paint-red">paint red</a>
</body>

CSS:

body.red {
    background-color: red;
}

body.red p {
    color: yellow;
}

body.blue {
    background-color: blue;
}

body.blue p {
    color: white;
}
/* Some more stuff */

JS:

$("#paint-blue").click(function(event) {
    event.preventDefault();
    $("body").removeClass("red").addClass("blue");
}

$("#paint-red").click(function(event) {
    event.preventDefault();
    $("body").removeClass("blue").addClass("red");
}

The idea is that depending on the class of the top level body element some elements on page will be styled differently.

EDIT: The example page that you linked to uses cookies to store the chosen theme and from the looks of it, it always loads the yellow theme and then some onload JS checks the value in the cookie and changes the colours. Here is some random tutorial for setting and reading cookies using JS. And the onload thing would look something like:

$(document).ready(function() {
    // Should be easy to write if you look at the tutorial
    var colour = getColourFromCookie();
    if (colour == 'blue') {
        $("#paint-blue").click();
    }
    // red is default, no need to do anything
});

One thing that you could do better than the example site is that you could render a different page (different body class) depending on the cookie value instead of always rendering one version and then changing it on client side — at least on my computer there is a clear delay before JS kicks in and changes the colours.

Upvotes: 2

Related Questions