Return of the dreaded DHTML news scroller
help needed Apparently this thing is not as neat as I thought it was as it slows down Safari and Firefox on Mac enormously. As I don’t have the time to fix it right now (book writing), I invite you to have a go at it and clean it up. I will publish the fixed version with full credits here. I am not proud of this thing, I hate those scrollers.
Sometimes it is amazing how a bad idea from the past keeps popping up in different spots at the same time.
Some of you might remember when DHTML was at its prime, that every web site needed a news upscroller, marquee or other scroller. For some reason, clients love these things and many a developer started a script loaded with features and merrily mixing HTML, JavaScript and CSS to support even the most pitiful browsers out there. The DHTML Junkyards are still full of scripts hailing from that time.
This morning somebody on CSS-D asked for a table-less news upscroller in CSS, which of course is impossible, but just as I sighed and wondered who still wants those, one of our clients demanded one as well. Well, their development team agreed to implement one and wanted advice how to do one and still only use valid HTML and be accessible.
The accessibility of it is an issue, as are a lot of other things. However, I did an example and for the sake of it vented off some steam on the demo page.
Enjoy DOMnews, the DOM compliant, stop-able gracefully degrading DHTML news upscroller.
September 5th, 2006 at 3:35 am
July 12th, 2005 at 1:46 am
Not sure why you said that a table-less scroller is ‘impossible’ because I have seen heaps of them way before your attempt. Here’s a couple off the top of my head: http://www.nrm.qld.gov.au/ & http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm
Yours definately is a lot more robust and standards compliant, it’s not the first table-less attempt…
Edit I was pointing out the impossibility to do it only with CSS. As Al pointed out on the list, you could use the marquee tag though. Tableless-ness is on of the least issues with scrollers and frankly I didn’t quite get what that was about in the original request.
July 15th, 2005 at 9:31 am
He he, I love the testimonials.
I’m sure you already did, but I tried to break it by disabling CSS and/or JS, and it degrades beautifully. Congratulations!
July 18th, 2005 at 1:21 am
Oh how my heart sinks when a client asks for one of these things. Nearly as bad as when they ask for something in flash, or image based menus :-)
One side effect of this particular implementation is that it really — and I mean really — chews up CPU resources on the client when running Firefox. I only noticed that because my laptop’s fan started. Looking at task mangler, it’s up around 70% CPU.
Interestingly, internet exploder doesn’t use that much CPU.
Nice job though — keep up the good work.
July 22nd, 2005 at 10:34 am
Congratulations! However first parameter to setInterval() [1] should really be a string (e.g. ‘scrollDOMnews()’, not a reference to scrollDOMnews as you did)– an added benefit is to make this work even in deprecated IE5/Mac!
–
1 window.setInterval()
Fixed :-)
July 28th, 2005 at 9:30 am
My previous comment has been eaten up ? :S
I implemented your script and I am very happy vith it.
I wonder if you would enhance it with more advanced controls.
September 22nd, 2005 at 9:43 pm
Any way to add a scroll bar to this?
October 9th, 2005 at 1:12 am
Fantastic. I must confess that like news scrollers, primarily because you can put a lot of content in a small area. I’m doing a site redesign for an old client of mine and he insists the news scroller stays as customers tell him it is one of the things they love about his site.
Question: I’m feeding in 3rd party content which is not a UL/LI. Instead of the UL I have a div (#newscontent) and changed the js line referencing the UL from getElementsByTag(‘ul’) to getElementById(‘newscontent’). That doesn’t work. Any ideas?
October 9th, 2005 at 2:44 am
Can this be modified to scroll a div (#newscontent) instead of a UL? I tried [changed getElementsByTag('ul') to getElementById('newscontent')] but now the content doesn’t scroll.
October 19th, 2005 at 2:35 pm
Hi,
love the stuff
one thing though : when a page is long to load, the scroll waits to start, and for a while the news div displays fully (its height depends on the size of the html inside, so if it’s too big the layout moves during the load)
solution is to add the overflow property to the news style, with the same height as the hasJS selector :
#news
{
width:280px;height:100px;overflow: auto;
background:#FFF;border:1px dashed efefef;
text-align:center;
margin:16px;padding:0;
}
have a look at it on
http://www.pointe-de-bretagne.fr/
and let me know what you think
thanks
December 8th, 2005 at 12:58 am
Another client whinge that I will be able to avoid! Unfortunately I am also experiencing issues if I leave the page open in Firefox. I left it open overnight and when I arrived Firefox had crashed (as good as) and Gmail Notifier alert popup was stuck in a rendering loop. This only happens if i leave a page open in FF that has domnews.
January 11th, 2006 at 1:40 pm
Hi I was thinking of using the News Scroller myself on my website… well strange to find that its old fashioned… :( Too bad. But can you tell me is there an alternative to a news scrollers specifically when your client requires one. What kind of advice do you give a person like that.
Best Regards
Rajeev
January 11th, 2006 at 2:49 pm
The first piece of advice would be not to use comments to sneakily add links to your page with keywords in them. I also took this chance to remove the link to your site in total.
Secondly I’d point out the issues dyslexic people or low vision visitors have with animated text and the technical issues that come with it.
Lastly I’d explain that animation has been that overused on the web that visitors start not to care about them any longer – banner blindness as they call it.
March 23rd, 2006 at 11:43 pm
Hi Chris, your scroller is very useful but at moment not usable.
Safari run with 70-80% of CPU. Also FireFox.
Please, please check your code.
Many thanks
March 24th, 2006 at 2:46 am
Hi, I like your code (but, I am not a fan of scrolling boxes). One optimization:
1. Create a global var called first_ul
2. Remove “var n=document.getElementById(dn_newsID).getElementsByTagName(‘ul’)0;” from scrollDOMnews()
3. Place “first_ul = document.getElementById(dn_newsID).getElementsByTagName(‘ul’)0;” right after “if(!n){return;}” in initDOMnews()
That way the code does not search for the given tag every time scrollDOMnews() is called.
Subjectively, this seems to reduce the load.
March 24th, 2006 at 10:35 am
I had to implement a horizontal version recently for a client, and it had to work in everything for IE5/mac up. Caused me no end of pain, and I never did manage to get it working in an accessible way.
March 24th, 2006 at 12:27 pm
Hi Dennis,
your trick seems not works..
Please post the code.
Thanks
March 24th, 2006 at 2:28 pm
Here is the demo code I modified. The above modification seems to reduce the load on the web-browser, but it does not reduce the load down to 0.
One other, less then ideal, possible modification — you could slow down the dn_speed and then in scrollDOMnews() you could move the top ul three pixels instead of just one. I do not like this idea because it makes the scroll look choppy, but it would help with the load by reducing the number of calls to scrollDOMnews().
March 24th, 2006 at 3:16 pm
I’ll have a poke at DomNews over the weekend.
I’ve just had to rebuild a horizontal ticker for a site I’m working on. The old one would be crazy fast one minute and god awfully slow the next. It also ate CPUs like vol-au-vents.
In my searches for an answer I came across this content switcher[http://cj-design.com/products/free_downloads/javascript/cjcontentswitchticker] which did just the job. It’s semantically correct, far less intrusive than a moving object and degrades beautifully. I’d like to be able to claim it as my own, but alas! it is not.
April 21st, 2006 at 12:33 pm
hi, i used your scroller, and I’ve noticed, that the scroller stops in firefox automaticly.
I’m not shure, is it my browser 8becaus other scrollers stops too) or your skript :-(
nice work in any way
May 9th, 2006 at 5:10 am
nice script there, but do you have alternative version for horizontal news (like marquee) ?
May 17th, 2006 at 12:15 am
Hi,
The script look good, but there is one thing missing i.e. re-starting scroller. Once it is stopped via “Stop Scroller”.
Rok…
June 16th, 2006 at 4:40 pm
how about when ul’s height is greater than dn_endpos? and when it is greater than dn_endpos+(#new.hasJS:height)? and when the visitor change the text size?
the script should read the height of the ul element to work fine. Aside from this, nice work!
September 4th, 2006 at 3:38 am
Got a client that wants one of these, came here to see what you had to say about them and yours does the same type of memory leak as the ones in the “graveyard” (mouse flickers till browser/screen dies).
Removing the float declaration from the css declaration stops that, for this page remove the float:left from #demo and it works without noticable leaking or mouse flickering.
September 4th, 2006 at 4:22 am
Just a note to my previous post, removing the float does not stop the leak entirely. Fer instance, seems with 128MB RAM I hear some disk writes as mem swaps and process table sees a small % increase over time.
March 12th, 2007 at 8:11 pm
Your reasons made me smile. I try to make the client understand the ring is evil and will destroy them. Client doesn’t care, just wants their shiny precioussesssss… Nice job on the solution!
April 17th, 2007 at 10:22 pm
WRT making the scroller work horizontally: I was tasked with the same thing! Since your code helped me immensely (was 3rd PR in google even), I’ll post my solution to make it horizontal:
In the CSS file, you need to add code to make li display:inline. Example:
#news.hasJS ul li {
display: inline;
padding: 15px;
}
Also in the CSS, you need to change the dimensions of the display element.
In #news, change width to something like 600px, and in #news.hasJS make the height roughly the same as the line-height property in #news li. Examples:
#news
{
width:800px;
background:#eee;
}
#news.hasJS
{
height:2em;
overflow:hidden;
position:relative;
}
Lastly, in the javascript, instead of n.style.left, use n.style.top and change the dn_startpos and dn_endpos appopriately. I’m using 700 and -600 respectively.
I might have screwed something up since it doesn’t load right and I have to mouseOver and mouseOut to make it start, but the above makes it horizonal quite nicely regardless.
Cheers,
Garlic
June 20th, 2007 at 2:48 pm
IE6. If I follow a link and then come BACK there seems to be a focus (dashed box) on the element that was clicked earlier. It’s probably simple for a coder to refocus the page to the first element (home). Avoid links I suppose.
July 10th, 2007 at 3:21 pm
Is there any way to make it scroll seamlessly? And btw, why is it necessary to define end position manually? Putting
dn_endpos = -1 * document.getElementById('scroller').getElementsByTagName('ul')[0].offsetHeight;in the initDOMnews made a lot more sense to me personally..August 27th, 2007 at 1:38 am
Is it possible to make this scrolling go to opposite way. From up to down.
May 2nd, 2008 at 10:08 am
Dude, I am dowloading this script JUST because of your sense of humor (ok and it has unobtrusive whatchamacallit).
Look for it soon at http://www.philadelphiabellydance.com
The hot bellydancer’s web designer.
September 17th, 2008 at 12:18 pm
Hi i’m using the script in my site at present, however, is it possible to add a delay to the start? I’d like for the page to load and display text for a few seconds before it starts to scroll!? Any ideas?
Also is it possible to add a get url command or simular to the end, so that once all text has scrolled, you are redirected to another page?
Hope you can help
Thanks
Daz
October 24th, 2008 at 2:40 pm
A standard based and accessible scroller, Yes!
You saved my life Christian.
Thank a lot. And by the way, great sens of humour.
January 8th, 2009 at 2:57 pm
Hi,
I’m setting up a noticeboard for my school.
I’m using WordPress as the main display with a very minimal theme, utheme.
I’m adapting the theme with our school colours and your DomNews scroller has been added as a widget called Accessible News Ticker (ANT) by http://www.pixline.net.
I really like DomNews as it is a great way to scroll messages and when used with WordPress gives a great way for a non computer user to add new messages to DomNews which are then displayed via WordPress.
However there are some limitations with the widget as it seems to be only able to be used in the sidebar of WordPress and I would like to use this in the main page of WordPress.
I know, contact pixline, I have tried but to no avail and very cheekly ask if you would be able to help?
May 15th, 2009 at 7:02 am
Anybody figure out how to make the end position dynamic, I have a DB back-end and the client sets the content, so i will never now the height to make the scroll seamless.
April 23rd, 2010 at 1:28 pm
Good Day Guys.. What will I do if i want to remove the stop scroller hyperlink? Thanks. you can email me at mirk.smith@gmail.com