Question

I’m using Jquery and im having trouble updating my CSS value on the fly during a hover event . Basically i want that little line at the bottom to scale to the scale in length to the size of the div.

Here is the problematic code in question:

$('.menu li').hover(function () {
   left = Math.round($(this).offset().left - $('.menu').offset().left);
   //find the current width of the div
   var width_flux = $('.menu #box .head').html($(this).find('img').width());
   //pass value to CSS 
   $('.menu #box .head').css('width', (parseInt(width_flux)) +'px');
   $('#box').stop(false, true).animate({left: left},{duration:500, easing: style}); 

   //if user click on the menu
});

and the corresponding css

---

.menu #box .head {
        background: url("http://whoisedward.com/img/bar.png");
        height:3px;
        width:1px;
        color:#eee;

        /* force text display in one line */
        white-space:nowrap;

        /* set the text position manually */
        padding-left:4px;
        padding-top:3px;
    }

Answer 1

There is problem in line

 var width_flux = $('.menu #box .head').html($(this).find('img').width());

width_flux is not with but jQuery element.

Modified code: Assuming you want use $(this).find('img').width() as width_flux

$('.menu li').hover(function () {
    left = Math.round($(this).offset().left - $('.menu').offset().left);
    //find the current width of the div
    var width_flux = $(this).find('img').width();
    //pass value to CSS 
    $('.menu #box .head').width(width_flux);
    $('#box').stop(false, true).animate({left: left},{duration:500, easing: style});    

    //if user click on the menu
})