Having trouble the actual width of some html in javascript

Question

I am trying to use the javascript function width to get the width of a container, and use it to calculate where some scrolling text should start scrolling (I want it to scroll inside of a yellow box):

Now, javascript code like this:

alert(yellowBox.width());
alert(yellowBox.innerWidth());
alert(yellowBox.outerWidth());

All show, 944, but I've determined the yellow box is actually a width of 500, but I don't want to use that value, because the width could change.

And I'm not sure how to get the actual width of the box. I've tried using yellowBox.offsetWidth() , and yellowBox.clientWidth , but they don't work, and the Web Developer, Web Console plugin for firefox tell me that "yellowBox.offsetWidth is not a function", and also "yellowBox.clientWidth is not a function.

Here is my code:

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 class="marquee" style="white-space: nowrap; width: 100%; color: <?php echo $layout_setting[7][value] ?>; overflow: hidden; ">

      <?php echo $rssContent; ?>

    </div>
  </div>

</div>

js plugin code:

(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);

        alert(par.width());
        alert(par.innerWidth());
        alert(par.outerWidth());

        par.wrapInner('<span></span>');

        /*I get the same result for width both before and after the line that says `par.wrapInner('<span></span>');*/
        alert(par.width());
        alert(par.innerWidth());
        alert(par.outerWidth());

        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'});
            //I've determined that `500` is about the width of the yellow box, by changing the line above to:
            //`parCh.css({'margin-left' : '' + leftMargin + 500 + 'px'});`
            //and seeing where that is the about the value it needs to be to have the left side of the text start out scrolling into the right side of the box
            //instead of having the left side of the scrolling text starting at the left side of the yellow box
            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 ));

and the function where I call the plugin:

function scrollMarquee() {
    setInterval("scrollMarquee()", 1000000);

$('.marquee').marquee({'direction' : 'right', 'delayStart' : '0', 'duration' : '1000000'});

}

Answer 1

The reason might be you are using width() innerWidth() and outerWidth() on wrong div or element for example

<div id="div1">
 <div id="div2" style="height:100px;width:300px;background-color:lightblue;"></div>
</div>
<script>
$(document).ready(function(){
    alert("Width of outer div: " + $("#div1").width()+"="+   $("#div1").innerWidth()+"="+ $("#div1").outerWidth());
    alert("Width of inner div: " + $("#div2").width()+"="+   $("#div2").innerWidth()+"="+ $("#div2").outerWidth());
});
</script>

will give you different values

Answer 2

Try the following:

$(window).load(function(){
    $('.marquee').marquee({'direction' : 'right', 'delayStart' : '0', 'duration' : '1000000'});
});

OR

$(document).ready(function(){
    $('.marquee').marquee({'direction' : 'right', 'delayStart' : '0', 'duration' : '1000000'});
});