How do I get something to scroll and stop on mouseover ?
2 posters
Page 1 of 1
How do I get something to scroll and stop on mouseover ?
I have the following that I recieved from this support forum . So far I have been unsuccessful in getting scrolling text to stop on mouse over . Now I have forgotten how to even get the text to scroll . I don't know if there are two codes below , where to place the text , and what kind of widget will scroll .
hello @azwiz,
It depends, which widget would you like to scroll ? While we're on the topic, you can also create custom widgets that scroll content using the <marquee> element. Add this to a widget if you like :
Code: Select Content
<marquee direction="up" scrollamount="2">
<div onmouseover="this.parentNode.setAttribute('scrollamount','0')" onmouseout="this.parentNode.setAttribute('scrollamount','2')">Mouse over to stop me !</div>
</marquee>
You can replace the following in the code above with whatever you like.
Code: Select Content
<div onmouseover="this.parentNode.setAttribute('scrollamount','0')" onmouseout="this.parentNode.setAttribute('scrollamount','2')">Mouse over to stop me !</div>
hello @azwiz,
It depends, which widget would you like to scroll ? While we're on the topic, you can also create custom widgets that scroll content using the <marquee> element. Add this to a widget if you like :
Code: Select Content
<marquee direction="up" scrollamount="2">
<div onmouseover="this.parentNode.setAttribute('scrollamount','0')" onmouseout="this.parentNode.setAttribute('scrollamount','2')">Mouse over to stop me !</div>
</marquee>
You can replace the following in the code above with whatever you like.
Code: Select Content
<div onmouseover="this.parentNode.setAttribute('scrollamount','0')" onmouseout="this.parentNode.setAttribute('scrollamount','2')">Mouse over to stop me !</div>
Re: How do I get something to scroll and stop on mouseover ?
Hello @azwiz,
See if this code works for you :
You'll see the following attributes :
scrollamount="3" : the 3 between the quotes defines the speed of the scrolling. If you want it to be slower use a lower number such as 1, and to make it faster use a higher number such as 7. 0 stops the scrolling.
direction="up" : this defines the direction of the scrolling. Currently it's set to up, so the text will scroll up. You can use some of the following values : up, down, left, right.
You'll also see onmouseover and onmouseout. These are event handlers that execute JavaScript when your cursor enters and exits the <marquee> element. We're using setAttribute to manipulate the scrolling, because browsers like Firefox seem to have dropped support for the stop() and start methods.
Anyway, you only need to change one thing for onmouseout which is this 3 inside this.setAttribute('scrollAmount','3'). If you change the scrollamount to something other than three, make sure to change this as well.
To make it easy on you, there's also a generator here : http://www.quackit.com/html/html_generators/html_marquee_generator.cfm
See if this code works for you :
- Code:
<marquee scrollamount="3" direction="up" onmouseover="this.setAttribute('scrollAmount','0')" onmouseout="this.setAttribute('scrollAmount','3')">
I'm scrolling up !
<br/>
<br/>
You can place whatever content you want in here.
</marquee>
You'll see the following attributes :
scrollamount="3" : the 3 between the quotes defines the speed of the scrolling. If you want it to be slower use a lower number such as 1, and to make it faster use a higher number such as 7. 0 stops the scrolling.
direction="up" : this defines the direction of the scrolling. Currently it's set to up, so the text will scroll up. You can use some of the following values : up, down, left, right.
You'll also see onmouseover and onmouseout. These are event handlers that execute JavaScript when your cursor enters and exits the <marquee> element. We're using setAttribute to manipulate the scrolling, because browsers like Firefox seem to have dropped support for the stop() and start methods.
Anyway, you only need to change one thing for onmouseout which is this 3 inside this.setAttribute('scrollAmount','3'). If you change the scrollamount to something other than three, make sure to change this as well.
To make it easy on you, there's also a generator here : http://www.quackit.com/html/html_generators/html_marquee_generator.cfm
Re: How do I get something to scroll and stop on mouseover ?
Ok I have applied the code . I got text to scroll . The mouse over works , stops the text .
But
The text I am trying to sroll is a list of dates and names of people in a chronological order . One date , name , and event per line . It can be consecutive lines or skip a line but not runallininone sentence . When I click save in either mode "switch Editor " The lines automatically jumble together and don't even stay in order . I have tried to recopy and paste them and try it again . It keeps jumbling up . Is there something that I can add to the code to make the text stay as is ?
example
27 Feb
CJL73 came in first place in So U Think U can Play! Single Round, 18 hole on Me
27 Feb
CJL73 came in first place in andrew's front vf.
27 Feb
CJL73 came in first place in kiawah wah open III.
27 Feb
dschom5 came in first place in ckkc open I.
26 Feb
Buddha248 came in first place in 2 ROUNDS @ BPB H - M.
26 Feb
nitramgoht came in first place in 2 ROUNDS @ BPB L & TL.
and so on , down to feb 1st . How can I get this format to hold so this is what is seen when scrolling
But
The text I am trying to sroll is a list of dates and names of people in a chronological order . One date , name , and event per line . It can be consecutive lines or skip a line but not runallininone sentence . When I click save in either mode "switch Editor " The lines automatically jumble together and don't even stay in order . I have tried to recopy and paste them and try it again . It keeps jumbling up . Is there something that I can add to the code to make the text stay as is ?
example
27 Feb
CJL73 came in first place in So U Think U can Play! Single Round, 18 hole on Me
27 Feb
CJL73 came in first place in andrew's front vf.
27 Feb
CJL73 came in first place in kiawah wah open III.
27 Feb
dschom5 came in first place in ckkc open I.
26 Feb
Buddha248 came in first place in 2 ROUNDS @ BPB H - M.
26 Feb
nitramgoht came in first place in 2 ROUNDS @ BPB L & TL.
and so on , down to feb 1st . How can I get this format to hold so this is what is seen when scrolling
Re: How do I get something to scroll and stop on mouseover ?
Try adding some breaks to ensure that each portion is on its respective line. This is the HTML code to create a line break :
Since you have it with a double break, you would use :
- Code:
<br/>
Since you have it with a double break, you would use :
- Code:
<br/><br/>
![-](https://2img.net/i/empty.gif)
» Chatbox Link Mouseover
» * Mouseover Profile Info
» Widget Mouseover coding issue
» mouseover effect for memberlist phpbb2
» little help with Mouseover Profile info Script
» * Mouseover Profile Info
» Widget Mouseover coding issue
» mouseover effect for memberlist phpbb2
» little help with Mouseover Profile info Script
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum