Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Load random CSS on page load

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #247690
    slickrick
    Participant

    Hi,
    i am a total newbie and try to get a little bit into coding.
    I´ve downladed some Javascript Code but it does not work.

    What i intend to do is create 4-6 different css stylsheets ( fullscreen Backgrounds and Logo styles ) and load them randomly on page load.

    How do i load the css files in the html? I know how to load a single one. But i dont know how to load several and where to place them so that the javascript can work with them.

    What is the best to do it? PHP? Javascript?

    I´ve seen many codes out there but they are always just the script without html example. And i am just to stupid to figure ot out.

    Thx
    Cheers
    Flo

    #247693
    Beverleyh
    Participant

    If you just want to load a single stylesheet each time, you could name them all as sequential numbers and use PHP’s mt_rand() function to call a random value each time.

    So if you had 5 stylesheets, you could name them 1.css, 2.css, 3.css, 4.css and 5.css

    Then insert a style link in the webpage head in the usual way, but echo in the number too. Something like;

    <link rel="stylesheet" href="/path/to/styles/<?php echo(mt_rand(1,5));?>.css" />
    

    (Untested – on mobile)

    #247699
    Shikkediel
    Participant

    Continuing on Beverley’s example, here’s how you would do it with JS:

    <head>
    <script>
    (function() {
    var sheet = document.createElement('link');
    sheet.rel  = 'stylesheet';
    sheet.href = '/path/to/styles/' + (Math.floor(Math.random()*5)+1) + '.css';
    document.getElementsByTagName('head')[0].appendChild(sheet);
    })();
    </script>
    </head>
    
    #247705
    slickrick
    Participant

    Hey,
    thanks. That will help a lot.
    Only thing i have to figure out is how to use the PHP’s mt_rand() function. We will see.

    By now i managed to be successful with this javascript. I created a empty div in html and multiple div.random- css designs.
    But i am not sure if it works with a additional logo implemented in css.


    <script type=”text/javascript”>

    document.getElementsByTagName(‘body’)[0].className+=’ random-‘ + Math.floor((Math.random() * 3) + 1);
    </script>

    #247706
    slickrick
    Participant

    @Shikkediel

    thanks. But do i have to set the style link in the head also?

    Tried it and it doesn´t work ;(

    #247709
    Shikkediel
    Participant

    You don’t have to add any additional style link with the JS, it creates that element itself. Just paste the script in the head section and make sure the path after sheet.href = is correct…

    You can always use developer tools to check the inserted link by the way.

    #247718
    Beverleyh
    Participant

    Similarly, with the PHP mt_rand() suggestion, theres nothing to figure out. Its just picking a random number between 1 and 5 (inclusively).

    The line of code has been tested and works so it just needs to be pasted into the &lt;head&gt; section of a web page – preferable a .php web page, although it will work in .htm/.html pages too if the server has been setup to parse PHP in those page extensions. More advice on doing that here http://deano.me/2015/12/php-inside-html-files-using-htaccess/

    <link rel="stylesheet" href="/path/to/styles/<?php echo(mt_rand(1,5));?>.css" />
    
    #247765
    slickrick
    Participant

    Hey Ho Beverleyh,

    Thanks for the tip.

    Cheers

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Design’ is closed to new topics and replies.