Troubles with changing background image via jQuery while browserSync is not running - javascript

I have a slider that works by changing positions of background-images. Also i use the BrowserSync. While BrowserSync runs, slider works good, while not - all animations are commiting, but .slide background image not appears at all. What did i do wrong?
P.S. also i use backgroundPosition script - it allows to set few arguments.
Watch correct: https://gyazo.com/2185ae332bac4b1da1bd4f2fcd9bfe5a
Watch uncorrect: https://gyazo.com/681a28e927ef537f1f4f034faeb56b0d
html:
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/backgroundPosition.js"></script>
<script src="js/slider.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div class="slider">
<div class="upside">
<div class="slide">
<div class="wheel"></div>
</div>
</div>
</div>
<div class="next"></div>
</body>
</html>
css:
body{
height: 100%;
width: 100%;
}
.slider, .upside, .slide{
height: 650px;
width: 1200px;
margin: 0 auto;
border-radius: 15px;
}
.slider{
margin: 50px auto;
background: url(../img/bg.jpg) no-repeat center;
overflow: hidden;
}
.upside{
background-image: url(../img/upside.png);
background-repeat: no-repeat;
background-position: 0px -800px;
}
.slide{
background-image: url(../img/sl_1.jpg);
background-repeat: no-repeat;
}
#keyframes rt{
100%{
transform: rotate(360deg);
}
}
.wheel{
height: 640px;
width: 180px;
background-image: url(../img/wheel.png);
background-repeat: no-repeat;
background-position: left center;
position: relative;
margin: 0px 0 0 -180px;
animation: rt 6s linear infinite
}
.next{
height: 120px;
width: 120px;
margin: 0px auto;
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 30px;
text-align: center;
line-height: 120px;
vertical-align: middle;
text-transform: uppercase;
background:url(../img/next.png) no-repeat;
border-radius: 50%;
opacity: .55;
}
js:
$(function(){
var btn = $(".next"),
wheel = $(".wheel"),
upside = $(".upside"),
slide = $(".slide"),
cur_slide = 1;
var nextSlide = function(){
btn.off();
cur_slide++;
if(cur_slide===4){cur_slide=1;}
var i1 = 0;//upside bottom point
var i2 = 650;//slide bottom point
wheel.animate({
margin: "0px 0 0 -105px"
},800,
function(){
slide.animate({
backgroundPosition:("-1200 0")
},1000,
function(){
upside.animate({
backgroundPosition:("0 0")
},1200,
function(){
slide.css('background-image',"url(../img/sl_"+cur_slide+".jpg)");
var up = setInterval(function(){
upside.css("background-position","0 "+i1+"px");
slide.css("background-position","0 "+i2+"px");
if (i2===0) {
clearInterval(up);
upside.css("background-position","0 -800px");
wheel.animate({
margin: "0px 0 0 -180px"
},800,
function(){
btn.click(nextSlide);
})
}
i1--;
i2--;
},2);
})
})
})
}
btn.click(nextSlide);
})
here is the code of backgroundPosition.js (dont know do you need it or not)
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.pos === 0 && typeof fx.end == 'string') {
var start = $.css(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);

Well, if someone will get the same problem, i post this solution:
We have to change this:
slide.css('background-image',"url(../img/sl_"+cur_slide+".jpg)");
to this:
slide.css('background-image',"url(img/sl_"+cur_slide+".jpg)");

Related

Adventcalender, how to make it accessible on a specific date?

So I am making an advent calendar, and have already made the layout and made it possible to open the doors. But how do I set it to open on a specific date? I am pretty new to coding so I do not know where to start.
I have an index.html file
an css file and a java file
const kalenderKnap = document.querySelector(".btn-start");
const kalenderContainer = document.querySelector(".container");
const kalenderDage = 24;
const åbenLåge = (path, event) => {
event.target.parentNode.style.backgroundImage = `url(${path})`;
event.target.style.opacity = "0";
event.target.style.backgroundColor = "lightblue";
}
const startKalender = () => {
for(let i = 0; i < kalenderDage; i++) {
const kalenderLåge = document.createElement("div");
const kalenderLågeTekst = document.createElement("div");
kalenderLåge.classList.add("image");
kalenderLåge.style.gridArea = "låge" + (i +1);
kalenderContainer.appendChild(kalenderLåge);
kalenderLågeTekst.classList.add("text");
kalenderLågeTekst.innerHTML = i + 1;
kalenderLåge.appendChild(kalenderLågeTekst);
lågeNummer = i + 1;
let coursePath = `./filer/låge${lågeNummer}.jpg`;
kalenderLågeTekst.addEventListener("click", åbenLåge.bind(null, coursePath));
}
}
kalenderKnap.addEventListener("click", startKalender);
* {
box-sizing: border-box;
}
.btn-start {
background-color: darkred;
color: white;
border: 2px solid black;
border-radius: 15px;
margin: 15px auto;
display: block;
width: 10rem;
height: 2rem;
}
.container {
width: 800px;
height: 900px;
border: 5px solid black;
margin: 15px auto;
background-image: url("./filer/baggrund1.jpg");
background-size: cover;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(6, 1fr);
grid-template-areas:
"låge7 låge8 låge2 låge6"
"låge3 låge13 låge5 låge23"
"låge17 låge21 låge19 låge14"
"låge24 låge4 låge9 låge12"
"låge10 låge15 låge1 låge18"
"låge16 låge20 låge11 låge22";
}
.image {
background-image: none;
background-size: cover;
background-position: center;
}
.text {
height: 100%;
width: 100%;
color: solid black;
padding: 10px;
border: 2px solid black;
transition: opacity 2s;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Julekalender</title>
</head>
<body>
<button class="btn-start">Start Julekalender</button>
<div class="container">
</div>
<script src="main.js"></script>
</div>
</body>
</html>
so how do i make each door open on the specific date, and where do i put it?
You can do this with the Date-Object. Just add this to your åbenLåge-Function:
const åbenLåge = (path, event) => {
var date = new Date();
if(date.getDate() == event.target.innerHTML) {
...
}
}
This checks if the selected number corresponds to today's date. So for example today you only can click on the door with number 7.
Here is the edited fiddle:
const kalenderKnap = document.querySelector(".btn-start");
const kalenderContainer = document.querySelector(".container");
const kalenderDage = 24;
const åbenLåge = (path, event) => {
var date = new Date();
if(date.getDate() == event.target.innerHTML) {
event.target.parentNode.style.backgroundImage = `url(${path})`;
event.target.style.opacity = "0";
event.target.style.backgroundColor = "lightblue";
}
}
const startKalender = () => {
for(let i = 0; i < kalenderDage; i++) {
const kalenderLåge = document.createElement("div");
const kalenderLågeTekst = document.createElement("div");
kalenderLåge.classList.add("image");
kalenderLåge.style.gridArea = "låge" + (i +1);
kalenderContainer.appendChild(kalenderLåge);
kalenderLågeTekst.classList.add("text");
kalenderLågeTekst.innerHTML = i + 1;
kalenderLåge.appendChild(kalenderLågeTekst);
lågeNummer = i + 1;
let coursePath = `./filer/låge${lågeNummer}.jpg`;
kalenderLågeTekst.addEventListener("click", åbenLåge.bind(null, coursePath));
}
}
kalenderKnap.addEventListener("click", startKalender);
* {
box-sizing: border-box;
}
.btn-start {
background-color: darkred;
color: white;
border: 2px solid black;
border-radius: 15px;
margin: 15px auto;
display: block;
width: 10rem;
height: 2rem;
}
.container {
width: 800px;
height: 900px;
border: 5px solid black;
margin: 15px auto;
background-image: url("./filer/baggrund1.jpg");
background-size: cover;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(6, 1fr);
grid-template-areas:
"låge7 låge8 låge2 låge6"
"låge3 låge13 låge5 låge23"
"låge17 låge21 låge19 låge14"
"låge24 låge4 låge9 låge12"
"låge10 låge15 låge1 låge18"
"låge16 låge20 låge11 låge22";
}
.image {
background-image: none;
background-size: cover;
background-position: center;
}
.text {
height: 100%;
width: 100%;
color: solid black;
padding: 10px;
border: 2px solid black;
transition: opacity 2s;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Julekalender</title>
</head>
<body>
<button class="btn-start">Start Julekalender</button>
<div class="container">
</div>
<script src="main.js"></script>
</div>
</body>
</html>
You can pass an object as a parameter like this:
const åbenLåge = (kalenderLågeTekst, event) => {
var date = new Date();
if(date.getDate() == kalenderLågeTekst.day) {
...
}
}
const startKalender = () => {
for(let i = 0; i < kalenderDage; i++) {
....
kalenderLågeTekst.path = coursePath;
kalenderLågeTekst.day = lågeNummer;
kalenderLågeTekst.addEventListener("click", åbenLåge.bind(null, kalenderLågeTekst));
}
}

How do I change the left margin of div based on scroll and using javascript?

I am new to Javascript and CSS. I have a div that will contain an image. The below code, I pieced it together after watching some YouTube videos and going over some documentation, however I am sure that this is not the right code.
https://jsfiddle.net/0hp97a6k/
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div {
margin: 0;
}
.headerspace {
width: 100%;
height: 20px;
background-color: white;
}
.header {
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
}
.logo {
width: 200px;
height: 200px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headerspace"></div>
<div class="header">
<div class="logo" id="logoid">
</div>
</div>
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function() {
var value = window.scrollY;
logo.style.marginleft = value * 0.5 + 'px';
})
</script>
</body>
</html>
How do I set the left margin based on scroll?
Also can scroll based properties be applied to two margins, say top and right at the same time?
marginleft should be marginLeft in your javascript
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
})
</script>
And then if you want to edit the left and top you can do the following
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
logo.style.marginTop = value * 0.5 + 'px';
})
</script>
To make sure the logo element goes back where it started you should edit the css like this
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div{
margin: 0;
}
.headerspace{
width: 100%;
height: 20px;
background-color: white;
}
.header{
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
padding-top: 50px;
padding-left: 50px;
}
.logo{
width: 200px;
height: 200px;
background-color: red;
}
I have removed the margin from .logo because that will be overwritten and added those values as padding to the parent (.header)

when i run .onclick, it runs once, and then it doesnt work again

to my understanding, .onclick, should work each time I click the button, however this is only working once. This is my code so far
var left = document.getElementById("left");
left.onclick = moveLeft;
function moveLeft() {
var box = document.getElementById("box1");
var pos = 200;
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
like I said, it works, but only once, it shifts the box to the left one square, but it shouldn't stop until after 5 squares.
please help...
The first answer is right, your pos variable revalue to 200 when you click your button everytime.
So it is just from 200 to 250 everytime.it look like same everytime.
try like this:
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
That is because your pos variable is defined inside the moveLeft function. Every time the function is executed, the pos is always 200. Define it outside the moveLeft function.
Either make pos global as in below snippet.
Or set it dynamically within the function.
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>

How to rotate background image on scroll

I am trying to rotate background image while scrolling. The effect should look like cube. Sadly I could not find a way with css and jquery to make it look like in the video. On the gif, when scrolling down from gallery to next page, there is grill background which rotates and stretches by amount of page shown.
EDIT: Rotating animation has to look like this
What have I tried so far (unsuccessfully)
$(function() {
var rotation = 0,
scrollLoc = 0;
$(window).scroll(function() {
$("#galerie").text($(document).scrollTop() + "=ScrollTop,WinHeight=" + $(window).height());
var newLoc = $(document).scrollTop();
var diff = scrollLoc - newLoc;
rotation += diff, scrollLoc = newLoc;
var rotationStr = "rotateX(" + rotation / ($(window).height() * 2) + "turn)";
$("#home").css({
"-webkit-transform": rotationStr,
"-moz-transform": rotationStr,
"transform": rotationStr,
"background-size": -rotation
});
});
})
body,
html {
height: 100%;
}
body {
background-color: #090909;
}
#home {
height: 100%;
position: relative;
overflow: hidden;
}
#galerie {
color: green;
}
#home:before {
content: "";
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center bottom;
background-color: grey;
background-attachment: initial;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id=box>
<div id="home">
TestText
</div>
</div>
<div id="galerie">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="gale">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
I've made the top part for you. And I'm sure you'll make the bottom one yourself (see the snippet in the Full page mode):
$(function() {
$(window).scroll(function() {
$('#home_bg').css({
'transform': 'rotateX(' + 30 * (1 + Math.PI * Math.atan($(document).scrollTop() / 300)) + 'deg)'
});
});
})
html,
body {
height: 100%; margin:0 ;padding:0
}
body {
background-color: #333;
}
#home {
height: 30vh;
position: relative;
overflow: hidden;
perspective: 300px;
color:#fff;
text-align:center;
}
#home_bg {
content: "";
background: repeating-linear-gradient(45deg, #555, #555 2px, transparent 0, transparent 60px), repeating-linear-gradient(-45deg, #555, #555 2px, transparent 0, transparent 60px) 30px 30px / 170px 170px;
position: absolute;
z-index: -1;
top: -100%;
left: -50%;
width: 200%;
height: 200%;
transform: rotateX(30deg);
transform-origin: 50% 100%;
}
#galerie {
color: green;
display: flex;
justify-content: center;
flex-flow: row wrap;
width: 50%;
margin: 0 auto 70vh;
}
#galerie img {
width: 45%;
margin: 0 auto 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="home">
<h1>Lorem ipsum?</h1>
<div id="home_bg"></div>
</div>
<div id="galerie">
<p></p>
<img src="https://picsum.photos/100/100?1">
<img src="https://picsum.photos/100/100?2">
<img src="https://picsum.photos/100/100?3">
<img src="https://picsum.photos/100/100?4">
<img src="https://picsum.photos/100/100?5">
<img src="https://picsum.photos/100/100?6">
</div>
</body>
Hope you want like this.
$(function() {
var rotation = 0;
var interval;
var gear = $('.gear');
function animate() {
gear.css('transform', 'rotate('+rotation+'deg)');
rotation += 10;
rotation %= 360;
}
function startAnim() {
if (!interval) {
interval = setInterval(animate, 50);
}
}
function stopAnim() {
clearInterval(interval);
interval = null;
}
$(document).scroll(startAnim).mouseup(stopAnim);
});
body{
height: 1000px;
}
.gear{
background: url("https://cdn.pixabay.com/photo/2016/01/03/11/24/gear-1119298_960_720.png") no-repeat;
width: 100%;
height: 100px;
position: fixed;
background-position: center center;
background-size: contain;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gear"></div>

different background depending on time

I'm trying to make two different backgrounds depending on time. Day/night background. I programmed this but it doesn't work...
<script type="text/javascript">
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 20) {
<style>
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("bg_day.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
</style>
}
else {
<style>
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("bg_night.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
</style>
}
</script>
Can somebody please help me?
LIVE DEMO
Keep your style inside <style> (or rather inside a separate .css file) where it needs to be... don't mix it with JS.
Use:
<script>
var currentTime = new Date().getHours();
var day = 7 <= currentTime && currentTime < 20;
document.body.style.backgroundImage = 'url('+ (day?"day.jpg":"night.jpg")+ ')';
</script>
</body>
in jQuery looks like:
var CTime = new Date().getHours();
$('body').css({backgroundImage:"url("+(CTime>=7&&CTime<20?"day.jpg":"night.jpg")+")"});
Or the readable way:
function bgByTime(){
var CTime = new Date().getHours();
return CTime >= 7 && CTime < 20 ?
"day.jpg" :
"night.jpg" ;
}
$('body').css({ backgroundImage: "url("+ bgByTime() +")" });
or the Object Literal way (jQuery):
var ct = new Date().getHours(),
img = ct>=7&&ct<20 ? "day.jpg" : "night.jpg";
bg = {backgroundImage : "url("+ img +")"};
$('body').css(bg);
Here you go:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>day/night dynamic background for user3329709</title>
<style type="text/css">
.day
{
background: url(http://miriadna.com/desctopwalls/images/max/Day-sky.jpg) no-repeat;
width: 500px;
height: 500px;
}
.night
{
background: url(http://growwhereyoureplanted.com/wp-content/uploads/2013/11/palmlixcom-night-sky-stars-background-psdgraphics.jpg) no-repeat;
width: 500px;
height: 500px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var currentTime = new Date().getHours();
if (currentTime >= 7 && currentTime <= 15) {
$("#background").addClass("day");
} else {
$("#background").addClass("night");
}
});
</script>
</head>
<body>
<div id="background" class="day">
</div>
</body>
</html>
Adding style tags in js like that will not work. But since you specified jQuery, here's a basic example...
<style>
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("bg_day.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
.nighttime{
background-image: url("bg_night.jpg");
}
</style>
In your footer somewhere add the js
<script type="text/javascript">
var currentTime = new Date().getHours();
if (currentTime > 20) {
$('body').addClass('nighttime');
}
</script>
Tnx for all your answers but I solved my problem with this:
<script type="text/javascript">
<!--
var now = new Date();
var hours = now.getHours();
var psj=0;
document.write('<style type="text/css">')
if (hours >= 6 && hours <= 20){
document.write('html, body{height: 100%; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 0; width: 100%; background-image: url("bg_day.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed;}')
}
else{
document.write('html, body{height: 100%; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 0; width: 100%; background-image: url("bg_night.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed;}')
}
document.write('<\/style>')
//-->
</script>

Categories