Develop Reference

Why is my click not working after I add a class with jQuery?

I set a click on some divs. When I click on them, the click either doesn't work or doesn't work immediately.
I've a carousel. The carousel has a background image that's determined by a css class. There are also divs inside the carousel that have a class. I'm attaching a fadein class to the inside divs to give a cross-fading effect. This works.
If I click a div immediately after page load, everything works. However, after the first carousel cycle completes, I have to click a div several times before the click takes, if it does.
After a lot of trial and error, I determined that ".addClass('fadein')" causes the problem. Removing that restores my clicks on the first try.
This is strange to me because I'm not adding it to anything that's a click.
Here's a snippet of my code. My HTML:
<div id="slider-wrapper" class="videos-set-1">
<div id="ss-video-1" class="video-selection video-display-top"></div>
<div id="ss-video-2" class="video-selection video-display-left"></div>
<div id="ss-video-3" class="video-selection video-display-right"></div>
</div>
My css:
#slider-wrapper.fadein.videos-set-3 .video-display-top,
#slider-wrapper.fadein.videos-set-3 .video-display-left,
#slider-wrapper.fadein.videos-set-3 .video-display-right {
visibility: hidden;
opacity: 0;
transition: visibility 0s 1s, opacity 1s linear;
}
And my jQuery:
var activeIndex = 0;
var play;
var carouselItems = $('#slider-wrapper .video-selection');
var panelsTotal = carouselItems.length;
var videoGallery = $('.container-videos');
var animateScreensaver = true;
$(function() {
function animateCarousel(n) {
if(!animateScreensaver) return;
if((n > activeIndex && n < panelsTotal) || (n < activeIndex && n >= 0)) {
if(carouselItems.eq(n)) {
$('#slider-wrapper').removeClass().addClass('videos-set-' + (n+1)).addClass('fadein');
}
}
setTimeout(function () {
$('#slider-wrapper').removeClass('fadein');
}, 3000);
activeIndex = n;
}
function playScreensaver() {
animateScreensaver = true;
play = setInterval(function() {
if(activeIndex >= panelsTotal-1) {
animateCarousel(0);
} else {
animateCarousel(activeIndex+1);
}
}, animateDuration);
}
function showScreensaver() {
animateScreensaver = true;
playScreensaver();
}
function playVideo(video) {
// play video stuff
}
var autoStart = setTimeout(function() {
playScreensaver();
});
$('.video-selection').on('click', function() {
var thisVideo = $(this).attr('id');
if(!animateScreensaver) {
showVideoGallery(thisVideo);
} else {
animateScreensaver = false;
playVideo(thisVideo);
}
});
})
I'd like to keep the cross-fade, but, after a couple hours of attempting to resolve this, I'm prepared to go without. I read through other SO answers, but they seem different from my issue, as they're adding a class to a click handler, and I'm not.
If someone could point me in the right direction, I can take it from there.
Thanks.

I'm not sure that my solution can solve your problem or not.
But from my experience, click event of Jquery have to write in ready event.
Example:
//this is ready event
$(document).ready(function() {
//add your click function here
});

JQuery transition animation

This program randomly selects two employees from a json-object Employees array, winnerPos is already defined.
For better user experience I programmed these functions to change pictures one by one. The animation stops when the randomly selected person is shown on the screen.
The slideThrough function will be triggered when the start button is pressed.
function slideThrough() {
counter = 0;
start = true;
clearInterval(picInterval);
picInterval = setInterval(function () {
changePicture();
}, 500);
}
function changePicture() {
if (start) {
if (counter > winnerPos) {
setWinner();
start = false;
killInterval();
} else {
var employee = Employees[counter];
winnerPic.fadeOut(200, function () {
this.src = 'img/' + employee.image;
winnerName.html(employee.name);
$(this).fadeIn(300);
});
counter++;
}
}
}
The problem is the animation doesn't work smoothly. At first it works, but not perfect. The second time the transition happens in an irregular way, i.e. different speed and fadeIn/fadeOut differs from picture to picture.
Could anyone help me to fine-tune the transition?

I would avoid using setInterval() and add a function to the call to .fadeIn() that starts the animation of the next picture.
It would look like this:
function changePicture(pos) {
pos = pos || 0;
if (pos <= winnerPos) {
var employee = Employees[pos];
winnerPic.fadeOut(200, function() {
this.src = 'img/' + employee.image;
winnerName.html(employee.name);
$(this).fadeIn(300, function() {
changePicture(pos + 1);
});
});
} else {
setWinner();
}
}
To start the animation, you call changePicture() without any arguments, like this.
changePicture();
jsfiddle

Continuously fade in and out

I have this JavaScript to make the div flash every two seconds. I was wondering if I could add anything into this current function so that the div fades in and out instead of appearing and disappearing with no transition.
JavaScript
<script language = "javascript">
function flash()
{
var blinker = 2000
var timeIn = setInterval(function() {
var element = document.getElementById('sign');
element.style.visibility = (element.style.visibility == 'hidden' ? '' : 'hidden');
}, blinker);
}
</script>
HTML div
<div class = "sign" id = "sign">
<p> hello </p>
</div>

Since you've tagged jQuery, you can simplify it to:
$('#sign').fadeIn(2000); // fade-in in 2 seconds
and
$('#sign').fadeOut(2000); // fade-out in 2 seconds
or as pointed out by user: Bondye
function flash() {
$('#sign').fadeToggle(2000);
}

If you want it to continue fading in and out.. you could try something like this:
function keepFading($obj) {
$obj.fadeToggle(2000, function () {
keepFading($obj)
});
}
keepFading($("#sign"));
See working example in Fiddle
This function would then work on any jquery object you pass it. So if you have something else you want to do the same thing you can just call it like keepFading($("#someOtherEle"));
For this to work, you'll need to make sure that jquery is included. You can then put the above code at the bottom of your html... or in your head if you wrap in a $(document).ready( ... )

You can implement fadeIn and fadeOut on pure javascript:
function fadeOut(id,val){
if(isNaN(val)){
val = 9;
}
document.getElementById(id).style.opacity='0.'+val;
//For IE
document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
if(val>0){
val–;
setTimeout('fadeOut("'+id+'",'+val+')',90);
}else{
return;
}
}
function fadeIn(id,val){
// ID of the element to fade, Fade value[min value is 0]
if(isNaN(val)){
val = 0;
}
document.getElementById(id).style.opacity='0.'+val;
//For IE
document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
if(val<9){
val++;
setTimeout('fadeIn("'+id+'",'+val+')',90);
}else{
return;
}
}

Here's a FIDDLE
setInterval(function() {
$('.sign').animate({ opacity: '0' }, 800).animate({ opacity: '1' }, 800);
}, 2000);

It is also possible to fadeToggle with jQuery. See details here:
http://api.jquery.com/fadeToggle/
<script>
function flash(id) {
$('#'+id).fadeToggle();
}
var blinker = 2000;
var timeIn = setInterval(function() {
flash('sign');
}, blinker);
</script>

div with an id wont accept any event handlers JavaScript. No Jquery

Im trying to pause a timed slideshow when you're hovering over a div
<div id="play_slide" onMouseOver="clearTimeout(playTime)"></div>
If i put onMouseOver="clearTimeout(playTime)" inside an li on the page, it'll pause, so I know my code is correct, it just wont work on the div! Also if i get rid of the id, it will alert when i put an alert function into an event handler
This is the js.
var playTime;
function playSlide()
{
var slideshow = document.getElementById("play_slide").style;
var images = new Array("an", "complete", "red", "thirteen");
indexPlay++;
if(indexPlay > images.length - 1)
{
indexPlay = 0;
}
slideshow.backgroundImage = "url('assets/images/play/"+images[indexPlay]+".png')";
playTime = setTimeout("playSlide()", 2500);
}
you can see this here: www.nicktaylordesigns.com/work.html

I would do it like this:
( and no inline script... just <div id="play_slide">Something</div> )
var playTime;
var indexPlay = 0;
var slideElement;
window.onload = function () {
slideElement = document.getElementById("play_slide");
slideElement.addEventListener('mouseenter', function () {
console.log('stop');
clearTimeout(playTime);
});
slideElement.addEventListener('mouseleave', function () {
console.log('continue');
playTime = setTimeout(playSlide, 2500);
});
playSlide();
}
function playSlide() {
var slideshow = slideElement.style;
var images = new Array("an", "complete", "red", "thirteen");
indexPlay++;
if (indexPlay > images.length - 1) {
indexPlay = 0;
}
slideshow.backgroundImage = "url('assets/images/play/" + images[indexPlay] + ".png')";
playTime = setTimeout(playSlide, 2500);
}
Fiddle

This issue is related to the script loading. Your script gets loaded after the DOM is processed so function doesn't get attached to the event.
If you are using jQuery then you can use below code.
$(function () {
$("#play_slide").mouseover(function(){
var playTime = 33;
clearTimeout(playTime);
});
});
If you don't want to use JQuery then you can do the same thing in JavaScript as below.
window.onload = function(){
document.getElementById("play_slide").onmouseover = function(){
var playTime = 33;
clearTimeout(playTime);
};
}

I got it! the div tag was somehow broken, I coded a div around it and gave it the event handlers and a class. That worked, then i simply changed the class to an id and got rid of the original div. Idk what was going on but it works now. Thanks for your suggestions!

Can you try this,
<div id="play_slide" onmouseover="StopSlide();">Stop</div>
<script>
var playTime;
var indexPlay;
function playSlide()
{
var slideshow = document.getElementById("play_slide").style;
var images = new Array("an", "complete", "red", "thirteen");
indexPlay++;
if(indexPlay > images.length - 1)
{
indexPlay = 0;
}
slideshow.backgroundImage = "url('assets/images/play/"+images[indexPlay]+".png')";
playTime = setTimeout("playSlide()", 2500);
}
function StopSlide(){
window.clearTimeout(playTime);
}
playSlide();
</script>

Javascript track when element became visible?

I have different controls on screen and hide and show them asynchronously. Is there any way to track when an element becomes actually visible on the screen? I actually want to get a callback when that happens and move the focus on that element!

try this
var trk = new Array("element1","element2","element3"); // add elements IDS whom you want to track
window.onload = function(){
track();
}
function track()
{
var ele;
for(var i=0;i<trk.length;i++)
{
ele= document.getElementById(trk[i]);
if(ele)
{
if(ele.style.display!="none")
{
// do something
}
}
}
setTimeout(function(){track();},1);
}

The only way that I can think of is to have a setInterval method which checks of the element.style.display!=="none", or whatever other method you used to hide and show the element.
Something like:
var myInterval = setInterval(function()
{
var element = document.getElementByID("SomeElement");
if( element.style.display!=="none" || element.style.visibility!=="hidden")
{
//exit the interval
clearInterval(myInterval);
doSomeFunction();
}
}, 20);