Estoy haciendo una web para una empresa y necesito vuestra ayuda.
Bien quiero hacer lo siguiente.
Un iframe de altura = 0 para que cuando le des a un boton (bajar) baje hasta x píxeles y que también se pueda subir. Lógicamente en el iframe tiene que haber texto sino de poco me sirbe.
Bien tengo el siguiente código:
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
.apDiv1 {
position:absolute;
width:200px;
height:0px;
z-index:1;
left: 6px;
top: 41px;
background-color: #99CCFF;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 276px;
top: 88px;
}
-->
</style>
<head>
<script type="text/javascript">
function vaixar1() {
var value = 0;
function vaixar(){
var iframe = document.getElementById('panel');
if(iframe.style.height == '500px'){
// iframe.style.height = '0px';
value = 0;
}
else{
value +=1;
iframe.style.height = value+'px';
}
}
setInterval(vaixar,1);
}
</script>
<script type="text/javascript">
function pujar1() {
var value = 500;
function pujar(){
var iframe = document.getElementById('panel');
if(iframe.style.height == '500px'){
// iframe.style.height = '0px';
value = 500;
}
else{
value -=1;
iframe.style.height = value+'px';
}
}
setInterval(pujar,0);
}
</script>
</head>
<body>
<div id="panel" class="apDiv1"></div>
</div>
<div id="apDiv1">
<p><a href="javascript:vaixar1()">vaixar</a></p>
<p><a href="javascript:pujar1()">pujar</a></p>
</div>
<script type="text/javascript">
</script>
</body>
</html>
Este código me funciona a medias o me sube o me vaja. Por defecto está en 0 píxeles si le doy a subir me lo pone a bajo y me sube
Pero una vez subido el botón de vajar ya no funciona.
Si me podeis explicar donde está el herror para poder solucionarlo os lo agradeceré
Quiero una cosa muy sencilla ya que sino no me aclararo.
Gracias a todos/as.
Sacris1