I need to find a way of finding out whether the inner child element’s width exceeds that of the parent element. The following is my code.
<section class="anchor-links">
<div class="container">
<div class="wrapper">
<div class="content">
<img decoding="async" class="left-arrow" src="https://staging.slattery.co.uk/wp-content/uploads/2024/06/burgundy.svg">
<div class="anchor-row">
<div class="anchor-link">
<a href="#breakfast-and-sandwiches"><h3>Breakfast & Sandwiches</h3></a>
</div>
<div class="anchor-link">
<a href="#on-toast"><h3>On Toast</h3></a>
</div>
<div class="anchor-link">
<a href="#egg-dishes"><h3>Egg</h3></a>
</div>
<div class="anchor-link">
<a href="#morning-goods"><h3>Morning Goods</h3></a>
</div>
<div class="anchor-link">
<a href="#extras"><h3>Extras</h3></a>
</div>
<div class="anchor-link">
<a href="#sweet-choices"><h3>Sweet Choices</h3></a>
</div>
</div>
<img decoding="async" class="right-arrow" src="https://staging.slattery.co.uk/wp-content/uploads/2024/06/burgundy.svg">
</div>
</div>
</div>
</section>
Essentially, the arrow images should only show to indicate when there are more options to show (when there is an overflow). Take a look at the images below. Image 1 requires no arrows because the menu does not overflow whereas image 2 will need the arrows as the image overflows.
image 1 – no arrows needed
image 2 – arrows needed
Thank you in advance
I tried the following code
if(document.querySelector('.page-id-1065') || document.querySelector('.page-id-1801')) {
console.log('Correct page')
const parentElement = document.querySelector('.anchor-links .content');
const listElement = document.querySelector('.anchor-links .content .anchor-row');
// Check if the list exceeds the parent element's width
if (listElement.scrollWidth > parentElement.scrollWidth) {
console.log('The list exceeds the width of its parent!');
} else {
console.log('The list fits within the parent element.');
}
}
It gave the else outcome both times.
2
const windowHeight = window.innerHeight;
const browserHeight = document.documentElement.clientHeight;
console.log("Pencere Yüksekliği:", windowHeight);
console.log("Tarayıcı Yüksekliği:", browserHeight);
// İç öğenin genişliğinin ana öğeyi aşıp aşmadığını kontrol etme
function checkOverflow(innerElement, outerElement) {
const innerWidth = innerElement.scrollWidth; // İç öğenin tam genişliği
const outerWidth = outerElement.clientWidth; // Ana öğenin görünür genişliği
if (innerWidth > outerWidth) {
console.log("İç öğe, ana öğeyi aşıyor.");
} else {
console.log("İç öğe, ana öğeye sığıyor.");
}
}
// Örnek kullanım:
const innerElement = document.querySelector('.inner-child'); // İç öğe
const outerElement = document.querySelector('.outer-parent'); // Ana öğe
checkOverflow(innerElement, outerElement);
enter code here
1