Two elements with the same height with jQuery - all the time

Question

Two elements with the same height with jQuery - all the time

Navigation

#1 by (2 votes)

3

I'm taking advantage of a gallery system that I found on the web where, depending on the proximity of the mouse image, it widens proportionally.

Link: Image Gallery

Well, I have adapted the code to be responsive (and as you can see it is under construction) and there is no apparent problem. My problem starts when you change the resolution (either by zooming in on the browser, or by 'spinning' your tablet or cell phone). When you move the mouse or click (with touchs) on top of any image, in its resolution whose page was loaded, with the description nothing happens, but when you zoom in, you can already see all the misalignment of the description with the images . The height of the image is equal to the width. The width is relative.

Imagine a single solution to my problem: using jQuery. I program with a basic level - intermediate in this framework and I can do good things. But I have no idea how, when you change the resolution, you change the size of the description automatically. So far, I use this code to make them both equal:

$(document).ready(function(){
$(".gallery-description").height( $(".gallery-thumbs li a img").height());
})

I hope someone can help me by improving the function or giving another suggestion! Thank you. :)

javascript jquery html5 css css3

asked by anonymous 06.09.2014 / 20:40

1 answer

Python error access is denied How can I not serialize some attributes in RESTful (C # + WCF + JSON) calls?

score 2 · Accepted Answer

You can use the jQuery function .resize() :

$(window).resize(function(){
    $(".gallery-description").height( $(".gallery-thumbs li a img").height());
});

Example: FIDDLE

What this function does is trigger an event each time a difference in browser window resolution is detected. The bad side is that if you fire some heavy function, it will run at each pixel changed in screen size, which can affect performance.