PDA

View Full Version : Scrollable Content II - Arrow positions



tigress
04-11-2008, 02:08 AM
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
04-11-2008, 02:26 AM
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
04-11-2008, 02:58 AM
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
04-11-2008, 07:41 AM
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
04-11-2008, 12:24 PM
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
04-12-2008, 12:37 AM
I'm not certain if adding margin-top:10px; will do it for you ;)

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

tigress
04-12-2008, 01:00 AM
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!