the play next/prev button issue? - javascript

When I set the tittle of the video, it appears for a few seconds, then disappears after each video has played. Everything works fine without the play-next/prev buttons. If I hit either button quickly, many times, the tittle reappears and disappears seemingly forever. Please check the complete code from JSfiddle.
function nextVideo(){
$('#videotittle').hide();
play(vidIndex + 1);
}
function prevVideo(){
$('#videotittle').hide();
play(vidIndex - 1);
}

Did you try to add .stop( true, true ) to your animation ?
Your fiddle updated :
http://jsfiddle.net/hftgmuLy/

The setTimeout that is called to delay the initial showing of the title is never cancelled (Cleartimeout)
a reference to the setTimeout needs to be kept that can be cancelled e.g.:
curTimeout =setTimeout( ....
and on play: clearTimeout(curTimeout);
Fiddle
PS, the fiddle is based on the older fiddle in the comments of the previous answer. It might be somewhat different than the new version

Related

jQuery functions run in background?

I have a page with a lot of elements (~1,500) of the same class on it, and when I execute
$(".pickrow").addClass("vis");
it takes a second or two for the page to reflect the changes. So that users aren't thinking the page was stuck, I'd like to pop-up a small message using:
$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").hide();
But the msgDiv never shows. If I remove the $("#msgDiv").hide(); the msgDiv appears simultaneously with the application of the added class (after the 1 or 2 seconds it took to add the class).
It seems like the jQuery functions get pooled and run together without any screen updates until they have all completed.
How can I get the msgDiv to appear while the $(".pickrow").addClass("vis"); is processing?
Here's a Demo
You probably want to delay the hide by a few seconds.
$("#msgDiv").show();
$(".pickrow").addClass("vis");
setTimeout(function(){ $("#msgDiv").hide(); },2000);
Or using jQuery's animations queue for timing:
$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").delay(2000).hide(1); //must make it at least 1 ms to go into the queue
You can go with this approach also
Working DEMO
$(document).on("click",".btn",function(){
$(".msg").show("fast",function(){
$(".pickrow").addClass("vis");
var interval = setInterval(function(){
var picLength = $(".pickrow").length;
var visLength = $(".vis").length;
if(picLength == visLength){
clearInterval(interval);
$(".msg").hide();
}
},500);
});
});
I think if you simplify the code, you would find that it is much more responsive and probably not require the loading message. In your code, you check every single element in an if statement. Rather than do that, you can check one value, then update all of them accordingly.
Here's a demo: http://jsfiddle.net/jme11/3A4qU/
I made a single change to your HTML to set the initial value of the input button to "Show Details". Then in the following code, you can just check whether the value is Show Details and remove the class that hides the .pickrow and update the value of the button to be "Hide Details" (which is better feedback for the user anyway). Likewise, you can add the .hid class to the pickrow if the button value is not "Show Details". This will also normalize all of the classes regardless if some were individually hidden or shown.
$('#showhide').on('click', function(){
if ($(this).val() === 'Show Details') {
$('.pickrow').removeClass('hid');
$(this).val('Hide Details');
} else {
$('.pickrow').addClass('hid');
$(this).val('Show Details');
}
});

image source changing at the wrong time after a few minutes in a slide show

I'm a designer more than a programmer, but I'm trying to get the hang of javascript so I have more design options when it comes to web design beyond plugins. So here's the problem I'm having.
I have a page with 4 slide shows. Right now I have it so that when one of 4 buttons are clicked it will change the array it gets the image sources from and loop through the images every 4 sec.
At first the slideshows look fine and the change happens when the image is hidden, but after a couple minutes the source change falls out of time with the fading effects and happens when its visible. It also works fine to have the shows switch with no problem.
All the timing and variables get reset and the new parameter from the onClick-call switches which array is used. I tried one solution where I made the image change part it's own function and called it from other functions to control the timing more, but then for some reason clearTimeout stopped working to clear the loop and it would still play one instance of the loop at the same time as another.
Maybe someone can look at this code and see a simple fix for the timing issue.
i=0
var delay=4000
var fade=1000
var timer;
function play(showNum){
var showNum = showNum;
$("#show").stop(true,true)
newShow();
changeInfo(showNum);
$("#show").hide();
change(showNum);
}
function change(showNum){
$("#show").fadeIn(fade);
$("#show").attr("src",showNum[i]);
i = (i+1)% showNum.length;
$("#show").delay(delay-(fade*2)).fadeOut(fade);
timer=setTimeout (function(){change(showNum)},delay)
}
function newShow(){
clearTimeout(timer);
i=0;
}
Here is an update to the code since I posted this.
function play(showNum){
var showNum = showNum;
$("#show").stop(true,true);
newShow();
$("#show").hide();
changeInfo(showNum);
change(showNum);
$("#show").fadeIn(fade);
setTimeout(function(){loop(showNum);},fade*2);
}
function loop(showNum){
$("#show").fadeOut(fade);
setTimeout (function(){change(showNum);},fade);
$("#show").fadeIn(fade);
int=setTimeout (function(){loop(showNum);},delay);
}
function change(showNum){
$("#show").attr("src",showNum[i]);
i = (i+1)% showNum.length;
}
function newShow(){
clearTimeout(int);
i=0;
}
I don't get a problem with the timing anymore, but I do get a weird hiccup if I click on a new slideshow when it's on fadeOut where it changes image then changes back and then fades in with the next image of the previous slide show then fades out and starts the right slide show from there.

Adding a delay to one javascript slideshow so each plays differently

I have two query slide shows on the same page and they play simultaneously. I want to add a delay to one of the slide shows so that they do not change at the same time. For example I want slideshow1 to have a delay of 1000ms at the beginning so slideshow2 changes first. I've tried to add the delay function to the jquery file with my slideshows, but it doesn't work. Could you check out my code below and let me know if you have any ideas? Thanks a million!
http://pastebin.com/aaGFLD26
Use setTimeout to delay the second gallery.
jQuery('div.slideshow').fadeGallery();
setTimeout(function() {
jQuery('div.slideshow2').fadeGallery();
}, DELAY_VALUE);
You just have to create a delay at the init.
launch the first one, wait DELAY, launch the second
[EDIT]
jQuery('div.slideshow').fadeGallery({
...
});
jQuery('div.slideshow2').delay(DURATION).fadeGallery({

fadeIn as callback function after fadeOut doenst work as expected

In my HTML a#navInnerMapR and a#navInnerMapL are contained within div#navTwo.
The following code is within a function. When called, I need the function to fadeOut any visible links in div#navTwo, pause for a moment, and then fadeIn a#navInnerMapR.
$('div#navTwo a').fadeOut(200, function() {
$('a#navInnerMapR').delay(100).fadeIn(200);
});
The code fades out the links but doesn't fade anything in. I thought that they delay would only start once the fadeOut finishes, however changing the delay value to 1000 makes it sometimes work but its very buggy. Thanks
UPDATE Here is a fiddle showing that the hidden link starts to be shown before the visible is hidden: http://jsfiddle.net/jamesbrighton/d9QKr/5/
UPDATE Apologies, my question doesnt include the full details of what I need to achieve. I simplified it as I thought I just had some sort of sytax issus that could be easily fixed.
div#navTwo actually contains 3 links. At any point (other than the delay before animations run) only 1 link is visible. I need to be able to call a function that will hide either of the other 2 links that are being shown, and then show a#navInnerMapR.
Different events will call this function, so either of the 2 links that arn't a#navInnerMapR may be visible. Thanks
UPDATE I think this fiddle illustrates the issue. Ive created 2 div.nav's to illustrate different states. Ive hidden different links with inline CSS in each one. JavaScript will be showing and hiding the links in my div repeatedly, so the same div will look like each example at different times.
Ive created 2 triggers to illustrate that different events will need to call the function. When you click on a trigger you can see the issue with both examples. The visible divs are not hidden before the a.one is shown. Thanks for your patience!
http://jsfiddle.net/jamesbrighton/dYvMS/24/
Interesting point, if I change $('.nav a.one').fadeIn(1000); to an alert, the alert fires multiple times! No idea why this would be the case!
Edit: Updated answer based on your below comment,
Yes this works as I need, but im not sure it will work for my actual
page. Sorry for my question not being detailed enough. The code
example I gave is simplified. In the actual page their are 3 links
within div#navTwo, at any time only one of them will be visible. I
need to be able to call a function that hides any links and shows a
specific one, but either one of the other 2 links in div#navTwo may be
visible. Thanks
DEMO
HTML: Added class to all links inside navTwo
<div id="navTwo">
Right
Left
Middle
Upper
Lower
</div>
JS:
$('.links').click(function() {
showHide($(this));
});
function showHide($this) {
$this.fadeOut(1000, function() {
$('#navTwo a').not($this).delay(1000).fadeIn(1000);
});
}
I think I understood what you need. Try below DEMO and let me know if that is what you want,
DEMO
$('#navInnerMapR').click(function() {
runMeR($(this));
});
$('#navInnerMapL').click(function() {
runMeL($(this));
});
function runMeR($this) {
$this.fadeOut(1000, function() {
$('a#navInnerMapL').delay(1000).fadeIn(1000);
});
}
function runMeL($this) {
$this.fadeOut(1000, function() {
$('a#navInnerMapR').delay(1000).fadeIn(1000);
});
}
As you said, You need the function to fadeOut any visible links in div#navTwo, pause for a moment, and then fadeIn a#navInnerMapR (not other links, only a#navInnerMapR).
$('#navTwo a').click(function(e) {
$(this).parent().children().each(function(i){
$(this).fadeOut('slow', function(){
$('a#navInnerMapR').delay(1000).fadeIn(1000);
});
});
});​
A fiddle is here.

Different delay for multiple nivo slider on same page

I found Nivo slider pretty promising and I have implemented it in several of my new projects.
However, now, I would like to have multiple (2 to 3) sliders on the same page. This is possible. But I want each of them start after a certain delay with respect to last one. Example, first one loads on page load, second one, 1 second after that and so on. I referred to the community support and found this article.
http://dev7studios.com/support/#/discussion/212
However, even this does not solve it.
Please help me with the same.
Thanks a lot.
$('#slider1').nivoSlider()
.delay(1000)
.queue(function(){
$('#slider2').nivoSlider()
.delay(1000)
.queue(function(){
$('#slider3').nivoSlider();
});
});
http://jsfiddle.net/LfkkF/17/
I couldn't get the above answer to work so i implemented a javascript delay like so:
$(window).load(function() {
setTimeout(function() {$('#slider3').nivoSlider({
directionNav : false,
controlNav: false,
});},250);
});
With the number (250) being the delay in miliseconds. I only wanted a very short delay so this method worked for me, but the image displays a loading-icon for the duration of the delay, so anything longer than .5 sec would look ugly I guess.
Here's where I found the method.
http://www.sean.co.uk/a/webdesign/javascriptdelay.shtm

Categories

Resources