himpunan javascript

Senarai kategori:

MEMBUAT SCROLLBAR SENDIRI (penulis asal : Dan Steiman)

Contoh

Skrip

<SCRIPT LANGUAGE=javascript>  </script>

Penggunaan

Salin skrip di atas (klik pilih semua, klik kanan pada skrip dan pilih Copy) dan tampalkan di antara </title> dan </head> kod html anda.

Gantikan nilai pada scrollFirstPage dengan nama laman anda. Perhatian: pastikan laman yang hendak anda gunakan mengikut format yang disediakan (lihat format laman default.)

Tambah kod berikut di dalam <body>:

Salin skrip di bawah (klik pilih semua, klik kanan pada skrip dan pilih Copy) dan tampalkan di antara <body> dan </body> kod html anda.

<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>

Format laman default.

Salin skrip di bawah (klik pilih semua, klik kanan pada skrip dan pilih Copy) dan tampalkan di antara </title> dan <head> kod html anda.

Tambah kod berikut di dalam <body>:

Tambah kod berikut selepas <body>:

Masukkan kod html anda di antara <DIV ID="scrollTextDiv"> dan </DIV">

* Sekiranya anda menghadapai masalah atau ingin mengetahui bagaimana skrip ini boleh diubah untuk memaparkan halaman lain pada kotak teztarea yang sama, hubungi saya di rastali@catcha.com.