Click here to Skip to main content
15,884,986 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
This part is static content
HTML
<div id="albums" class="clearfix"></div>



This part is dynamic content load to #album div by jquery
HTML
<div class="album pull-left"><img src="XXX"/><img src="XXX"/><img src="XXX"/></div>


I want to modify the width of img using jquery. The problem is I get NaN value of width.

When click the img to add function, I know I should use
$(document).on('click','img',function(){...});
But I don't know what event I should bind.
Posted
Comments
Kornfeld Eliyahu Peter 26-Oct-14 9:05am    
Can we see your current code?

Anticipating that you want to modify the image width on click of the image,
Then you can use the image id for onclick event.
That is:
Suppose id for first image tag is image1.
then you can use:-
JavaScript
$("#image1").click(function(){
    $("#image1").width('your width here');
})

Similarly for the images you can use. If you have more images then you can try and use dynamic id for the images using the unique id or name for the image being uploaded if any.
Hope this helps.
Please post back your queries if any.
Thanks
:)
 
Share this answer
 
v2
Comments
Sergey Alexandrovich Kryukov 26-Oct-14 14:14pm    
My 5.
However, for completeness, the answer would require some discussion on CSS approach and comparison it with the way you've shown. I've done it in Solution 2, please see.
—SA
[no name] 26-Oct-14 22:46pm    
Thanks a lot Sergey.
Your informations are always valuable.
Cheers.. :)
To generalize Solution 1 a bit:

That solution shows that you don't have to change CSS in this case, because width is important enough to be directly implemented in jQuery. Such rendered properties as width are implemented in two forms: 1) as the attribute of the element; 2) as the part of the CSS style of one element or the set of elements sharing some CSS class.

If you do it all manually and statically, CSS is always preferred, but if you implement some properties and make the dynamic in CSS, both ways can be used, depending in the situation.

To modify CSS on some events, please use: http://api.jquery.com/category/css[^].

For width only, it could be a bit of overkill, but often you need to modify the whole set of attributes at once. In such cases, there is nothing better than replacing, toggling or adding/removing a CSS class.

—SA
 
Share this answer
 
I found that it should use a callback function within .load() when modifying the loaded content.

JavaScript
 $("#album-images").load("URL",init);
function init() {
    var img_width = parseInt($('#album').css('width'))/5;
    $('img').css({'width',img_width});
 }
 
Share this answer
 
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900