Jquery scroll doesn't execute correctly

Question

i have a problem with a big but simple script. I need to highlight some divs' background when clicking on a button. Everything works correctly until i add a scroll function to add other colouring rules.

I have the following javascript code on scroll:

$(document).ready(function(){
    $(window).scroll(function()
    {   
        var $top1 = $('.container_img_banchi_idraulici').offset().top + 330;
        var $top_bpf = $('#BPF-T3000').offset().top -100;



             if (($(window).scrollTop()>$top_bpf) && $('.hidden_combinati').css("display") == "block")   
            {
             color_bpf_t3000();
            }

             if (($(window).scrollTop()<$top_bpf) && $('.hidden_combinati').css("display") == "block")    
            {

             no_color_bpf();
            }

and the other functions code:

COLOR_BPF:

function color_bpf_t3000(){         

            for (i = 0; i<BPF_T3000.length; i++){               
                $('#'+BPF_T3000[i]+'.rettangolo_test').animate({ backgroundColor: color_green });
                $('#'+BPF_T3000[i]+' + a').css('font-weight', 'bold');          
            }
            for (i = 0; i<BPF_T3000_optional.length; i++){              
                $('#'+BPF_T3000_optional[i]+'.rettangolo_test').animate({ backgroundColor: color_yellow });
                $('#'+BPF_T3000_optional[i]+' + a').css('font-weight', 'bold');         
            }

        }

NO_COLOR

function decolora_bpf(){
            reset_colors();                 
            for (i = 0; i<combinati.length; i++){               
                $('#'+combinati[i]+'.rettangolo_test').animate({ backgroundColor: color_green });
                $('#'+combinati[i]+' + a').css('font-weight', 'bold');          
            }
        }

RESET_COLOR

function resetta_colori(){
            $('.rettangolo_test').css('background-color', color_white);
            $('.rettangolo_test + a').css('font-weight', 'normal');
        }

What happens is that no_color_bpf is executed even when .hidden_combinati has display none.

BUT if i write code like

             if (($(window).scrollTop()<$top_bpf) && $('.hidden_combinati').css("display") == "block")    
            {
            alert("hello"); 
             no_color_bpf();
            }

all works fine.

It seems that the function is executed before display goes none. I tried to delay the function with .delay() and other methods but no way to solve.

Any advice?

Thanks!

EDIT 1 var scrolltop = $(window).scrollTop();

console.log("scrolltop "+scrolltop); 
            console.log("top_Btp "+top_bpf); 
            console.log("display " +$('.hidden_combinati').css("display"));
            console.log("if " + scrolltop<top_bpf && $('.hidden_combinati').is(':visible'));
            console.log("if2 " +scrolltop < top_bpf);
            console.log("if2 " +scrolltop > top_bpf);

The output is like:

top_Btp 911 
display block 
false 
false 
false 
scrolltop 506 
top_Btp 911 
display block 
false 
false 
false 
scrolltop 507 
top_Btp 911 
display block 
false 
false 
false

And so on even when scrollTop goes over Top_bpt.

What am i doing wrong??

Alekos Dordas · Accepted Answer · 2013-11-14 11:39:59Z

1

I find it extremely usefull to debug my code using console.log() to examine what goes wrong. I would run a

console.log($(window).scrollTop()); console.log($top_bpf); console.log($('.hidden_combinati').css("display"));

first, to be sure of what makes the condition true.

console.log() outputs to javascript console which is found at "inspect element" in Chrome and "firebug" at firefox.

answered Nov 14, 2013 at 11:39

Alekos Dordas

8107 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SBO Over a year ago

Thanks alekos, very useful, i didn't know that. The problem now is that my if never goes on true. if i print out:

Alekos Dordas Over a year ago

You mean you are comparing 2 values and both comparisons go false?

SBO Over a year ago

Yes, just look to the last 2 console.log, first condition is scrolltop < top_bpf and second is scrolltop > top_bpf but is always false...

Alekos Dordas Over a year ago

Try parseInt(scrolltop,10) > parseInt(top_bpf,10) and parseInt(scrolltop,10) < parseInt(top_bpf,10)

SBO Over a year ago

Always both false :-( you can see this at test.giussanionline.it/en/prodotti/banchi_idraulici.php cant really understand why it does not work! P.s. click on combined to see different values

|

Collectives™ on Stack Overflow

Jquery scroll doesn't execute correctly

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related