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
Hi,
Is there any way how to change text to italic
<i>text you want italicized</i>
Is there a way to add space between the lines of the text?
use the <br> tag
this is what mine looks like in the snippet
The hospital outpatient setting utilizes APCs for reporting and reimbursing facility fees.
<br><br>51702 maps to APC 0340 – SI – X
<br>APC 0340 -Minor ancillary Procedures
<br>RW – 0.6462
each <br> moves the text down one line
Hey Jason,
Your site has helped me to create mine the way I have been wanting. I wanted the flexibility of iweb but also the ability to update my blog on the go, so, using your iFrames how to I was able to do just that. Now, I was wondering, is there a way to add a scroll bar to an iFrame? since my blog just, keeps on going, i would hate to have to edit my html code all the time just to see everything.
any idea’s?
Thanks a bunch
Mark
Im trying to use the auto scrolling text, but have a hard time adjusting where the text starts scrolling. I would like to make the text box long and thin, but it seems like the text only start scrolling from the middle and goes up.
can anyone help?
cheers,
Love the scrolling text. How can I slow the scroll down?
the scrollamaunt changes the speed. works also in the horizontal way
Is there anyway to change:
1. The font size of the titles?
2. The color of the fonts (to have them variate) within the text?
Thank you so much!
HI, I am trying to place a scene from Macbeth in a scrolling text box. When I follow the instructions above, the formatting is messed up. Is there anyway to fix this?
Hi, this is a good tool to display a lot of information in a short space. But i´m trying to put a margin on the right but i don´t have results. In fact i get a margin on the left side but that doesn´t works to the right one. I use margin-left and margin-right but only works left one.
Recently I utilized this feature of scrolling text in my website: http://www.andrescardenes.com. It appears to be working well for many, but others and myself have discovered that when viewed on iPad or iPhone, the scrolling text is not available.
Is there a chance that there could be a small fix to this issue? I can forward to you the HTML coding I used and then instruct me where I need to place proper fixes to allow accessibility in iPad and iPhone.
Thanks for your assistance.
Pete
Hi,
I’ve used the scrolling html code on my website but as soon as i put a frame around the html snippet the scrollbar does not work (see http://www.vandeksperimentariet.dk) on the right side. How can i fix this with still having the frame?
Cheers Michael.
– and thanks for all the great tips!
Nevermind, I’ve worked it out by putting the frame to the back.
Hi, Ive successfully managed to add a horizontal auto scrolling banner. I have 4 separate statements i want to put in the banner, how do i get the banner to deliver one and when that has finished scrolling deliver the next?
Thanks
Annie
Thank you for helping me to utilize scrolling text boxes on my website. I have a question though. I want all of the text in all of my scrolling boxes to be Arial, but when I try and change it, it doesn’t work. Can you help me? If you compare the scrolling boxes on my Grip page vs. my Slider page, you will note that the fonts are not Arial, but they are also not Verdana which is the font written in the code. Any advice you can offer will be greatly appreciated!
Hi! I’ve pasted your code into a HTML Snippet; changed the font etc; added links to another of my pages in the scrolling text box. it looks great! I publish the website, visit it and go to the page where the scrolling text box is and click on the link in the scrolling text box and immediately it goes to the linked page, no problem. Works great! Then, I go back to the page in the published website where the scrolling text box should be and it has disappeared! Gone! I cannot get it to come back. The scrolling text box is not on top of any other graphic etc, by the way.
I go back, republish iWeb and there is the scrolling text box. Click on the link, it goes to the linked page and then when I go back to the page with the scrolling text box, it is gone again and again! What am I doing wrong, as I obviously need the scrolling text box to be there all the time! Thanks for any help! Tony!
Hi! I have made a discovery about the problem above! If the link is to an external page e.g. another website, there is no problem. The scrolling text box remains in place, Furthermore, if I go back and forth from internal pages without using the link to an internal page within my own website, there is no problem, The scrolling text box doesn’t disappear. It only disappears after I click on the link to one of my internal pages i.e. a linked page on my own website. Does this help to resolve the problem? I hope so,as this is really great otherwise. Thanks. Tony!
Sorry to bother you again, but I have made another discovery! The above two comments were made when I published my website from my local folder on my hard disc. I assumed it would be the same when I published my website to my host server. Not so! When I publish my website to my host server and go to the webpage where the scrolling text box should be, it is not there right from the start, which is even worse than publishing to my local folder! Is there any solution? Thanks, Tony!
OK! I am going crazy! I have just been talking to a friend over the net and they went onto my site and guess what! It is working fine! So, then I went back to my site and now it works and does exactly what I was hoping it would do! And, don’t ask if I empty Safari’s cache because that was the first thing I did, in case that was the problem, so I have no idea what all that was about! Sorry to have bothered you, but I swear that it would not work and I wasted a couple of hours re-doing it and trying again and again! Ohm well, at least, it works now!
I new to this, and it might be a very simple question, But I can not find the answer.
Jason, i loved the feature of scrolling down the image and the text and everything worked well except I do not know how to change the image.
I pasted the code to my snippet, and it appeared just like your demo, but i do not know how to change the I tried to change https://www.iwebunlimited.com/images/iweb.png from the original script and the image disappeared.
do i sopoussed to create a folder with the .jpg files or what?
What do i do?
Rz
Hey,
I’m looking for the same answer to this. Anyone know what to do?
Just want to say thanks for all your work you have done here!!! it has helped me with my site alot !. I have installed your scrolling tex box which works great but i want to put a picture in mine but have had now luck. this is what in entered in the place: http//heavylights.com/images/oldstylecd.jpg”
when i did this no picture shows up.
Thanks again for your time:
Randy
hi! I’m working on my web site and I’m trying to use this tip! i have some questions maybe someone can help me:
1. can i justify the text in the scrolling text?
2. can i change the velocity of the outoscrolling?
thanks for this amazing website! and a hug from Costa Rica!
Small question:
I want to use different fonts in a textbox using autoscroll.
Can anyone help me with the HTML code I need to make this happen?
Thanks a lot!
This code works great for me, except that it only allows me to have a box thats 200pixels high, anyone know how to expand this?