If statement not working in JavaScript

Question

I've got a minor problem with my jQuery gallery, and I assume it's related to if statement. You can see how it works here: http://mojbastovan.com/gallery/lightbox.html
What I want to do is to show description bellow the picture each time I put a mouse over it, however, that doesn't work. Try opening an image and you'll see that when you put your mouse over the bigger image you don't see its description bellow, but when you move the mouse away from image, and put it back over everything works flawlessly.
So what's the problem? I have even added the if statement but it doesn't work, so can anyone help me out with this one? Oh, and another question, does show, hide and animate functions work choppy for you in Chrome? I've tested it on several browsers, and it seems that Chrome renders those functions bit choppy. Here's my code:

$(document).ready(function() {
$("#box, #box2, #black, #bgal, #pic, #button").hide();
    $("#main img").click(function(){
        $("#load").show()
        finished=false;
    //  alert($("#slike").children().size())
    broj=$("#main img").index(this)+1;
    x=$(this).attr('src');
    $.getJSON('baza.json', function(json){
    $.each(json.slike, function(i,v){
        if (v.t_sr==x){
            nsrc=v.sr;
            info=v.info;
            detail=v.detail;
            zamena(nsrc);
     //$("#pic img").attr('src',v.sr);

        }
        if ((broj > 2) && (broj < 9)) {
            $("#slike").animate({
                left: -152 *(broj-3)
            }, 200)
        }
    else if (broj<3){
        $("#slike").animate({
                left:0
            }, 200)
    }
    else if (broj>8){
        $("#slike").animate({
                left: -152 *5
            }, 200)
    }
    });
    });
$("#black").show(200, function(){
    $("#bgal").show(200);
});
    });
$("#slike img").click(function(){
    $("#pic").hide(function(){
        $("#load").show();
    });
    //  alert($("#slike").children().size())
    broj=$("#slike img").index(this)+1;
    if ((broj > 2) && (broj < 9)) {
            $("#slike").animate({
                left: -152 *(broj-3)
            }, 200)
        }
    else if (broj<3){
        $("#slike").animate({
                left:0
            }, 200)
    }
    else if (broj>8){
        $("#slike").animate({
                left: -152 *5
            }, 200)
    }
    x=$(this).attr('src');
    $.getJSON('baza.json', function(json){
    $.each(json.slike, function(i,v){
        if (v.t_sr==x){
            nsrc=v.sr;
            info=v.info;
            detail=v.detail;
            zamena(nsrc);
     //$("#pic img").attr('src',v.sr);

        }

    });
    });
     $("#black").show(200, function(){
    $("#bgal").show(200);
});
       });
    $("#pic img").mouseover(function(t){
clearTimeout(t);
$("#info").text(info);
$("#detail").text(detail);
if (finished == false) {
    $("#box2").dequeue().stop(true, true).show('slide', {
        direction: 'down'
    }, 100);
    $("#box").dequeue().stop(true, true).show('slide', {
        direction: 'down'
    }, 100);
}
    });
    $("#pic img").mouseout(function(){
t=setTimeout("$('#box2, #box').dequeue().stop(true,true).hide('slide', {direction: 'down'}, 100);",50)

    })
     $("#button").mouseover(function(){
$("#button img").attr("src","images/button.png");
  })
   $("#button").mouseout(function(){
$("#button img").attr("src","images/buttono.png");
   })
   $("#button").click(function(){
$("#bgal").hide(100,function(){
        $("#black").hide(100);
        $("#pic").hide();
    });
    });
     $("#box2").mouseover(function(){
clearTimeout(t);
    })
    $("#box2").mouseout(function(){
    t=setTimeout("$('#box2, #box').dequeue().stop(true,true).hide('slide',        {direction: 'down'}, 100);",50)
});
     });
   //FUNKCIJE
    function zamena(nsrc){
$("#pic").hide();
nimg=new Image;
nimg.src=nsrc; // mora podesena promenljiva iz gl programa
nimg.onload = function(){
    $("#load").hide()
    $("#pic img").attr('src',nimg.src);
    $("#pic").show(1);
    $("#button").show();

}
   }

I get Error: t is not defined Source File: http://mojbastovan.com/gallery/script.js Line: 80 — mplungjan, Mar 20 '11 at 17:20

score 0 · Accepted Answer · answered Mar 20 '11 at 17:23

0

 $("#pic img").mouseover(function(){
    clearTimeout(t);
    $("#info").text(info);
    $("#detail").text(detail);
    if (finished == false) {
        $("#box2").dequeue().stop(true, true).show('slide', {
            direction: 'down'
        }, 100);
        $("#box").dequeue().stop(true, true).show('slide', {
            direction: 'down'
        }, 100);
    }
  })

Have you tried adding a t within the function? $("#pic img").mouseover(function(t){

Also I believe you need to add a semicolon at the end of the function. Try:

$("#pic img").mouseover(function(t){
    clearTimeout(t);
    $("#info").text(info);
    $("#detail").text(detail);
    if (finished == false) {
        $("#box2").dequeue().stop(true, true).show('slide', {
            direction: 'down'
        }, 100);
        $("#box").dequeue().stop(true, true).show('slide', {
            direction: 'down'
        }, 100);
    }
  });

answered Mar 20 '11 at 17:23

Elliott

3,812
24
69
93

I did as you told me, but doesn't that mean that I have to update my other functions such as $("#box2").mouseover(function() that contain clearTimeout? Anyhow, I've updated the script, but it seems that when I move mouse to the white area with description and back to the picture, the description hides, but since #pic img has clearTimeout on it I don't that it should be hiding. It seems that clearTimeout is being ignored for some reason. I've updated my code so check the link to see the problem for yourself. – Mentalhead Mar 20 '11 at 18:49
@Mentalhead I just looked again and I no longer see any errors on the page? Also it seems to work fine for me in IE9 and FF. When I hover over the image the description shows, on mouseout it hides again. – Elliott Mar 20 '11 at 20:33
I agree that there are no errors, but I'm still trying to get a bit different results here. I've already assigned setTimeout to mouseout on #box2, that should hide those divs (#box2, #box) in 50ms in case if I move the mouse out of that div, but I want to keep those divs shown if I move the mouse back to the #pic img. This is way I've placed clearTimeout(t) within $("#pic img").mouseover(function(t)), but for some reason, timer isn't cleared when I put the mouse over #pic img, and it continues with execution, so what's wrong? – Mentalhead Mar 20 '11 at 23:05
I've have found a workaround for my current problem, but I could never make it without your answer, so I've accepted it. Thanks. – Mentalhead Mar 22 '11 at 06:20
Glad to hear you got it sorted :) – Elliott Mar 22 '11 at 18:20

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

I think the issue might be that mouseover event is not being triggered when the image slides under it. There are workarounds (tracking the position of the mouse on the document):

Mouseover/mouseenter not fired by browser on animated/moving element

The animation between my FF and Chrome seemed identical.

edited May 23 '17 at 12:26

Community

1
1

answered Mar 20 '11 at 18:37

Adam Ayres

8,732
1
32
25

I tried using tracking the mouse coordinates, and it works rather well, unless you move your mouse really fast over the picture, in that case, it doesn't trigger. Anyhow, I've a found a workaround, I've added another div with no content on top of those other divs, and everything works as planned with it. – Mentalhead Mar 22 '11 at 06:19

If statement not working in JavaScript

2 Answers2