How to load Different css every time onload

Question

I am trying to add some css.But i want it to change it every time the page load(obviously I will specify what to load on different times)

For example sometimes I want to load

<style>
    html, body, a, a:hover {
        cursor:url(&#39;
        http://www.edwdwed.com/cursowedwedrsfolder/Tredwedwedwedolll-face.png&#39;
        ), auto !important;
    }
</style>

and sometimes I want to load

<style>
    html, body, a, a:hover {
        cursor:url(&#39;
        http://www.snazzyspace.com/cursorsfolder/MEgusta.png&#39;
        ), auto !important;
    }
</style>

I found a way to randomise content after surfing,but that works only on images and not scripts/CSS.

@Jan Dvorak: if only it was a separated css file – zerkms Dec 30 '12 at 09:20 — zerkms, Dec 30 '12 at 09:20

score 1 · Accepted Answer · edited May 23 '17 at 12:18

1

Working code... it randomly sets a background color on each page load...

function setCSS(selector, attribute, value) {
    var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
    found = false;

    for (var S = 0; S < document.styleSheets.length; S++){
        if(document.styleSheets[S][cssRuleCode]){
            for(var n = 0; n < document.styleSheets[S][cssRuleCode].length; n++) {

                if(document.styleSheets[S][cssRuleCode][n]["selectorText"] == selector) {
                    if(document.styleSheets[S][cssRuleCode][n].style[attribute]) {
                        document.styleSheets[S][cssRuleCode][n].style[attribute] = value;
                        found = true;
                        break;
                    }
                }


            }
        }

    }

    if(!found) {
        // Let's add
        for (var S = 0; S < document.styleSheets.length; S++){
            try {
                document.styleSheets[S].insertRule(selector + ' { ' + attribute + ': ' + value + '; }',document.styleSheets[S][cssRules].length);
                break;
            } catch(err){
                try {
                    document.styleSheets[S].addRule(selector, attribute + ': ' + value + ';');
                    break;
                } catch (err){}
            }
        }
    }
}

window.onload = function(){
    urls = ["url('http://www.iwdownload.com/image/1982.png'), auto !important;",
        "url('http://www.iwdownload.com/image/13534.gif'), auto !important;"];
    var rand = Math.floor((Math.random() * urls.length));
    setCSS("html, body, a, a:hover", "cursor", urls[rand]);
};

Ref: Changing CSS Values with Javascript

Update

To set background color of body to blue, use

setCSS("body", "background", "blue");

**Update 2 : Blogger **

For blogger, copy paste the following just before </head> in the blogger template HTML. Then reload your blog, the background should change to a random color.

&lt;script type=&quot;text/javascript&quot;&gt;

    function setCSS(selector, attribute, value) {
        var cssRuleCode = document.all ? &#39;rules&#39; : &#39;cssRules&#39;; //account for IE and FF
        for (var S = 0; S &lt; document.styleSheets.length; S++){
            if(document.styleSheets[S][cssRuleCode]){
                for(var n = 0; n &lt; document.styleSheets[S][cssRuleCode].length; n++) {
                    if(document.styleSheets[S][cssRuleCode][n][&quot;selectorText&quot;].indexOf(selector) != -1) {
                        if(document.styleSheets[S][cssRuleCode][n].style[attribute]) {
                            document.styleSheets[S][cssRuleCode][n].style[attribute] = value;

                            break;
                        }
                    }
                }
            }

        }
    }

    window.onload = function(){
        colors = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;, &quot;yellow&quot;, &quot;orange&quot;, &quot;white&quot;];
        var rand = Math.floor((Math.random() * colors.length));
        setCSS(&quot;body&quot;, &quot;background&quot;, colors[rand]);
    };

&lt;/script&gt;

edited May 23 '17 at 12:18

Community

1
1

answered Dec 30 '12 at 09:25

ATOzTOA

34,814
22
96
117

Sir,i tried putting the 1st code,i got an error in blogger "The content of elements must consist of well-formed character data or markup." So,i tried in notepad and the code isn;t working.here is the code which i applied(it is a mere copy paste of the above code) http://img.ctrlv.in/50e01c99b1c7c.jpg – Rahul Shah Dec 30 '12 at 10:44
If you need this in blogger, then you will have to HTML encode the whole code, all '<' should become < and so on... – ATOzTOA Dec 30 '12 at 12:21
after encoding the error is gone,but there is no output, I tried the basic background code at jsfiddle and it is not working too :( – Rahul Shah Dec 30 '12 at 13:25
Are you adding the JavaScript to the blogger post or the HTML template? – ATOzTOA Dec 30 '12 at 13:34
The code matches exactly "html, body, a, a:hover", do you have that CSS entry. Otherwise, just replace it with just "body" and see if it works. – ATOzTOA Dec 30 '12 at 13:46
hmmmmmmm...in vain.i think there is some issue with the main code. the code mentioned above to change bg color is also not working. – Rahul Shah Dec 30 '12 at 13:59
yes,the bg code is working.thank you for investing time.But when i alter code to suit my requirements,no output is coming.can u plz help.this is the code i am applying. http://img.ctrlv.in/50e05e912fc08.jpg – Rahul Shah Dec 30 '12 at 15:25
Do you have a CSS entry exactly like this: `html, body, a, a:hover {...}` – ATOzTOA Dec 30 '12 at 15:35
Please copy paste your code in your question or use jsFiddle. – ATOzTOA Dec 30 '12 at 15:36
Which elements do you need cursor for? – ATOzTOA Dec 30 '12 at 16:03
Updated my answer... take the new code... encode it... it is working in blogger... – ATOzTOA Dec 30 '12 at 16:07
when a user lands into a page,i want a custom cursor. Right now i have a this cursor ,here ilovetrolls.org Now,i want that the cursor to change in a random way every different time the page is loaded. the code and explantion is here http://jsfiddle.net/rahulshah9111/tju5R/1/ thank you – Rahul Shah Dec 30 '12 at 16:17
the new code aint working.thank you for your deep efforts.here is what i applied http://jsfiddle.net/rahulshah9111/9mkv2/ – Rahul Shah Dec 30 '12 at 16:22
The issue is with your URLs, no need for ''' and they don't have valid images. – ATOzTOA Dec 30 '12 at 16:24
sir,can u please give me the url of working blog,i want to see the source code....the code which i have currently have is (not working) view-source:http://www.ilovetrolls.org/ – Rahul Shah Dec 30 '12 at 16:34
See this page: http://www.atoztoa.com/ I will remove the code in a moment... acknowledge as soon as you see the cursor... – ATOzTOA Dec 30 '12 at 16:37
well,it works in your blog.The EXACT same code does not work in my blog.Seems destiny. here is my blog.You can see the source code of my blog http://www.ilovetrolls.org/ .its the same code....yet not working.seems my bad luck....any troubleshooting tips sir? – Rahul Shah Dec 30 '12 at 16:43
hmmmm,,i use chrome only.my last question.which encoder do u use? i used http://htmlentities.net/ – Rahul Shah Dec 30 '12 at 16:45
Seems it was my destiny not get the output ,PERHAPS coz of other codes in my blog.Thanks a ton for your time,efforts.I have choosen your answer as the final anser.Thank you again.Another reason(.00005% chance)is that we used different encoders.Which encoder did you use? – Rahul Shah Dec 30 '12 at 16:51
Try this code just before your "" tag in template : http://jsfiddle.net/rCzLP/1/. Have you tried in Chrome? – ATOzTOA Dec 30 '12 at 16:54
I WAS PUTTING IT IN THE STARTING JUST AFTER .NOW THE CODE IS WORKING.....THANK YOU SO SO SO SO MUCH!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! – Rahul Shah Dec 30 '12 at 17:02

score 1 · Answer 2 · answered Dec 30 '12 at 09:26

1

I suggest you to prepare your css with differets class for <body> tag for example:

CSS

body.style1{...}
body.style2{...}
...

And manipulate this with javascript

JS

var rand = Math.floor((Math.random()*NumberOfYourStyle)+1);
var style = "style" + rand;
document.getElementsByTagName('body')[0].className+=style;

Working example

answered Dec 30 '12 at 09:26

Mateusz Rogulski

7,357
7
44
62

http://webdesign.about.com/od/css101classes/a/bl_cssclass1_5a.htm here you have some example of how to prepare basic css stylesheet. But I strongly suggest you to use css in separated file and linked in in your website. – Mateusz Rogulski Dec 30 '12 at 10:24
The jsfiddle example helped a lot.Sir,thank you so very much for this code. but i am facing a minor issue in implementing it.i want this css code to randomise,but i am failing in putting the code properly. i want to have this css code to randomise (screenshot:http://img.ctrlv.in/50e015eb4c7cd.jpg .So while putting the code you put it in jsfiddle i re-arranged the code in this way(screenshot:http://img.ctrlv.in/50e01667cb637.jpg can you plz tell me where i am going wrong. – Rahul Shah Dec 30 '12 at 10:30
What if the OP needs to have a 100 random URLs? This is a non-standard approach. – ATOzTOA Dec 30 '12 at 10:37
@ATOzTOA then you should create 100 classes, there aren't better solution, this is optimal resolve for me. – Mateusz Rogulski Dec 30 '12 at 11:27

score 0 · Answer 3 · answered Dec 30 '12 at 09:26

You could use a templating engine to generate CSS dynamically.

For example, instead of plain CSS, use Velocity, which is a very simple template engine.

Or, if you're more likely to have support for PHP on the server, use PHP to generate CSS code instead of HTML (yes, PHP can do that).

Or, use CSSOM to manipulate the CSS clientside, using JavaScript.

How to load Different css every time onload

3 Answers3