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>
Related
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)
i'm building a website portfolio with an interactive display at the top with some click events and hover. However i changed the 'body' class so i could fit it in with my website and then the javascript stopped working and i can't for the life of me figure it out?!
(sorry if i didnt show enough snippets..) I'm using scss but i used a transpiler to convert it into css when i switched it over to VSC..
the normal javscript like time and date work fine - it just seems to be the elements connected on the page / in the now 'display' div which i cant connect to anymore..
It works fine when the classes are with body - code:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
background: #CCBBFF;
z-index: -10;
display: flex;
justify-content: center;
align-items: center;
}
.mainDisp {
width: 1000px;
height: 550px;
border: 1px solid black;
// overflow: hidden;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
position: absolute;
}
*:before,
*:after {
content: "";
position: absolute;
}
.lamp {
width: 120px;
height: 80px;
background: #494949;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
left: 45%;
top: 10%;
z-index: 4;
}
</head>
<body>
<div class="mainDisp">
<div class="lamp"></div>
<div class="innerLight hidden"></div>
<div class="string"></div>
....
but when i add a new class 'Display' and add the old body's classes the javascript just doesnt work anymore? Same Javascript for both..
code :
function openURL(url) {
window.open(url);
}
var book1 = document.querySelector('.book');
var super1 = document.querySelector('.super1');
var book2 = document.querySelector('.book.two');
var super2 = document.querySelector('.super2');
var book3 = document.querySelector('.book.three');
var super3 = document.querySelector('.super3');
var calculator = document.querySelector('.calculator');
var calc = document.querySelector('.calc');
var phone = document.querySelector('.phone');
var tipCalc = document.querySelector('.tipCalc');
var lightSwitch = document.querySelector('.switch');
var lamp = document.querySelector('.innerLight');
lightSwitch.addEventListener('click', function() {
lamp.classList.toggle('hidden');
})
book1.addEventListener('mouseover', function() {
super1.classList.remove('hidden')
});
book1.addEventListener('mouseout', function() {
super1.classList.add('hidden')
});
book2.addEventListener('mouseover', function() {
super2.classList.remove('hidden')
});
book2.addEventListener('mouseout', function() {
super2.classList.add('hidden')
});
book3.addEventListener('mouseover', function() {
super3.classList.remove('hidden')
});
book3.addEventListener('mouseout', function() {
super3.classList.add('hidden')
});
calculator.addEventListener('mouseover', function() {
calc.classList.remove('hidden')
});
calculator.addEventListener('mouseout', function() {
calc.classList.add('hidden')
});
phone.addEventListener('mouseover', function() {
tipCalc.classList.remove('hidden')
});
phone.addEventListener('mouseout', function() {
tipCalc.classList.add('hidden')
});
// CALENDAR DATE
const dayDisp = document.querySelector('#day');
const monthDisp = document.querySelector('#month');
var months = ['Jan','Feb','Mar','Apr','May','June','July','Aug','Sept','Oct','Nov','Dec'];
var now = new Date();
var date = now.getDate();
var month = months[now.getMonth()];
dayDisp.innerText = date;
monthDisp.innerText = month;
// MAIN CLOCK //
var hourHand = document.querySelector('.hour');
var minHand = document.querySelector('.min');
var secHand = document.querySelector('.sec');
function setDate() {
const now = new Date;
const secs = now.getSeconds();
const secondDegrees = ((secs / 60) * 360) + 90;
secHand.style.transform = `rotate(${secondDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + 90;
minHand.style.transform = `rotate(${minsDegrees}deg)`;
const hours = now.getHours();
const hourDegrees = ((hours / 12) * 360) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background: #fdf5e6;
}
html {
box-sizing: border-box;
}
-----------
.display {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: #CCBBFF;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: -10;
* {
position: absolute;
box-sizing: inherit;
}
*:before, *:after {
position: absolute;
content: '';
box-sizing: inherit;
}
.mainDisp {
position: absolute;
width: 1000px;
height: 550px;
// border: 1px solid black;
z-index: -10;
box-sizing: inherit;
.lamp {
position: absolute;
width: 120px;
height: 80px;
background: #494949;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
left: 45%;
top: 10%;
z-index: 4;
}
.innerLight {
position: absolute;
z-index: 1;
width: 100%;
height: 900px;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
background: rgba(253,245,230, 0.4);
left: 1%;
top: 55px;
}
</head>
<body>
<div class="container">
<header>
<div class="intro">
<h1 class="name">NAME</h1>
</div>
<nav>
<li>About</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</nav>
</header>
<div class='display'>
<div class="mainDisp">
<div class="lamp"></div>
<div class="innerLight hidden"></div>
<div class="string"></div>
<div class="super1 hidden"></div>
<div class="super2 hidden"></div>
<div class="super3 hidden"></div>
<!-- <div class="window" onclick="openURL('https://codepen.io/Eejay/full/VQBvOm/')" target="_blank"> -->
<div class='windows'>
<div class="outside">
<div class="moon"></div>
</div>
<div class="inner"></div>
<div class="inner two"></div>
</div>
<div class="ledge"></div>
<div class="mainClock">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
Any help appreciated! I know its probably something really simple but i can't put my finger on it....
Your Problem is that you set your z-index of .display to -10. Its not clickable anymore.
Setting it to 0 will fix your issue:
.display {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: #CCBBFF;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: 0;
}
take a look at this forked codepen.
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>
I am trying to get the word count from 1 element and put it onto a variable. But i am not sure the best way to do this. Any ideas?
var value = $('#text1').val();
var regex = /\s+/gi;
var wordCount = value.trim().replace(regex, ' ').split(' ').length;
$('#text1').html(wordCount);
<p id="text1" class="entry">This is test text in this template</p>
I have tried answers in this Question, added the below code and got this error.
TypeError: undefined is not an object (evaluating '$('#text1').val().replace')
var word_count = $('#text1').val().replace(/^[\s,.;]+/, "").replace(/[\s,.;]+$/, "").split(/[\s,.;]+/).length;
<!DOCTYPE html>
<html>
<head>
<title>text_centred</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
p {
font-size: 16px;
color: #4d4d4d;
font-family: FrescoSans-Normal;
text-align: center;
line-height: 24px;
padding-bottom: 15px;
opacity: 1;
}
#textBlock {
height: 100%;
overflow: auto;
width: 100%;
}
#wrapper {
position: relative;
width: 60%;
margin: 0 auto;
max-width: 800px;
height: auto;
}
</style>
<script type="text/javascript">
var value = $('#text1').text(); //.val() works on inputs, get the text instead
var regex = /\s+/gi;
var wordCount = value.trim().replace(regex, ' ').split(' ').length - 1;
// length - 1 is more accurate because 'cat dog'.split().length == 2, but theres only one space!
$('#text1').html(wordCount);
</script>
</head>
<body id="background">
<div id="textBlock">
<div id="wrapper">
<p id="text1">This is test text in this template</p>
</div>
</div>
</body>
</html>
Given:
<p id="text1">This is test text in this template</p>
The following code seems to do the trick. The output is 7.
var value = $('#text1').text();
var regex = /\s+/gi;
var wordCount = value.trim().split(regex).length;
$('#text1').html(wordCount);
jsfiddle
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)");