Publicado em 30 de nov.

[Resolvido] Como alterar o Width?

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.

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

dzanella· 30 de nov.

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;
}

Bru_ce· 30 de nov.

>
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>

Chead· 30 de nov.

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?

dzanella· 3 de dez.

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?

Chead· 4 de dez.

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?

Bru_ce· 4 de dez.

Você tem que alterar o tamanho da imagem proporcionalmente ao seu banner !