I can't figure out why a JS text scroller isn't working. - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
September 3, 2014 at 5:47 am #181512

Anonymous
Inactive

I seem to be prone to breaking things today. Here’s my latest example.

I have a near exact copy on an old site page that is working fine, but to copy and paste it on a new page, it doesn’t work, nor does this one copied from the site which link is on the above page.

What am I missing?

Thanks!

September 4, 2014 at 4:48 am #181611

Anonymous
Inactive

Well, let’s give this a try. I’ve traced it down to the javascript not working with the doctype html at the start of the page coding.

Anyone know a workaround on this?

September 4, 2014 at 5:57 am #181634

Chromawoods
Participant

Maybe first explain how it should work? :)

September 4, 2014 at 6:18 am #181636

Anonymous
Inactive

Hi,

It’s supposed to work like this. It does as long as <!DOCTYPE html> declaration isn’t in the document. I’ve searched for an answer and tried various doctype declarations, but nothing.

Greatly appreciate any help.

September 4, 2014 at 7:58 am #181666

Paulie_D
Member

Hmmm

http://stackoverflow.com/questions/13837004/how-did-a-doctype-break-my-javascript

September 4, 2014 at 8:21 am #181669

Anonymous
Inactive

Hi Paulie,

I saw that page amongst many, many others while trying to find a solution. Sadly, the pages that the original poster linked to are no more, and the JS on the forum, and the answers given, isn’t what is used in the scroller I linked to. I do not have document.all anywhere in my script.

If I am missing something, please point it out.

I saw a site that a guy has that uses the same JS as I’m trying to use, and I sent him a message asking if he’s aware of any issues. He used a screen capture over a working demo, I’ve yet to see a working demo, which makes me wonder.

Thanks again!

September 5, 2014 at 1:08 am #181770

Chromawoods
Participant

One potential problem is that you are not specifying a unit (px, em, % etc.) for the top property. But in general though, the solution looks pretty dated. :) Take a look at this code, I cleaned it up a bit for you. It is by no means perfect but it could serve as a starting point perhaps.

You could also use something like Velocity.js.

September 5, 2014 at 1:38 am #181772

Anonymous
Inactive

Hi Chromawoods,

I appreciate your reply and have looked at your coding, and copied and pasted it. I also manipulated the code to slow down the scroll time and was successful in that, but there seems to be an awful lot of JS to it. I’m not well acquainted with more than the basic JS, and it’s easy for me to get overwhelmed. Is there a pared down version?

Regarding the px, I read about that at a number of sites and tried to ad it per the various site recommendations, all seem to have a different answer for the same problem, but none work. Anyway, it seems the standard is + “px”.

As for “DOCTYPE” I’ve used strict and the scroll still doesn’t run, and I’ve used loose and the scroll runs but the page loses cohesion. I’ve tried different DOCTYPES and the only thing I’ve found is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> which runs the scroll but the page loses cohesion.

I’ve been over page after page on Google searching for “javascript scroller not working doctype”, “doctype javascript conflicts” and variations thereof, and I see plenty of responses, but no solutions. I realize this script is ancient, and if there is something else that does the same thing, and that actually works, with little coding, that’s fine.

In any event, this is the closest I have come, but again, no DOCTYPE in the code, just a <html> tag.

What are the pitfalls if I take the <!DOCTYPE HTML> out of the text and just have <html>?

September 10, 2014 at 12:51 am #182476

Anonymous
Inactive

Ok, so since there appears to be no answers to fixing this, what options are there besides just putting in a manual scroll bar. I can’t take out the <!DOCTYPE>, as much as I’d like to, because the page has been designed with it and the page comes apart if it’s removed.

September 10, 2014 at 12:54 am #182477

Anonymous
Inactive

@Paulie_D

Do you see anything on the link you posted here that I don’t that would solve this?

September 10, 2014 at 2:30 am #182480

Paulie_D
Member

Unfortunately, although my Googling skills are awesome, my JS skills are rudimentary at best.

September 10, 2014 at 2:36 am #182482

Anonymous
Inactive

@Paulie_D

Yeah, I always Google questions I have and only ask here if I can’t find an answer, or don’t understand the one(s) found.

At least stumping others on the questions doesn’t make me feel as limited. ;)

September 10, 2014 at 1:10 pm #182520

__
Participant

Here, try this. Much updated. I haven’t tested it fully, but it should work on major browsers back to IE8.

Changes you need make: Put your scrolling content in an element with a “data-scroller” attribute (like <div data-scroller>My scrolling content!</div>). If you want more than one scroller on a page, you need to collect them all (e.g., querySelectorAll('[data-scroller'])) and call the scroller function on each. The script needs to run on load (i.e., on document ready, or put the script tag at the bottom of the page).

September 11, 2014 at 12:22 am #182600

Anonymous
Inactive

@traq,

I’m having a look at this and it looks very promising. Much appreciated as always!

Would the on load function be something like $(document).ready(function(){ or in the body tag?

Yep, I’m googling. LOL

September 11, 2014 at 10:20 am #182638

__
Participant

You could do .ready, or simply put the script at the bottom of the page. Both would have the same effect. If you’re already using .ready for other scripts on your page, go with it.
Author

Posts

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

The forum ‘JavaScript’ is closed to new topics and replies.