Javascript sending dynamic values to CSS

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;
    }

First off, you might want to change hover to mouseenter as right now the javascript is throwing errors on hover off because the hover binds to both hover on and off. api.jquery.com/hover and api.jquery.com/mouseenter — TheZ
– TheZ, Commented Sep 28, 2012 at 22:41
var width_flux = $('.menu #box .head').find('img').width() should fix that. Right now it's returning an object, instead of an explicit integer. — Ohgodwhy
– Ohgodwhy, Commented Sep 28, 2012 at 22:43

Anoop · Accepted Answer · 2012-09-28 22:46:14Z

3

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
})

edited Sep 28, 2012 at 22:46

answered Sep 28, 2012 at 22:39

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shmiddty Over a year ago

I think maybe he wants: $('.menu #box .head img').width();

Edward Over a year ago

I see, so how do I change it to fetch the div size or simply find the html width element on the page and store it in width_flux variable?

Anoop Over a year ago

@Edward whose width you want use?

GolezTrol · Accepted Answer · 2012-09-28 22:44:28Z

1

The line

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

is wrong. You add the width to the element, but the element (not the width) is assigned to width_flux. Obviously, <element>px is not a sensible CSS value.

Try:

width_flux = $(this).find('img').width();
$('.menu #box .head').html(width_flux);
$('.menu #box .head').css('width', width_flux + 'px');

answered Sep 28, 2012 at 22:44

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

Comments

Sushanth -- · Accepted Answer · 2012-09-28 22:50:37Z

1

You seem to be setting the value to you HTML and not getting it

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

So basically width_flux will be an element..

Instead try

var width_flux = $(this).find('img').width();

   OR 

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

   var width_flux = width_flux.html() ;
    // Then your code

Make sure you check for error conditions

edited Sep 28, 2012 at 22:50

answered Sep 28, 2012 at 22:45

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Collectives™ on Stack Overflow

Javascript sending dynamic values to CSS

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related