Tengo una pagina web con un iframe y dos botones (uno para avanzar y otro para retroceder en el iframe). Esto funciona muy bien, pero querría hacer que en la primera pagina no se mostrara el botón de "Anterior" y que en la última no se mostrara el de "Siguiente".
La pagina que avanza/retrocede carga mas tarde.
Mi HTML es el siguiente:
Código HTML:
<iframe src="/" id="general" frameborder=0 marginheight="0" marginwidth="0" width="100%" height="100%"></iframe>
<div class="next" onclick="guiaPag(1)"></div>
<div class="prev" onclick="guiaPag(-1)"></div>
El Javascript este:
Código Javascript
:
Ver originalvar cnt=0,webpageArray = [
"/Guia/pag1.html",
"/Guia/pag2.html",
"/Guia/pag3.html"
];
function guiaPag(dir) {
cnt+=dir;
if (cnt<0) cnt=webpageArray.length-1; // wrap
else if (cnt>= webpageArray.length) cnt=0; // wrap
var iframe = document.getElementById("general");
iframe.src = webpageArray[cnt];
return false;
}
Como podría hacerlo? Me encantaría que alguien me ayudase.
Aviso: No hace falta que se remueva completamente/otros. Tengo en un css que al añadirle la class "hidden" se esconda.
Codigo CSS (No creo que haga falta pero por si acaso):
Código CSS:
Ver original/* --------------------------------
CSS Next-Prev
--------------------------------*/
.prev {
position: fixed;
height: 10%;
background: transparent padding-box;
left: 0;
top: 45%;
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
}
.prev:hover {
background-color: hsla(211,79%,6%,.03);
border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
}
.prev:hover:active {
background-image: linear-gradient(hsla(211,79%,6%,.02), hsla(211,79%,6%,.05));
border-color: hsla(210,54%,20%,.2) hsla(210,54%,20%,.23) hsla(210,54%,20%,.25);
box-shadow: 0 1px 1px hsla(211,79%,6%,.05) inset,
0 0 1px hsla(211,79%,6%,.1) inset;
transition-duration: 0ms;
}
.next {
position: fixed;
height: 10%;
background: transparent padding-box;
right: 0;
top: 45%;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
}
.next:hover {
background-color: hsla(211,79%,6%,.03);
border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
}
.next:hover:active {
background-image: linear-gradient(hsla(211,79%,6%,.02), hsla(211,79%,6%,.05));
border-color: hsla(210,54%,20%,.2) hsla(210,54%,20%,.23) hsla(210,54%,20%,.25);
box-shadow: 0 1px 1px hsla(211,79%,6%,.05) inset,
0 0 1px hsla(211,79%,6%,.1) inset;
transition-duration: 0ms;
}
.hidden {
display: none;
}
.hidden {
display: none;
}
.prev::before {
content: url("/No%20mostrar/img/prev.png")
}
.next::before {
content: url("/No%20mostrar/img/next.png")
}