Jquery if target element is visible on screen quasion

Question

i am using wordpress, and we have there dynamic sidebar. in the sidebar we have many widgets. what am i trying to do is to show the divis (widgets) that visible on the screen (onload - after the page is load). the others widgets will be hidden(opacity 0 or something like that) but when i will scroll i want that widget(that was not visible on screen) will appear in fade effect.

i using this code that hide all my sidebar block is on opacity 0 on load.

i need help to show always all widgets that is visible on screen and then make the fade effect on scroll to others.

thanks for help!

$(document).ready(function(){
tiles = $("#sidebar1 div").fadeTo(0, 0);
});
$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

the funcasion for scrolling is working. the problem is that when the page is full load my sidebar class that hold all widgets is on opacity 0 (like display:none). what i need is when the page load it will give opacity 1 to all widgets that visible on screen (for example 2 of 10 widgets). then when user will scroll it will show others widgets each by other with fade effect. thanks for help!

maverickosama92 · Answer 1 · 2013-08-23T09:19:34.737

0

you could try this:

on window scroll you can check this:

 tiles.each(function(){ 
      if($(this).css("opacity") == 0){
         //your hidden div
      }else{
         //your visible div
      }
 });

I hope it helps.

edited Aug 23 '13 at 09:19

answered Aug 23 '13 at 06:10

maverickosama92

2,685
2
21
35

Hello @maverickosama92 it did not work because all the sidebar from the beginning is on opacity 0 so this function is always will return false. thanks for help. – need-help Aug 23 '13 at 06:31
Hello @maverickosama92, thanks for help. this may help, but how can i know witch wigets is "on the screen area"? – need-help Aug 23 '13 at 13:27
@need-help:: i think position() will help you find the div that is on area or not.. or have a look on this link: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling?rq=1 – maverickosama92 Aug 23 '13 at 13:36

Jquery if target element is visible on screen quasion

1 Answers1