03/10/2003, 11:14
| |||
| |||
 scroll interno Hola amigos! escribo este mensaje para saber si alguien me puede ayudar a insertar un scroll interno en mi página, es decir, no quiero que el usuario de mi sitio se mueva con el scroll que por defecto pone el explorador, sino que quiero que el scroll se situe en una determinada zona de cada página! Puede ayudarme alguno de vosotros? Muchas gracias de antemano por leer mi duda y tratar de ayudarme! Un saludo |
|
06/10/2003, 06:23
| ||||
| ||||
| Prueba con esto (2 ficheros el html y un .js externo): ******El HTML:******* Datos a tener en cuenta: - Meter el script: <script src="scroll.js"></script> - Meter un estilo: <style type="text/css"> #content {position: absolute;} </style> - Meter un onLoad: <body scroll="no" onLoad="eventLoader();"> - Meter el contenido: <span id="contentClip" style="position: absolute; top: 86px; left: 31px; width: 413px; height: 261px; clip:rect(0px 413px 300px 0px); z-index: 6; overflow: hidden;; visibility: visible"> <span id="content"> <table width="413" border="0" cellpadding="0" cellspacing="0"> <tr align="left" valign="top"> <td> Aquí el contenido que quieres para el scroll. </td> </tr> </table> </span> </span> - Meter las imágenes con las que se mueve el scroll: <!-- div containing up-arrow | change: top + left --> <span id="up" style="position: absolute; top: 86px; left: 455px; width: 1px; height: 1px; z-index: 3;; visibility: visible"> <img src="images/up.gif" border="0" width="15" height="15"> </span> <!-- div containing down-arrow | change: top + left --> <span id="down" style="position: absolute; top: 332px; left: 455px; width: 1px; height: 1px; z-index: 4;; visibility: visible"> <img src="images/down.gif" border="0" width="15" height="15"> </span> <!-- div containing scrollbar | change: top + left + width + height --> <span id="drag" style="position: absolute; top: 101px; left: 456px; width: 13px; height: 13px; z-index: 5;; visibility: visible"> <img src="images/barra.gif" border="0" width="13" height="13"></span> <!-- div laying above scrollbar for netscape 6 protection | change: top + left + width + height --> <span id="ruler" style="position: absolute; top: 101px; left: 456px; width: 13px; height: 13px; z-index: 2;; visibility: visible"></span> <span id="guia" style="position: absolute; top: 101px; left: 455px; width: 15px; height: 231px; z-index: 1;; visibility: visible"> <img src="images/guia.gif" border="0" width="15" height="231"></span> *****El .js:***** // Made by [email protected] // Keep these two lines and you're free to use this code // Touch me here  var upH = 15; // Height of up-arrow var upW = 15; // Width of up-arrow var downH = 15; // Height of down-arrow var downW = 15; // Width of down-arrow var dragH = 13; // Height of scrollbar var dragW = 13; // Width of scrollbar var scrollH = 231; // Height of scrollbar var speed = 6; // Scroll speed // And now... go to the bottom of the page... // Browser detection var dom = document.getElementById ? true:false; var nn4 = document.layers ? true:false; var ie4 = document.all ? true:false; var mouseY; // Mouse Y position onclick var mouseX; // Mouse X position onclick var clickUp = false; // If click on up-arrow var clickDown = false; // If click on down-arrow var clickDrag = false; // If click on scrollbar var clickAbove = false; // If click above scrollbar var clickBelow = false; // If click below scrollbar var timer = setTimeout("",500); // Repeat variable var upL; // Up-arrow X var upT; // Up-arrow Y var downL; // Down-arrow X var downT; // Down-arrow Y var dragL; // Scrollbar X var dragT; // Scrollbar Y var rulerL; // Ruler X var rulerT; // Ruler Y var contentT; // Content layer Y; var contentH; // Content height var contentClipH; // Content clip height var scrollLength; // Number of pixels scrollbar should move var startY; // Keeps track of offset between mouse and span // Mousedown function down(e){ if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton getMouse(e); startY = (mouseY - dragT); // If click on up-arrow if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){ clickUp = true; return scrollUp(); } // Else if click on down-arrow else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){ clickDown = true; return scrollDown(); } // Else if click on scrollbar else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){ clickDrag = true; return false; } else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){ // If click above drag if(mouseY < dragT){ clickAbove = true; clickUp = true; return scrollUp(); } // Else click below drag else{ clickBelow = true; clickDown = true; return scrollDown(); } } // If no scrolling is to take place else{ return true; } } // Drag function function move(e){ if(clickDrag && contentH > contentClipH){ getMouse(e); dragT = (mouseY - startY); if(dragT < (rulerT)) dragT = rulerT; if(dragT > (rulerT + scrollH - dragH)) dragT = (rulerT + scrollH - dragH); contentT = ((dragT - rulerT)*(1/scrollLength)); contentT = eval('-' + contentT); moveTo(); // So ie-pc doesn't select gifs if(ie4) return false; } } function up(){ clearTimeout(timer); // Resetting variables clickUp = false; clickDown = false; clickDrag = false; clickAbove = false; clickBelow = false; return true; } // Reads content layer top function getT(){ if(ie4) contentT = document.all.content.style.pixelTop; else if(nn4) contentT = document.contentClip.document.content.top; else if(dom) contentT = parseInt(document.getElementById("content").style. top); } // Reads mouse X and Y coordinates function getMouse(e){ if(ie4){ mouseY = event.clientY + document.body.scrollTop; mouseX = event.clientX + document.body.scrollLeft; } else if(nn4 || dom){ mouseY = e.pageY; mouseX = e.pageX; } } // Moves the layer function moveTo(){ if(ie4){ document.all.content.style.top = contentT; document.all.ruler.style.top = dragT; document.all.drag.style.top = dragT; } else if(nn4){ document.contentClip.document.content.top = contentT; document.ruler.top = dragT; document.drag.top = dragT; } else if(dom){ document.getElementById("content").style.top = contentT + "px"; document.getElementById("drag").style.top = dragT + "px"; document.getElementById("ruler").style.top = dragT + "px"; } } // Scrolls up function scrollUp(){ getT(); if(clickAbove){ if(dragT <= (mouseY-(dragH/2))) return up(); } if(clickUp){ if(contentT < 0){ dragT = dragT - (speed*scrollLength); if(dragT < (rulerT)) dragT = rulerT; contentT = contentT + speed; if(contentT > 0) contentT = 0; moveTo(); timer = setTimeout("scrollUp()",25); } } return false; } // Scrolls down function scrollDown(){ getT(); if(clickBelow){ if(dragT >= (mouseY-(dragH/2))) return up(); } if(clickDown){ if(contentT > -(contentH - contentClipH)){ dragT = dragT + (speed*scrollLength); if(dragT > (rulerT + scrollH - dragH)) dragT = (rulerT + scrollH - dragH); contentT = contentT - speed; if(contentT < -(contentH - contentClipH)) contentT = -(contentH - contentClipH); moveTo(); timer = setTimeout("scrollDown()",25); } } return false; } // reloads page to position the layers again function reloadPage(){ location.reload(); } // Preload function eventLoader(){ if(ie4){ // Up-arrow X and Y variables upL = document.all.up.style.pixelLeft; upT = document.all.up.style.pixelTop; // Down-arrow X and Y variables downL = document.all.down.style.pixelLeft; downT = document.all.down.style.pixelTop; // Scrollbar X and Y variables dragL = document.all.drag.style.pixelLeft; dragT = document.all.drag.style.pixelTop; // Ruler Y variable rulerT = document.all.ruler.style.pixelTop; // Height of content layer and clip layer contentH = parseInt(document.all.content.scrollHeight); contentClipH = parseInt(document.all.contentClip.style.height); } else if(nn4){ // Up-arrow X and Y variables upL = document.up.left; upT = document.up.top; // Down-arrow X and Y variables downL = document.down.left; downT = document.down.top; // Scrollbar X and Y variables dragL = document.drag.left; dragT = document.drag.top; // Ruler Y variable rulerT = document.ruler.top; // Height of content layer and clip layer contentH = document.contentClip.document.content.clip.bottom; contentClipH = document.contentClip.clip.bottom; } else if(dom){ // Up-arrow X and Y variables upL = parseInt(document.getElementById("up").style.left) ; upT = parseInt(document.getElementById("up").style.top); // Down-arrow X and Y variables downL = parseInt(document.getElementById("down").style.lef t); downT = parseInt(document.getElementById("down").style.top ); // Scrollbar X and Y variables dragL = parseInt(document.getElementById("drag").style.lef t); dragT = parseInt(document.getElementById("drag").style.top ); // Ruler Y variable rulerT = parseInt(document.getElementById("ruler").style.to p); // Height of content layer and clip layer contentH = parseInt(document.getElementById("content").offset Height); contentClipH = parseInt(document.getElementById("contentClip").of fsetHeight); document.getElementById("content").style.top = 0 + "px"; } // Number of pixels scrollbar should move scrollLength = ((scrollH-dragH)/(contentH-contentClipH)); // Initializes event capturing if(nn4){ document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); window.onresize = reloadPage; } document.onmousedown = down; document.onmousemove = move; document.onmouseup = up; } |
|
09/10/2003, 03:35
| ||||
| ||||
| Como no cabe todo en un sólo mensaje pongo aquí el fichero HTML y en otro el código del .js (externo, ¡¡ojo!! con la llamada que quede como tú quieras): <html> <head> <title>Ficha Departamento</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="imagetoolbar" content="no"> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <script src="js/scroll.js"></script> <style type="text/css"> #content {position: absolute;} </style> <link rel="stylesheet" href="css/estilos.css" type="text/css"> </head> <body bgcolor="#BBCCDD" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" link="#666666" vlink="#666666" alink="#000000" scroll="no" onLoad="eventLoader();"> <!-- div containing content | change: top + left + width + height + clip --> <span id="cabecera" style="position: absolute; top: 0px; left: 0px; width: 500px; height: 20px; clip:rect(0px 500px 20px 0px); z-index: 7; overflow: hidden;; visibility: visible"> <table width="500" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="20" bgcolor="#FFCC00"></td> <td width="4" bgcolor="#000000"></td> <td width="9" bgcolor="#FFCC00"></td> <td width="317" bgcolor="#FFCC00" class="titulos">Departamento</td> <td width="150" align="right"><img src="images/logo.gif" border="0"></td> </tr> </table> </span> <span id="titulo" style="position: absolute; top: 41px; left: 31px; width: 439px; height: 20px; clip:rect(0px 439px 20px 0px); z-index: 8; overflow: hidden;; visibility: visible"> <table width="439" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="10" height="20" bgcolor="#FFFFFF"></td> <td width="429" height="20" bgcolor="#FFFFFF" class="titulos">Título de la ficha</td> </tr> </table> </span> <span id="linea1" style="position: absolute; top: 79px; left: 31px; width: 439px; height: 1px; clip:rect(0px 439px 1px 0px); z-index: 9; overflow: hidden;; visibility: visible"> <table width="439" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="439" height="1" bgcolor="#000000"></td> </tr> </table> </span> <span id="linea2" style="position: absolute; top: 353px; left: 31px; width: 439px; height: 1px; clip:rect(0px 439px 1px 0px); z-index: 10; overflow: hidden;; visibility: visible"> <table width="439" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="439" height="1" bgcolor="#000000"></td> </tr> </table> </span> <span id="cerrar" style="position: absolute; top: 356px; left: 419px; width: 52px; height: 11px; clip:rect(0px 52px 11px 0px); z-index: 11; overflow: hidden;; visibility: visible"> <a href='javascript:self.close()'><img src="images/cerrar.gif" border="0"></a> </span> <span id="contentClip" style="position: absolute; top: 86px; left: 31px; width: 413px; height: 261px; clip:rect(0px 413px 300px 0px); z-index: 6; overflow: hidden;; visibility: visible"> <span id="content"> <table width="413" border="0" cellpadding="0" cellspacing="0"> <tr align="left" valign="top"> <td align="left" height="155"><img src="images/ficha1.jpg" border="0"></td> <td align="left" widht="15"><img src="images/transparente.gif" border="0" width="15" height="1"></td> <td align="left" valign="middle" class="informa_titulos">Año: 2003<br> Productoras: Cartel, Tornasol Films y Flamenco Films<br> Director: Agustín Díaz Yanes<br> Formato: 2.2:21, 35 mm<br> Distribución: Lauren Films </td> </tr> <tr> <td colspan="3" class="informa_dentro"> Con colaboraciones de Helena Kvarnström, Marta Carrillo, Magui, Lorenzo Gómez y 11 Manuel Bartual. Incluye una entrevista a Mauro Entrialgo y un portafolio de ilustraciones de Juaco Vizuete. La portada es de Joan Marín.<br> Con colaboraciones de Helena Kvarnström, Marta Carrillo, Magui, Lorenzo Gómez y 11 Manuel Bartual. Incluye una entrevista a Mauro Entrialgo y un portafolio de ilustraciones de Juaco Vizuete. La portada es de Joan Marín.<br> Con colaboraciones de Helena Kvarnström, Marta Carrillo, Magui, Lorenzo Gómez y 11 Manuel Bartual. Incluye una entrevista a Mauro Entrialgo y un portafolio de ilustraciones de Juaco Vizuete. La portada es de Joan Marín.<br> Con colaboraciones de Helena Kvarnström, Marta Carrillo, Magui, Lorenzo Gómez y 11 Manuel Bartual. Incluye una entrevista a Mauro Entrialgo y un portafolio de ilustraciones de Juaco Vizuete. La portada es de Joan Marín. </td> </tr> </table> </span> </span> <!-- div containing up-arrow | change: top + left --> <span id="up" style="position: absolute; top: 86px; left: 455px; width: 1px; height: 1px; z-index: 3;; visibility: visible"> <img src="images/up.gif" border="0" width="15" height="15"> </span> <!-- div containing down-arrow | change: top + left --> <span id="down" style="position: absolute; top: 332px; left: 455px; width: 1px; height: 1px; z-index: 4;; visibility: visible"> <img src="images/down.gif" border="0" width="15" height="15"> </span> <!-- div containing scrollbar | change: top + left + width + height --> <span id="drag" style="position: absolute; top: 101px; left: 456px; width: 13px; height: 13px; z-index: 5;; visibility: visible"> <img src="images/barra.gif" border="0" width="13" height="13"></span> <!-- div laying above scrollbar for netscape 6 protection | change: top + left + width + height --> <span id="ruler" style="position: absolute; top: 101px; left: 456px; width: 13px; height: 13px; z-index: 2;; visibility: visible"></span> <span id="guia" style="position: absolute; top: 101px; left: 455px; width: 15px; height: 231px; z-index: 1;; visibility: visible"> <img src="images/guia.gif" border="0" width="15" height="231"></span> </body> </html> |
|
09/10/2003, 03:36
| ||||
| ||||
| Ahora el .js (scroll.js, recuero que ojo con la ruta): // Made by [email protected] // Keep these two lines and you're free to use this code // Known bugs : // If ie4.5 mac, please press apple-t to remove sidebar, otherwise everything is pushed 20px to the right... // Corrected bugs : // 25.01.2001 - When the height of the span "content" was less than the height of the span "contentClip" a javascript error occured, function changed : move() // 21.02.2001 - Scrolling text wasn't selectable in ie, function changed : move() // 05.03.2001 - Ie x and y coordinates was wrong when page was scrolled, function changed : getMouse() // 19.04.2001 - Finally able to remove browser-scrollbar if content is longer than the browser is high: // Just put this in the style-tag right before the end head-tag: // body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; width:100%;height:100%;overflow:hidden} // Touch me here var upH = 15; // Height of up-arrow var upW = 15; // Width of up-arrow var downH = 15; // Height of down-arrow var downW = 15; // Width of down-arrow var dragH = 13; // Height of scrollbar var dragW = 13; // Width of scrollbar var scrollH = 231; // Height of scrollbar var speed = 6; // Scroll speed // And now... go to the bottom of the page... // Browser detection var dom = document.getElementById ? true:false; var nn4 = document.layers ? true:false; var ie4 = document.all ? true:false; var mouseY; // Mouse Y position onclick var mouseX; // Mouse X position onclick var clickUp = false; // If click on up-arrow var clickDown = false; // If click on down-arrow var clickDrag = false; // If click on scrollbar var clickAbove = false; // If click above scrollbar var clickBelow = false; // If click below scrollbar var timer = setTimeout("",500); // Repeat variable var upL; // Up-arrow X var upT; // Up-arrow Y var downL; // Down-arrow X var downT; // Down-arrow Y var dragL; // Scrollbar X var dragT; // Scrollbar Y var rulerL; // Ruler X var rulerT; // Ruler Y var contentT; // Content layer Y; var contentH; // Content height var contentClipH; // Content clip height var scrollLength; // Number of pixels scrollbar should move var startY; // Keeps track of offset between mouse and span // Mousedown function down(e){ if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton getMouse(e); startY = (mouseY - dragT); // If click on up-arrow if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){ clickUp = true; return scrollUp(); } // Else if click on down-arrow else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){ clickDown = true; return scrollDown(); } // Else if click on scrollbar else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){ clickDrag = true; return false; } else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){ // If click above drag if(mouseY < dragT){ clickAbove = true; clickUp = true; return scrollUp(); } // Else click below drag else{ clickBelow = true; clickDown = true; return scrollDown(); } } // If no scrolling is to take place else{ return true; } } // Drag function function move(e){ if(clickDrag && contentH > contentClipH){ getMouse(e); dragT = (mouseY - startY); if(dragT < (rulerT)) dragT = rulerT; if(dragT > (rulerT + scrollH - dragH)) dragT = (rulerT + scrollH - dragH); contentT = ((dragT - rulerT)*(1/scrollLength)); contentT = eval('-' + contentT); moveTo(); // So ie-pc doesn't select gifs if(ie4) return false; } } function up(){ clearTimeout(timer); // Resetting variables clickUp = false; clickDown = false; clickDrag = false; clickAbove = false; clickBelow = false; return true; } // Reads content layer top function getT(){ if(ie4) contentT = document.all.content.style.pixelTop; else if(nn4) contentT = document.contentClip.document.content.top; else if(dom) contentT = parseInt(document.getElementById("content").style. top); } // Reads mouse X and Y coordinates function getMouse(e){ if(ie4){ mouseY = event.clientY + document.body.scrollTop; mouseX = event.clientX + document.body.scrollLeft; } else if(nn4 || dom){ mouseY = e.pageY; mouseX = e.pageX; } } // Moves the layer function moveTo(){ if(ie4){ document.all.content.style.top = contentT; document.all.ruler.style.top = dragT; document.all.drag.style.top = dragT; } else if(nn4){ document.contentClip.document.content.top = contentT; document.ruler.top = dragT; document.drag.top = dragT; } else if(dom){ document.getElementById("content").style.top = contentT + "px"; document.getElementById("drag").style.top = dragT + "px"; document.getElementById("ruler").style.top = dragT + "px"; } } // Scrolls up function scrollUp(){ getT(); if(clickAbove){ if(dragT <= (mouseY-(dragH/2))) return up(); } if(clickUp){ if(contentT < 0){ dragT = dragT - (speed*scrollLength); if(dragT < (rulerT)) dragT = rulerT; contentT = contentT + speed; if(contentT > 0) contentT = 0; moveTo(); timer = setTimeout("scrollUp()",25); } } return false; } // Scrolls down function scrollDown(){ getT(); if(clickBelow){ if(dragT >= (mouseY-(dragH/2))) return up(); } if(clickDown){ if(contentT > -(contentH - contentClipH)){ dragT = dragT + (speed*scrollLength); if(dragT > (rulerT + scrollH - dragH)) dragT = (rulerT + scrollH - dragH); contentT = contentT - speed; if(contentT < -(contentH - contentClipH)) contentT = -(contentH - contentClipH); moveTo(); timer = setTimeout("scrollDown()",25); } } return false; } // reloads page to position the layers again function reloadPage(){ location.reload(); } // Preload function eventLoader(){ if(ie4){ // Up-arrow X and Y variables upL = document.all.up.style.pixelLeft; upT = document.all.up.style.pixelTop; // Down-arrow X and Y variables downL = document.all.down.style.pixelLeft; downT = document.all.down.style.pixelTop; // Scrollbar X and Y variables dragL = document.all.drag.style.pixelLeft; dragT = document.all.drag.style.pixelTop; // Ruler Y variable rulerT = document.all.ruler.style.pixelTop; // Height of content layer and clip layer contentH = parseInt(document.all.content.scrollHeight); contentClipH = parseInt(document.all.contentClip.style.height); } else if(nn4){ // Up-arrow X and Y variables upL = document.up.left; upT = document.up.top; // Down-arrow X and Y variables downL = document.down.left; downT = document.down.top; // Scrollbar X and Y variables dragL = document.drag.left; dragT = document.drag.top; // Ruler Y variable rulerT = document.ruler.top; // Height of content layer and clip layer contentH = document.contentClip.document.content.clip.bottom; contentClipH = document.contentClip.clip.bottom; } else if(dom){ // Up-arrow X and Y variables upL = parseInt(document.getElementById("up").style.left) ; upT = parseInt(document.getElementById("up").style.top); // Down-arrow X and Y variables downL = parseInt(document.getElementById("down").style.lef t); downT = parseInt(document.getElementById("down").style.top ); // Scrollbar X and Y variables dragL = parseInt(document.getElementById("drag").style.lef t); dragT = parseInt(document.getElementById("drag").style.top ); // Ruler Y variable rulerT = parseInt(document.getElementById("ruler").style.to p); // Height of content layer and clip layer contentH = parseInt(document.getElementById("content").offset Height); contentClipH = parseInt(document.getElementById("contentClip").of fsetHeight); document.getElementById("content").style.top = 0 + "px"; } // Number of pixels scrollbar should move scrollLength = ((scrollH-dragH)/(contentH-contentClipH)); // Initializes event capturing if(nn4){ document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); window.onresize = reloadPage; } document.onmousedown = down; document.onmousemove = move; document.onmouseup = up; } |
