Custom Javascript scroll buttons

[bradd83]

Hey there, I found a javascript on the net and tweaked it so it would work for my site. Basically it made custom scroll buttons, and it works great with only one problem, whenever the user resizes the page the text layer moves upward.
You can see for yourself here: http://eyesoficarus.com/news.html

Any help would be much appreciated. Cheers

[harbingerOTV]

it's because of the absolute positioning. there's alot of stuff in your code that you don't need for it to work.

this:

<style type="text/css">
#divUpControl{
position:absolute;
width:0px;
left:0px;
top:0px;
z-index:1;
text-align: right;
height: 0px;
}
#divDownControl{position:absolute; width:0px; left:330px; top:304px; z-index:1; text-align: right}
#divContainer{position:absolute; width:300; height:300; overflow:hidden; top:0px; left:25px; clip:rect(0,300,300,0); visibility:hidden}
#divContent{position:absolute; top:0; left:0}
</style>


should be this:

<style type="text/css">
#divContainer{position:relative; width:260; height:280; overflow:hidden; top:0px; left:25px; visibility:hidden;}
#divContent{position:relative; top:0; left:0;}
</style>


that fixes the position of the scroll buttons.

and then when you do that you get some nasty breaks between your TRs.

you have these:

<div align="left"> ... </div>


not sure what they are for. remove them and it closes all the gaps like so:

<td width="21" height="26" id="divUpControl"><a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()"><img src="http://eyesoficarus.com/images/n4.jpg" width="21" height="26" hspace="0" vspace="0" border="0"></a></td>


and do the same for the down control td.

[bradd83]

A million thank you to you good sir, it's the first time ever used java and I consider myself fortunate for getting as far as I did with the script I found...

[harbingerOTV]

no problem. looks pretty cool actually. I like band sites. where ya'll from?

and just since I was messing around, style wise maybe some thing like this could look good to you.

in the CSS:

body, html {height: 100%; text-align: center; overflow: hidden;}
#outer {height: 100%; overflow: visible; margin: auto auto; position: relative; }
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; left: -50%}
#inner[id] {position: static;}
#box {border: 1px solid #fff; position: relative; text-align: center;display: block; width: 760px;height: 420px;}


in the HTML:

<div id="outer">
<div id="middle">
<div id="inner">
<div id="box">
<table cellpadding="0" cellspacing="0">


and at the end:

</table>
</div>
</div>
</div>
</div>
</body>
</html>


just something to play around with since at your dimensions it fits perfect in 800x600 and this will make it sit centered in the screen no matter the resolution unless smaller than 800x600.

welcome to CF!

[bradd83]

We're all from Windsor, Canada. It's right outside the bridge to
Detroit, Michigan. The band are good friends with my girlfriend so I offered to make them a nice website for free, plus I thought it'd look good in my portfolio. I'm glad you like the site, by what I can tell you're an expert at javascript, those new suggestions you made are a really good idea and I'm going to implement to the other pages on the site, thank you very very much.

[harbingerOTV]

yep, a little far for me to go to see a show. Not that I don't love a road trip ;) Get those mp3's up!

Like the name and they front page banner. Pretty fitting and slick to boot. Glad I could be of some service.

p.s. I don't know jack about javascript. A little rearranging of code here and there that's about it. To solve your first issue it was all in the HTML and CSS.

[bradd83]

Hmmmm, well I have faith in your programming skills non the less...
If you don't mind I'd like to ask you one more favour, can you see the page still? http://eyesoficarus.com/news.html I mean is it still there, cause after I made those last changes that you suggested I can't seem to see it in internet explorer. It works fine in Safari but I can't see anything in Explorer, I figure it might be because it's an old version of the program and they stoped making new ones for the mac...

[harbingerOTV]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>::eyes of icarus::news::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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>

<style type="text/css">
body {
margin: 0;
padding: 0;
background: #000;

}
table {
width: 100%;
height: 100%;
}
td {
vertical-align: middle;
text-align: center;
}
#box {
border: 1px solid #fff;
width: 760px;
height: 420px;
margin: 0 auto;
}
#divContainer {
position:relative;
width:260;
height:280;
overflow:hidden;
top:0px;
left:0px;
visibility:hidden;
text-align: left;
}
#divContainer[id] {
left: 25px;
}
#divContent {
position:relative;
top:0;
left:0;
}
</style>
<script language="JavaScript">
<!--

// begin absolutely positioned scrollable area object scripts
/*
Extension developed by David G. Miles (www.z3roadster.net/dreamweaver)
Original Scrollable Area code developed by Thomas Brattli
To add more shock to your site, visit www.DHTML Shock.com
*/

function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new verifyCompatibleBrowser()


var speed=50

var loop, timer

function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;


this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=MoveAreaUp;this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}

function MoveAreaDown(move){
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
function MoveAreaUp(move){
if(this.y<0){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}

function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed)
else objScroller.up(speed)
}
}

function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}
// end absolutely positioned scrollable area object scripts

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


</head>

<body bgcolor="#000000" leftmargin="0" topmargin="10" marginwidth="0" marginheight="0"

onLoad="InitialiseScrollableArea();MM_preloadImages('http://eyesoficarus.com/images/n16_on.jpg','http://eyesoficarus.co

m/images/n17_on.jpg','http://eyesoficarus.com/images/b6_on.jpg')">
<table><tr><td>
<div id="box">
<table width="760" height="420" border="0" align="center" cellpadding="0" cellspacing="0">
<tr> <td height="26" colspan="8"><img src="images/n1.jpg" width="760" height="26" hspace="0" vspace="0"></td>
</tr>
<tr> <td width="24" height="26"><img src="images/n2.jpg" width="24" height="26"></td>

<td width="316"><img src="images/n3.jpg" width="316" height="26" hspace="0" vspace="0"></td>
<td width="21" height="26" id="divUpControl"><a href="javascript:;" onMouseOver="PerformScroll(-7)"

onMouseOut="CeaseScroll()"><img src="images/n4.jpg" width="21" height="26" hspace="0" vspace="0" border="0"></a>
</td>
<td colspan="5"><img src="images/n5.jpg" width="399" height="26" hspace="0" vspace="0"></td>
</tr>
<tr> <td><img src="images/n6.jpg" width="24" height="285"></td>
<td width="316" height="285" valign="top" background="images/n7.jpg"> <!-- begin absolutely positioned

scrollable area object-->

<div id="divContainer"> <div id="divContent"> <font color="#FFFFFF"face=verdana, arial, helvetica,

sans-serif>NEWS</font> <p><font color="#FFFFFF" font size="2" face=verdana, arial, helvetica, sans-serif>

Upcoming show:<br>
Saturday, May 28th @ The Coach : Soul Less Divine (of London), Four
Ways To Die, Nothing Left For Tomorrow (of London), Eyes of Icarus.
The Coach is located at 156 Chatam Street West. </font></p>
<font color="#FFFFFF" font size="2" face=verdana, arial, helvetica, sans-serif> <p><font

color="#FFFFFF" font size="2" face=verdana, arial, helvetica, sans-serif> Eyes of Icarus has completed

recording a four song EP with Glenn Fricker
at Spectre Studio in Tecumseh, Ontario. The name of the EP is still
up for debate. The EP will be mastered in Toronto. EOI hopes to have
the EP released in late June to mid-July. It is a pleasure for EOI
to work with Glenn who has also worked with Betrayer, Woods of Ypres,
and Bloodshoteye. Visit <a href="http://www.spectresound.ca"><font color="#FFFFFF">Glenn's
site</font></a><br>

<br>
In other news, Eyes of Icarus is currently searching for a band manager
and a lead guitarist and keyboardist. If anyone is seriously interested
please contact the band <a href="mailto:eyesoficarus@hotmail.com"><font

color="#FFFFFF">eyesoficarus@hotmail.com</font></a> </font></p>
</font> <p></p>
<b><font color="#FFFFFF"></font></b> </div>
</div>
<!-- end absolutely positioned scrollable area object -->

</td>
<td width="21"><img src="images/n8.jpg" width="21" height="285"></td>
<td colspan="5"><img src="images/n9.jpg" width="399" height="285" hspace="0" vspace="0" border="0"></td>
</tr>
<tr> <td rowspan="2"><img src="images/n10.jpg" width="24" height="50"></td>
<td width="316" rowspan="2"><img src="images/n11.jpg" width="316" height="50"></td>
<td width="21" height="26"><img src="images/n12.jpg" width="21" height="26"></td>
<td width="58"><img src="images/n14.jpg" width="58" height="26"></td>

<td width="61"><img src="images/n15.jpg" name="News" width="61" height="26"></td>
<td width="72"><a href="band.html" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('Band','','images/n16_on.jpg',1)"><img src="images/n16.jpg" name="Band" width="72"

height="26" border="0"></a></td>
<td width="86"><a href="contact.html" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('Contact','','images/n17_on.jpg',1)"><img src="images/n17.jpg" name="Contact" width="86"

height="26" border="0"></a></td>
<td width="122"><img src="images/n18.jpg" width="122" height="26"></td>
</tr>
<tr> <td width="21" height="24" id="divDownControl"><a href="javascript:;" onMouseOver="PerformScroll(7)"

onMouseOut="CeaseScroll()"><img src="images/n13.jpg" width="21" height="24" hspace="0" vspace="0" border="0"></a>
</td>
<td><img src="images/n19.jpg" width="58" height="24"></td>

<td><img src="images/n20.jpg" width="61" height="24"></td>
<td><a href="shows.html" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('Image23','','images/b6_on.jpg',1)"><img src="images/n21.jpg" name="Image23" width="72"

height="24" border="0"></a></td>
<td><img src="images/n22.jpg" width="86" height="24"></td>
<td><img src="images/n23.jpg" width="122" height="24"></td>
</tr>
<tr> <td height="33" colspan="8"><img src="images/n24.jpg" width="760" height="33" hspace="0" vspace="0"

border="0"></td>
</tr>
</table>
</div>
</td></tr></table>
</body>
</html>


try that way out and see if safari and mac-IE like it.

I wasn't aware that my first try wasn't MacIE friendly. Sorry about that and the probable headache it caused.

[bradd83]

Oh that's cool, I was just wondering whether or not you could see the page...Whether it works on MacIE makes not difference to me as long as people using windows os can see it

[stardustholiday]

hello everyone,
I know this is an old thread, but I found it doing a search for the javascript scroll buttons... And I was curious to see if there was a way to do this in a strictly CSS layout. I've got the layout done for the most part, I just need a tidy way to clean up the scroll bar, it's a sore thumb in the middle of the layout. (I'm designing a site for my band that's very similar to the Eye of Icarus listed above.) Any insight would be greatly appreciated!

thanks!


Erin

[cjboco_doug]

hello everyone,
I know this is an old thread, but I found it doing a search for the javascript scroll buttons... And I was curious to see if there was a way to do this in a strictly CSS layout. I've got the layout done for the most part, I just need a tidy way to clean up the scroll bar, it's a sore thumb in the middle of the layout. (I'm designing a site for my band that's very similar to the Eye of Icarus listed above.) Any insight would be greatly appreciated!

thanks!


Erin

Here's a CSS stripped down version of this (minus the graphics for the 2 scroll arrows). Enjoy!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title>::eyes of icarus::news::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript" language="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>
<style type="text/css"><!--
h1 { font-family: verdana, arial, helvetica, "times new rowman", times; font-weight:lighter; font-size:small; }

#outer { height: 100%; overflow: visible; margin: auto; position: relative; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; }
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#inner { position: relative; top: -50%; left: -50% }
#inner[id] { position: static; }
#box { border: solid 1px white; position: relative; text-align: center; display: block; width: 760px; height: 420px; }
#divUpControl { position:relative; }
#divDownControl { position:relative; }
#ScrollContainer { position: relative; width:280; height:280; overflow:hidden; top:0; left:15px; visibility:hidden; border: 1px solid black; }
#ScrollContent { position: absolute; top: 0; left: 0; right: 11px; height: auto; }
#ScrollControls { position: absolute; top: 0; right: 0; bottom: 0; width: 11px; border-left: 1px solid black; }
#ScrollUp a { display: block; width: 11px; height: 11px; position: absolute; top: 0; right: 0; background: white url(images/btn-up.gif) no-repeat top left; }
#ScrollUp span { display: none; }
#ScrollDown a { display: block; width: 11px; height: 11px; position: absolute; bottom: 0; right: 0; background: white url(images/btn-dn.gif) no-repeat top left; }
#ScrollDown span { display: none; }
--></style>
<script language="JavaScript">
<!--

// begin absolutely positioned scrollable area object scripts
/*
Extension developed by David G. Miles (www.z3roadster.net/dreamweaver)
Original Scrollable Area code developed by Thomas Brattli
To add more shock to your site, visit www.DHTML Shock.com
*/

function verifyCompatibleBrowser(){
this.ver=navigator.appVersion;
this.dom=document.getElementById?1:0;
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5);
return this;
}
bw=new verifyCompatibleBrowser();


var speed=50;

var loop, timer;

function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.';
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight;
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight;
this.up=MoveAreaUp;this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object";
eval(this.obj + "=this");
return this
}
function MoveArea(x,y){
this.x=x;this.y=y;
this.css.left=this.x;
this.css.top=this.y;
}

function MoveAreaDown(move){
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move);
if(loop) setTimeout(this.obj+".down("+move+")",speed);
}
}
function MoveAreaUp(move){
if(this.y<0){
this.MoveArea(0,this.y-move);
if(loop) setTimeout(this.obj+".up("+move+")",speed);
}
}

function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed);
else objScroller.up(speed);
}
}

function CeaseScroll(){
loop=false;
if(timer) clearTimeout(timer);
}
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('ScrollContainer');
objScroller=new ConstructObject('ScrollContent','ScrollContainer');
objScroller.MoveArea(0,0);
objContainer.css.visibility='visible';
initialised=true;
}
// end absolutely positioned scrollable area object scripts

//-->
</script>
</head>

<body onload="InitialiseScrollableArea();">

<div id="ScrollContainer">
<div id="ScrollContent">
<h1>NEWS</h1>
<p>July::13::2005<br>
<br>
Betrayer, Eyes of Icarus, Vizionary, and Snoshoes, July 21st at Windsor Manor.
<br>
<br>
June::10::2005<br>
<br>
Be sure to check the <a href="http://eyesoficarus.com/mp3.html">MP3</a>
section of the site to here "Tale of Evil" off of the new
EP.<br>
<br>
May::10::2005<br>
<br>
Eyes of Icarus has completed recording a four song EP with
Glenn Fricker at Spectre Studio in Tecumseh, Ontario. The
name of the EP is still up for debate. The EP will be mastered
in Toronto. EOI hopes to have the EP released in late June
to mid-July. It is a pleasure for EOI to work with Glenn who
has also worked with Betrayer, Woods of Ypres, and Bloodshoteye.
Visit <a href="http://www.spectresound.ca">Glenn's site</a><br>
<br>
In other news, Eyes of Icarus is currently searching for a
band manager and a lead guitarist and keyboardist. If anyone
is seriously interested please contact the band at <a href="mailto:eyesoficarus@hotmail.com"><font color="#FFFFFF">eyesoficarus@hotmail.com
</font></a><br>
<br>
</p>
</div>
<div id="ScrollControls">
<div id="ScrollUp">
<a onmouseover="PerformScroll(-7)" onmouseout="CeaseScroll()" href="javascript:;"><span>Scroll Up</span></a></div>
<div id="ScrollDown">
<a onmouseover="PerformScroll(7)" onmouseout="CeaseScroll()" href="javascript:;"><span>Scroll Down</span></a></div>
</div>
</div>

</body>

</html>