Ir para conteúdo

POWERED BY:

Arquivado

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

Chead

[Resolvido] Como alterar o Width?

Por , em Desenvolvimento frontend

Recommended Posts

Chead    1

Chead
Postado

Galera, tenho um banner em na qual ele tem width de 100%.

Gostaria de algum modo(talvéz com jQuery), que quando eu clicasse em um botão, o width do banner fosse para 980px.

 

Alguém saberia me ajudar com isso?

 

Tentei esse código mais não funcionou. :/

 

<script type="text/javascript">


		 $(document).ready( function() {
    	$("#botao").click(function() {
    		$f(.fullwidthbanner).css("width","100%");
    	}).click(function() {
		$(.fullwidthbanner).css("width","980px");
    	})
   })
</script>

 

Na qual a classe que contem o elemento width é a .fullwidthbanner. PS: Ele está em um stylesheet.

Compartilhar este post

Link para o post
Compartilhar em outros sites

dzanella    0

dzanella
Postado

Bom....

Eu criaria uma classe bannerFull com width de 100% e outra com 980px e alteraria o className do banner usando javascript no click do botão...

 

Segue exemplo:

 

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <script type="text/javascript">
       function mudaWidth() {
           var b = document.getElementById("banner");
           if (b.className == "bannerFull") {
               b.className = "banner980";
           }
           else
               b.className = "bannerFull";
       }
   </script>

</head>
<body>

   <div id="banner" class="bannerFull"></div>

   <input id="Button1" type="button" value="button" onclick="mudaWidth();"/>

</body>
</html>

 

CSS:

.bannerFull
{
width: 100%;
min-height: 200px;
background-color:Blue;
}

.banner980
{
width: 980px;
min-height: 200px;
background-color:Blue;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Galera, tenho um banner em na qual ele tem width de 100%.

Gostaria de algum modo(talvéz com jQuery), que quando eu clicasse em um botão, o width do banner fosse para 980px.

 

Alguém saberia me ajudar com isso?

 

Tentei esse código mais não funcionou. :/

 

<script type="text/javascript">


		 $(document).ready( function() {
    	$("#botao").click(function() {
    		$f(.fullwidthbanner).css("width","100%");
    	}).click(function() {
		$(.fullwidthbanner).css("width","980px");
    	})
   })
</script>

 

Na qual a classe que contem o elemento width é a .fullwidthbanner. PS: Ele está em um stylesheet.

 

 

Man, você precisa colocar com Aspas

 

$(".fullwidthbanner").css("width","980");

 

Amigão, fiz algo para você.

 

CTRL + C / CTRL + V e seja FELIZ ! :natalbiggrin:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}

#banner {
width:100%;
min-height:400px;
margin:50px auto 0 auto;
background-color:#333;
padding:30px 10px 0 10px;
color:#ccc;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#button").click(function(){
	$("#banner").css("width","980");
});
});
</script>
</head>

<body>
<a href="#" id="button">Clique para Redimensionar o Banner</a>

<div id="banner">
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Chead    1

Chead
Postado

Valeu galera!!! Deu certo aqui! Mto obrigado! :}

 

Galera, o problema é maior do que eu pensava...

O banner redimensionou mais as imagens ficaram todas achadas e bugado.

 

Eu precisaria dar um refresh na pagina para o banner ficar certo com a resolução menor.

Alguém faz ideia como posso resolver meu problema?

Compartilhar este post

Link para o post
Compartilhar em outros sites

dzanella    0

dzanella
Postado

você vai ter q tratar o redimensionamento das imagens tbm, ou mesmo ter uma imagem para cada tamanho...

Como o usuário poder estar usando qualquer resolução, você não sabe quantos pixel são os 100%...

O q costumo fazer nesses casos é trabalhar com um fundo de cor sólida ou Patterns e imagens com fundo transparente sobrepondo...

Pesquise sobre Backgrounds multiplos em CSS3 para saber mais detalhes...

;)

Um exemplo, usando CSS3 no meu código anterior, seria o seguinte...

 

.bannerFull
{
width: 100%;
min-height: 200px;
background-image: url("http://forum.imasters.com.br/public/style_images/imasters-2011/imasters-forum-logo.png"), url("http://subtlepatterns.com/patterns/gun_metal.png");
background-repeat: no-repeat, repeat;
background-position: center center, center;
}

.banner980
{
width: 980px;
min-height: 200px;
background-image:url("http://forum.imasters.com.br/public/style_images/imasters-2011/imasters-forum-logo.png"),url("http://subtlepatterns.com/patterns/gun_metal.png");
background-repeat: no-repeat, repeat;
background-position: center center, center;
}

 

Valeu galera!!! Deu certo aqui! Mto obrigado! :}

 

Galera, o problema é maior do que eu pensava...

O banner redimensionou mais as imagens ficaram todas achadas e bugado.

 

Eu precisaria dar um refresh na pagina para o banner ficar certo com a resolução menor.

Alguém faz ideia como posso resolver meu problema?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Chead    1

Chead
Postado

Mais é estranho, porque assim, o banner que to usando é um banner ja programado muito bom.

 

Quando ele ta com o width de 100%, ta tranquilo, e quando ta com width de 980px, ta tranquilo também.

 

Só que se eu uso um botão pra ele virar de 100% para 980px ele fica bugado. Será que tem algum problema no nesse js que to usando?

Compartilhar este post

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

Informação importante

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

  Aceito