I have my code set up so that when the user clicks on the img, the box-shadow will increase. However, my code only increases the box-shadow once, and I don't really understand why. I guess it has something to do with .on(), but I'm not really sure why this happening. If anyone could provide some insight, I would be very appreciative.
var hshadow=10;
var vshadow=10;
function boostShadow() {
hshadow= hshadow + 5;
vshadow= vshadow + 5;
hshadow=hshadow.toString() + "px ";
vshadow=vshadow.toString() + "px ";
$("img").css("box-shadow",hshadow + vshadow +"5px #565656");
}
$("img").on("click",function () {
boostShadow();
});
The issue in your code is that you set the variables to strings when you add "px" to them and that prevents further addition to them in the next click. Try this below:
var hshadow = 10,
vshadow = 10;
function boostShadow(image) {
hshadow += 5;
vshadow += 5;
$(image).css("box-shadow",hshadow+"px " + vshadow+"px 5px #565656");
}
$("img").on("click",function () {
// We pass the clicked image as a variable so only
// that image's box-shadow is altered
boostShadow(this);
});
Related
I'm trying to change my background only one time after 1 second of loading. Then Second Image will be show.
I just want to show the first image only for 1st one second then want to show second image.
HTML
<div id="image-head" class="image-head">
</div>
CSS
.image-head {
background-image:url(background_image_1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
JS
var images = [
"http://example.com/wp-content/uploads/2019/05/background_image_2.jpg"
]
var imageHead = document.getElementById("image-head");
var i = 1;
setInterval(function() {
imageHead.style.backgroundImage = "url(" + images[i] + ")";
i = i + 1;
if (i == images.length) {
i = 0;
}
}, 1000);
Please let me know how can I do it.
Thanks!
You need to use setTimeout instead of setInterval
And you don't even need that array
setTimeout(() => document.getElementById("image-head").style.backgroundImage = `url("http://example.com/wp-content/uploads/2019/05/background_image_2.jpg")`, 1000);
You should replace
setInterval(function() {
imageHead.style.backgroundImage = "url(" + images[i] + ")";
i = i + 1;
if (i == images.length) {
i = 0;
}
}, 1000);
by
setTimeout(function() {
imageHead.style.backgroundImage = "url(" + images[i] + ")";
i = i + 1;
if (i == images.length) {
i = 0;
}
}, 1000);
The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().
The setTimeout() method of the WindowOrWorkerGlobalScope mixin (and successor to Window.setTimeout()) sets a timer which executes a function or specified piece of code once the timer expires.
See document
#DominikMatis has the correct answer, but I wanted to help clean the code up a bit.
var image = "http://example.com/wp-content/uploads/2019/05/background_image_2.jpg";
var imageHead = document.getElementById("image-head");
setTimeout(function() {
imageHead.style.backgroundImage = "url(" + image + ")";
}, 1000);
This makes more sense since you're only replacing the image once, with a single image. What you had before would work great for replacing several images at a specified time interval.
First of all, I'm not very advanced at code and tend to only do this part time so please excuse all terrible/ugly code! I appreciate there are already some solutions out there but I can't seem to make any of them work with my code so would really appreciate some help!
I'm using isotope grid and trying to setup an infinite scroll. I want to load 10 images at a time when the user scrolls to the bottom by taking these images from an array and appending them to a temp div.
This is working perfectly when scrolling slowly, but as soon as you scroll quickly the function seems to fire multiple times, it gets a little glitchy and loads lots of images at once.
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var docuHeight = $(document).height();
if(scrollTop + windowHeight == docuHeight){
nextTenImages = imagesData.splice(0,10);
var content = ""
for (var i = 0; i < nextTenImages.length; i++) {
content +=
"<div class='box " + nextTenImages[i]["type"] + "'" + ">" +
"<div class='box-wrapper'>" +
"<img src='" + nextTenImages[i]["src"] + "' />" +
"</div>" +
"</div>"
};
$('body').append('<div id="temp-load"><div id="grid"></div></div>');
$('#temp-load > #grid').append(content)
$('#temp-load > #grid').children().css({
opacity: 0
});
var toAdd = $('#temp-load > #grid').html();
$container.isotope('insert', $(toAdd), function(){
$container.children().css({
opacity: 1
});
$('#temp-load').remove();
});
}
});
Make a single timeout to run the callback. This may avoid the function from executing multiple times.
var timer;
function scrollEvt() {
/* scroll actions */
}
$(window).scroll(function() {
/* clear the old timeout */
clearTimeout(timer);
/* wait until 400 ms for callback */
timer = setTimeout(scrollEvt, 400);
});
Using other ways may result in problems (like comparing (window.performance || Date).now())...
Unbind that specific scroll event till your delayed operation is completed to prevent accumulating more of the event triggers which create the duplication behaviour as in your case.
var winCached = $(window),
docCached = $(document)
var currLeng = 0;
function addContent() {
dettachScrollEvent();
setTimeout(function() { //this timeout simulates the delay from the ajax post
for (var i = currLeng; i < currLeng + 100; i++)
$('div').append(i + '<br />');
currLeng = i;
console.log("called loader!");
attachScrollEvent();
}, 500);
}
function infiNLoader() {
if (winCached.scrollTop() + winCached.height() > docCached.height() - 300) {
addContent();
//alert("near bottom! Adding more dummy content for infinite scrolling");
}
}
function attachScrollEvent() {
winCached.scroll(infiNLoader);
}
function dettachScrollEvent() {
winCached.unbind('scroll', infiNLoader);
}
addContent();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
First off, yes, I'm AWARE there's a much easier way to do this in jQuery, but I'm trying to learn how to do it by hand in Javascript to get a better understanding of the language.
I have a div that I want to slowly fade through many colors of the rainbow. Here's what I have so far:
<script type="text/javascript">
var bar = document.getElementById("workbar");
var x = 0;
bar.onclick = change;
function change() {
requestAnimationFrame(color);
}
function color() {
window.alert("color!");
bar.style.background = "hsl(" + x + ", 100%, 50%);";
if (x < 358) {
x++;
requestAnimationFrame(color);
}
else {
x = 0;
requestAnimationFrame(color);
}
}
</script>
I'm iterating through the first digit of the hsl color system, which will provide me with hundreds of color variations but not every single unnecessary color shade in the universe.
I click on it, and nothing happens. Now I know it's getting through to the color function because I put that alert box there and it went off. I also know it's looping through the color function because after you x out of the alert box another appears. So it must be a problem with the part where it assigns the color. Any ideas?
Remove the semicolon
"hsl(" + x + ", 100%, 50%);";
^
(function () {
var bar = document.getElementById("workbar"),
x = 0;
function color() {
bar.style.background = "hsl(" + x + ", 100%, 50%)";
x++;
if (x >= 358) {
x = 0;
}
requestAnimationFrame(color);
}
function change() {
requestAnimationFrame(color);
}
bar.addEventListener("click", change, false);
}());
<div id="workbar">Click Me</div>
For universoty we had to "build" a xmas tree (svg) and use javascript to make the stars (ger stern(e)) rotate and the balls (ger (kugel(n)) change colors - one star had to be a shooting star. Everything work full points... but one penalty point as it doesn't work in Firefox
Does anyone has any idea why not?
The SVG is down below.
https://www.dropbox.com/s/vi4lxgortgyeq3f/uebung4.svg
Thanks in advance... and please keep in mind it's my very first time to use javascript :D
<script type="text/javascript">
function farbe()
{
var a = "#ff0000";
var b = "#007f00";
if (document.getElementById("kugeln").style.fill == a)
{
document.getElementById("kugeln").style.setProperty('fill', b);
}
else
{
document.getElementById("kugeln").style.setProperty('fill', a);
}
}
var initialTheta = 0;
var thetaDelta = 0.3;
var delay = 10;
var stern;
var timer;
function drehen()
{
stern = document.getElementById("stern_1");
stern.currentTheta = initialTheta;
timer = setInterval(Animation, delay);
stern_2 = document.getElementById("stern_2");
stern_3 = document.getElementById("stern_3");
stern_4 = document.getElementById("stern_4");
}
function stop()
{
clearInterval(timer);
return;
}
function Animation()
{
stern.setAttribute("transform", "rotate(" + stern.currentTheta + " 50,50)");
stern.currentTheta += thetaDelta;
stern_2.setAttribute("transform", "rotate(" + stern.currentTheta + " 50,50)");
stern.currentTheta += thetaDelta;
stern_3.setAttribute("transform", "rotate(" + stern.currentTheta + " 50,50)");
stern.currentTheta += thetaDelta;
stern_4.setAttribute("transform", "rotate(" + stern.currentTheta + " 0,2000)");
stern.currentTheta += thetaDelta;
}
The drehen function gets called two times in a row for each mouse over, so you are calling two times setInterval but recording only the last return value. You should call clearInterval before setting the new one.
Try something like
if(timer != undefined){
clearInterval(timer);
}
timer = setInterval(Animation, delay);
You are comparing colours against hex values
var a = "#ff0000";
if (document.getElementById("kugeln").style.fill == a)
UAs don't have to return colours as hex values and in fact Firefox does not. It will convert your colour to an rgb or rgba representation. If you add an alert
alert(document.getElementById("kugeln").style.fill);
you'll see Firefox returns rgb(255, 0, 0) as the colour which is the same as #ff0000 expressed in a different way. So you could add a check for this kind of colour format or...
A more robust solution would be to have a visiblity:hidden element with the colour you want to compare to and then check against the fill property of that.
i have a table with 3 cells the middel 1 in a black image so it will look like there is a line in the middle of the screen.
now in the other cell i want to show pictures, so i tryed to do a loop that changing the images every second with by hiding the cells and then show them.
the script:
$(window).ready(function () {
//the images sits in a div with a hidden property.
var AlumniumPictures = $("#AlumnimPictureHolder").children();
var ShipozimPictures = $("#ShipozimPictureHolder").children();
//var timer = $.timer(yourfunction, 10000);
for (var i = 0; i < 10; i++) {
$(".almoniyomButtonTD").css({
"background-image": "url(" + $(AlumniumPictures[i]).attr('src') + ")"
});
$(".shipozimButtonTD").css({
"background-image": "url(" + $(ShipozimPictures[i]).attr('src') + ")"
});
$(".almoniyomButtonTD").hide();
$(".shipozimButtonTD").hide();
$(".almoniyomButtonTD").show(1100);
$(".shipozimButtonTD").show(1100);
//for some reson the code dosnt work if im not using the setInterval method.
document.setInterval(1000);
}
});
this is not working it only show me the first images and then stop.
is there a batter way to do this?
am im doing this right?
I think you might do this for the background:
$(window).ready(function () {
//the images sits in a div with a hidden property.
var AlumniumPictures = $("#AlumnimPictureHolder").children();
var ShipozimPictures = $("#ShipozimPictureHolder").children();
//var timer = $.timer(yourfunction, 10000);
time = 0;
step = 1000; // One secund
for (var i = 0; i < 10; i++) {
time+= step;
$(".almoniyomButtonTD").hide();
$(".shipozimButtonTD").hide();
$(".almoniyomButtonTD").show(1100);
$(".shipozimButtonTD").show(1100);
//for some reson the code dosnt work if im not using the setInterval method.
document.setInterval("changeBG('" + $(AlumniumPictures[i]).attr('src') + "', '.almoniyomButtonTD')", time);
document.setInterval("changeBG('" + $(AlumniumPictures[i]).attr('src') + "', '.shipozimButtonTD')", time);
}
});
function changeBG(image, obj) {
$(obj).css({
"background-image": "url(" + image + ")"
});
}
But I don't undestand what you want to do with this:
$(".almoniyomButtonTD").hide();
$(".shipozimButtonTD").hide();
$(".almoniyomButtonTD").show(1100);
$(".shipozimButtonTD").show(1100);
See the docs about setInterval. You need to tell it what code you are running.
window.setInterval(code, delay);
You aren't specifying any code for it to run! Try placing your for statement in a function and calling that.
Also, from Mozilla and MS docs setInterval seems to be on the window object, not on the document object. I don't think it will work the way you have it. I imagine if you looked in a debugger you would see an error thrown.
window.setInterval(myFunction, 1000);
function myFunction() {
for (var i = 0; i < 10; i++) {
$(".almoniyomButtonTD").css({
"background-image": "url(" + $(AlumniumPictures[i]).attr('src') + ")"
});
$(".shipozimButtonTD").css({
"background-image": "url(" + $(ShipozimPictures[i]).attr('src') + ")"
});
$(".almoniyomButtonTD").hide();
$(".shipozimButtonTD").hide();
$(".almoniyomButtonTD").show(1100);
$(".shipozimButtonTD").show(1100);
}
}