Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up
Fanged Wonder

Help Code for a news ticker/scroll.

Recommended Posts

I am looking for a code/ way to place a news ticker beneath the header or top bar on a site. To be used to scroll news & latest updates, welcome new members etc. Anyone able to help with this? I did try searching for a code, as I was sure I used to have one. But haven't been able to track one down. 

Share this post


Link to post
Share on other sites

I think what you're looking for is the non-standard Marquee element.  It works on every browser, as far as I can tell. It is 'non-standard', so it could theoretically break something, but I haven't seen it break before. It may also end up removed, theoretically, someday, but I doubt it.  Marquees can scroll horizontally, vertically, they can even bounce.  

 

Example:

<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <style> 
      marquee {
        width: 100%;
        padding: 10px 0;
        background-color: lightblue;
      }
    </style>
    <marquee direction="scroll">A scrolling text created with HTML Marquee element and styled with CSS properties to have a blue background and some padding.</marquee>
  </body>
</html>

May only be half the solution, if you want it to update dynamically, but it's a place to start!

Edited by Bro

Share this post


Link to post
Share on other sites

You might want to fiddle with the width settings and such, or try to put it under a <div> with the sizing on it. Might help! I can't really give any more specific advice without seeing it.  Good luck!

Share this post


Link to post
Share on other sites

Sorry to belatedly jump all over this - the reason for Iso's alternative is because the marquee element is obselete and may not be supported in future browser updates. I think it may not render correctly in safari as is?

 

You can read about it here.

 

Using css or jquery is the web standard compliant way to achieve this effect (and wouldn't it such kind if the next browser update meant your thing no longer scrolls!) If you want horizontally scrolling text you can also try this code.

Share this post


Link to post
Share on other sites
20 hours ago, Kit the Human said:

Sorry to belatedly jump all over this - the reason for Iso's alternative is because the marquee element is obselete and may not be supported in future browser updates. I think it may not render correctly in safari as is?

 

You can read about it here.

 

Using css or jquery is the web standard compliant way to achieve this effect (and wouldn't it such kind if the next browser update meant your thing no longer scrolls!) If you want horizontally scrolling text you can also try this code.

(and @isoldehn, for that matter) 

 

Good catches! I actually linked that link you have there, Kit. That's why I mentioned it being "non-standard". I don't know anything about it not working in safari (never touched it), but I agree that it's much better to have a css hand-made one.  I use a <marquee> on our site just because it's simpler than coding one in and I'm very lazy and good at hoping that they don't actually stop letting marquees do their thing. XD

 

EDIT: Marquee still seems to work fine in safari, at least according to https://www.browserling.com/. However, definitely better to use the hard-coded one in almost every case!

Edited by Bro
  • Love 1

Share this post


Link to post
Share on other sites
3 hours ago, Bro said:

EDIT: Marquee still seems to work fine in safari, at least according to https://www.browserling.com/. However, definitely better to use the hard-coded one in almost every case!

 

Sites will say that it works but the effects/appearance/etc can be broken regardless. Additionally mobile browsers are more likely to drop the support first which is often where you'll see issues.

 

Safari and Opera tend to be the ones that have the hardest time obeying deprecated items. They even make some things that are considered web-standard look weird depending on how it's implemented. It's always best to go with something that is not considered deprecated for those reasons. Safari is the standard browser on any Mac or iTechnology item and should always be considered a high priority when developing websites.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.



×

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.