How to find ids which are on screen

Question

I have a content like

 <div id="sContainer">
    <div class="message0" id="l0">Initial Content 111</div>
    <div class="message1" id="l1">Initial Content 222</div>
    <div class="message2" id="l2">Initial Content 333</div>
    <div class="message3" id="l3">Initial Content 444</div>
    <div class="message4" id="l4">Initial Content 555</div>
    <div class="message5" id="l5">Initial Content 666</div>
    <div class="message6" id="l6">Initial Content 777</div>
 </div>

http://jsfiddle.net/LRLR/0sbdttds/

Even inside div, i have some more divs (not shown)

Is there any which to find which all divs are visible on screen ?

Requirement: 1. everytime div is focussed, i want to add css property 2. i need to store a variable

Answer 1

You can use the :visible property selector to fetch shown elements

$(function() {
  var divs = $('[id^=l]:visible');
  console.log('shown divs', divs);
  alert('divs shown: ' + divs.length);
});

/* for testing purpose */

[id^=l] {
  /* id starting with `l` */
  display: none;
}
[id^=l]:nth-child(3n) {
  /* every third element */
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sContainer">
  <div class="message0" id="l0">Initial Content 111</div>
  <div class="message1" id="l1">Initial Content 222</div>
  <div class="message2" id="l2">Initial Content 333</div>
  <div class="message3" id="l3">Initial Content 444</div>
  <div class="message4" id="l4">Initial Content 555</div>
  <div class="message5" id="l5">Initial Content 666</div>
  <div class="message6" id="l6">Initial Content 777</div>
</div>

Answer 2

Use Jquery Visible Selector With Starts With Selector

$("div[id^='l']:visible").addClass("Your_Class_Name");

Answer 3

The ids can be filtered out for visible elements using :visible pseudo selector. I have set tabIndex so that the <div>s are fucusable.

Please checkout the working code snippet below:

var dataAbc = '<div class="message7" tabindex="1">Focus Shifted Here</div>'; 
// I am prepending just 1 <div> as of now. To prepend multiple <div>s, make sure to increment the tabIndex using a for loop.

setTimeout(function(){  $(dataAbc).prependTo("#sContainer");},3000);


$("div:visible").each(function(){
  console.log($(this).attr('id'));
});

$(document).on("focusin", "div div", function(){
  $(this).css("background", "yellow");
});

$(document).on("focusout", "div div", function(){
  $(this).css("background", "white");
});

.message0 {margin: 30px;height: 200px;border: 10px solid green;}
.message1 {margin: 30px;height: 200px;border: 10px solid yellow;}
.message2 {margin: 30px;height: 200px;border: 10px solid pink;}
.message3 {margin: 30px;height: 200px;border: 10px solid blue;}
.message4 {margin: 30px;height: 200px;border: 10px solid black;}
.message5 {margin: 30px;height: 200px;border: 10px solid cyan;}
.message6 {margin: 30px;height: 200px;border: 10px solid orange;}
.message7 {margin: 30px;height: 200px;border: 10px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sContainer">
  <div class="message0" id="l0" tabindex="2">Initial Content 111</div>
  <div class="message1" id="l1" tabindex="3">Initial Content 222</div>
  <div class="message2" id="l2" tabindex="4">Initial Content 333</div>
  <div class="message3" id="l3" tabindex="5">Initial Content 444</div>
  <div class="message4" id="l4" tabindex="6">Initial Content 555</div>
  <div class="message5" id="l5" tabindex="7">Initial Content 666</div>
  <div class="message6" id="l6" tabindex="8">Initial Content 777</div>
</div>

Updated jsFiddle

Checkout the documentation links below:

• http://api.jquery.com/visible-selector/
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex

Answer 4

I think that you looking for

 $(document).ready(function(){
    var i,classes;
    var divs_num = $('#sContainer div').length;
     for(i = 0 ; i < divs_num; i++){
          Ids= $('#sContainer div:visible').eq(i).attr('id');
         if(typeof Ids !== 'undefined'){
             alert(Ids);
             if(Ids == 'l3' ){
                 $('#'+Ids).css('background','blue');
             }
         }
    }
    $('#sContainer div').on('click',function(){
        $('#sContainer div').css('border','5px solid blue');
        $(this).css('border','5px solid red');
    });
});

DEMO the code get all visible divs and alert all visible div Ids.. then check for example for id l3 if its visible change its background to red .. and in click event When click in any div change its border to red and change all another divs to blue border

Answer 5

You can use event delegation to find which element is being focused on. Please see this: http://jsfiddle.net/0sbdttds/1/

The key is to add a listener to the parent, like this:

$("#sContainer").click(showMessage);

Then in the handler, use the event to check the target, like this:

var focusedElement = $("#" + e.target.id);

focusedElement then contains a jQuery object that points to the element that was targeted by the action (which in the case of the fiddle is a click.)

The above fiddle works on clicks. If you want focus check out How to focus div?

Also, the CSS in your fiddle can be improved. It isn't DRY: http://csswizardry.com/2013/07/writing-dryer-vanilla-css/

Answer 6

To find the divs that are in the viewport requires a little more than what jQuery provides out of the box. You might need something like Viewport, which is a class I wrote for this kind of problem.

var viewport = new Viewport(window);

viewport.addEventListener("scroll:complete", function(vp) {
    viewport.querySelectorAll("div.message", function(div) {
        div.classList.add("foo");
    });
});

Each div that you want to detect in the viewport should have one common class to make your code easier to maintain. Please note that Internet Explorer is supported starting at version 9, plus the normal standards compliant browsers.