No, esta vez no hemos tenido que meter mano al CSS, lo podemos hacer con los atributos de document.body.
Tenemos 3 archivos, el que define la estructura de los frames (1), el frame superior(2) y el frame inferior(3).
frame-deslizante1.html:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Author" content="derkeNuke">
<FRAMESET ROWS="150,*">
<FRAME SRC="frame-deslizante2.html" name="frame1" >
<FRAME SRC="frame-deslizante3.html" name="frame2" >
</FRAMESET>
</head>
<NOFRAMES>
<body>
Sin frames no lo ves
</body>
</NOFRAMES>
</html>
frame-deslizante2.html:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Author" content="derkeNuke">
<script type="text/javascript">
function mueveFrameSup(h) {
parent.document.body.rows=h+"px,*";
}
var hExpandido, hContraido=50, primera=true;
function getH() { return parseInt( parent.document.body.rows.toString().split(",")[0] ); }
hExpandido = getH();
function contraer() {
var hActual=contraer.arguments[0];
if(hActual==undefined) hActual=getH();
if(hActual>hContraido) {
mueveFrameSup(hActual-3);
setTimeout("contraer("+(hActual-3)+")", 10);
}
}
function expandir() {
var hActual=expandir.arguments[0];
if(hActual==undefined) hActual=getH();
if(hActual<hExpandido) {
mueveFrameSup(hActual+3);
setTimeout("expandir("+(hActual+3)+")", 10);
}
}
</script>
</head>
<body>
MINI FRAME ARRIBA
<button onclick="contraer()">contraer()</button>
<button onclick="expandir()">expandir()</button>
</body>
</html>
Y por último
frame-deslizante3.html:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Author" content="derkeNuke">
</head>
<body>
FRAME PRINCIPAL
</body>
</html>
Ya ves que no tiene mucho misterio, la propiedad
rows de
document.body contiene las proporciones de los marcos... ahora sólo extraemos valores de ahí, y los asignamos como nos conviene.
Espero que sea eso lo que buscas, un saludo.
