erme Posted September 25, 2013 Share Posted September 25, 2013 I have a series of images in a div called .img_wrapper. I want to add a class to this div based on whether the image in the div is landscape or portrait. This is what I have come up with but doesn't work: $(".img_wrapper").each(function(){ var img = $(".img_wrapper img"); var div = $(".img_wrapper"); if (img.height() < img.width()){ div.addClass('landscape'); } else { div.addClass('portrait'); } }); Link to comment https://forums.phpfreaks.com/topic/282430-add-class-to-parent-div-based-on-image-being-landscape-or-portrait/ Share on other sites More sharing options...
cyberRobot Posted September 25, 2013 Share Posted September 25, 2013 Note that you won't be able to access the <div> and <img> tags until the page fully loads. Is your code behind an "onload" event? Since you're using jQuery, perhaps the following will help: http://api.jquery.com/ready/ Link to comment https://forums.phpfreaks.com/topic/282430-add-class-to-parent-div-based-on-image-being-landscape-or-portrait/#findComment-1451147 Share on other sites More sharing options...
erme Posted September 25, 2013 Author Share Posted September 25, 2013 Note that you won't be able to access the <div> and <img> tags until the page fully loads. Is your code behind an "onload" event? Since you're using jQuery, perhaps the following will help: http://api.jquery.com/ready/ Yea its wrapped in $(document).ready(function() Link to comment https://forums.phpfreaks.com/topic/282430-add-class-to-parent-div-based-on-image-being-landscape-or-portrait/#findComment-1451149 Share on other sites More sharing options...
cyberRobot Posted September 25, 2013 Share Posted September 25, 2013 Could you provide a little more information by what you mean by "it doesn't work"? Also, it might help to show more code. Are you importing a jQuery library? For what it's worth, the following code works for me: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $(".img_wrapper").each(function(){ var img = $(".img_wrapper img"); var div = $(".img_wrapper"); if (img.height() < img.width()){ div.addClass('landscape'); } else { div.addClass('portrait'); } }); }); </script> </head> <body> <div class="img_wrapper"><img src="myImage.jpg" width="225" height="500" /></div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/282430-add-class-to-parent-div-based-on-image-being-landscape-or-portrait/#findComment-1451153 Share on other sites More sharing options...
erme Posted September 25, 2013 Author Share Posted September 25, 2013 Hi, just tried it. It takes the size of the first image in img_wrapper and applies the class to the rest of the img_wrapper divs. So if the first image is landscape, the rest will be landscape regardless of the image size. Link to comment https://forums.phpfreaks.com/topic/282430-add-class-to-parent-div-based-on-image-being-landscape-or-portrait/#findComment-1451154 Share on other sites More sharing options...
kicken Posted September 25, 2013 Share Posted September 25, 2013 Use var div = $(this); var img = $("img", div); instead. You need to be limiting each iteration to the scope of the current element, which is provided by the this keyword. Link to comment https://forums.phpfreaks.com/topic/282430-add-class-to-parent-div-based-on-image-being-landscape-or-portrait/#findComment-1451160 Share on other sites More sharing options...
erme Posted September 25, 2013 Author Share Posted September 25, 2013 Perfect! Thanks a lot. Link to comment https://forums.phpfreaks.com/topic/282430-add-class-to-parent-div-based-on-image-being-landscape-or-portrait/#findComment-1451178 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.