Publicado em 5 de dez.

Acrecentar tamanho (width) no Body ou em uma Div

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.

Discussão (7)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

klonder· 6 de dez.

Link quebrado.

v i n i c _· 6 de dez.

>
Link quebrado.

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

Henrique Barcelos· 6 de dez.

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 _· 6 de dez.

>
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· 6 de dez.

Posta o script ai...

v i n i c _· 6 de dez.

>
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· 6 de dez.

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"](http://forum.imasters.com.br/uploads//photo-72662.png) alt="The last work" /><img src="[http://forum.imasters.com.br/uploads//photo-72662.png"](http://forum.imasters.com.br/uploads//photo-72662.png) alt="The last work" />
 <img src="[http://forum.imasters.com.br/uploads//photo-72662.png"](http://forum.imasters.com.br/uploads//photo-72662.png) alt="The last work" /><img src="[http://forum.imasters.com.br/uploads//photo-72662.png"](http://forum.imasters.com.br/uploads//photo-72662.png) alt="The last work" />
 <img src="[http://forum.imasters.com.br/uploads//photo-72662.png"](http://forum.imasters.com.br/uploads//photo-72662.png) alt="The last work" /><img src="[http://forum.imasters.com.br/uploads//photo-72662.png"](http://forum.imasters.com.br/uploads//photo-72662.png) alt="The last work" />
 <img src="[http://forum.imasters.com.br/uploads//photo-72662.png"](http://forum.imasters.com.br/uploads//photo-72662.png) alt="The last work" /><img src="[http://forum.imasters.com.br/uploads//photo-72662.png"](http://forum.imasters.com.br/uploads//photo-72662.png) alt="The last work" />
 <img src="[http://forum.imasters.com.br/uploads//photo-72662.png"](http://forum.imasters.com.br/uploads//photo-72662.png) alt="The last work" /><img src="[http://forum.imasters.com.br/uploads//photo-72662.png"](http://forum.imasters.com.br/uploads//photo-72662.png) alt="The last work" />
 <img src="[http://forum.imasters.com.br/uploads//photo-72662.png"](http://forum.imasters.com.br/uploads//photo-72662.png) alt="The last work" /><img src="[http://forum.imasters.com.br/uploads//photo-72662.png"](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