I have created (with help from other scripts found online) a slideshow script that turns other images to greyscale when hovered and pauses the slideshow at the same time. The problem is, when I hover over one of these images that is not part of the slideshow I cant get them to fade. I've tried a number of things to solve this including adding the required greyscale image over the existing image but I can't get the effect to look the same so its kind of pointless.
The code for this is as follows (I apologise if it's a mess I'm still pretty new to Javascript):
// Holds the alt description of an image
var desc;
// Used to try to solve problem
var bgimg;
var bgli;
var current;
$(document).ready(function () {
//Execute the slideShow, set to 3 seconds for each images
slideShow(1000);
current = $('ul.slideshow li.show');
});
$(window).focus(function () {
timer = setInterval('gallery()', speed);
});
$(window).blur(function () {
clearInterval(timer);
});
function slideShow(speed) {
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()', speed);
desc = $('ul.slideshow li.show').find('img').attr('alt');
//pause the slideshow on mouse over
$('img.color').hover(
function () {
clearInterval(timer);
$('#caption').stop().animate({'height': '70px'}, 1000);
cptxt(desc);
if (this.id == "img6" || this.id == "img7" || this.id == "img8" || this.id == "img9" || this.id == "img10") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
}
},
function () {
timer = setInterval('gallery()', speed);
$(img1).stop().animate({"opacity": "1"}, "slow");
$(img2).stop().animate({"opacity": "1"}, "slow");
$(img3).stop().animate({"opacity": "1"}, "slow");
$(img4).stop().animate({"opacity": "1"}, "slow");
$(img5).stop().animate({"opacity": "1"}, "slow");
$('#caption').stop().animate({'height': '0px'}, 1000);
$('#caption').html('');
});
}
function gallery() {
//if no IMGs have the show class, grab the first image
if ($('ul.slideshow li.show').length){
// if we found an item with the show class, assign it to current
current = $('ul.slideshow li.show');
} else {
// otherwise nothing is being shown, default to first element
$('#ul.slideshow li:first');
}
//trying to avoid speed issue
if (current.queue('fx').length == 0) {
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next;
// if there are additional elements (true when .length > 0)
if (current.next().length) {
next = current.next();
if (next.attr('id') == 'dark') {
bgli = next;
bgimg = next.find('img');
next = next.next();
}
} else {
// there is no next element, go back to first.
next = $('ul.slideshow li:first');
}
desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
}
function cptxt(altmsg) {
$('#caption').html(altmsg);
}
$(document).ready(function(){
$('img.color').hover(
function() {
if (this.id == "img1") {
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img2") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img3") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img4") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img5") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
},
function() {
$(img1).stop().animate({"opacity": "1"}, "slow");
$(img2).stop().animate({"opacity": "1"}, "slow");
$(img3).stop().animate({"opacity": "1"}, "slow");
$(img4).stop().animate({"opacity": "1"}, "slow");
$(img5).stop().animate({"opacity": "1"}, "slow");
$(img6).stop().animate({"opacity": "1"}, "slow");
$(img7).stop().animate({"opacity": "1"}, "slow");
$(img8).stop().animate({"opacity": "1"}, "slow");
$(img9).stop().animate({"opacity": "1"}, "slow");
$(img10).stop().animate({"opacity": "1"}, "slow");
}
);
});
Sorry if the code is terrible :D. I spent a few minutes trying to lay it out properly but a lot of it needs to be cleaned up.
Anyway, to reiterate, hovering over slideshow images truns other images to greyscale correctly. Hovering over otherimages does not turn current slideshow image to greyscale.
Any help would be appreciated.
As requested, JSFiddle link
http://jsfiddle.net/KXW4f/12/
The slideshow doesn't appear to work on it but I may have some wrong settings selected on that site. It works when run on my PC anyway but the general idea is shown though I think.
Currently, the slideshow images just fade out to white background (opacity goes to 0) but what I want is for a greyscale image to appear as it fades out. Thanks.
Ok, with the example it was a lot easier to understand. Nevertheless the conception of your code is a bit messy... ;)
First of all, the link to the corrected code (should work now): http://jsfiddle.net/Aletheios/ZZHjS/2/ (new link)
I've done the following changes:
Declared global variables timer, speed and img1-img8 to resolve several errors.
Removed slideshow start in slideShow(), the slideshow was started twice (slideShow() and window.focus).
Added display/show functionality for the big grayscale images. The code detects which image is currently shown in the slideshow and displays its grayscale counterpart when requested.
This is the code (see JSFiddle for details):
$("img.color").hover(function(){
var li;
for (var i = 6; i <= 8; ++i) {
li = $("#img"+i).closest("li");
if (li.hasClass("show")) {
li.next().css("opacity", 1);
}
}
...
}, function() {
$(...).stop().animate({"opacity": "1"}, "slow", function(){
$(this).closest("li").next().css("opacity", 0);
});
});
Some annotations:
IDs (e.g. in HTML markup) only make sense if used no more than once ;)
You could make your code a lot more readable (and probably more efficient) if you group together jQuery selectors. So instead of $(img1).animate() and $(img2).animate() after another better use $([img1, img2].join(",")).animate().
Hope that helps... ;) Besides, if you don't already use it, I'd recommend you work with Firebug; it's a great tool to debug your JS code.
Related
so I have a slideshow banner.. which will also have 1.A quote (div containing it is .msgSlide) 2.A buttton (div containing it is .btnSlide) when each slide appears.. my current snippet for just the 1st slide is->
$(function() {
$('.msgSlide').animate({left: "0%"}, 1000, function() {
$('.msgSlide')
.hide()
.html("<p>Dream Big.. Never give up.</p>")
.show()
.animate({left: "40%"}, 1000)
.animate({opacity: "0"}, 3000);
});
$('.btnSlide').animate({right: "0%"}, 2000, function() {
$('.btnSlide')
.hide()
.html("<button class='btn btn-lg btn-primary'>Learn more</button>")
.show()
.animate({right: "20%"}, 1000)
.animate({opacity: "0"}, 2000);
});
});
current snippet fiddle->http://jsfiddle.net/zzmm4fue/2/
I want to loop this pattern with different paragraphs & button texts depending on the no of slides!
Update-> i am trying something like this-> http://jsfiddle.net/zzmm4fue/3/ (not working though)
I think this is what you looking for .. maybe it will need some arrangement .. but you can start from here
$(function() {
var Divslength = $('.AnimateThis').length - 1;
loopanimation($('.AnimateThis').eq(0));
var count = 1;
setInterval(function(){
loopanimation($('.AnimateThis').eq(count));
if(count == (Divslength)){
count = 0;
}else{
count = count + 1;
}
},4000);
});
function loopanimation(el){
$('.AnimateThis').fadeOut(300).css('z-index',0);
el.css('z-index',1);
el.fadeIn(300 , function(){
el.find('.msgSlide')
.animate({left: "-500px"}, 0)
.hide()
.html("<p>Dream Big.. Never give up.</p>")
.show()
.animate({left: "50%"}, 1000)
.animate({left: "40%"}, 1000)
.animate({opacity: "0"}, 3000)
.animate({opacity: "1"}, 0)
.animate({left: "-500px"}, 0);
el.find('.btnSlide')
.animate({right: "-500px"},0)
.hide()
.html("<button class='btn btn-lg btn-primary'>Learn more</button>")
.show()
.animate({right: "30%"}, 1000)
.animate({right: "20%"}, 1000)
.animate({opacity: "0"}, 3000)
.animate({opacity: "1"}, 0)
.animate({right: "-500px"},0);
});
}
Working Demo
Ok may be it was a basic problem that's why no one replied.. i have come up with the solution myself.. please suggest if u have a better solution
$(function() {
var msgValue=["<p>Dream Big.. Never give up.</p>",
"<p>Some quote i haven't looked up yet.</p>",
"<p>I am not so good with quotes.</p>"],
btnValue=["<button class='btn btn-lg btn-primary'>Learn more</button>",
"<button class='btn btn-lg btn-warning'>Learn more</button>",
"<button class='btn btn-lg btn-danger'>Learn more</button>"],
count=0;
function loop(count) {
$('.msgSlide')
.css({left:0, opacity:0})
.fadeIn(2000)
.html(msgValue[count]);
$('.msgSlide')
.animate ({ left: '30%', opacity: '1'}, 1500, 'linear').fadeOut(2000);
$('.btnSlide')
.css({right:0, opacity:0})
.fadeIn(2000)
.html(btnValue[count]);
$('.btnSlide')
.animate ({ right: '30%', opacity: '1' }, 1500, 'linear').fadeOut(2000,
function() {
loop(count);
});
count++;
if(count==msgValue.length){ count=0; }
}
loop(count);
});
working fiddle- http://jsfiddle.net/zzmm4fue/12/
I have style switcher, used php, and jquery to implement it. Now when i click on its button to open, the page jumps to the top of the page. and also when i click the same button to close the style box. the same happens it jumps to the top of the page. how to change the code to make it open without jumping.
jQuery.fn.styleSwitcher = function(){
$(this).click(function(){
// We're passing this element object through to the
// loadStyleSheet function.
loadStyleSheet(this);
// And then we're returning false.
return false;
});
function loadStyleSheet(obj) {
$.get( obj.href+'&js',function(data){
// Select link element in HEAD of document (#stylesheet) and change href attribute:
$('#stylesheet').attr('href','css/' + data + '.css');
// Check if new CSS StyleSheet has loaded:
});
}
}
$(document).ready(function () {
$(".toggleDiv .expand-arrow").show();
$(".toggleDiv .shrink-arrow").hide();
$(".toggleDiv .expand-arrow").click(function(){
$("#style-switcher").animate(
{"left": "0"}, "slow");
$("#swatchesDiv").animate(
{"opacity": "1"}, "slow");
$(".toggleDiv .expand-arrow").hide();
$(".toggleDiv .shrink-arrow").show();
});
$(".toggleDiv .shrink-arrow").click(function(){
$("#style-switcher").animate(
{"left": "-200px"}, "slow");
$("#swatchesDiv").animate(
{"opacity": "0"}, "slow");
$(".toggleDiv .expand-arrow").show();
$(".toggleDiv .shrink-arrow").hide();
});
});
You should disable the behaviour of your links, with preventDefault or return false:
$(document).ready(function () {
$(".toggleDiv .expand-arrow").show();
$(".toggleDiv .shrink-arrow").hide();
$(".toggleDiv .expand-arrow").click(function(e){
e.preventDefault(); // disable the link
$("#style-switcher").animate(
{"left": "0"}, "slow");
$("#swatchesDiv").animate(
{"opacity": "1"}, "slow");
$(".toggleDiv .expand-arrow").hide();
$(".toggleDiv .shrink-arrow").show();
});
$(".toggleDiv .shrink-arrow").click(function(e){
e.preventDefault(); // disable the link
$("#style-switcher").animate(
{"left": "-200px"}, "slow");
$("#swatchesDiv").animate(
{"opacity": "0"}, "slow");
$(".toggleDiv .expand-arrow").show();
$(".toggleDiv .shrink-arrow").hide();
});
});
I need to be able to troggle my sidebar.
This works but I also need to hide the sidebar when reach viewport > 740px.
The troggle needs to work also. I came a far way but I think I have to combine these two to let it work properly.
Anyone knows hot to do this?
CHECK OUT MY FIDDLE PLEASE >
My script:
$('.troggler').toggle(
function() {
$('.right').animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}, function() {
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
})
$(window).resize(function() {
if ($(window).width() < 740) {
$(".right").animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}
else {
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
}
});
I guess the $(window).resize() fires multiple events while you ara resizing the window.
To solve this, you might wait for the resizing (dragging) complete.
// Basic Concept is ...
$(window).resize(function () {
if( ... event not fired ... ){
setTimeout(function(){
// toggle your navi
},500);
}
....
});
DEMO:http://jsfiddle.net/VseLR/13/
Your code could go like this:
function showNavi(){
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
}
function hideNavi(){
$('.right').animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}
$('.troggler').toggle(function() {
showNavi();},
function() {
hideNavi();
});
function applyLayout() {
if ($(window).width() < 740) {
hideNavi();
}else {
showNavi();
}
}
var timer = 0;
var delayToCall = (function () {
return function (callback, ms) {
if (timer > 0) {
clearTimeout (timer);
}
timer = setTimeout(callback, ms);
};
})();
$(window).resize(function () {
delayToCall(function(){
applyLayout();
}, 500);
});
You might want to check this question:
JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?
Hope this helps.
I try to loop some div's, and I have that code:
var first = ".first";
for (i = 0; i < 9999; i++) {
setTimeout(function () {
$(first).delay(500).animate({
"opacity": "1"
}, 1500);
$(first).delay(1500).animate({
"opacity": "0"
}, 1500);
$(".1").delay(4500).animate({
"opacity": "1"
}, 1500);
$(".1").delay(1500).animate({
"opacity": "0"
}, 1500);
$(".2").delay(4800).animate({
"opacity": "1"
}, 1500);
$(".2").delay(1500).animate({
"opacity": "0"
}, 1500);
$(".3").delay(5300).animate({
"opacity": "1"
}, 1500);
$(".3").delay(1500).animate({
"opacity": "0"
}, 1500);
$(".4").delay(5600).animate({
"opacity": "1"
}, 1500);
$(".4").delay(1500).animate({
"opacity": "0"
}, 1500);
$(".5").delay(5900).animate({
"opacity": "1"
}, 1500);
$(".5").delay(1500).animate({
"opacity": "0"
}, 1500);
}, 6000);
}
I tried without setTimeout and effect was the same - divs was appeared and disappeared only in 1st loop. In each next loop they're appeared in random order. I know, that method is wrong, but I'm green with JavaScript and I have no idea how to do it correct. Someone can help me?
It is because the for loop keep attaching events and you are 9999 animations to the same element with no delay. They are just pounding on each other. The code makes no sense.
If you want the code to run in a loop, you can use a callback in one of the animations and call a function when it is done. Other option is to use a Interval, but that gets messy with timing events not being accurate and they can pile up.
It seems like you're trying to make the elements animate seemingly indefinitely by running a setTimeout timer a large number of times. For that you should instead use setInterval() to have the function run every 6 seconds.
So, instead of...
for (i = 0; i < 9999; i++) {
setTimeout(function () {
$(first).delay(500).animate({
"opacity": "1"
}, 1500);
// etc etc
}, 6000);
}
...do this:
setInterval(function () {
$(first).delay(500).animate({
"opacity": "1"
}, 1500);
// etc etc
}, 6000);
(note: no for loop.)
Demo: http://jsfiddle.net/57sYA/
I have found solution of my problem - setInterval
var licznik=0;
function show_anim(){
if(licznik!=9999){
$("#first").delay(500).animate({"opacity": "1"}, 1500);
$("#first").delay(1500).animate({"opacity": "0"}, 1500);
$("#1").delay(4500).animate({"opacity": "1"}, 1500);
$("#1").delay(1500).animate({"opacity": "0"}, 1500);
$("#2").delay(4800).animate({"opacity": "1"}, 1500);
$("#2").delay(1500).animate({"opacity": "0"}, 1500);
$("#3").delay(5300).animate({"opacity": "1"}, 1500);
$("#3").delay(1500).animate({"opacity": "0"}, 1500);
$("#4").delay(5600).animate({"opacity": "1"}, 1500);
$("#4").delay(1500).animate({"opacity": "0"}, 1500);
$("#5").delay(5900).animate({"opacity": "1"}, 1500);
$("#5").delay(1500).animate({"opacity": "0"}, 1500);
licznik++;
console.log(licznik);
}
}
$(document).ready(function(){
show_anim()
setInterval("show_anim()",12000);
});
Demo: http://jsfiddle.net/D5bxA/
In the following code, the div animating in my moveit() function is waiting for the setTimeout() in the .click functions, but the p.font-size animation in moveit() is happening immediately upon the click. It's not waiting for the timeout. I'm sure it's a basic issue, but that's the level I'm at right now.
Thanks for any suggestions,
<script type="text/javascript">
$(document).ready(function(){
$("#no").click(function() {
$("#sleep").animate({"border-width": "10px"}, "fast");
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is too bad. Tonight you will sleep better.");
setTimeout(moveit, 2000);
});
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
setTimeout(moveit, 2000);
});
});
</script>
<script type="text/javascript">
function moveit() {
$("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").animate({"font-size": "16px"}, "slow");
$("#sleepanswer").animate({ "left": "-9999px"}, "fast");
}
</script>
I think the problem may have been your use of .replaceWith(). That attempts to replace an element with another, but you've tried to replace an element with text. I think you just want to use .html() instead.
Also, you don't need to use the setTimeout() - you can use .delay() instead. And, I think your selectors p:.sleepquestion are probably not right. You can go with this:
<script type="text/javascript">
$(document).ready(function(){
$("#no").click(function() {
$("#sleep").animate({"border-width": "10px"}, "fast");
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p.sleepquestion").html("That is too bad. Tonight you will sleep better.");
moveit();
});
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p.sleepquestion").html("That is great! A good night sleep is important.");
moveit();
});
});
</script>
<script type="text/javascript">
function moveit() {
$("#sleep").delay(2000).animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").delay(2000).animate({"font-size": "16px"}, "slow");
$("#sleepanswer").delay(2000).animate({ "left": "-9999px"}, "fast");
}
</script>
I also changed .replaceWith() to .html() and changed p:.sleepquestion to p.sleepquestion.
Your function moveit could also be written like this by putting the timeout inside the function:
function moveit() {
setTimeout(function() {
$("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").animate({"font-size": "16px"}, "slow");
$("#sleepanswer").animate({ "left": "-9999px"}, "fast");
}, 2000);
}
I had the same issue with a function call in setTimeout() not working . I solved the issue by surrounding the function call in quotes.
For example:
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
setTimeout("moveit()", 2000);
});