If you have already a css for all hours you can use this jquery:
<script type="text/javascript">
$('body').addClass('hour_'+currentHout);
</script>
You have to insert it at the end of template headerinclude.
The css for all hour myst be:
.hour_2 {
...
}
.hour_15 {
...
}
OK, so I put the background image (which is in body tags) in the hour css tag as well? Your confusing me?
Stick with any one. Don't confuse urself. There are several ways to accomplish what you want.
Speaking for my code:
Yes it updates every hour subject to you have uploaded all the images for each hour as per the directed name format.
Place it in headerinclude template under document ready event:
<script type="text/javascript">
$(document).ready(function(){
var dt = new Date(),
var currentHour = dt.getHours();
$("#logo img").attr("src", "/images/logo_" + currentHour + ".png");
$('body').css('background', '#FFF url(/images/bg_'+currentHour+'.jpg) repeat');
});
</script>
Don't forget to upload images for every hours in proper place.
(2016-09-08, 05:57 PM)effone Wrote: [ -> ]Stick with any one. Don't confuse urself. There are several ways to accomplish what you want.
Speaking for my code:
Yes it updates every hour subject to you have uploaded all the images for each hour as per the directed name format.
Place it in headerinclude template under document ready event:
<script type="text/javascript">
$(document).ready(function(){
var dt = new Date(),
var currentHour = dt.getHours();
$("#logo img").attr("src", "/images/logo_" + currentHour + ".png");
$('body').css('background', '#FFF url(/images/bg_'+currentHour+'.jpg) repeat');
});
</script>
Don't forget to upload images for every hours in proper place.
OK, one last thing. I want to add this CSS to my background:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
How would it look? Also, there is 2 backgrounds, one behind the logo and one in the background of the page. How would I make both background change as well.
bump!!
Bump back to the top, still need help...