iWeb Tip #21 – Scrolling Text in iWeb

60
7505
Scrolling Text in iWeb

Scrolling Text in iWebScrolling 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.

See Demo »

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



60 comments

  1. Anthony 26 February, 2010 at 18:32 Reply

    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)?

    • iWebUnlimited 22 March, 2010 at 23:27 Reply

      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

  2. Jos 24 March, 2010 at 15:13 Reply

    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

  3. Jon 29 March, 2010 at 00:32 Reply

    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

  4. Gem 31 March, 2010 at 02:55 Reply

    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 :)

  5. Marc 31 March, 2010 at 06:12 Reply

    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

    • iWebUnlimited 22 April, 2010 at 21:40 Reply

      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.)

  6. KP 9 April, 2010 at 11:17 Reply

    Is there any way to make frames and scrolling text appear on iPads/iPhones? The beginning of the text appears but no scroll bar.

  7. GD 15 April, 2010 at 07:03 Reply

    Have tried putting a scrolling marquee in iWeb – looks great, but is not visible when I upload the site. what have I done wrong?

    • iWebUnlimited 22 April, 2010 at 21:41 Reply

      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.

  8. Robin 25 April, 2010 at 08:25 Reply

    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

  9. azidesigns 3 May, 2010 at 20:16 Reply

    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.

  10. Anthony 24 May, 2010 at 12:31 Reply

    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.

  11. Ham 12 July, 2010 at 06:03 Reply

    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

  12. Cookie 13 July, 2010 at 15:18 Reply

    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

  13. Carlos 19 October, 2010 at 12:40 Reply

    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.

  14. Mari 26 October, 2010 at 11:26 Reply

    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?

  15. Mari 26 October, 2010 at 11:27 Reply

    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?

  16. Ian 8 November, 2010 at 12:55 Reply

    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

  17. Michael 24 November, 2010 at 23:41 Reply

    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!

  18. Michael 26 November, 2010 at 12:42 Reply

    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.

  19. Mike 10 December, 2010 at 16:11 Reply

    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

  20. Andrew Sweeny 21 January, 2011 at 06:50 Reply

    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

Leave a reply

Facebook
Twitter
YouTube