Discovering visible ID numbers on the screen

Question

Discovering visible ID numbers on the screen

My content includes the following:

 <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/

Additional divs are present inside the main div (not visible in this code snippet).

I am looking for a way to determine which div elements are currently visible on the screen.

Requirements: 1. Whenever a div is in focus, I need to apply a specific CSS property. 2. I also need to store a variable for each div.

javascript jquery html css

Answer 1

Answer №1

To retrieve displayed elements, you can utilize the :visible property selector.

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

/* this is for testing purposes */

[id^=l] {
  /* selecting 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

To retrieve displayed elements, you can utilize the :visible property selector.

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

/* this is for testing purposes */

[id^=l] {
  /* selecting 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 3

Answer №2

Implement the Jquery Visible Selector in conjunction with the Starts With Selector

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

Answer 4

Implement the Jquery Visible Selector in conjunction with the Starts With Selector

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

Answer 5

Answer №3

If you want to determine which element is currently focused on, event delegation can help with that. Take a look at this example: http://jsfiddle.net/0sbdttds/1/

The trick is to set up a listener on the parent element, like so:

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

Then, within the handler function, you can use the event object to inspect the target element like this:

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

The variable focusedElement now holds a jQuery object representing the targeted element (in this case, from a click event in the fiddle).

The provided fiddle responds to clicks, but if you need focus events, check out How to focus div?

Additionally, the CSS structure in your fiddle could be more efficient. Avoid redundancy by following best practices outlined here:

Answer 6

If you want to determine which element is currently focused on, event delegation can help with that. Take a look at this example: http://jsfiddle.net/0sbdttds/1/

The trick is to set up a listener on the parent element, like so:

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

Then, within the handler function, you can use the event object to inspect the target element like this:

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

The variable focusedElement now holds a jQuery object representing the targeted element (in this case, from a click event in the fiddle).

The provided fiddle responds to clicks, but if you need focus events, check out How to focus div?

Additionally, the CSS structure in your fiddle could be more efficient. Avoid redundancy by following best practices outlined here:

Answer 7

Answer №4

To identify visible elements, the :visible pseudo selector can be used to filter out the ids. I have assigned a tabIndex to make the <div>s focusable.

Take a look at the code snippet below to see it in action:

var dataXyz = '<div class="message7" tabindex="1">Focus Shifted Here</div>';
// Currently prepending just 1 <div>, but for multiple ones, use a loop to increment the tabIndex.

setTimeout(function(){  $(dataXyz).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>

Check out the updated jsFiddle here

For more details, refer to the documentation links provided below:

Answer 8

To identify visible elements, the :visible pseudo selector can be used to filter out the ids. I have assigned a tabIndex to make the <div>s focusable.

Take a look at the code snippet below to see it in action:

var dataXyz = '<div class="message7" tabindex="1">Focus Shifted Here</div>';
// Currently prepending just 1 <div>, but for multiple ones, use a loop to increment the tabIndex.

setTimeout(function(){  $(dataXyz).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>

Check out the updated jsFiddle here

For more details, refer to the documentation links provided below:

Answer 9

Answer №5

If you're looking to identify which div elements are currently in the viewport, you'll need more than just basic jQuery functionality. Consider using a specialized solution like Viewport, a custom class designed specifically for this task.

var viewport = new Viewport(window);

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

To simplify your code maintenance, ensure that each div you want to track in the viewport shares a common class. Keep in mind that this method is compatible with Internet Explorer 9 and newer versions, as well as other modern browsers following standard guidelines.

Answer 10

If you're looking to identify which div elements are currently in the viewport, you'll need more than just basic jQuery functionality. Consider using a specialized solution like Viewport, a custom class designed specifically for this task.

var viewport = new Viewport(window);

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

To simplify your code maintenance, ensure that each div you want to track in the viewport shares a common class. Keep in mind that this method is compatible with Internet Explorer 9 and newer versions, as well as other modern browsers following standard guidelines.

Answer 11

Answer №6

It seems like you are searching for something.

 $(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 12

It seems like you are searching for something.

 $(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

Discovering visible ID numbers on the screen

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Exploring the Contrasts in Utilizing AJAX: A Comparative Analysis of Two

utilizing Nuxt code in Elixir/Phoenix

What could be the reason for the onmessage listener not handling the initial SSE event?

Implementing dynamic page loading with ajax on your Wordpress website

Styling certain UL and LI elements with CSS properties

Guide on utilizing Subscribe Observable for performing lookup in Angular

Focus event in IE does not always work as expected after an ajax request is

jQuery Drag Drop Sorting Feature Fails to Work when Moving Items from List to Table Cell

Error encountered while attempting to convert CSV file: InvalidStateError

Is it advisable to combine ng-change with ng-blur in AngularJS?

A step-by-step guide on setting up an event listener for dynamically generated HTML using JavaScript objects

Using Django Template Variables in JavaScript Functions

Issue encountered: Trying to deploy firebase functions and hosting with vue-cli v3 and node.js leads to an error "No npm package found in functions source directory

Choose a specific inner div element within another div using jQuery

What is the best way to prevent the click event of a container div from triggering when clicking on elements within the container using JQuery

Step-by-step guide for sending data using module.exports in a node.js application

What is the reason behind one function triggering a re-render of a component while the other does not in Next.js?

Files on video input are now accepting audio attribute

The click functionality appears to be malfunctioning

The HTML elements may have identical heights, but visually, one appears larger than the other