...

View Full Version : Looking for a specific script - without success.



rejuvinet
08-08-2002, 06:18 AM
A while back I was surfing some sites to get a few new ideas for a re-design I'm doing for a client.

I came across the result of a fantastic little script that scrolls text - much like in an iFrame - using a "miniature" version of the standard browser scroll bar for a user-controlled news scroller.

I don't know if I can do this or not without crossing a rule or two, but I guess the best way to demonstrate what I mean is by leading you to one of the sites that employ this little gem - the news scroller on www.koves.net.

I have been searching high and low for 3 days now for even a bare-bones version of this script that I can build on, and have found nothing that comes close to what I'm looking for. I have found, however, a couple of scripts on some of the more popular archives but they are not easily manipulated.

I don't know if anyone can help me out on this, but any assistance is greatly appreciated.

x_goose_x
08-08-2002, 07:40 AM
I wrote this myself and give you (Well anyone really) the right to use it as you see fit:



<html>

<head>
<title></title>
<script>

box_h = 300
box_w = 100

function loader() {
go=false;
document.getElementById("tbl").height = box_h;
document.getElementById("box").style.height = box_h;
document.getElementById("box").style.width = box_w;
h = -(document.getElementById("scr").scrollHeight-parseInt(document.getElementById("box").style.height));
}

function Scroll(x){
x2 = x;
y = parseInt(document.getElementById("scr").style.top);
if (y>0) {
document.getElementById("scr").style.top = 0;
}else if (y<h) {
document.getElementById("scr").style.top = h;
}else{
document.getElementById("scr").style.top = y+parseInt(x);
}
tmp = (-y/-h)*(box_h-60);
//alert(h)
document.getElementById("block").style.top = tmp;
if (go) {
setTimeout("Scroll(x2)",10);
}
}
window.onload=loader;
</script>
</head>

<body>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div style="overflow-y: hidden; width:150; height: 10; background-color:red; color: white;" id="box">
<div id="scr" style="position: relative; top: 0px;">
Hello<br><br>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20
</div></div>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="blue" id="tbl" width="8" height="100%">
<tr>
<td height="20" onmousedown="go=true; Scroll('1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
</tr>
<tr>
<td id="empty" height="0" valign="top"><div style="position: relative; background-color: yellow; width: 100%; height: 20;" id="block"></div></td>
</tr>
<tr>
<td height="20" onmousedown="go=true; Scroll('-1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>

rejuvinet
08-08-2002, 03:16 PM
Thank you VERY much. I'm going to play around with it, try to set it up so it fits in nice with my client's re-design, but this puts me MUCH further ahead than I have been in 3 days!

I really appreciate it. Now all I have to do is try to get the "status" bar between the up/down buttons to work like the browser scroller does, and I'm all set. :-)

Again, thank you VERY much. I hope I can someday return the favor!

Dave

x_goose_x
08-08-2002, 05:00 PM
change:
}else if (y<=h) {
to:
}else if (y<=h&&x==-1) {

and:
if (y>=0) {
to:
if (y>=0&&x==1) {

and it will get rid of the jumping when you hit bottom/top

x_goose_x
08-08-2002, 05:19 PM
Moz compatible:



<html>

<head>
<script>

box_h = 300
box_w = 100

function loader() {
go=false;
document.getElementById("empty").height = box_h-40;
document.getElementById("box").style.height = box_h;
document.getElementById("box").style.width = box_w;
document.getElementById("thetd").width = box_w;
h = -(document.getElementById("scr").scrollHeight-parseInt(document.getElementById("box").style.height));
}

function Scroll(x){
x2 = x;
y = parseInt(document.getElementById("scr").style.top);
if (y>=0&&x==1) {
document.getElementById("scr").style.top = 0;
}else if (y<=h&&x==-1) {
document.getElementById("scr").style.top = h;
}else{
document.getElementById("scr").style.top = y+parseInt(x);
}
tmp = (-y/-h)*(box_h-60);
//alert(h)
document.getElementById("block").style.top = tmp;
if (go) {
setTimeout("Scroll(x2)",10);
}
}
window.onload=loader;
</script>
</head>

<body>

<table height="0" bgcolor="blue" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3" id="thetd">
<div style="overflow: hidden; width:10; height: 10; background-color:red; color: white;" id="box">
<div id="scr" style="position: relative; top: 0px;">
Hello<br><br>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20
</div></div>
</td>
<td height="20" width="10" onmousedown="go=true; Scroll('1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
</tr>
<tr>
<td id="empty" height="0" width="10" valign="top"><div style="position: relative; background-color: yellow; width: 10; height: 20;" id="block"></div></td>
</tr>
<tr>
<td height="20" width="10" onmousedown="go=true; Scroll('-1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
</tr>
</table>



</body>

</html>

rejuvinet
08-08-2002, 05:23 PM
When I applied the changes you sent me, it eliminated the jumping just fine - unfortunately, it eliminated the stop at the top/bottom of the page as well.

I tried playing with the code a bit, but I haven't been able to make it work properly.

I'm fairly new to programming in Java, so you'll have to forgive my ignorance in these matters - I'm more of a graphic developer with no programming background than anything else who's trying to "straighten the learning curve" as quickly as possible.

I'll keep at it, but you've been a great help this far! Thanks!

x_goose_x
08-09-2002, 02:23 AM
Final version, fixed to your specs:



<html>

<head>

<script>

box_h = 300
box_w = 100

var ie=document.all
var ns6=document.getElementById&&!document.all

document.onmousemove = capmouse;

var X = 0
var Y = 0

function capmouse(e) {
if (ie) {
Y = event.clientY + document.body.scrollTop
}else if (ns6) {
Y = e.pageY
}
}

function loader() {
go=false;
jump=false;
document.getElementById("empty").height = box_h-40;
document.getElementById("box").style.height = box_h;
document.getElementById("box").style.width = box_w;
document.getElementById("thetd").width = box_w;
h = -(document.getElementById("scr").scrollHeight-parseInt(document.getElementById("box").style.height));
}

function Scroll(x){
x2 = x;
y = parseInt(document.getElementById("scr").style.top);
if (y>=0&&x==1) {
document.getElementById("scr").style.top = 0;
}else if (y<=h&&x==-1) {
document.getElementById("scr").style.top = h;
}else{
document.getElementById("scr").style.top = y+parseInt(x);
}
tmp = (-y/-h)*(box_h-60);
document.getElementById("block").style.top = tmp;
if (go) {
setTimeout("Scroll(x2)",10);
}
}
function jumpto() {
T = (Y-(document.getElementById("empty").offsetTop+document.getElementById("tbl").offsetTop))-10;
if (T<0) {
document.getElementById("block").style.top = 0;
document.getElementById("scr").style.top = 0;
}else if (T>box_h-60){
document.getElementById("block").style.top = box_h-60;
document.getElementById("scr").style.top = h;
}else{
document.getElementById("block").style.top = T;
document.getElementById("scr").style.top = h*(T/(box_h-60));
}
if (jump) {
setTimeout("jumpto()",10);
}
}
window.onload=loader;
</script>

</head>

<body onmousemove="return false;" onmouseup="go=false; jump=false;">

<table height="0" bgcolor="blue" border="0" cellspacing="0" cellpadding="0" id="tbl">
<tr>
<td rowspan="3" id="thetd">
<div style="overflow: hidden; width:10; height: 10; background-color:red; color: white;" id="box">
<div id="scr" style="position: relative; top: 0px;">
Hello<br><br>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20
</div></div>
</td>
<td height="20" width="10" onmousedown="go=true; Scroll('1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
</tr>
<tr>
<td id="empty" height="0" width="10" valign="top" onmousedown="jump=true; jumpto();" onmouseup="jump=false;"><div style="position: relative; background-color: yellow; width: 10; height: 20;" id="block"></div></td>
</tr>
<tr>
<td height="20" width="10" onmousedown="go=true; Scroll('-1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
</tr>
</table>



</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum