1

Em um projeto possuo uma imagem que quando o mouse está em cima inicia um efeito em uma div que está por cima da imagem, meu problema é que muitas vezes a div não fica centralizada, pelo fato de a imagem ter um tamanho dinâmico, e não tenho mais ideias de como concertar isso.
Atualmente utilizo o seguinte script para centralizar a div na imagem:

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

Porém, como disse anteriormente, muitas vezes ele não funciona e não centraliza a imagem...

Site de teste para melhor entendimento do problema: http://gabrielapires.esy.es/#projetos

5
  • acho que o melhor seria ter uma div formatada com css de maneira que tudo o que estiver no sei interior esteja centrado e usar o jQuery apenas para iniciar o efeito mas não para centrar o conteúdo.
    – helderk
    Commented 8/02/2016 às 11:39
  • Para fazer isso eu teria que setar uma altura para as divs no css e infelizmente eu não posso fazer isso, o que me prende ao JS para centralizar a imagem cinicamente de acordo com o tamanho da div pai... =/ Commented 8/02/2016 às 12:11
  • o problema então passa por ai. deve separar as funções.
    – helderk
    Commented 8/02/2016 às 12:14
  • primeiro uma função para definir o centro do div e outra para iniciar a animação.
    – helderk
    Commented 8/02/2016 às 12:16
  • repare que no seu exemplo isso não acontece, quando da ordem de iniciar o efeito/animação o centro da div já foi definido. Deve definir isso logo quando carrega a imagem.
    – helderk
    Commented 8/02/2016 às 12:17

1 Resposta 1

2

Bem a principio acessei seu link e não vi nada de errado (estava usando o Chrome) dai fui e testei pelo IE 11 e vi o que estava dizendo que o texto dentro da DIV na áreas de projetos tendem a ficar no topo vezes sim, vezes não.

A principio pensei em te dizer que o ideal era colocar essa função que você criou dentro do evento de "onMouse" ou seja assim que o usuário colocar o mouse em cima fazer o ajuste de posição, pois as vezes o navegador só consegue ter a dimensão real dos elementos após carregar os elementos assim como o usuário só iria por o mouse assim que carregado, porém olhando rápido você esta usando um biblioteca chamada "overlay" que esta bem comprimida e achei que ia ser um parto abrir ela.

Ai em seguida pensei que o tempo de carregamento estava interferindo na hora de ele posicionar os elementos, e fazendo o debug vi que sua função nem estava sendo chamada nem antes nem depois do carregamento (pelo menos no IE), ai olhando com calma percebi que esta usando a função do JQuery .load, porém ao meu ver essa função não entra nesse seu contexto, a função 'load' serve para carregar um HTML (ou outra coisa) do servidor e colocar no elemento indicado, seria tipo uma requisição Ajax inlinha, porém no seu caso os elementos da sua página ja estão carregados não tem o que, nem de onde puxar, pois ela funciona apenas com URLs, sendo assim ela estava dando erro e não chegava a ler o resto da função.

Ou seja eu apenas tirei esse pequeno pedaço e a coisa funcionou IE 11, FF 44+ e Chrome 48+, pelo menos nos meus testes rápidos agora no corujão (haha), então tente substituir a sua função atual pela versão limpa e tente novamente:

$('.overlay img').each(function() {
 var image;
 image = $(this).parent().find('.centralize');
 image.css('marginTop', (image.parent().height() - image.height()) / 2);
});
1
  • Que luz você me deu agora! Eu confundi o método load com o evento OnLoad (pelo fato de a alguns eventos no jQuery serem chamados sem o On). Vou testar hj de noite quando chegar em casa e já marco sua resposta! =D Commented 9/02/2016 às 13:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .