Auto Scrolling Text Box

3,578 views
Skip to first unread message

jo...@thepeel.org

unread,
May 28, 2016, 9:15:11 PM5/28/16
to Google Web Designer beta
I'm creating a pharma ad that has a text box at the bottom for Indications and Safety Information (ISI). This box needs to autoscroll, and then when the viewer rolls over the text it will stop scrolling and they can scroll. When they roll out, the text will pick up scrolling from where the user left it. When it reaches the bottom it stops.

I have this working in a plain HTML and JS file but am unable to get it working in GWD.

I'm struggling to figure out where the issue is when porting my code over. It appears that GWD is ignoring the functions I've created to handle everything.

I'm wondering if anyone else has had to do this and if so how have they achieved it.

As I said, my straight HTML and JS file works great, I tried dropping into a JSFiddle and it wouldn't work correctly there either. I've attached the html file for reference.

Any help is appreciated.

Thanks,

-John

scroll-test-2.html

jo...@thepeel.org

unread,
May 29, 2016, 10:39:26 AM5/29/16
to Google Web Designer beta
Got the fiddle to work, you can see it here:

https://jsfiddle.net/xdnr8grf/4/

gobf...@gmail.com

unread,
Jul 19, 2016, 1:51:49 PM7/19/16
to Google Web Designer beta
Hi. We have a very similar project. Did you ever get it working in GWD?

carloso...@gmail.com

unread,
Jan 9, 2018, 10:16:55 AM1/9/18
to Google Web Designer beta
I used a javascript plugin called autodivscroll.js (all javascript) download it here http://scripterlative.com/files/autodivscroll.htm. So what you would need to do is add the script tag in the code view in the header.
1) <script type="text/javascript" src="autodivscroll.js"></script>
2) Make sure the autodivscroll.js file is in the same folder as your working files.
3)Created your div that has the scrollable content (make sure it has overflow:scroll) give it a unique <div id="scrollingISI">.... </div>
4) go to design view and add an event by right clicking on the top most timeline (Events) and give it a name like Initialize scrolling. You can set this to be at the very beginning or in the middle. This will start your scrolling ISI.
5) Double Click on the little Event tag you created on the timeline > Custom > add custom action > give it a name (i.e., startAutoScroll ) and paste the initializer function: new AutoDivScroll("ID OF YOUR SCROLLING ISI");

You should be all set!

Reply all
Reply to author
Forward
0 new messages