I want to make a div in my code expand to the width of the viewport and hide anything else to left or right of it - without altering the code outside my div…
My code is pasted into someone else’s page which creates the siblings of my div.
To see the problem please visit dunfermlinerotary.club - What We Do - R& D Pages - Hello World (the forum won’t let me give you a link)
I can’t alter their page so I’m trying to write JS to identify my code’s ancestor then hide all my ancestor’s siblings.
So far, I can find the ancestor and address all its siblings.
My first question is - is there neater way of hiding the siblings?
So far so good but I can’t change properties like width and display on the siblings, only my ancestor.
So second question is 'how can I make the siblings disappear?
Bear in mind I cant change the code of the host and I can’t foretell what changes might be made by its author. (so I can’t use any of their ids or class names in my code)
I hope this is a challenge and not a well known problem which my searches haven’t found the answer to.
P.S. thanks to @codewright who responded to my earlier post which then got lost.
P.P.S. I’m a very old programmer trying to learn some young peoples tricks
Here’s my code (please excuse all the console.logs) .
<div
id="Accostart"></div>
<div>
<script>
function getancestor(P1)
{
console.log( 0,P1 );
x=P1.parentNode;
console.log( 1, x );
y=x.children;
console.log( 2, y.length );
if (y.length==1){
console.log(3,x);
ancestor=getancestor(x);
console.log(4,x);
}
console.log(5,x);
return x;
}
console.log(26,document.getElementById( "Accostart" ));
ancestor=getancestor(document.getElementById( "Accostart" ).parentNode);
console.log(6,ancestor);
lg=ancestor.children;
console.log( 7, lg.length );
if (lg.length>1)
{
for ( var i = 0; i < lg.length; i = i + 1 )
{
console.log(8,i,lg[i],lg[i].style.width, lg[i].style.display);
lg[i].style.width='250px';
}
}
</script>
Hello World
</div>
