Como mudar o texto ao atualizar uma página?

[fearforscreams 0]

Bom dia!

 

Estava programando um layout para uma espécie de portfolio, e, destaquei uma área para comentários dos meus clientes. Então, eu pensei em fazer uma espécie de texto rotativo para alterar toda a vez que a página fosse atualizada.

 

Ou seja;

 

Em uma Div fixa, já nomeada por um ID.

Dentro possuem outros dois campos de texto (o conteúdo) e o nome da pessoa.

 

Exemplo:

 

<div id="caixa-clientes"> (div principal a onde terá a área, com as widths, heights, paddings e afins)

<div id="caixa-clientes-titulo"> (formatação do título da postagem)

Texto do cliente. ~ (os padrões em CSS já estão estabelecidos na "#caixa-clientes")

<b>nome do cliente</b> (segue a mesma parada que a linha anterior, só que, apenas, um bold básico para destaque).

 

Certo. até aqui tudo bem...

 

Agora, eu até criaria uma:

caixa-clientes1

caixa-clientes2

caixa-clientes3

ou... todos os mesmos mantendo o mesmo id (aí, eu mudaria para uma class, para poder se repetir).

 

E a grande pegada é:

 

Toda a vez que atualizar a página, mudar (de forma aleatória), entre estas divs. Uma hora a div 1, depois a 3, depois a 2, e assim vai indo...

Sei que dá para fazer por JavaScript, mas, a dúvida é: COMO?

 

Sou ruim na arte do JavaScript, por não ter muito tempo para entender. Eu entendo a lógica, mas, não ao ponto de conseguir recriar algo neste patamar (mesmo que seja fácil), alguém poderia me ajudar?

 

obrigado!

[rodrigopa 7]

Fiz um exemplo aqui, veja se é isso mesmo e tente adaptar ao seu código:

<script>
window.onload = function() {
	var div = document.getElementsByClassName('client');
	var arr = [];
	var randomArray = function(){ 
		return Math.random()-0.5;
	}
	for(var i = 0; i < div.length; i++) {
		arr.push(div[i].cloneNode(true));
	}
	arr.sort(randomArray);
	document.getElementById('tudo').innerHTML = '';
	for(var array in arr) {
		document.getElementById('tudo').appendChild(arr[array]);
	}
}
</script>
<div id="tudo">
	<div class="client">a</div>
	<div class="client">b</div>
	<div class="client">c</div>
</div>

[fearforscreams 0]

Vou testar e já te digo.

 

Fiz um exemplo aqui, veja se é isso mesmo e tente adaptar ao seu código:

<script>
window.onload = function() {
	var div = document.getElementsByClassName('client');
	var arr = [];
	var randomArray = function(){ 
		return Math.random()-0.5;
	}
	for(var i = 0; i < div.length; i++) {
		arr.push(div[i].cloneNode(true));
	}
	arr.sort(randomArray);
	document.getElementById('tudo').innerHTML = '';
	for(var array in arr) {
		document.getElementById('tudo').appendChild(arr[array]);
	}
}
</script>
<div id="tudo">
	<div class="client">a</div>
	<div class="client">b</div>
	<div class="client">c</div>
</div>

 

Então, Rodrigo, eu cheguei a testar e etc, e na sua programação, você apenas altera a ordem entre as três divs.

do A, B, C, para B, C, A, A,C,B, e etc...

 

Mas ainda sim, mostram as três divs.

Eu gostaria que não mostrassem as Divs, tipo, das três, só aparecesse uma.

E esta uma que aparecesse, fosse aleatória. (uma das três, sem ordem)

[rodrigopa 7]

Ah sim, você quer apenas uma, essa não é a melhor solução, mas segue:

<script>
window.onload = function() {
	var div = document.getElementsByClassName('client');
	var arr = [];
	var randomArray = function(array){ 
		return array[Math.floor(Math.random() * array.length)];
	}
	for(var i = 0; i < div.length; i++) {
		arr.push(div[i].cloneNode(true));
	}
	var random = randomArray(arr);
	var tudo = document.getElementById('tudo');
	tudo.innerHTML = '';
	tudo.style.display = 'block';
	tudo.appendChild(random);
}
</script>
<div id="tudo" style="display:none">
	<div class="client">a</div>
	<div class="client">b</div>
	<div class="client">c</div>
</div>

 

Ali a div começa escondida para não mostrar os 3 elementos antes de carregar a página. Quando a página terminar de carregar ele mostra a div com apenas 1 dos elementos escolhido aleartoriamente.

[fearforscreams 0]

Ah sim, você quer apenas uma, essa não é a melhor solução, mas segue:

<script>
window.onload = function() {
	var div = document.getElementsByClassName('client');
	var arr = [];
	var randomArray = function(array){ 
		return array[Math.floor(Math.random() * array.length)];
	}
	for(var i = 0; i < div.length; i++) {
		arr.push(div[i].cloneNode(true));
	}
	var random = randomArray(arr);
	var tudo = document.getElementById('tudo');
	tudo.innerHTML = '';
	tudo.style.display = 'block';
	tudo.appendChild(random);
}
</script>
<div id="tudo" style="display:none">
	<div class="client">a</div>
	<div class="client">b</div>
	<div class="client">c</div>
</div>

 

Ali a div começa escondida para não mostrar os 3 elementos antes de carregar a página. Quando a página terminar de carregar ele mostra a div com apenas 1 dos elementos escolhido aleartoriamente.

 

Vamos lá que agora deu problemas. HAHAHHAHA

 

Primeiro, eu testei em um .html a parte e deu tudo perfeitamente perfeito.

Achei incrível!

 

Na hora de introduzir no meu HTML, ouve alguns problemas, mas, que logo foram solucionados, porque eu havia esquecido de "fechar" a última div.

HAHHAHA

 

Enfim, MUITO obrigado, MESMO!

 

Deu SUPER certo! *-*

 

Vou te dar Respect+ nos seus posts, para te ajudar. Agradeço MESMO! *-*