iWeb Tip #21 – Scrolling Text in iWeb
Scrolling Text in iWeb
There are times when your web design gives you little space for a lot of text. That’s where this tip comes in handy. This little bit of html in a snippet will allow you to size your snippet to really whatever size you want and the text will be scrollable inside. I’ve even added a bit more advanced code at the end that will allow you to add an image, a link, and more. The user just uses a handy inline scrollbar to read your text and works very nice. The other option on this page is to have a auto-scrolling text box. I have one to scroll horizontally and another to scroll vertically. They have a lot of options to adjust the speed, direction, font, color, etc. So let’s get started.
1) Add an HTML Snippet to the page you want your scrollable text box to be.
2) Then paste this code into your HTML Snippet:
<div style="height:425px;width:300px;color:#000000;font:13px/16px Verdana;overflow:auto;"><font color="004080"><strong>This is my title</strong><br></font>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.<br><br><font color="004080"><strong>Another title</strong></font><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.<br><br>These tags below add breaks from one paragraph to the next<br><br><font color="004080"><strong>This is another title</strong></font><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.<br><br><font color="004080"><strong>This is another title</strong></font><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.<br><br>You could even add an image to it if you add this code:<br><img src="https://www.iwebunlimited.com/images/iweb.png" alt=“iWebUnlimited” /><br><br>If you want the image to be on the left and the text on the side use this code:<div style="height: 0px; left: 0px; position: relative; top: 0px; z-index: 0; "><a href="https://www.iwebunlimited.com" target="_blank"><img src="https://www.iwebunlimited.com/images/iweb.png" alt="Image Title" style="border: none; " /></a></div><div style="left: 65px; position: relative; top: 2px; width: 200px; z-index: 1; ">This is my text that is along side an image in a scrolling textbox in iWeb. Pretty cool huh. Pat yourself on the back and call yourself an html coder. You can even make a link in here if you do this: <a href="https://www.twitter.com/iwebunlimited" target="_blank">Here's my link</a></div><br><br>That's all folks</div>
3) The code in red is where you’ll make adjustments to your own code for your own design specifications and the text in blue is the paragraph text you’ll put in.
4) After making your changes hit apply, publish, and your set! ;-)
Auto-Scrolling Text Boxes:
If you want an auto-scrolling text box then use this code below:
Horizontal Scrolling:
<div align="center">
<font color="000000" size="4" face="Verdana"><marquee bgcolor="transparent" direction="left" loop="true" width=100%"><strong>I Love iWebUnlimited.com's tips!</strong></marquee></font></div>
Vertical Scrolling:
<div align="center"> <marquee bgcolor="transparent" scrollamount="3" direction="up" loop="true" width="100%"> <center> <font color="#000000" size="4" face="Verdana"><strong>My Scrolling Text Title</strong><br>I love iWebUnlimited.com's tips and Tricks.<br><br>This below is just some jabber text to show you what it would look like if there was a lot of text here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.<br><strong>iWebUnlimited.com</strong></font> </center> </marquee></div>
That’s it, hope that helps. If iWebUnlimited.com helped you please consider donating by hit the donate button on the sidebar. Thanks for visiting iWebUnlimited.com.
—iJason
This has really helped. How do I add a link to someone’s email address?
Example:
this is the text within the scrolling text box. Here is “MYNAME”,
(How do I make “MYNAME” a link to my email address)?
Anthony, just add the code:
<a href=mailto:youremail@site.com>Send Me a Message</a>
Hello,
i was just wondering how i can change the background color so it isn’t transparent. Is their a special code? Thanks.
Hey Jonathan, you sure can. Just add a style attribute to the div tags
style=”background-color: #333333″
So your first line of the scrolling boxes will look like this:
<div align=”center” style=”background-color: #333333″>
and the large scrolling box would look like this:
<div style=”height:425px;width:300px;color:#000000;font:13px/16px Verdana;overflow:auto; background-color: #333333;”>
and of course just change the color hex color to your choice of color. You can see a hex color picker by going to http://www.colorpicker.com
Hi,
Thank you for your wonderfull website! It has helped me out several times building our bands website.
Thanks for this auto scrolling text box. Now we have our playlist running in this box and it looks great!
Regards from the Netherlands,
Jos
Thanks Jos, I’d love to visit you site.
Hi,
This is a great tutorial and has added to my site immensely. I was wondering if there was a complete list of attributes I could add to customize the text. Say if I wanted to change the font, size, and color of different lines or how much spacing there would be between lines. Can I do these things?
-Jon
Jon, pay attention to the code in red. Those you can change font, color, size, etc.
Hi Jason,
Thanks for this, it’s a great tool for home page updates :)
Have you any idea how the Horizontal scrolling can be made smoother? I have added some code to slow it down but it’s still jerky.
Thanks in advance, Gem :)
Hi Jason! Congratulations on having such a great and much needed resource for iweb users.
My question is can i change the color of the slide bar to match the color scheme of my new web design?
Thanks in advance
Marc
Marc, glad it’s helped you out.
To change the background color just add the code:
background-color:#003366;
in the beginning as part of the div tag (where you’ll see height, width, etc.)
Is there any way to make frames and scrolling text appear on iPads/iPhones? The beginning of the text appears but no scroll bar.
KP, try the ol’ two finger scroll ;-)
—iJason
Have tried putting a scrolling marquee in iWeb – looks great, but is not visible when I upload the site. what have I done wrong?
GD, not enough information to help you out. Maybe post your URL to your site for me and others to help out. This may be something for the forum.
I was wondering how i can add hyperlinks to my horizontal scrolling text..
for example i want to put my recent blog entries scrolling at the bottom of my home page. i want them to be able to click on one of the titles and be taken to that blog page.
Thank you for y coding our and help
Just add the code for a hyperlink in your html snippet.
http://shell.cas.usf.edu/mccook/uwy/hyperlinks.html
I would also like to know how to make a scrolling text where the user can put his/her mouse over the scrolling text to make it stop until their mouse is moved away from the box.
How would i put a picture in the scroll box that is located on my computer and be able to adjust the height and width. Please let em know if this possible or if I have to host the picture online.
How can I control the speed of the auto-scroll text?
If you want to change the speed of the auto-scrool text add – scrollamount=”3″ in between the direction and loop bits. The number is controls the speed – 1 being slowest and so on…
Hope that helps! x
Hi!
I would like to use the Helvetica Neue Ultra light font as on the rest of my website but it will not come up…
Thx for your advice – your website is great btw
Hi
Just wondered if there was a way of moving the scroll bar to the left side?
Thanks in advance
Tom
Hi Jason! First of all congratulations on your website, it is incredible. I’m learning a lot.
On the issue of scrolling text, one question: could we justify the text on one side to another or embedded in the space that we give? Thankj you very much.
I have made an Auto-scrolling text box on my homepage. I have change the text colour in to yellow – and when the colour on Iweb it is yellow – but on the homepage it is still black. What do I do wrong?
I have made an Auto-scrolling text box on my homepage. I have change the text colour in to yellow – and the colour on Iweb it is yellow – but on the homepage it is still black. What do I do wrong?
Hi Jason,
I have added scrolling to my website and it works great. Thanks for all the great tips. I was wondering if it is possible to change the color of the links from purple to white and if so how this can be coded. I would greatly appreciate your help.
Thanks so much,
IAN
Hi Jason,
How difficult is it to post images on the the scrolling box, I see the code but not really sure if it’s pulling the pic from mobile me or a file on the computer?
Thanks again!
Hi Jason,
Also helpful but for some reason when I change the html code for the color it only changes on iWeb and not after I publish it keeps all sizes and font colors that same. Any suggestions would be helpful.
Hello,
I have a question: when I paste the code in the snippet and apply it, a vertical line appears in the text box that interferes with reading. Has anyone else had the same problem? How do I fix it?
Thank you!
Mike
Hi, Im having a problem with text accentuation. Is there a way to solve this problem?
Nor working on IPad or Iphone Any Ideas? what is the best option!
Hello,
I would like to make a scroll bar with the text, but the text AS image. So the text turns into a sliding image that you can scroll down with.
Any ideas,
Cheers,
Andrew Sweeny