0

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
25
Views
3 Years
Discussion Span
Last Post by Violet_82
0

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!

0

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...

0

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

0

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

0

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

0

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...

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.