SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    question regarding marquee tag

    Hi everyone,
    I got a simple question, I want to add a simple scrolling up text to my website, my question is, should i use marquee tag for this? how's the support for it?
    Don't really care about validation as long as it works out.

    Wanna hear your thoughts,
    Regards,
    Ulthane.

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,229
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    I believe the major browsers still support it, although it's a proprietary tag.

    If you want to meet accessibility guidelines, then you might run into problems with it.
    Quote Originally Posted by W3C
    2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true: (Level A)

    Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential;
    I keep JavaScript disabled to stop unwanted animations. If I come across a site with moving text/images I can't stop or disable, then I find it unusable and go elsewhere.

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Techno,
    i'll use JS to achieve this.

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    I don't think he was saying that you should just use JavaScript instead of the tag (although the tag is outdated and not used very often). I think his point was that marquees and animations that start automatically (i.e. Videos that autoplay or music or ads or other such pop-ups) are somewhat annoying to users and that's why he keeps JS off (and also leaves sites that have animations that don't use JS and that he can't stop).

    ~TehYoyo

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,229
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    What I was saying was "Don't use moving text that can't be paused/turned off." This is difficult, if not impossible, to achieve consistently cross-browser with marquee, but can be done with JS, so that's a better choice in the circumstances.

    For the SitePoint HTML reference:
    [marquee] is generally considered to be a very unfriendly element to use, one which presents difficulties for many users who may have difficulty tracking the text as it moves. Our advice is not to use it. JavaScript is a more suitable technique for moving text on screen - if there is a valid reason for doing this at all.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Quite simply ... NO. The marquee tag is a non-standard HTML element. It is deprecated by the W3C and not advised by them for use in any HTML documents.

    Also just in case the the point was missed earlier. if you decide to do this via .js, do include a method for the user to see WHOLE TEXT displayed and NOT scrolling.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Another note on marquee: Chrome browser never had full support for it. Things like rate and setting the width and wrapping I believe were poorly or not supported in Chrome.

    Another option for scrolling text is Flash. This might be more useful depending on your targetted group. The ConAgra website used to use Flash to scroll a menu of options. Users without Flash got what was sitting behind it: a non-scrolling menu (another reason NoScript plugin is awesome).

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,229
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    This site uses JavaScript to scroll a list of disrupted ferry services, and it provides controls for pausing or moving forward and back in the list. (I still find it better to have JS disabled, especially when there are gales and twenty-odd services are all disrupted. )

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    My innernets is slow. They made a big mistake with the menu on that site. I had white text on a white background waiting for the black image to load. Shame shame, never rely on an image for text contrast.

    Their scroller is very jumpy for me... probably because with my connection strangely so slow, advertisement js is probably clogging mah tubes. They would have done better with a simple replace rather than a scroll, like train stations do with the old-fashioned signs.

  10. #10
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,229
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Sorry - I was only using the site as an example of scrolling text with decent controls. I'd never hold that site up as a shining example of anything, especially not accessibility - although it's vastly better than their previous site.

    Off Topic:

    If you really want to get cross, trying finding out ferry times with a screen reader...

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Well, what I mean is I've seen scroll well-done on other sites (though none recently that I can think of), and scrolling also made sense (like, stock-tickery things). Sometimes it was called a Crawl.

    The site you linked to probably works a lot better when the innernets dust is flowing...

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you solve the issue?

  13. #13
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by esn003 View Post
    Did you solve the issue?
    yeah i used a .js file (1kb only in size after packing) to achieve that, it has support to stop/start the text on mouseover/out aswell as provides the ability to change the speed of text.
    here it is if anyone else is interested:
    Code:
    function Scroller(canvasId, textId, speed, moveAmount, horizontal, mouseOver) {
        this.timerID = null;
        this.currPos = 0;
        this.speed = speed;
        this.moveAmount = moveAmount;
        this.canvasId = canvasId;
        this.textId = textId;
        this.horizontal = horizontal;
        this.mouseOver = mouseOver;
        if (this.horizontal) {
            this.canvasSize = document.getElementById(this.canvasId).offsetWidth;
            this.textSize = document.getElementById(this.textId).offsetWidth;
        } else {
            this.canvasSize = document.getElementById(this.canvasId).offsetHeight;
            this.textSize = document.getElementById(this.textId).offsetHeight;
        }
        this.start = function() {
            this.registerEvents();
            this.stop();
            this.move(this.currPos, this.moveAmount, this.speed);
        }
        this.registerEvents = function() {
            var context = this;
            if (this.mouseOver) {
                document.getElementById(this.canvasId).onmouseover = function() {
                    context.stop();
                };
            }
            document.getElementById(this.canvasId).onmouseout = function() {
                context.stop();
                context.move(context.currPos, context.moveAmount, context.speed);
            };
        }
        this.move = function(nextPosition, amountOfPixels, miliseconds) {
            nextPosition -= amountOfPixels;
            if (nextPosition == -this.textSize) {
                nextPosition = this.canvasSize;
            }
            if (this.horizontal) {
                document.getElementById(this.textId).style.right = nextPosition + 'px';
            } else {
                document.getElementById(this.textId).style.top = nextPosition + 'px';
            }
            var context = this;
            this.timerID = setTimeout(function() {
                context.move(nextPosition, amountOfPixels, miliseconds);
            }, miliseconds);
        }
        this.stop = function() {
            if (this.timerID !== null) {
                clearTimeout(this.timerID);
                if (this.horizontal) {
                    this.currPos = parseInt(document.getElementById(this.textId).style.right, null);
                } else {
                    this.currPos = parseInt(document.getElementById(this.textId).style.top, null);
                }
            }
        }
    }
    if (typeof(addEventSimple) == 'undefined') {
        addEventSimple = function(obj, evt, fn) {
            if (obj.addEventListener)
                obj.addEventListener(evt, fn, false);
            else if (obj.attachEvent)
                obj.attachEvent('on' + evt, fn);
        }
    }
    if (typeof(addEventSimple) == "function") {
        addEventSimple(window, "load", function() {
            var myScroller = new Scroller("canvas", "text", 50, 1, false, true);
            myScroller.start();
        });
    }

  14. #14
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the js you wrote.
    Can it scroll images?

  15. #15
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I didn't write it, its a script i found on google
    but yeah, there is no reason it wont be able to scroll images, just wrap anything u wanna scroll with the following html and css and it'll work.

    Code:
    #canvas {height:175px;position:relative;overflow:hidden}
    #text {position:relative}
    Code:
    <div id="canvas"><div id="text">
    ...
    </div></div>

  16. #16
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    You can try this.

    Code:
        <marquee id="newsScorller" direction="up" scrollAmount="3" height="320" width="380"         
        onmouseover='this.scrollAmount="0"' onmouseout='this.scrollAmount="3"' bgcolor="#ffffff"          
        style="border: 1px solid #6a9e00; padding-left: 1px; padding-right: 1px; padding-top: 1px; padding-bottom:1px" >
        <script type="text/javascript" src="http://feeds.feedburner.com/yourblog?format=sigpro"></script>
        </marquee>

  17. #17
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,229
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by esn003 View Post
    You can try this.

    Code:
        <marquee id="newsScorller" direction="up" scrollAmount="3" height="320" width="380"         
        onmouseover='this.scrollAmount="0"' onmouseout='this.scrollAmount="3"' bgcolor="#ffffff"          
        style="border: 1px solid #6a9e00; padding-left: 1px; padding-right: 1px; padding-top: 1px; padding-bottom:1px" >
        <script type="text/javascript" src="http://feeds.feedburner.com/yourblog?format=sigpro"></script>
        </marquee>
    To what purpose? I thought we'd already established in this thread that <marquee> is a bad choice, so what does your code have to offer here? Are you suggesting it as an improvement on ulthane's script or what?

  18. #18
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Code:
    onmouseover='this.scrollAmount="0"' onmouseout='this.scrollAmount="3"'
    Ahem. Where's the onkeyup/onfocus? With of course the inline tabindex="0" and JS changing it from 0 to 1 as needed.

  19. #19
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did anyone try to place one of 'those' scrollers in a post?
    My code runs everywhere.

  20. #20
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,229
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Are you trying to say that your code is a better choice than JavaScript in this instance? If so, have you read the entire thread? The problems of using a <marquee> tag have already been discussed. And Stomme Poes has just pointed out that your code requires use of a mouse, and therefore cannot be used by anyone relying on keyboard navigation.

  21. #21
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is true.

  22. #22
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The answer was; don't use the proprietary marquee it's an abomination and always was and hence why it never made the normative technical recommendations in the first place.

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by xhtmlcoder
    and hence why it never made the normative technical recommendations in the first place.
    That or politics. We see <embed> has been allowed to crawl back into the specs. :)

  24. #24
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Well, embed did have some merit at one time (even though proprietary and non standard) due to M$ failing to support OBJECT correctly. Albeit now it is pretty much a case of the HTML5 fanboys documenting it and strangely deciding; AUDIO, VIDEO and OBJECT aren't enough. LOL

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    could just be, the spec must be BIGGER!



    sorry had to post that cause I just discovered Brunel was like the most awesome civil engineer evar.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •