Member Avatar for Violet_82

Hi guys, I have come across something really confusing, so I wonder if somebody can help me with that.
I wanted to increment the width of a container using this version of the .css() method:
$( "div.example" ).css( "width", function( index ) as per http://api.jquery.com/css/#css-propertyName-functionindex--value
So here is my html:

<div class="myDiv"> </div>
and my css for that container
.myDiv {
    background: url("overlayArrow_03.png") no-repeat scroll -20px 0 rgba(0, 0, 0, 0);
    border: 1px solid #0000FF;
    height: 150px;
    left: 35px;
    position: absolute;
    top: 217px;
    width: 300px;
}

OK. So this version of a jquery script does the trick:

$(".myDiv").css("width", function(index){

            return index + 120;
        });

although the final width of the container is now 120px and not 420 as expected. I take that's because the value of index is 0, so it would make sense.
On the jquery site, they also say that the version of the above funcion should be instead

$( "div.example" ).css( "width", function( index, value )
that applied to my case is

$( "div.example" ).css( "width", function( index, value )

            return value + 120;
        });

but alas, it doesn't work. It doesn't cause an error and the width of the container remains 300px.
Any idea please?
thanks

  • 3 Contributors
  • 8 Replies
  • 422 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for minitauros

For as far as I know, the css() function only accepts two parameters, being index and value. E.g. you would execute css('width', 420). I'm not completely sure though, but I can provide you with an example of which I'm sure it works:

var new_width = $('#div').width() + 120;
$('#div').css('width', new_width);

Be sure to also check out the innerWidth() and outerWidth() functions! :) Hope this helps!

Member Avatar for Violet_82

well yes it accepts 2 values, one of which can be a function that takes "index" and "value". Now, neither index or value - if you look at my previous example - shouldn't be declared I don't think...

Member Avatar for minitauros

Hm I don't know about using it in that way, actually, just thought I'd help you out with something of which I know for certain that it works. Are you allowed to declare functions without brackets, by the way? :O

Member Avatar for Violet_82

Hi, this usage of css() is very well documented on the jquery site, so it should work, it might be that I am doing something wrong

Member Avatar for JorgeM

Try this...

<!DOCTYPE html>
<html>
<head>
 <title>Your Title</title>
<style>
#myDiv {
    background: url("overlayArrow_03.png") no-repeat scroll -20px 0 rgba(0, 0, 0, 0);
    border: 1px solid #0000FF;
    height: 150px;
    left: 35px;
    position: absolute;
    top: 217px;
    width: 300px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>

<button id="btn1">Click</button>
<div id="myDiv"></div>

<script>
$("#btn1").click( function() {  
    $('#myDiv').css({
        width: function(index, value){
           return parseFloat(value) + 120;
        }
     });    
 });
</script>

</body>
</html>
Edited by JorgeM
Member Avatar for Violet_82

thanks JorgeM, that does work. But then, why mine doesn't?! Is it just because the value is a string and I need to parse it? it would appear so...

Member Avatar for JorgeM

The value is "300px;" you use parseFloat to extract the "300" from there. parseInt() works as well in this case. When in doubt... use console.log(value) so you can see the output in your dev tools.

d0264125f50cc78b63c0b514fbb23cd2

Edited by JorgeM
Member Avatar for Violet_82

ok got it, thank you very much for your help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.