currently working on a simple script that displays a nightime background if it's a certain time in the day and a daytime image if it's a different time of day. I am using jQuery to achieve this by adding a class if one is true, and adding a class if the other is true. Issue is... the code simply won't function properly. Curious about any possible solutions... thanks!
$(document).ready(function() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 20) {
$("document.body").addClass("day");
$("document.body").removeClass("night");
} else {
$("document.body").addClass("night");
$("document.body").removeClass("day");
}
});
.night {
background-image: url('images/night.jpg');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
</head>
<body>
<div class="app-wrapper">
<p id="date"></p>
</div>
</body>
Change:-
$("document.body").addClass("day");
$("document.body").removeClass("night");
to:-
$("body").addClass("day").removeClass("night");
(same for second-one too)
Working demo example:-
$(document).ready(function() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 20) {
$("body").addClass("day").removeClass("night");
} else {
$("body").addClass("night").removeClass("day");
}
});
.night {
background-color: black;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
.day {
background-color: grey;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>APP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-
hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-wrapper">
<p id="date"></p>
</div>
</body>
</html>
You need to replace $("document.body") with $("body")
Related
I am having trouble with scroll using if statements.
How can I fix it and any helpful tips will be much appreciated.
if (window.scrollY == '100px') {
document.body.style.backgroundColor = "red";
}
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div> hi </div>
</body>
</html>
You need to listen on scroll event first.
window.scrollY value is integer.
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}
});
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div> hi </div>
</body>
</html>
The condition needs to be >= 100, and you need to listen to the scroll event of the window.
Here is a working snippet:
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}
});
.container {
position: absolute;
top: 200%;
font-size: 2rem;
}
<div class="container">hi</div>
You can do it as follows -
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}else{
document.body.style.backgroundColor = "white";
}
});
*{
transition-duration: 1s;
}
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<div> hi </div>
In your code, you had written the condition to be window.scrollY == 100px, so it was not working. But once you modify the condition, the code will work as expected.
Also, the else statement or transition effect are not needed, just added them for nice effect.
https://i.stack.imgur.com/LhvYb.png - This is the image that i want to work with
I made this so far,i made the position to change when i click on the button but i want to when i click the button again the first position to come back.
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div></div>
<button>Press me</button>
<script src="index.js"></script>
</body>
</html>
This is the css
div {
width: 125px;
height: 122px;
background-image: url(picture2.png);
background-repeat: no-repeat;
}
And this is the js
var image = document.getElementsByTagName('div')[0];
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click',switchPic,false);
function switchPic (e){
image.style.backgroundPosition="-150px 0";
}
simply use classList.toggle
const myDiv = document.getElementById('my-div')
, myButton = document.getElementById('my-button')
;
myButton.onclick=()=>
{
myDiv.classList.toggle('right150')
}
div#my-div {
width: 125px;
height: 122px;
background-image: url(https://i.stack.imgur.com/LhvYb.png);
background-repeat: no-repeat;
}
div#my-div.right150 {
background-position-x: -150px;
}
<div id="my-div"></div>
<button id="my-button">Press me</button>
or, with an addEventListener...
const myDiv = document.getElementById('my-div')
, myButton = document.getElementById('my-button')
;
myButton.addEventListener('click',switchPic)
function switchPic (e)
{
myDiv.classList.toggle('right150')
}
I am trying to make a beautiful parallax cap of 6 png images.
But the page freezes terribly for 10 seconds and only then starts to work normally.
If you go to another tab and go back, then again the whole tab freezes for 5 seconds.
Why can this happen?
Friezes are observed on two different PCs with good power. Even if the music from the browser works and open a contribution with this parallax, the music slows down 2 times and starts to lag: D
body {
background-color: #271c33;
}
.art-block {
position: relative;
z-index: 10;
display: block;
}
.art-block, .art_layer {
height: 1000px;
}
.art_layer {
background-position: bottom center;
background-size: auto 1038px;
background-repeat: repeat-x;
width: 100%;
position: absolute;
}
.art_layer.parallax {
position: fixed;
}
#art-back {
background-image: url(../img/background-min.jpg);
}
#art-1 {
background-image: url(../img/1-min.png);
}
#art-2 {
background-image: url(../img/2-min.png);
}
#art-3 {
background-image: url(../img/3-min.png);
}
#art-4 {
background-image: url(../img/4-min.png);
}
#art-5 {
background-image: url(../img/5-min.png);
}
#art-6 {
background-image: url(../img/6-min.png);
}
.main {
background-color: #271c33;
position: relative;
z-index: 100;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/util.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="css/style.css?1582535292">
</head>
<body>
<div class="art-block">
<div class="art_layer parallax" id="art-back" data-speed="2"></div>
<div class="art_layer parallax" id="art-6" data-speed="7"></div>
<div class="art_layer parallax" id="art-5" data-speed="22"></div>
<div class="art_layer parallax" id="art-4" data-speed="33"></div>
<div class="art_layer parallax" id="art-3" data-speed="46"></div>
<div class="art_layer parallax" id="art-2" data-speed="58"></div>
<div class="art_layer" id="art-1" data-speed="55"></div>
</div>
<div class="main" style="height: 2500px;">
ss
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).scroll(function(){
var windowScroll = $(window).scrollTop();
$('.art_layer.parallax').each(function(){
var $layer = $(this);
var yPos = -(windowScroll * $layer.data('speed') / 100);
$layer.css({
"transform" : "translate3d(0px, " + yPos + "px, 0px)"
});
});
});
</script>
</body>
</html>
May be image sizes? 7000x3500 pixels
I am creating my first simple card game and I would like to create a start menu where at the begining we insert the names of player 1 and player2, I could simply use 2 different inputs but I tried to make it a little bit more complicated and use the same input field for both players.... and I failed... When I insert the first value and made it a var name1 I am struggoling to set the second one. please check the code, the functions is incomplete but I hope it gives an idea of how I tired to do it.
Thanks for attention.
var dice1, dice2;
var btnName = document.querySelector(".btn-enterName");
btnName.addEventListener("click", function() {
var Player1NameInput = document.getElementById("playerNameInput").value;
if(Player1NameInput){
document.getElementById("playerNameInput").value="";
document.getElementById("playerNameInput").placeholder="PLAYER NAME 2";
}
else{
document.getElementById("playerNameInput").placeholder="please select a Name";
}
name1 = Player1NameInput;
});
.playerNameInput {
width:250px;
font-size:20px;
padding:6px;
text-align: center;
top:260px;
left: 50%;
transform: translateX(-50%);
position:absolute;
z-index: 10000;
}
.btn-enterName {
padding:6px;
text-align: center;
top:298px;
left: 50%;
transform: translateX(-50%);
position:absolute;
z-index: 100000;
background-color:#EB4D4D;
color:white;
width:250px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper clearfix">
<input type="text" id="playerNameInput" class="playerNameInput" placeholder="NAME PLAYER 1">
<button id="btn-enterName" class="btn-enterName">ENTER</button>
<script src="app.js"></script>
</body>
</html>
var dice1, dice2;
var name1, name2;
var btnName = document.querySelector(".btn-enterName");
btnName.addEventListener("click",function(){
var PlayerNameInput = document.getElementById("playerNameInput").value;
if(PlayerNameInput){
document.getElementById("playerNameInput").value="";
document.getElementById("playerNameInput").placeholder="PLAYER NAME 2"
} else {
document.getElementById("playerNameInput").placeholder="please select a Name";
}
if(!name1) {
name1 = PlayerNameInput;
} else {
name2 = PlayerNameInput;
console.log({name1,name2});
}
})
.playerNameInput{
width:250px;
font-size:20px;
padding:6px;
text-align: center;
top:260px;
left: 50%;
transform: translateX(-50%);
position:absolute;
z-index: 10000;
}
.btn-enterName{
padding:6px;
text-align: center;
top:298px;
left: 50%;
transform: translateX(-50%);
position:absolute;
z-index: 100000;
background-color:#EB4D4D;
color:white;
width:250px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper clearfix">
<input type="text" id="playerNameInput" class="playerNameInput" placeholder="NAME PLAYER 1">
<button id="btn-enterName" class="btn-enterName">ENTER</button>
<script src="app.js"></script>
</body>
</html>
Hope this helps!
//init
var players = []
var maxNumberOfPlayer = 2
setPlaceHolder(1)
btnName.addEventListener("click",function(){
if(players.length == maxNumberOfPlayer ) {
return
}
players.push(document.getElementById("playerNameInput").value)
setPlaceHolder(players.length)
})
function setPlaceHolder(playerNumber) {
document.getElementById("playerNameInput").placeholder = `PLAYER NAME ${playerNumber}`
}
You can store names like this also.
This is because Javascript uses references to objects. So, when you set Player1NameInput to document.getElementById("playerNameInput").value, a reference will be assigned to variable;
and when you change document.getElementById("playerNameInput").value,Player1NameInput's value will change too. Try to use a string method that does nothing when setting value of Player1NameInput, like this:
var Player1NameInput = document.getElementById("playerNameInput").value.substring(0);
i use this plugin material-refresh to refresh page it's working fine but when the page is scrolled at the top "TOP = 0" click wont fire and when i scroll it down by 1px it's work normally here an image enplane the problem better
Here the test code
var opts_stream = {
nav: '.page_header',
scrollEl: '.page_content',
onBegin: function() {
console.log("start");
},
onEnd: function() {
console.log("Done");
}
};
mRefresh(opts_stream);
.page_header {
width: 100%;
height: 100px;
background-color: red;
text-align: center;
}
.page_content {
width: 100%;
height: 1200px;
background-color: rgb(190, 190, 190);
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sdasd</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://github.com/lightningtgc/material-refresh/blob/master/src/css/material-refresh.styl">
<script src="https://raw.githubusercontent.com/lightningtgc/material-refresh/master/src/js/main.js"></script>
</head>
<body>
<div class="page_header">
Header
</div>
<div class="page_content">
<button type="button" name="button" onclick="alert('test');">Test Button</button>
</div>
</body>
</html>
NOTE : You need to run browser in mobile mood from chrome console to get this plugin to run
in line 304 in touchEnd function in material-refresh.js remove e.preventDefault();
:)