I have a Views grid that contain images in DIV containers. I want these containers to have one of two possible heights 60px or 104px, depending on the images height. So I came up with this function (contained in a $(document).ready function()
) that I have added in my theme's JS file.
$('div.givarbild img').each( function() {
var container = $(this).closest('div.givarbild');
var pic = new Image();
pic.src = $(this).attr("src");
var picHeight = pic.height;
console.log(picHeight);
if(picHeight < 60){
container.height(60);
}else if(picHeight > 60){
container.height(104);
}
});
Now, my problem is that this only works once, after clearing the caches in Config -> Performance. If I simply reload the page after clearing all caches in Drupal all DIVs are 60 px high and the container.height
value is zero in the js console (Firebug).
How can I force this little function to run after every page load?
EDITED: Hmmm, I am obviously doing something wrong here :-)... but with this code:
(function($) {
Drupal.behaviors.related_content = {
attach: function (context) {
$('div.givarbild img').each( function() {
var container = $(this).closest('div.givarbild');
var pic = new Image();
pic.src = $(this).attr("src");
var picHeight = pic.height;
console.log(picHeight);
if(picHeight < 60){
container.height(60);
}else if(picHeight > 60){
container.height(104);
}
});
}
}
})(jQuery);
... I get the exact same result. It works immediately after clearing all caches in Drupal 7 but not when I reload the page after that. Is there something fishy with my custom script itself?
EDITIED AGAIN: I post this change to my js code in case anyone else is having the same issue. This code does the same thing as the previous one, except that it works every time, and not just the first time after clearing all caches in D7. The only thing I changed was the method for getting the natural image height. It would be interesting to know why this latter code works though and not the first one... it actually works every time even without the added Drupal.behaviors
rows.
(function($) {
Drupal.behaviors.related_content = {
attach: function (context) {
$('div.givarbild img').each( function() {
var container = $(this).closest('div.givarbild');
$("<img>").attr("src", $(this).attr("src")).load(function(){
var picHeight = this.height;
console.log(picHeight);
if(picHeight < 60){
container.height(60);
}else{
container.height(104);
}
});
});
}
}
})(jQuery);