Ir para conteúdo

POWERED BY:

Arquivado

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

ebotega

[Resolvido] Mudar a posição de uma div no javascript

Por , em Javascript

Recommended Posts

ebotega    2

ebotega
Postado

Olá pessoal, estou precisando de uma mãozinha para alterar um código, acho que pra quem conhece deve ser fácil.

 

Refere-se a um site que tem um texto e umas bandeiras em baixo desse texto, o que eu quero é colocar essas bandeiras em cima do texto. Até dei uma olhada na net procurando algo sobre o append, achei que pudesse ser aí o 'problema', mas admito que preciso de uma força maior no assunto.

 

 

O html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<title>Tradução de texto em diversos idiomas usando a API Ajax de idioma do Google</title>

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="jquery"/>
<meta name="keywords" content="jquery" />
<meta name="robots" content="all, index, follow" />

   <link href="css/default.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-translate-1.3.9.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div class="translate">
	<h1>Tablet da fabricante do BlackBerry recebe críticas antes de lançamento</h1>
	<p>
		O tablet PlayBook, da Research In Motion, recebeu críticas antes do seu lançamento nos Estados Unidos. O aparelho de 7 polegadas e compatível apenas com conexão wi-fi tem o mesmo preço do iPad, líder de mercado, e enfrenta dura competição de uma série de aparelhos com Android, sistema operacional do Google.<br />
		A maioria dos analistas que testaram o tablet ficou impressionada com a capacidade do aparelho de abrir sites baseados em Flash, assim como transmitir imagens de alta definição – como um filme – para uma TV enquanto rodava algum outro programa em sua própria tela. Essas duas funções não estão disponíveis no iPad. Porém, os analistas enfatizaram características que o PlayBook não tem.
	</p>
</div>
</body>
</html>

 

 

O CSS

 

div.idiomas a{ 
display: block;  
float: left;
text-indent:-9999px;
font-size: 1px;
width: 16px;
height: 11px;
margin-right: 10px;
}
div.idiomas span{ 
vertical-align:top; 
font-size: 13px;
}
div.idiomas a.translate_en{ background: url('../img/idioma/en.gif') no-repeat; }
div.idiomas a.translate_es{ background: url('../img/idioma/es.gif') no-repeat; }
div.idiomas a.translate_fr{ background: url('../img/idioma/fr.gif') no-repeat; }
div.idiomas a.translate_it{ background: url('../img/idioma/it.gif') no-repeat; }
div.idiomas a.translate_pt{ background: url('../img/idioma/pt.gif') no-repeat; }
div.opcoes_idiomas { 
padding: 5px 0 0 15px;
width: 124px;
}
div.opcoes_idiomas a{ margin-right: 7px; }

 

 

O Javascript

 

/**
* Inicializa as funções assim que os elementos (DOM) são carregados
*/
jQuery(function() {
BaseProject._init();
});

var BaseProject = {
/**
* Função de chamada das outras funções que inicializam o site
*/
_init: function() {
	BaseProject._translate();
},

/**
* Traduzir para outros idiomas
*/
_translate: function() {
	var arrIdioma = new Array();

	arrIdioma.push(new Array('en','English','Translate to English','Translating','Translation error'));
	arrIdioma.push(new Array('pt','Português','Traduzir para português','Traduzindo','Erro ao traduzir'));
	arrIdioma.push(new Array('es','Spañol','Traducir al spañol','Traducir','Error de traducción'));
	arrIdioma.push(new Array('fr','French','Traduire en français','Traduire','Erreur de traduction'));
	arrIdioma.push(new Array('it','Italian','Traduci in italiano','Tradurre','Errore di traduzione'));

	var html_translate = '';
	html_translate += '<div class="opcoes_idiomas idiomas">';
		for(i=0;i<arrIdioma.length;i++){
			html_translate += '	<a href="#" class="translate_'+arrIdioma[i][0]+'" rel="'+arrIdioma[i][0]+'" title="'+arrIdioma[i][2]+'">'+arrIdioma[i][1]+'<\/a>';
		}
	html_translate += '<\/div>';
	$('.translate').each(function(){ 
		$(this).append(html_translate);
	});
	$('.opcoes_idiomas a').click(function(){
		var idioma = $(this).attr('rel');
		var containerLinks = $(this).parent();
		containerLinks.find('a').hide();

		for(i=0;i<arrIdioma.length;i++){
			if(idioma == arrIdioma[i][0]){
				var traduzindo = arrIdioma[i][3];
				var erro_ao_traduzier = arrIdioma[i][4]; 
			}
		}

		containerLinks.append('<span>'+traduzindo+'...<\/span>');

		containerLinks.parent().translate(idioma,{
			complete: function(){
				containerLinks.find('span').remove();
				containerLinks.find('a').show();
			},
			timeout: 20000,
			onTimeout: function(){
				containerLinks.find('span').remove();
				containerLinks.append('<span>'+erro_ao_traduzier+'<\/span>');
				window.setTimeout(function(){
					containerLinks.find('span').remove();
					containerLinks.find('a').show();
				},3000);
			}
		});
		return false;
	});
}
};

Compartilhar este post

Link para o post
Compartilhar em outros sites

ebotega    2

ebotega
Postado

Troque append por prepend.

 

Pois é... não foi cara. Tente até tirar o append mas as bandeiras continuam na parte de baixo.

Mais alguma ideia? :huh:

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

Vai no CSS e define:

div.translate {
  position: relative;
}

 

Isso faz com que os elementos contidos dentro das divs com classe translate, quando setados com posição absoluta, sejam relativos à esta div.

 

Logo, defina:

div.idiomas {
  position: absolute;
  top: 0px;
  left: VALORpx;
}

 

Vá mudando o VALOR até achar o ideal, qualquer coisa, posta aew. ^_^

Compartilhar este post

Link para o post
Compartilhar em outros sites

ebotega    2

ebotega
Postado

aí JCMais, a dica do css foi na mosca, até estava conseguindo setar as bandeiras acima, mas elas "caminhavam" e, dependendo do tamanho do texto, desciam, apliquei o css que você postou e ficou certinho.

 

valeu cara. :joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito