Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

B-runo

Problema com offset().left

Recommended Posts

Boa tarde, sem muita enrolação vou direto ao assunto.

$(function() {
      //////aqui não está funcionando
	$("div.borda-topo").prepend('<i class="material-icons"></i>');
	padrao_left = $("nav #nav-mobile li.ativo").offset().left;
	padrao_width = $("nav #nav-mobile li.ativo").width();

	$("div.borda-topo i").stop().animate({'left':padrao_left, 'width':padrao_width}, 0);

      ////////////////////
	
	$("nav li").hover(
		function() {
			vwidth = $(this).width();
			vleft = $(this).offset().left;
			$("div.borda-topo i").stop().animate({'left':vleft, 'width':vwidth}, 200);
		},
		function() {
			$("div.borda-topo i").stop().animate({'left':padrao_left, 'width':padrao_width}, 100);
		}
	
	);
});

Esse codigo move uma setinha acima dos botoes do menu de acordo com o que o mouse esta em cima.

a pagina em que o usuario esta o botao fica com uma classe ativo;

então eu queria q quando a pagina carregasse, a setinha ficasse em cima do botao com a classe ativo para indicar a pagina em que ele está.

Já tentei isso ali em cima mas sempre que a pagina carrega a seta fica um pouco errada.

Para entenderem deem uma olhada no meu aqui, onde estou tentando usar esse exemplo http://hexata.com/volpato.

Obs: o hover esta funcionando normalmente. E quando entrar na pagina aperte f5 para ver.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, boa noite !

Quando a sua tag <i> esta em cima do link home, ela tem a seguinte configuração no css inline:

left: 638.563px; width: 73px;

Então é fácil, é só você fazer com que esse estivo fique valendo assim que a pagina carrega. Para fazer isso com jQuery, use o .css(). Algo do tipo:

$(".material-icons").css( {"left" : "638.563px", "width": "73px"} ).

Espero ter ajudado. Confira a sintaxe disso, eu estou escrevendo sem testar kkkk. valeu

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, boa noite !

 

Quando a sua tag <i> esta em cima do link home, ela tem a seguinte configuração no css inline:

 

left: 638.563px; width: 73px;

 

Então é fácil, é só você fazer com que esse estivo fique valendo assim que a pagina carrega. Para fazer isso com jQuery, use o .css(). Algo do tipo:

 

$(".material-icons").css( {"left" : "638.563px", "width": "73px"} ).

 

Espero ter ajudado. Confira a sintaxe disso, eu estou escrevendo sem testar kkkk. valeu

Sim mas estou tentando fazer um site responsivo por isso uso jquery para mover a seta, pois se usasse como voce diz quando redimenssionasse a tela não daria certo

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.