HomeMade Scrobblar

Irish Witch · #1 01-22-2006, 05:41 PM

Ok.. I'm trying to convert a script I found here for a scrolling textbox to include a full scrollbar that will function accross different browsers. It's working so far but it's missing one thing. All scrollbars have that middle bar that you can click and drag just likethe one on the side of the browser.
I plan to optimise the coding of this later once I know how to do everything. So far I got this:

HTML Code:

<script  type="text/javascript">

var crossobj
var Holder
var contentheight
iens6=document.all||document.getElementById;
ns4=document.layers;

//specify speed of scroll (greater=faster)
var speed=5

function movedown(){
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var holder=document.getElementById? document.getElementById("container") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var holder=document.nscontainer
var contentheight=crossobj.clip.height
document.nscontainer.document.nscontent.visibility="show"
}
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+holder.offsetHeight))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+holder.crossobj.clip.height))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var holder=document.getElementById? document.getElementById("container") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var holder=document.nscontainer
var contentheight=crossobj.clip.height
document.nscontainer.document.nscontent.visibility="show"
}
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)

}

function getcontent_height(){
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var holder=document.getElementById? document.getElementById("container") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var holder=document.nscontainer
var contentheight=crossobj.clip.height
document.nscontainer.document.nscontent.visibility="show"
}
}

function MakeScroll(makewidth, makeheight) {
   if (iens6) {
	document.write('<div id="Container" style="position:relative;width:'+makewidth+';height:'+makeheight+';border:1px solid black;overflow:hidden">')
	document.write('<div id="Content" style="position:absolute;width:'+makewidth+';left:0;top:0">')
   } else {
	document.write('<ilayer name="nsContainer" width='+makewidth+' height='+makeheight+' clip="0,0,100%,160">')
	document.write('<layer name="nsContent" width='+makewidth+' height='+makeheight+' visibility=hidden>')
   }

}

function CloseScroll(){
   if (iens6) {
		document.write('</div>')
		document.write('</div>')
	} else {
		document.write('</ilayer>')
		document.write('</layer>')
	}
}


window.onload=getcontent_height
</script>

<body>
<table border="0" width="500%" height="100%">
  <tr>
    <td width="100%" rowspan="3" height="100%">
	<script>
	MakeScroll("100%","100%")
	</script>

<!--INSERT CONTENT HERE-->
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<P> Random Assorted TExt</p>
<!--END CONTENT-->

	<script>
	CloseScroll()
	</script>
    <td align="center" width="11" valign="middle" height="20">
	   <a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0 width="9" height="5"></a>  
    </td>
  </tr>
  <tr>
    <td align="center" width="11" valign="top" bgcolor="#C0C0C0">
    </td>
  </tr>
  <tr>
    <td align="center" width="11" valign="middle" height="20">
       <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)">
       <img src="down.gif" border=0 width="9" height="5"></a>
    </td>
  </tr>
</table>
</body>

I'm using the table as a means of allowing the window to be resized on the fly and the scrollbar buttons get their settings on the fly as their being used so you can play with the window all you want and it will still scroll accurately.
The hard part is finding out how to make a dragable object that can act as the thumb object on the scrollbar.. It'e wither do that or find a way to just read a mouse position off the area between the buttons... I honestly don't have a clue here and I've tried searching for one but so far...
Nill.

Any advice?

jscheuer1 · #2 01-23-2006, 09:01 AM

http://www.walterzorn.com/dragdrop/d...p_e.htm#addons

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search