Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Nov 2013
    Posts
    2
    Member #
    37715

    Creating a compliant marquee scroller - what am I doing wrong?

    Hi there,

    In the past I've used a simple marquee scroller to display a ticker-tape styled marquee, but this isn't "correct" css/html and isn't supported by PageLime, the CMS I'm hoping to use with this site. On that basis, I've tried following the directions on this page: Marquee in the Age of HTML5 and CSS3 to create a more compliant marquee, but something isn't working properly - the text doesn't scroll.

    I've added the following to the the css:

    .co60_scroller {
    width: 100%; height: 50px; white-space: nowrap;
    overflow: hidden;
    overflow-x:-webkit-marquee;
    -webkit-marquee-direction: forwards;
    -webkit-marquee-style: scroll;
    -webkit-marquee-speed: normal;
    -webkit-marquee-increment: small;
    -webkit-marquee-repetition: 5;
    overflow-x: marquee-line;
    marquee-direction: forward;
    marquee-style: scroll;
    marquee-speed: normal;
    marquee-play-count: 5;
    font-family:"Courier New", Courier, monospace;
    font-size:12px;
    color:#F00;
    }

    And the code on the page is as follows:

    <div id="scroller" class="co60_scroller">Scrolling text will go here</div>

    My preference would be to use html/css rather than javascript.

    Help!

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    The only information I can find on CSS Marquee states that it was supported in Chrome up to version 17. Considering the rest of the world is on a version in the neighborhood of 30, I'm going to go with it being removed from the only 2 browsers that ever supported it (Safari being the other, up to v5.1). Other browsers never implemented it, likely because of the disastrous <marquee> tag.

    That said, if you're bent on having one, VisualIdiot has recreated the effect using keyframe animations, which are supported by most recent versions of all browsers.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Nov 2013
    Posts
    2
    Member #
    37715
    I think I've cracked it! After much wailing and gnashing of teeth, several hours ploughing through Google, quite a lot of coffee and rather too many cigarettes, this is what I've come up with:

    <style>
    marquee
    {
    width: 100%; height: 50px; white-space: nowrap;
    overflow: hidden;
    font-family:"Courier New", Courier, monospace;
    font-size:12px;
    color:#F00;
    /* Safari and Chrome */
    overflow-x:-webkit-marquee;
    -webkit-marquee-direction: forward;
    -webkit-marquee-style: scroll;
    -webkit-marquee-speed: normal;
    -webkit-marquee-increment: normal;
    -webkit-marquee-repetition: infinite;
    /* W3C */
    overflow-x: marquee-line;
    marquee-direction: forward;
    marquee-style: scroll;
    marquee-speed: normal;
    marquee-play-count: infinite;
    }
    </style>

    And in the body:

    <div>
    <marquee>
    <p>Text goes in here</p>
    </marquee>
    </div>

    It seems to work in FF, IE, Chrome and Safari.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:02 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com