Make div overflow its container to work with marquee.js

Question

I have built a music player which loads songs from a database in a random order. I would like to display track info in an info panel. Because I do not know the length of artist/track names, I would like the info to scroll with a marquee effect if it's too big. I'm told browser implementations of the marquee tag are bad so I have got a jquery plugin to do that for me in a nice smooth way (I assume the auther knows why they're bad and has sorted it). So far so good.

The trouble is the marquee doesnt work out whether it is needed, so I would like to run a check to see if it is necessary (ie if the length of the text warrants it or not) before calling it.

Now I'm sure the problem here is a simple css one but I cannot for the life of me figure it out - you know when you've been staring at something too long...

What I am attempting to do is call the marquee on an inner div if the contents of the inner div are bigger than the outer div but no matter what I do I can't seem to get my inner div to stretch horizontally beyond my outer div unless I set a fixed width (which isn't very helpful since I don't know the width of the content).

Here is my simplified HTML (wrapper contains some other stuff floated either side):

<div id="mplayerinfo_wrapper"><div id="mplayerinfo_trackinfo"><div id="ti_inner"></div></div></div>

Here is my simplified css:

    #mplayerinfo_wrapper{
    width:545px;
    height:30px;
    margin-top:32px;
    display:inline-block;
    float:left;
}

#mplayerinfo_trackinfo{
    height:30px;
    width:238px;
    display:inline-block;
    overflow:hidden;
    float:left;
}

#ti_inner{
    float:left;
    height:30px;
width:auto;
}

I am then hoping to use jquery to get the width of both elements, compare them and if inner is bigger than outer, launch the marquee like so:

var owidth=$('#mplayerinfo_trackinfo').width();
var iwidth=$('#ti_inner').width();
if(iwidth>owidth){$('#ti_inner').marquee();};

If this can't be solved through css, is there away to get content width with jquery/javascript. Any ideas? Thanks in advance

Answer 1

Since you already know the width of the outer div, it may be easier to compare against that measurement rather that ask for that width dynamically. I've tried to re-create your simplified program and the problem I ran into was that the width() function only returned the default width of the div's, not the width as modified by css.

Answer 2

Your CSS looks appropriate for what you are trying to accomplish. I would try this for the comparison:

if ($('#mplayerinfo_trackinfo').innerWidth() < $('#ti_inner').outerWidth()) {
        $('#ti_inner').marquee();
    }

I have had better results when using JQuery's inner and outer measurements.

Answer 3

the ti_inner CSS needs to have

    white-space: nowrap;

to prevent the div just increasing in height,

We can then check the widths to see if a marquee is required.

I prefer to check the scrollWidth and the offsetWidth of the outer mplayerinfo_trackinfo instead of comparing the width of the 2 separate divs, mainly so that and margins,borders or padding dont get in the way, but in this example it doesnt really matter.

Heres a sample on JSFiddle marquee if required

Sorry it's in mootools but I'm new to all this web stuff myself and have not used any JQuery but from what I've read it should be easy to swap.