- This topic is empty.
-
AuthorPosts
-
November 9, 2016 at 1:08 pm #247690slickrickParticipant
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
FloNovember 9, 2016 at 1:46 pm #247693BeverleyhParticipantIf 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)
November 9, 2016 at 7:57 pm #247699ShikkedielParticipantContinuing 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>
November 10, 2016 at 2:43 am #247705slickrickParticipantHey,
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>
…November 10, 2016 at 2:52 am #247706slickrickParticipantthanks. But do i have to set the style link in the head also?
Tried it and it doesn´t work ;(
November 10, 2016 at 3:26 am #247709ShikkedielParticipantYou 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.
November 10, 2016 at 6:24 am #247718BeverleyhParticipantSimilarly, 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
<head>
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" />
November 11, 2016 at 2:13 am #247765slickrickParticipantHey Ho Beverleyh,
Thanks for the tip.
Cheers
-
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.