I'm pretty new to JavaScript and trying to make my image from RGB to Grayscale while scrolling down and vise versa. I managed my image to get grayvalued when scrolling however I don't get back to the RGB image.
My code for JavaScript is:
let element = document.getElementById("image");
window.onscroll = function() {
var scrollLimit = 100;
if (window.scrollY >= scrollLimit) {
element.style.filter = 'grayscale(1)';
} else {
element.src = 'ttps://images.unsplash.com/photo-1542903660-eedba2cda473?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80'
}
};
It's also public on https://jsfiddle.net/vdszymh7/139/
Maybe you have some suggestions how to dynamically change between these two modes.
What you're trying to achieve could be done by this way:
window.onscroll = function() {
var scrollLimit = 100;
if (window.scrollY >= scrollLimit) {
element.style.filter = 'grayscale(1)';
console.log('gray')
} else {
element.style.filter = 'none'
}
};
Related
Im trying to make a javascript bookmark using The code I wrote. It's supposed to add an element (in this case it adds a div. The div is as large as the size of innerHeight and innerWidth. The height shrinks by a few pixels every 250 milliseconds. It works on CodePen, but when I try it on another website, it changes the entire HTML of the page to "white" (which is the background color of the added element). Here is the code:
var falseLoaderContainer = document.getElementsByTagName("html")[0];
falseLoaderContainer.innerHTML += `<div id="falseLoader"></div>`;
var falseLoader = document.getElementById("falseLoader");
falseLoader.style.position = `absolute`;
falseLoader.style.width = `${window.innerWidth}px`;
falseLoader.style.height = `${window.innerHeight}px`;
falseLoader.style.bottom = `0px`;
falseLoader.style.left = `0px`;
falseLoader.style.backgroundColor = `white`;
var falseLoaderHeight = falseLoader.style.height.replace(/px/g, "");
var updateFalseLoader = setInterval(function () {
falseLoaderHeight *= 1;
falseLoaderHeight -= Math.ceil(Math.random() * 4);
falseLoader.style.height = falseLoaderHeight + "px";
if (falseLoaderHeight <= 0) {
clearInterval(updateFalseLoader);
}
}, 250);
Try:
var element = document.getElementById("id");
element.setAttribute("style", "background-color: COLOR;");
or:
var element = document.getElementBYId("id");
element.style = "background-color: COLOR;");
Hope this helps!
So I'm attempting to set up a rotating banner on my website (viewable at https://www.leapcraft.net) and I have a variable that gets the width of the element and should be offsetting the element not inside of the div by the number of pixels.
I've tried setting the values back to their original offset which fixes it.
var bannerStatus = 1;
var bannerTimer = 4000;
var element = document.getElementById("main-banner");
var positionInfo = element.getBoundingClientRect();
var o = positionInfo.width;
window.onload = function() {
bannerLoop();
}
var startBannerLoop = setInterval(function() {
bannerLoop();
}, bannerTimer);
function bannerLoop() {
if (bannerStatus === 1) {
document.getElementById("imgban2").style.opacity = "0";
setTimeout(function() {
document.getElementById("imgban1").style.right = "0px";
document.getElementById("imgban1").style.zIndex = "1000";
document.getElementById("imgban2").style.right = "-"+ o;
document.getElementById("imgban2").style.zIndex = "1500";
document.getElementById("imgban3").style.right = o;
document.getElementById("imgban3").style.zIndex = "500";
}, 500);
setTimeout(function(){
document.getElementById("imgban2").style.opacity = "1";
}, 1000);
bannerStatus = 2;
}
Expected Results: Rotating banner that is responsive to Width of device that is defined in style.css
Why you can't use css styles to rotate image? Look on my solution, maybe will be useful to you.
function bannerLoop() {
imgBanner[imgNum].style.opacity=1;
imgBanner[imgNum].style.WebkitTransitionDuration='';
imgBanner[imgNum].style.webkitTransform = '';
setTimeout(()=>{
imgBanner[imgNum].style.WebkitTransitionDuration='1s';
imgBanner[imgNum].style.webkitTransform = 'rotate(360deg)';
imgBanner[imgNum].style.opacity=0;
(imgNum<imgBanner.length-1)?imgNum++:imgNum=0
},3000)
}
And here is a working fiddle: https://jsfiddle.net/udtr659y/
I am trying to make a responsive image gallery in vanilla JS, I have a function and I am passing the image source as its parameter, and every time I am only changing the source on the click of next or previous button. Here is the function:
this.open = function (src) {
if (!src) {
return false;
}
for (count = 0; count <= imgSrc.length; count++) {
if (imgSrc[count] == src)
break;
var tempSrc = imgSrc[count];
}
imgRatio = false; // clear old image ratio for proper resize-values
var img = document.createElement('img');
img.setAttribute('src', src);
// hide overflow by default / if set
if (!this.opt || !isset(this.opt.hideOverflow) || this.opt.hideOverflow) {
body.setAttribute('style', 'overflow: hidden');
}
this.box.setAttribute('style', 'padding-top: 0');
this.wrapper.innerHTML = '';
this.wrapper.appendChild(img);
// console.log(this.wrapper.innerHTML);
addClass(this.box, 'jslghtbx-active');
// already show wrapper due to bug where dimensions are not
// correct in IE8
if (isIE8) {
addClass(that.wrapper, 'jslghtbx-active');
}
imgText.innerHTML = Details.static_data.gallery[count][3];
var checkClassInt = setInterval(function () {
if (hasClass(that.box, 'jslghtbx-active') && img.complete) {
// wait few ms to get correct image-dimensions
setTimeout(function () {
that.resize();
// add active-class for all other browsers
setTimeout(function () {
addClass(that.wrapper, 'jslghtbx-active');
}, 10);
clearInterval(checkClassInt);
}, 40);
}
}, 10); };
Is there any way so that I can attach animate kind of attribute to the image to have a sliding kind of animation. Please suggest your valuable feedback. [ NOTE: I am using this script https://github.com/felixhagspiel/jsOnlyLightbox ]
I'm trying to resize a div when the size of the div is 50% to 100%. But when I try to console.log the current size of the div it just logs whitespace... Whats wrong?
window.onload = function() {
//declare vars
var fullbox = document.getElementById('box'),
minBut = document.getElementById('down');
minBut.onclick = function() {
if(fullbox.style.width == "50%") {
fullbox.style.width = "100%";
} else {
fullbox.style.width = "50%";
}
}
}
that could be the case when the width has not been initialized for that element before.
The second time it should be 50%.
tested with adding alert(fullbox.style.width);
FIDDLE
i would like to make image slideshow.
First, i would have just thumbnails and when clicked on the one, it would pop up overlay(some sort of div, or something) and there would be option to move through the images. I don't want to use anykind of libraries
i have this, so far:
NewImg = new Array (
"img/1gif",
"img/2gif",
"img/3gif"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
var delay = 3000;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
html part
Previous
Auto/Stop
Next
this is the regular image gallery. With regular sized images.
I don't know how to implement those thumbnails
thank for helping me around here
i forgot, i have
used following code for overlays(but don't know how to implement it here)
function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById )
{
elem = document.getElementById( whichLayer );
}
vis = elem.style;
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
http://jsfiddle.net/sevdah/z7Ggx/1/ on jsfiddle, but it is not working, don't know why