Home + Webmaster + Script + Javascript + Finestre e Frame + Scrollbar e <iframe>

Scrollbar e <iframe>

Un Javascript che permette di gestire iframe in un modo abbastanza simpatico dandone un buon effetto.

<html>
<head>
<title>Scrollbar e <ifarme></title>
<SCRIPT language=JavaScript>

</SCRIPT>
</head>

<body  onload=init()  topmargin="0" leftmargin="0">
<div align="center">
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<A href="javascript:loadSource('iframe1.htm')">1 iframe</A> | <A 
href="javascript:loadSource('iframe2.htm')">2 iframe</A> | <A 
href="javascript:loadSource('iframe3.htm')">3 iframe</A> 
<SCRIPT language=JavaScript>
document.writeln('<STYLE TYPE="text/css">');
document.writeln('<\!--');
document.writeln('#scrollWindow {position:absolute; left:'+scrollLeft+'; top:'+scrollTop+'; width:'+scrollWidth+'; height:'+scrollHeight+'; clip:rect(0,'+scrollWidth+','+scrollHeight+',0);}');
document.writeln('#scrollBorderTop {position:absolute; left:0; top:0; width:'+scrollWidth+'; height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderBottom {position:absolute; left:0; top:'+(scrollHeight-scrollBorder)+'; width:'+scrollWidth+'; height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderLeft {position:absolute; left:0; top:0; width:'+scrollBorder+'; height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderRight {position:absolute; left:'+(scrollWidth-scrollBorder)+'; top:0; width:'+scrollBorder+'; height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
if (ie) document.writeln('#scrollTextWindow {position:absolute; left:'+scrollBorder+'; top:'+scrollBorder+'; width:'+(scrollWidth-scrollBarWidth-2*scrollBorder)+'; height:'+(scrollHeight-2*scrollBorder)+';
clip:rect(0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+',0); background-color:'+scrollTextBGColor+'; layer-background-color:'+scrollTextBGColor+';}');
document.writeln('#scrollBar {position:absolute; left:'+(scrollWidth-scrollBarWidth-scrollBorder)+'; top:'+scrollBorder+'; width:'+scrollBarWidth+'; height:'+(scrollHeight-2*scrollBorder)+'; clip:rect(0,'+scrollBarWidth+','+(scrollHeight-2*scrollBorder)+',0); background-color:'+scrollBarColor+'; layer-background-color:'+scrollBarColor+';}');
if (scrollBoxColor=="none") document.writeln('#scrollBoxDiv {position:absolute; left:0; top:0; width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0);}');
else document.writeln('#scrollBoxDiv {position:absolute; left:0; top:'+scrollArrowHeight+'; width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0); background-color:'+scrollBoxColor+'; layer-background-color:'+scrollBoxColor+';}');
document.writeln('#scrollArrowUpDiv {position:absolute; left:0; top:0; width:'+scrollBarWidth+'; height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0); background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}');
document.writeln('#scrollArrowDownDiv {position:absolute; left:0; top:'+(scrollHeight-2*scrollBorder-scrollArrowHeight)+'; width:'+scrollBarWidth+'; height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0); background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}');
document.writeln('-->');
document.writeln('</STYLE>');
</SCRIPT>
<DIV id=scrollWindow>
<DIV id=scrollBar>
<DIV id=scrollBoxDiv></DIV>
<DIV id=scrollArrowUpDiv></DIV>
<DIV id=scrollArrowDownDiv></DIV></DIV>
<DIV id=scrollBorderTop></DIV>
<DIV id=scrollBorderBottom></DIV>
<DIV id=scrollBorderLeft></DIV>
<DIV id=scrollBorderRight></DIV>
<SCRIPT language=JavaScript>
if (n) document.writeln('<LAYER NAME="scrollTextWindow" SRC="'+scrollFirstPage+'" LEFT='+scrollBorder+' TOP='+scrollBorder+' WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+' HEIGHT='+(scrollHeight-2*scrollBorder)+' CLIP="0,0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+'" BGCOLOR="'+scrollTextBGColor+'"></LAYER>')
if (ie) document.writeln('<DIV ID="scrollTextWindow"><IFRAME NAME="scrollTextFrame" SRC="'+scrollFirstPage+'" WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+' HEIGHT='+(scrollHeight-2*scrollBorder)+' MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER="No" SCROLLING="No"></IFRAME></DIV>')
</SCRIPT>
</DIV></div>
</body>
</html>

Nella pagina che viene visualizzata nel iframe va inserito questo codice:

Compatibilità: MsIE

Javascript

Altre risorse:
Libri Javascript | Manuale Javascript

Guadagna con i sondaggi! Iscriviti adesso e potrai guadagnare qualche soldino partecipando ai sondaggi online!

Virus Scan McAfee Protteggi al meglio il tuo computer. Mcafee Total Protection con il 20% di sconto.

MrW Corsi Corsi di Informatica online 24 su 24. Corsi completi, download, quiz e blocco appunti.

Webmaster Avanzato Percorso completo volto a formare dei professionisti del Web. Come si lavora in uno Staff?