The problem is the following. I have a total of 4 iframes within my website, the only one that moves is the content one, the others stay still, the one that moves constantly has no problems, the question changes when one of the other frames should be below the of content or move to one side so that it does not get in the way of the main one, since if I leave it like this, I cannot click on the main one because it is placed below it, I have already tried it in the following way:
<script>
function ocultar() {
window.parent.frames[3].document.body.style.display = "none";
}
</script>
This function should hide the frame from me and it does to a certain extent, since what it hides from me is what is inside the frame and I don't want that, but that the entire frame of the frame is faded, hidden or moved in some direction that do not get in the way, then I leave you how my frames are arranged
<body onload="ocultar()" >
<div >
<center><label style="font-family: titulo;font-size: 42px;color: red;">Proyecto Hidruth</label></center>
<center> <div ><iframe name="frame-menu" id="framemenu" src="PHP/menu.php"></iframe></div></center>
<div ><center><iframe style="border-width: 0px;background-color: #393030;background-color: #c3b6b6;" id="informacion2" src="PHP/ayudas/ayuda.inicio.php"></iframe></center></div>
<div ><center><iframe name="frame-contenido" id="frameinicio" style="z-index: -10000;" src="PHP/inicio.php"></iframe></center></div>
<div ><center><iframe id="frame-articulo" name="frame-articulo" style="float: right;margin-top: -10%;margin-left: -45%;width:60%;height: 92%;margin-top: -50%;z-index: 1000;position: absolute;" src="PHP/articulos/inicio_articulos.php"></iframe></center></div>
<div><center><iframe style="background-color: orangered;border:0;border-radius: 5px;" id="framepie" src="PHP/piepagina.php"></iframe></center></div>
</div>
</body>
Thank you in advance for reading my comment.
Code to hide:
function ocultar() {
document.querySelectorAll("iframe") 3 .style.display = "none";
}
code to display:
function articulos() {
window.parent.frames[2].location = "articulos.php"
window.parent.frames[1].location = "ayudas/ayuda.articulos.php"
alert(document.querySelectorAll("iframe")[3]);
document.querySelectorAll("iframe")[3].style.display = "block";
var scary = document.getElementById("scary");
scary.play();
}
When it initially loads all the frames if it hides the one I require:
When I click on the articles menu, the frame that initially hid it should reappear and I get this error
The order of my elements is as follows: In javascript is my file where I do the action of articles and in php I load all my frames and at the same time I hide the one I don't need initially
You are not applying the style to the
iframe
but tobody
the page within theiframe
. Then you continue with the same problem because theiframe
itself is still visible and keeps getting in the way when clicking.The solution would be to apply the styles directly to the
iframe
. You can do this in different ways depending on how you have structured the page:If the
iframe
has aid
then apply the style directly to the element with thatid
:If the
iframe
s don't haveid
and you want to hide the room, you could do something like this:or this:
which would leave the function
ocultar()
like this: