My <div> has a styling of style="overflow:hidden" and the size of the <body> is fixed, intended as a multi-screen display without a user interface.
Is there a method to access these "invisible" elements to identify the first one that exceeds the page boundaries?
I suspect it's quite straightforward, but my limited experience with HTML and JavaScript makes searching for solutions challenging.
One popular plugin that can help with element visibility is available at https://example.com/teamdf/jquery-visibility/.
If you want to determine if an element is visible, you can use the following code snippet:
$('specific-element').isVisible();
If you need to check visibility for multiple elements instead of just one, try this approach:
$('multiple-elements').filter(function( index ) { return $(this).isVisible(); });
If you prefer not to rely on a jQuery plugin (as suggested by Joanvo), there is another method you can use, which was discussed on Stack Overflow: How to check if an element is visible in the current viewport?
It's essentially the same approach.
Keep in mind that getBoundingClientRect() has become the recommended way to obtain viewport dimensions.
A solution definitely exists
let windowHeight = $(window).height();
let firstEl = null;
function discoverFirstHiddenElement(element)
{
if(firstEl != null) return;
if(element.offset().top > windowHeight){
firstEl = element;
return true;
}
else {
element.children().each(function(){
if(firstEl != null) return false;
if($(this).children().length > 0) discoverFirstHiddenElement($(this));
});
}
}
$(document).ready(function(){
discoverFirstHiddenElement($("body"));
});
Feel free to experiment with the following code snippet:
var hiddenElements = $( "body" ).find( ":hidden" );
In certain browsers, scripts may be considered hidden elements as well.
var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
Ah, now I see what you mean.
I believe that comparing the top of an overflow:hidden element with the body height could help group all hidden elements together. Give this a try and make adjustments accordingly:
var bodyHeight = $("body").height();
var hiddenElements = new Array();
$("body").find("*").each(function(){
if ($(this).position().top > bodyHeight)
hiddenElements.push($(this));
});
Currently, I am utilizing the Material-ui Drawer component to toggle the display of content on the right side of the screen. The functionality I am aiming for is that when the Drawer opens, it will shrink the existing content on the right without any overl ...
How can I implement setter and getter for a global variable 'X' in a C++ extension for Node.js? I am encountering issues with undefined 'x' while using the getter and setter methods. Currently working on a program involving Accessors ...
Having a web page with multiple subpages each having their own specific CSS can be quite challenging. Sometimes, when all the CSS files are applied globally, they tend to mix with each other causing a headache for developers. One common approach is to decl ...
I am trying to populate the values of <inputs> on a webpage using data from a JSON object. http://codepen.io/jimmykup/pen/exAip?editors=101 To begin, I create a JSON object with two values - one for name and one for url. var jsonObj = []; var nam ...
When making a reservation at a hotel using the CJS Chrome extension, I am attempting to extract information about available rooms and rates both when the page loads and when the user changes dates. My current method involves injecting JavaScript into the p ...
Could someone please help me understand the purpose of passing an object as a function parameter? I have been trying to learn Next.js and they frequently use this method in their code. If anyone could provide a brief explanation of why this is done, it wo ...
I am encountering an issue where I want to select multiple values and have each selected value displayed. However, when I make a selection, I only see one value from a single box. I do not wish to use append because it keeps adding onto the existing valu ...
Is there a way to preselect an option on another page before it loads? Consider two pages, A and B. If a user clicks a button on page A, I want the default option on page B to be changed to "something" before redirecting them. How can this be achieved s ...
I'm a beginner with AngularJs and I've run into an issue where the URL changes but the page remains the same. Any help would be greatly appreciated. Here is my configuration: var app = angular.module('MyApp', ['ngResource',& ...
I am working on a program that allows users to choose images and I have given them the pseudo-class. .my_image_class:hover{ border:3px solid blue; -webkit-box-sizing: border-box; } This makes the images bordered in blue when hovered over, giving a "sele ...
Trying to pass an email address to an AngularJS function has been my recent challenge. Below is a snippet of the code I've been working on. <script> //For simplicity, descriptions for the module and service have been omitted this.sendEmail = f ...
I am dealing with a lengthy array of sorted timestamps representing stock price quotes. These timestamps have minimal resolution, meaning that each timestamp is at least 1 minute bigger than the previous one. However, there can be gaps during the day, espe ...
I am currently utilizing the unslider plugin to design a full-width slider header on a webpage (). Although it functions well at the dimensions I set it up for (1920x450), issues arise when viewed on different screen resolutions. See below: The background ...
Within my JavaScript file named JScript.js, there is a function that includes an AJAX call to a dot-net page. alert('jscript.js called'); function AddTag() { var htag = document.getElementById("hdntag").value.split('|'); var texttag = ...
I am currently working with a Mongoose.js schema that is structured as follows: { "City": String, "Year": String, "Population": Number, "Blah": Number, "Nested": { "Something": Number, "More stuff": Number } } Is there an efficient w ...
<div class="test"> <span> <div>CONTENT </div> </span> <div> <ul> <li> <span>More text</span> EXAMPLE1</li> <li>EXAMPLE2</li> ...
I attempted to add a background image to the card component through props, but the image failed to display on the card. I didn't encounter any errors, and I'm unsure what mistake I might be making. Any suggestions or alternative solutions would b ...
I'm having issues with my hover effects not showing: <input type="button" class="button" value="Click"> However, this code works fine: <button class="button">Click</button> The CSS codes are ...
After upgrading my page from using jquery 1.4.4 to jquery 1.9.1, I encountered an issue where my ajax calls stopped working. Reverting back to jquery 1.4.4 resolved the problem. The error message received was: No conversion from text to string Here is ...
I'm currently working on a program that utilizes a large object filled with dictionary words. I've decided to import this object from a separate file due to its size, but I encountered an error stating that Node.js doesn't recognize the obje ...