Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to scroll text within a layer using mouseover

Status
Not open for further replies.
ticknock

ticknock

Technical User
Joined
Aug 8, 2001
Messages
15
Location
IE
Hi I'm trying to set up a layer with text and have it scroll up to allow the user read the remaining content on mouseover action.
the mouseover action can refer to the layer itself or another control layer with perhaps an arrow image.

any help much appreicated as I am a beginner :-)
 
Sort by date Sort by votes
This was a fun one!

I created a small test with a main html that contains an iframe containing text. I added two links ('up' and 'down') which, when moused-over, causes the window inside the iframe to scroll one way or the other (stopping on the onmouseout event).

I know this isn't exactly what you are doing, but you will see the setTimeout(...), clearTimeout(...), and scrollBy(...) functions you can use to do what you want.

In the main html:
Code: 
<html>
<head>
<script>
var winToScroll;
var timeoutObject;
function scrolling(direction)
{
 if(direction == "up")
 {
  [b]winToScroll.scrollBy(0, -10);[/b]
 }
 else
 {
  winToScroll.scrollBy(0, 10);
 }
 timeoutObject = [b]setTimeout("scrolling('"+direction+"')",100);[/b]
}

function quitScrolling()
{
 [b]clearTimeout(timeoutObject);[/b]
}

function loadIframe()
{
 winToScroll = eval("textToScroll");
 winToScroll.location = "textToAdd.html";
}
</script>
</head>
<body onload='loadIframe()'>
<iframe id='textToScroll' width="50%" height="50%"></iframe>
<a href='#' [b]onmouseover='scrolling("up");'[/b] [b]onmouseout='quitScrolling()'[/b]>up</a>&nbsp;
<a href='#' [b]onmouseover='scrolling("down");'[/b] [b]onmouseout='quitScrolling()'[/b]>down</a>
</body>
</html>

Notice how the iframe is loaded when the main html loads (in the BODY tag's onload event) and the iframe itself is captured in a variable (to be used in the scrolling(...) function).

And in textToAdd.html (could be anything, really, as long as there's enough text to require scrolling):
Code: 
<html>
<body>
Keyboard Assistance
Several resources are available to help increase speed and effectiveness for keyboard users. Below you will find keyboard shortcuts for leading Microsoft products that help save time and effort and provide an essential tool for some people with mobility impairments.

Keyboard Shortcuts
Keyboard shortcuts help save time and effort, and provide an essential tool for some people with mobility impairments.

Keyboard Assistance
Several resources are available to help increase speed and effectiveness for keyboard users. Below you will find keyboard shortcuts for leading Microsoft products that help save time and effort and provide an essential tool for some people with mobility impairments.

Keyboard Shortcuts
Keyboard shortcuts help save time and effort, and provide an essential tool for some people with mobility impairments.

Keyboard Assistance
Several resources are available to help increase speed and effectiveness for keyboard users. Below you will find keyboard shortcuts for leading Microsoft products that help save time and effort and provide an essential tool for some people with mobility impairments.

Keyboard Shortcuts
Keyboard shortcuts help save time and effort, and provide an essential tool for some people with mobility impairments.

Keyboard Assistance
Several resources are available to help increase speed and effectiveness for keyboard users. Below you will find keyboard shortcuts for leading Microsoft products that help save time and effort and provide an essential tool for some people with mobility impairments.

Keyboard Shortcuts
Keyboard shortcuts help save time and effort, and provide an essential tool for some people with mobility impairments.

Keyboard Assistance
Several resources are available to help increase speed and effectiveness for keyboard users. Below you will find keyboard shortcuts for leading Microsoft products that help save time and effort and provide an essential tool for some people with mobility impairments.

Keyboard Shortcuts
Keyboard shortcuts help save time and effort, and provide an essential tool for some people with mobility impairments.
</body>
</html>

'hope this helps!

--Dave
 
Upvote 0 Downvote
thanks a mil for all your work :-)
still not quite sorted..but will get there.

am trying to have just the text on screen no scroll bar and i want to use a layer in Dreamweaver to position the text on screen exactly where I want it. will keep messing around the soloution will come!
mel
 
Upvote 0 Downvote
I don't use Dreamweaver, so I can't speak to that. I can tell you that by replacing the IFRAME tag I included above with:

Code: 
<iframe id='textToScroll' width="50%" height="50%" [b]scrolling='no'[/b]></iframe>

...you can get rid of the scroll bar.

Good luck!

--Dave
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
862
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
penguinspeaks
  • Locked
  • Question Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top