1

Absolute beginner here. Literally just started messing with HTML last week.

I'm trying to come up with a some kind of marquee effect that can be put into html coding on a website. We have a basic HTML marquee set up, but it is jumpy and difficult to read. I have no idea where to go with this.

Adam Lear
  • 38,111
  • 12
  • 81
  • 101
Jen
  • 67
  • 1
  • 1
  • 4
  • 5
    Don't ever use `marquee`. Your users will hate you for it. There was a reason they [removed it](http://www.w3.org/TR/html5/obsolete.html): "CSS transitions and animations are a more appropriate mechanism". – Patrick Hofman Oct 14 '14 at 12:02
  • 2
    @PatrickHofman Pretty much every news channel I've seen uses a marquee-like ticker to show news that they aren't talking about right now. There *are* valid uses for marquee, but "because it's cool" is definitely not one of them :) – Niet the Dark Absol Oct 14 '14 at 12:09
  • @NiettheDarkAbsol: Okay. But I still hate them. – Patrick Hofman Oct 14 '14 at 12:09
  • 1
    @PatrickHofman Fair enough XD Personally I hate carousels, but a lot of people (ab)use them... – Niet the Dark Absol Oct 14 '14 at 12:11

3 Answers3

3

You can use jQuery to archieve the result of marquee.

look here: http://plugins.jquery.com/marquee/ and here: http://aamirafridi.com/jquery/jquery-marquee-plugin#examples

As mentioned: dont ever use marquee

google search for "marquee jquery" lists a lot of results

Wavemaster
  • 1,794
  • 16
  • 27
  • As it stands now, this is a link-only answer. – Patrick Hofman Oct 14 '14 at 12:13
  • I'm really sorry to ask again, but I don't quite understand what jQuery is/how I incorporate it into my HTML coding – Jen Oct 14 '14 at 12:30
  • jQuery is a JavaScript-framework who let you add JavaScript very easy in your site. You add the jQuery librarys (and the "main"-library of jQuery) you want to use in your html head section and used it like mentioned in my second link above. – Wavemaster Oct 14 '14 at 12:35
  • jQuery tutorial here; https://www.w3schools.com/Jquery/default.asp – Yvonne Aburrow Aug 24 '18 at 13:30
0

There is no simple alternative to marquee. If you want to find a standard solution you have to be an expert javascript programmer and instead of a simple html tag you have to go to many many lines of code.

Most standard Web browser supports it (except for Google Chrome it fails to render it to the standard of marquee).

For Chrome (and chrome only needs that) you could use this javascript code ... you don't need to use this for (IE, Edge, Mozilla, Opera...etc)

var oMarquees = [], oMrunning,
        oMInterv =        20,     //interval between increments
        oMStep =          1,      //number of pixels to move between increments
        oStopMAfter =     0,     //how many seconds should marquees run (0 for no limit)
        oResetMWhenStop = false,  //set to true to allow linewrapping when stopping
        oMDirection =     'right'; //'left' for LTR text, 'right' for RTL text

/***     Do not edit anything after here     ***/
function doMStop() {
        clearInterval(oMrunning);
        for( var i = 0; i < oMarquees.length; i++ ) {
                oDiv = oMarquees[i];
                if( oResetMWhenStop ) {
                        oDiv.mchild.style.cssText = oDiv.mchild.style.cssText.replace(/;white-space:nowrap;/g,'');
                        oDiv.mchild.style.whiteSpace = '';
                        oDiv.style.height = '';
                        oDiv.style.overflow = '';
                        oDiv.style.position = '';
                        oDiv.mchild.style.position = '';
                        oDiv.mchild.style.top = '';
                }
        }
        oMarquees = [];
}
function doDMarquee() {
        if( oMarquees.length || !document.getElementsByTagName ) { return; }
        var oDivs = document.getElementsByTagName('div');
        for( var i = 0, oDiv; i < oDivs.length; i++ ) {
                oDiv = oDivs[i];
                if( oDiv.className && oDiv.className.match(/\bdmarquee\b/) ) {
                        if( !( oDiv = oDiv.getElementsByTagName('div')[0] ) ) { continue; }
                        if( !( oDiv.mchild = oDiv.getElementsByTagName('div')[0] ) ) { continue; }
                        oDiv.mchild.style.cssText += ';white-space:nowrap;';
                        oDiv.mchild.style.whiteSpace = 'nowrap';
                        oDiv.style.height = oDiv.offsetHeight + 'px';
                        oDiv.style.overflow = 'hidden';
                        oDiv.style.position = 'relative';
                        oDiv.mchild.style.position = 'absolute';
                        oDiv.mchild.style.top = '0px';
                        oDiv.mchild.style[oMDirection] = (oDiv.mchild.style[oMDirection] == '')?(oDiv.offsetWidth + 'px'):oDiv.mchild.style[oMDirection];
                        oMarquees[oMarquees.length] = oDiv;
                        i += 2;
                }
        }
        oMrunning = setInterval('aniMarquee()',oMInterv);
        if( oStopMAfter ) { setTimeout('doMStop()',oStopMAfter*1000); }
}
function aniMarquee() {
        var oDiv, oPos;
        for( var i = 0; i < oMarquees.length; i++ ) {
                oDiv = oMarquees[i].mchild;
                oPos = parseInt(oDiv.style[oMDirection]);
                if( oPos <= -1 * oDiv.offsetWidth ) {
                        oDiv.style[oMDirection] = oMarquees[i].offsetWidth + 'px';
                } else {
                        oDiv.style[oMDirection] = ( oPos - oMStep ) + 'px';
                }
        }
}
if( window.addEventListener ) {
        window.addEventListener('load',doDMarquee,false);
} else if( document.addEventListener ) {
        document.addEventListener('load',doDMarquee,false);
} else if( window.attachEvent ) {
        window.attachEvent('onload',doDMarquee);
}
AGT
  • 9
  • 1
0

My advice would be to use a carousel instead. The user has more control over it, as the carousel can be stopped and started on a mouse click.

Material Design carousel here: http://materializecss.com/carousel.html

Yvonne Aburrow
  • 2,602
  • 1
  • 17
  • 47