Center div on an image

Asked

Viewed 125 times

1

In a project I have an image that when the mouse is on top starts an effect on a div that is on top of the image, my problem is that often the div is not centralized, because the image has a dynamic size, and I have no more ideas how to fix it.
I currently use the following script to center the div on the image:

$('.overlay img').each(function() {
  $(this).load(function() {
    var image;
    image = $(this).parent().find('.centralize');
    image.css('marginTop', (image.parent().height() - image.height()) / 2);
  });
});

However, as I said earlier, it often doesn’t work and centralizes the image...

Test site for better understanding of the problem: http://gabrielapires.esy.es/#projects

javascript jquery

  • I think it would be better to have a css-formatted div so that everything inside is centered and use jQuery just to start the effect but not to center the content.

  • To do this I would have to set a height for the Divs in css and unfortunately I can’t do that, which holds me to the JS to center the image cynically according to the size of the parent div... =/

  • the problem then goes there. should separate the functions.

  • one function to define the center of the div and another to start the animation.

  • Note that in your example this does not happen, when the order to start the effect/animation the center of the div has already been defined. You should set this right when you upload the image.

1 answer

2


Well at first I stopped your link and saw nothing wrong (was using Chrome) then went and tested by IE 11 and saw what was saying that the text within the DIV in the areas of projects tend to stay on top times yes, times no.

At first I thought to tell you that the ideal was to put this function that you created within the event of "onMouse" that is how the user put the mouse on top make the position adjustment, because sometimes the browser can only have the actual dimension of the elements after loading the elements as well as the user would only put the mouse once loaded, but looking fast you are using a library called "overlay" which is well compressed and I thought it would be a childbirth to open it.

Then I thought that the loading time was interfering at the time of it positioning the elements, and doing the debug I saw that its function was neither being called before nor after loading (at least in IE), then looking calmly I realized that using the function of Jquery .load, but in my view this function does not enter in its context, the 'load' function serves to load an HTML (or something else) of the server and put in the specified element, it would be like an inline Ajax request, but in your case the elements of your page are already loaded do not have what, nor where to pull, because it works only with Urls, so she was making a mistake and didn’t get to read the rest of the function.

Meaning I just took out this little piece and it worked IE 11, FF 44+ and Chrome 48+, at least in my quick tests now on Core (haha), so try replacing your current function with the clean version and try again:

$('.overlay img').each(function() {
 var image;
 image = $(this).parent().find('.centralize');
 image.css('marginTop', (image.parent().height() - image.height()) / 2);
});

  • What a light you have given me now! I confused the method load with the event Onload (by the fact that a few events in jQuery are called without the On). I’ll test hj at night when I get home and I’ll set your answer! = D

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.