Scrollable Content II - Arrow positions

[tigress]

1) Script Title: Scrollable Content II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

3) Describe problem:
Hi everyone! I'm hoping you can help with my dilemma. I'd like to put the up and down arrows to the side of the text box, one on top of the other - but can't seem to figure out how to do that. Can anyone give me the right code/syntax to do so?

Thanks so much!

[rangana]

Change this part of the code:

<table width="175px"><td><p align="right">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a>  <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td>
</table>

to:

<div id="myid" style="float:left;display:inline;margin-left:5px;">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)">
<img src="up.gif" border=0></a><br/><a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a>
</div>

...After doing so, add float:left; in the container div:

document.write('<div id="container" style="float:left;position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">')

See if it helps

[tigress]

Thanks rangana! What that does, very nicely, is stack the arrows up and down - now I need them moved to the right-hand side outside the text box...any idea how to do that? (silly question - I'm sure you do, you're a definite expert!)

Many thanks for the quick reply!

[rangana]

Play with the left margin:

<div id="myid" style="float:left;display:inline;margin-left:5px;">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)">
<img src="up.gif" border=0></a><br/><a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a>
</div>

...If you want it extensively to the right, then use this instead:

<div id="myid" style="float:right;display:inline;margin-right:10px;">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)">
<img src="up.gif" border=0></a><br/><a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a>
</div>

Hope that helps

[tigress]

Got that - I didn't mention that I'd like the arrows to be centered vertically at the side of the box...whoops, my bad. Is there a way to do that? See, the client didn't get it, when she first saw the arrows, she didn't realize they were to scroll, and she was looking for a scroll bar. I can do the code with a scroll bar but I like the arrows so much more. In keeping with convention, I'd like to place them outside the box, but where a scroll bar would be.

Does that help? Is there a way to do it?

SO appreciated! (This is for grades as well as for a client....doubly appreciated!!)

[rangana]

I'm not certain if adding margin-top:10px; will do it for you

...I'm confused...but see if that helps

[tigress]

Alas, that didn't affect the arrows at all. I'm thisclose to resorting to Dreamweaver or Frontpage so I can pick them up and drag the suckers where I want 'em...

I'll let you know...

Thank you, nonetheless, your quick replies to my dilemma have made this THE place to hang out!