If scroll is 100px then turn background into red. (Pure JavaScript) - javascript

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.

Related

Javascript image changer (2 images in one picture file) with one button

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')
}

jquery draggable, making a div not to go outside of the other div frame

i need a draggable div not to go outside of second div frame, so far i managed to make a "collision" basically returning true or false if draggable div is inside the frame of other div. So the thing now is that i cant get this to work, i was trying to get it to a x = 90(example) when it hits the frame and few more examples , but i just can't get this to work. The draggable div doesn't want to go back to position.
Here is a JSFiddle: https://jsfiddle.net/kojaa/x80wL1mj/2/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Catch a ball</title>
</head>
<body>
<div class="catcherMovableArea" id="catcherMovableArea">
<div id="catcher" class="catcher"></div>
</div>
<script src="script.js"></script>
</body>
</html>
.catcherMovableArea {
position: absolute;
border: 1px solid black;
width: 1900px;
top: 90%;
height: 50px;
}
.catcher {
position: absolute;
width: 250px;
height: 30px;
border-radius: 10px;
background-color: black;
top: 20%;
}
let catcher = $("#catcher");
$(document).mousemove(function(e) {
catcher.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit"
});
let catcherOffset = $(catcher).offset();
let CxPos = catcherOffset.left;
let CyPos = catcherOffset.top;
let catcherYInMovableArea, catcherXInMovableArea = true;
while(!isCatcherYinMovableArea(CyPos)){
catcherYInMovableArea = false;
break;
}
while(!isCatcherXinMovableArea(CxPos)){
catcherXInMovableArea = false;
break;
}
});
function isCatcherYinMovableArea(ypos){
if(ypos < 849.5999755859375 || ypos > 870.5999755859375) {
return false;
} else {
return true;
}
}
function isCatcherXinMovableArea(xpos){
if(xpos < 8 || xpos > 1655 ) {
return false;
} else {
return true;
}
}
By default, the collision option will prevent the element from being placed outside of the window. You want to prevent it from moving outside of a specific element.
To do this, use the within option to select which element should be used for containment.
Example:
let draggable = $("#draggable");
$(document).mousemove(function(e) {
draggable.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit",
within: "#container"
});
});
#container { width: 200px; height: 100px; border-style: solid }
#draggable { width: 50px; height: 50px; background-color: black }
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>
<div id="container">
<div id="draggable"></div>
</div>

JQuery game - Make player move smooth in % values

We have this really annoying project were we need to make a game in JQuery. I'm having some problems making my character move the way I want him to. I manage to make the character move but he does not move in %. He adds his own width to the "left:" of him and then animates to that position. This is not good, because when you resize the window they do not "scale with it". Basically, can anyone help me make the player move smoothly in % values! Here is my code! (Variables and comments are in Swedish...)
JSfiddle : https://jsfiddle.net/Leqca77h/1/
index.html:
<!doctype html>
<html>
<head>
<title>JQuery spel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/stil.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script/start.js"></script>
<script type="text/javascript" src="script/spelareRörelse.js"></script>
</head>
<body onresize="sättSpelareHöjd()">
<header><h1>Jquery spel</h1></header>
<br>
<div id="bana"></div>
</body>
stil.css:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Ubuntu', sans-serif;
}
#bana {
position: relative;
border: 1px solid black;
margin: auto;
width: 99%;
height: 70vh;
}
#spelare1 {
background-color: green;
width: 2.7%;
height: 0;
display: block;
position: absolute;
}
start.js:
$(document).ready(function(){
//var tid = parseInt(prompt("Hur långt ska du spela? (Ange i sekunder)"));
$("#bana").append("<div id='spelare1'></div>");
$("#bana").append("<div id='spelare2'></div>");
sättSpelareHöjd();
});
var knappTryckt1 = true;
function sättSpelareHöjd() {
var spelareHöjd = $("#spelare1").width();
$("#spelare1").css("height", spelareHöjd);
}
spelareRörelse.js (playerMovment.js):
//Spelare 1 rörelse
$(document).keydown(function(e){
if(knappTryckt1) {
if(e.keyCode == 37) {
$("#spelare1").stop().animate({left: "-=" + $(this).width()},5000);
//Pil vänster
}
else if (e.keyCode == 38) {
$("#spelare1").stop().animate({top: "-=" + $(this).height()},5000);
//Pil upp
}
else if (e.keyCode == 39) {
$("#spelare1").stop().animate({left: "+=" + $(this).width()},5000);
//Pil höger
}
else if (e.keyCode == 40) {
$("#spelare1").stop().animate({top: "+=" + $(this).height()},5000);
//Pil ner
}
knappTryckt1 = false;
}
});
$(document).keyup(function(){
$("#spelare1").stop();
knappTryckt1 = true;
});
If you can help! Thanks! :)
JSfiddle : https://jsfiddle.net/Leqca77h/1/
A solution was found! Changing:
"left: "-=" + $(this).width()"
to:
"left: "-=" + 100 + "%""
worked for me!

I need to execute jquery code only on certain resolution at window scroll

I've this jquery code. I need to execute only on > 950px resolution.
If not I lose the responsive logo.
I want to do something similar like the Lenovo homepage navbar.
$(document).ready(function(){
//left side menu functions End
//Logo function
$(document).scroll(function() {
if ($(document).scrollTop() < 25) {
$("div.logo").height(200);
$('div.logo a').css('background-image', 'url(img/logo-clear.png)');
} else {
$("div.logo").height(50);
$('div.logo a').css('background-image', 'url(img/logo-sm.png)');
}
});
});
Instead of changing css you can add and remove css, something like this
$(document).ready(function(){
$(document).scroll(function() {
if(window.innerWidth > 950){
if ($(document).scrollTop() < 25) {
$('.logo').addClass('logo-clear');
} else {
$('.logo').removeClass('logo-clear');
}
}
});
});
body{
height: 150vh;
}
.logo{
background-color: green;
width: 500px;
height: 500px;
}
.logo a{
height: 50px;
}
.logo.logo-clear{
background-color: yellow;
}
.logo.logo-clear a{
height: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="logo">
hello
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
Note, I added some additional css for visualization purpose. You can also check it here https://output.jsbin.com/viqebo
Just put your code inside a if condition which checks width of the window (if ($(window).width () > 950))
$(document).ready(function(){
//left side menu functions End
//Logo function
$(document).scroll(function() {
if ($(window).width () > 950) {
if ($(document).scrollTop() < 25) {
$("div.logo").height(200);
$('div.logo a').css('background-image', 'url(img/logo-clear.png)');
} else {
$("div.logo").height(50);
$('div.logo a').css('background-image', 'url(img/logo-sm.png)');
}
}
});
});

jquery masonry style grid issue

trying to make a simple masonry style grid with Jquery but keep running into an issue with weird margins appearing and i can't figure out why. Had a few attempts with similar results. Here's the latest
js
$(document).ready(function () {
var $boxes = $('.box');
var rowPos = 0;
var counter = 0;
$boxes.each(function (ind) {
var boxWidth = $(this).width();
var upperBoxHeight = 0;
var upperBoxPosition = 0;
var top = 0;
rowPos = counter * boxWidth;
counter++;
if(counter >= 3){
counter = 0;
}
if(ind >= 3){
upperBoxHeight = $boxes.eq(ind - 3).height();
upperBoxPosition = $boxes.eq(ind -3).position().top;
top = upperBoxHeight + upperBoxPosition; }
$(this).css({
left: rowPos,
top : top
});
});
});
css
.container{
width: 85%;
margin: auto;
position: relative;
}
.box{
width: 33.3333%;
position: absolute;
}
.box1, .box5{
background: #2baf63;
height: 500px;
}
.box2, .box6{
background: #623ec5;
height: 650px;
}
.box3, .box7{
background: #3e81c5;
height: 300px;
}
.box4, .box8{
background: #9fba43;
height: 400px;
}
markup
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-3.1.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="box box1"><span>box 1</span></div>
<div class="box box2"><span>box 2</span></div>
<div class="box box3"><span>box 3</span></div>
<div class="box box4"><span>box 4</span></div>
<div class="box box5"><span>box 5</span></div>
<div class="box box6"><span>box 6</span></div>
<div class="box box7"><span>box 7</span></div>
<div class="box box8"><span>box 8</span></div>
</div>
<script src="js/functions.js"></script>
</body>
</html>
strange thing is, if i open the inspector and refresh the page, all boxes lock into their intended position. if i close the inspector and refresh again, problem comes back.
then with inspector open

Categories