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));
});
I am facing an issue with pagination in my AngularJS UI application. I have a dataset that requires server-driven pagination due to its size. The problem I'm encountering is that the pagination element is not displaying on the page, even though I hav ...
As I embark on my first website project that requires accessibility controls, I find myself in need of the ability to adjust text size and contrast settings. Specifically, I want to offer options for small, default, and large text sizes as well as normal, ...
My webpage consists of three elements. The main element is centered with a beautiful background image, while overlayed on top of it is a second div with a black semi-transparent background to enhance text readability. In addition, there is a floating div ...
I am looking for a solution to encode and decode various special characters using JavaScript or jQuery... ~!@#$%^&*()_+|}{:"?><,./';[]\=-` I attempted to encode them using the following code snippet... var cT = encodeURI(oM); // ...
This is a snippet from my JSON file: "shipping":{ "countries":{ "150":{ "id":150, "code":"nl", "title":"Nederland" } }, "country":150, "zipcode":null, "methods":{ ... ...
Hello, I am using the Chosen jQuery plugin to select image options. When I change the trigger, I can easily get a value. Now, I want to be able to get the value when I hover over an option in the select dropdown menu, like shown in the image below, and dis ...
I'm currently working on implementing AJAX and have encountered a roadblock. Specifically, I need assistance with sending a request to the server when a user clicks on a specific image, expecting the server to return that image. While I know how the s ...
Currently facing an issue with dynamic routing in my Next.js project. I have a dynamic page [id].js and am trying to fetch data from an API. const res = await fetch(`myAPI`); const resData = await res.json(); const paths = resData.data.map((r) =&g ...
I'm currently experimenting with the new experimental appDir feature in Next.js 13, and I've encountered a small issue. This project is utilizing: Next.js 13 React 18 MUI 5 (styled components using @mui/system @emotion/react @emotion/styled) T ...
I'm having trouble reading a CSS file from my UI project directory in AngularJS. When I make a GET call, I only get the index.html file as output instead of the CSS file. Can anyone provide some guidance on how to properly access the CSS file? Any su ...
I'm currently utilizing the MUI5 framework for my Project and I must say it's been great so far. I recently created a login page where I incorporated the Paper Component. Within the Paper Component, I wanted to specify an Elevation level. This i ...
I am currently working on creating a table that needs to be larger than the body and centered. Let me provide some more information. Below is my simplified HTML code : <body> <div id="one"> <div> <tab ...
Within a table of 25 rows, each row contains an attribute accompanied by an image (represented by a tick symbol) and five radio buttons for rating the attribute from 1 to 5. Upon clicking one of the radio buttons, the hidden image (tick symbol) should beco ...
Recently, I created the following code snippet for marquee effect. The main functionality it is missing is triggering a function on mouse-over. <marquee class="smooth_m" behavior="scroll" direction="left" scrollamount="3"> <span style="float:le ...
I have an application that displays 10 charts using dygraphs to monitor data. The charts are updated by sending ajax requests to 4 different servlets every 5 seconds. However, after approximately 10-15 minutes, my browser crashes with the "aw! snap" messag ...
Struggling with Javascript and need some guidance. I have a select box with 4 options, and I want to update the contents of a <p> tag with an id of pricedesc based on the selected option. Here is my current code: function priceText(sel) { var l ...
I am currently working on creating navigation directives to simplify complexity. My goal is to have the following HTML structure for my navigation: <custom-nav> <nav-item>Item 1</nav-item> <nav-item>Item 2</nav-item> ...
<script type="importmap"> { "imports": { "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2869a809797b284c2dcc3c4c0dcc2">[email protected]& ...
In my code, I frequently instantiate an object with the following structure: costs: { totalPerYear, totalEver, perMonth: { items: { depreciation, insurance, credit, inspection, ...
Hey there! I am new to typescript and have a bit of experience with Angular. Lately, I've been struggling to make a common angular-ui-router setup work with typescript. I have a nested named views structure that just doesn't seem to load correctl ...