The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How do I get something to scroll and stop on mouseover ?

2 posters

Go down

In progress How do I get something to scroll and stop on mouseover ?

Post by azwiz March 1st 2015, 12:52 am

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>
azwiz
azwiz
Forumember

Male Posts : 837
Reputation : 9
Language : english
Location : Apache Junction , Arizona USA

https://www.valleyofthesuncc.com/

Back to top Go down

In progress Re: How do I get something to scroll and stop on mouseover ?

Post by Ange Tuteur March 1st 2015, 8:58 pm

Hello @azwiz,

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
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: How do I get something to scroll and stop on mouseover ?

Post by azwiz March 2nd 2015, 7:35 am

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 
azwiz
azwiz
Forumember

Male Posts : 837
Reputation : 9
Language : english
Location : Apache Junction , Arizona USA

https://www.valleyofthesuncc.com/

Back to top Go down

In progress Re: How do I get something to scroll and stop on mouseover ?

Post by Ange Tuteur March 2nd 2015, 9:18 am

Try adding some breaks to ensure that each portion is on its respective line. This is the HTML code to create a line break :
Code:
<br/>

Since you have it with a double break, you would use :
Code:
<br/><br/>
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum