Acrecentar tamanho (width) no Body ou em uma Div

[v i n i c _ 0]

Aew, galera.

 

Precisava da ajuda de vocês para resolver um problema que eu não estou conseguindo fazer. Vou explicar o que eu quero.

 

1 - to fazendo um portfolio onde o conteúdo dele vai ser horizontal;

2 - queria dar um valor na largura do body ou na div onde se encontra os conteudos, de acordo com a quantidade de trabalhos que vai conter no site;

3 - esses conteúdos tem um valor fixo para todos eles, com isso a largura do site seria a quantidade de trabalhos vezes a largura deles (nº de jobs * 1104);

4 - os trabalhos estao dentro de uma div com id=main e eles dentro de uma div com class=job

[color="#ff0000"]<div id="main">
<div class="job web">conteúdo</div>
<div class="job web">conteúdo</div>
</div>[/color]

5 - então a parada seria, o javascript pegar a quantidade de div job dentro da div main e multiplicar pelo valor fixo da largura deles, e colocar esse resultado na largura do body ou da div main.

 

 

Acho que expliquei tudo que eu queria, por favor me ajudem nessa questão.

E não sei se essa é a melhor maneira de se fazer o que eu quero, caso alguem tenha alguma sugestao será bem vinda.

Pra verem +ou- como ta a estrutura do site, vejam em http://viniciusoliveira.com.br/port

 

Qualquer dúvida falem ai e agradeço desde já a ajuda de vcs.

 

 

Abraços,

Vinicius.

[klonder 14]

Link quebrado.

[v i n i c _ 0]

Link quebrado.

 

Não ta não, acho que você deve ter visto qdo eu devia ta subindo algum arquivo.

[Henrique Barcelos 290]

Use jQuery...

 

var num_filhos = $("#ID da div pai").children().size();
$("#ID da div pai").width(num_filhos*1104+"px");

[v i n i c _ 0]

Use jQuery...

 

var num_filhos = $("#ID da div pai").children().size();
$("#ID da div pai").width(num_filhos*1104+"px");

eu usei jQuery, fiz da seguinte forma...

 

<!--

//quando o documento foi carregado, faça...

$(document).ready(function(){

 

//setei a variavel

var widthTotal = 0;

 

//rodo o numero de vezes que um item com a classe job existir na tela

$(".job").each(function() {

//pega a width total e soma a width do item atual (no caso a div)

widthTotal = widthTotal + 1104;

});

 

//diz q a width do body eh a width total

$("body").width(widthTotal+$(window).width());

 

});

 

 

//-->

 

funcionou redondo, mas o problema de usar o jquery, é que ele bugou o meu javascript de caucular a posição da pagina, e tipo, eu nao faço ideia de como fazer ele em jQuery

=/

 

 

mas valewww pela ajuda.

[srnetcave 1]

Posta o script ai...

[v i n i c _ 0]

Posta o script ai...

 

Foi esse que eu postei ai em cima...

vou por o código todo

 

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
		<!--
			//quando o documento foi carregado, faça...
			$(document).ready(function(){
				
				//setei a variavel
				var widthTotal = 0;
				
				//rodo o numero de vezes que um item com a classe job existir na tela
				$(".job").each(function() {
					//pega a width total e soma a width do item atual (no caso a div)
					widthTotal = widthTotal + 1104;
				});
				
				//diz q a width do body eh a width total
				$("body").width(widthTotal+$(window).width());


			});


		//-->
			
</script>

[Thiago Retondar 18]

Fiz aqui rapidinho só para você ver como pode ser feito:

 

JavaScript

window.onload = function(){
	var container = document.getElementById("container"); //div pai
	var content = document.getElementById("content"); //div que vai ser colocado os conteúdos, no seu caso os trabalhos
	var jobs = content.getElementsByTagName("img"); //e aqui, ele pegou todas as tags IMG da div#content
	
	return container.style.width = jobs.length * 1104 + "px"; //retorna: a largura da div pai vai ser igual ao número de jobs (jobs.length) vezes 1104
};

HTML

<div id="container">
	<div id="content">
		<img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" /><img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" />
		<img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" /><img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" />
		<img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" /><img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" />
		<img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" /><img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" />
		<img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" /><img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" />
		<img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" /><img src="http://forum.imasters.com.br/uploads//photo-72662.png" alt="The last work" />
	</div>
</div>

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif