Hi, marquee delay in non ie browsers

Question

Update: It seems it actually is delayed in internet explorer to.

Update: It seems to be starting sooner then it seemed, it's just that the text starts scrolling from the far right of the screen, and the text has a white colour and so does the background - and it's only supposed to show up in a yellow rectangle in the middle of the screen. Would anybody be able to help me with how to get this javacript marquee plugin from 'aamirafridi-jQuery.Marquee-304ed30 plugin' to start the text scrolling inside of that yellow box, and have the text scrolling be only inside of that yellow box that is in the middle of the screen?

I am using a marquee tag, to scroll news feeds from right to left, and because it's jittery, I tried implementing the 'aamirafridi-jQuery.Marquee-304ed30 plugin', from this site, the problem is that in IE it starts right away, but in firefox or google chrome it's delayed, I can decrease the duration param in the marquee function (see code below), to make it start sooner, but then the text scrolls too fast if I get it to show without delay. I've been trying to figure out a solution, but haven't managed to, does anyone have any suggestions? It would be much appreciated. Thankyou.

and I have this code:

function UR_Start() {
    UR_Nu = new Date;
UR_Indhold = showFilled(UR_Nu);
UR_Indhold = UR_Indhold.substring(0, UR_Indhold.indexOf("GMT"));
document.getElementById("ur").innerHTML = UR_Indhold;

    //document.getElementById("marquee").innerHTML = window.rssContent;
$('.marquee').marquee({duration: 15000, delayBeforeStart: 0, direction: 'left'});
    initMarquee();
    load();
}
}

function load() {
    UR_Nu = new Date;
UR_Indhold = showFilled(UR_Nu);
UR_Indhold = UR_Indhold.substring(0, UR_Indhold.indexOf("GMT"));
document.getElementById("ur").innerHTML = UR_Indhold;
setTimeout("load()", 1000);
}

function initMarquee() {
    setTimeout("initMarquee()", 30000);
$('.marquee').marquee({duration: 15000, delayBeforeStart: 0, direction: 'left'});
}

and the html:

<div class="container-fluid" style="padding: 5px 20px">

    <div class="well" style="background-color: <?php echo $layout_setting[2][value]; ?>; font-size:large; font-weight:bold;">

        <div id="marquee" class="marquee" class="marquee" style="white-space: nowrap; padding: 0 1em; overflow-style: marquee; marquee-style: scroll; marquee-loop: infinite; overflow-x: -webkit-marquee; width: 96%; -webkit-marquee-repetition: infinite; color: <?php echo $layout_setting[7][value] ?>" >

            <?php echo $rssContent; ?>

        </div>
    </div>
</div>

Update: Actually, it seems that the delay happens in Internet Explorer too, as well as Firefox and Google Chrome.

Edit: I have updated the html, which now uses php to populate the marquee div, instead of using javascript to manipulate the html dom after page load.

Edit: I have updated the javascript code with the newest version of what I am attempting, with some of the code around it.

Answer 1

Try the plugin I made myself for this question.Tested in Firefox , Chrome & Opera.

Fiddle

Plugin code used in fiddle

/*Start of Plugin*/
(function( $ ) {
$.fn.marquee = function(params){
    params = $.extend( {direction : 'left',duration : '2000', delayStart : '0'}, params);
    var duration = parseInt(params.duration);
    var delay = parseInt(params.delayStart);

    var par = $(this);
    par.wrapInner('<span></span>');

    var parCh = par.children('span');
    var leftMargin = parCh.css('margin-left').replace('px','');
    var rightMargin = par.innerWidth()-leftMargin-parCh.width();

    function dirRight(){
        parCh.css({'margin-left':''+leftMargin+'px'});
        parCh.animate({
              'margin-left':''+rightMargin+'px'
            },duration,
              'linear',
            function(){
              dirRight();
            });
    }

    function dirLeft(){
        parCh.css({'margin-left':''+rightMargin+'px'});
        parCh.animate({
               'margin-left':''+leftMargin+'px'
            },duration,
              'linear',
            function(){
              dirLeft();
            });
    }

    if(params.direction == 'right'){
        setTimeout(function(){dirRight()},delay);
    }
    if(params.direction == 'left'){
        parCh.css({'margin-left':''+rightMargin+'px'});
        setTimeout(function(){dirLeft()},delay);
    }

    $(window).resize(function(){
        rightMargin = par.innerWidth()-leftMargin-parCh.width();
    });
};}( jQuery ));
/*End of Plugin*/

/*Call plugin*/
$('.marquee').marquee({
    //Set the direction of marquee
    'direction':'left',

    //delay the start of marquee
    'delayStart':'0',

    //Set the duration of marquee in millisecond
    'duration':'8000'
});

---

Try below fiddles and select whichever works for you as needed:

1. Fiddle1

2. Fiddle2

3. Fiddle3

Note : For the above three fiddles other than jQuery change I also changed the CSS for .marquee as below:

.marquee {
    white-space: nowrap;
    width: 100%;
    color: #000;
    overflow:hidden;
}

---

Hint : If you want the marquee to start when the document is completely loaded write the plugin call within $(document).ready(function(){ ... }):

$(document).ready(function(){
$('.marquee').marquee({
    //Set the direction of marquee
    'direction':'left',

    //delay the start of marquee
    'delayStart':'0',

    //Set the duration of marquee in millisecond
    'duration':'8000'
});
});