Problema com style

CappiLevi · Janeiro 14, 2009

Olá, estou desenvolvendo um script bem simples que deverá alterar propriedades de uma div conforme o browser e a resolução que o visitante esteja utilizando.

O script funciona da seguinte maneira: com php eu verifico o tipo de browser que o visitante está utilizando, depois com javascript verifico a resolução. Para cada resolução as propriedades da div tem de ser alteradas...

O código é o seguinte:

<div id="painel_rolante">Texto qualquer</div> (Está no <body>)

O código abaixo está no <head> da página:

<?php
  
  $substring = stristr($_SERVER['HTTP_USER_AGENT'], "msie");
	
  if (!empty($substring)) 
  {
  ?>
	<script>

	document.getElementById('painel_rolante').style.position  = 'absolute';
	document.getElementById('painel_rolante').style.zIndex	= '1';
	document.getElementById('painel_rolante').style.top	   = '5px';
	
	if(screen.width > 1024)
	{
	  document.getElementById('painel_rolante').style.width   = '72%';
	  document.getElementById('painel_rolante').style.left	= '14%';
	}
	else if(screen.width == 1024)
	{
	  document.getElementById('painel_rolante').style.width   = '90.6%';
	  document.getElementById('painel_rolante').style.left	= '4.8%';
	}
	else if(screen.width < 1024)
	{
	  document.getElementById('painel_rolante').style.width   = '90.4%';
	  document.getElementById('painel_rolante').style.left	= '6.2%';
	}
	
	</script>
  <?PHP 
  } 
  else 
  { 
  ?>
	<script>

	document.getElementById('painel_rolante').style.position  = 'absolute';
	document.getElementById('painel_rolante').style.zIndex	= '1';
	document.getElementById('painel_rolante').style.top	   = '5px';
	
	if(screen.width > 1024)
	{
	  document.getElementById('painel_rolante').style.width   = '71.8%';
	  document.getElementById('painel_rolante').style.left	= '14.1%';
	}
	else if(screen.width == 1024)
	{
	  document.getElementById('painel_rolante').style.width   = '89.8%';
	  document.getElementById('painel_rolante').style.left	= '5.1%';
	}
	else if(screen.width < 1024)
	{
	  document.getElementById('painel_rolante').style.width   = '115.6';
	  document.getElementById('painel_rolante').style.left	= '6%';
	}
	
	</script>
  <?PHP
  }
  ?>

Já testei se está entrando no script com um alert. Ele entra normalmente mas não altera as propriedades da DIV.

William Bruno · Janeiro 14, 2009

z-index não tem unidade.

document.getElementById('painel_rolante').style.zIndex	= '1';

e qndo você declarar width ou height, você precisa colocar se é pixels, em, %...

document.getElementById('painel_rolante').style.width   = '115.6px';

CappiLevi · Janeiro 14, 2009

z-index não tem unidade.
document.getElementById('painel_rolante').style.zIndex	= '1';
e qndo você declarar width ou height, você precisa colocar se é pixels, em, %...
document.getElementById('painel_rolante').style.width   = '115.6px';

Bom, para começar, o z-index aceita sim o valor 1 (unidade). Aliás ele aceita valores tanto posivos como negativos.

Em relação aos atributos das tags height e width não sei se olhou direito mas no código que passei todas estão com o valor de percentagem.

CappiLevi · Janeiro 14, 2009

Bom, simplifiquei o código para ver se encontro uma solução.

O código abaixo está no <body> da página:

<div id="painel_rolante" class="painel">Texto qualquer</div>

O código abaixo está no <head> da página:

Criei um style local:

div.painel
{
  position:absolute;
  z-index:1;
  top: 5px;
}

Isso porque eles não serão alterados. Apenas será alterado as propriedades LEFT e WIDTH.

A alteração que eu fiz foi passar o código todo para javascript, para não haver nenhum tipo de conflito com o PHP. O script agora está assim:

<script language="javascript">

if (navigator.appName == "Microsoft Internet Explorer")
{ 
  if(screen.width > 1024)
  {
	document.getElementById('painel_rolante').style.width   = '72%';
	document.getElementById('painel_rolante').style.left	= '14%';
  }
  else if(screen.width == 1024)
  {
	document.getElementById('painel_rolante').style.width   = '90.6%';
	document.getElementById('painel_rolante').style.left	= '4.8%';
  }
  else if(screen.width < 1024)
  {
	document.getElementById('painel_rolante').style.width   = '90.4%';
	document.getElementById('painel_rolante').style.left	= '6.2%';
  }
}
else
{
  if(screen.width > 1024)
  {
	 document.getElementById('painel_rolante').style.width   = '71.8%';
	 document.getElementById('painel_rolante').style.left	= '14.1%';
  }
  else if(screen.width == 1024)
  {
	document.getElementById('painel_rolante').style.width   = '89.8%';
	document.getElementById('painel_rolante').style.left	= '5.1%';
  }
  else if(screen.width < 1024)
  {
	document.getElementById('painel_rolante').style.width   = '115.6%';
	document.getElementById('painel_rolante').style.left	= '6%';
  }
}

</script>

Mas ainda continuo com o problema, as propriedades WIDTH e LEFT não estão sendo alteradas.

William Bruno · Janeiro 14, 2009

else if(screen.width < 1024)
	{
	  document.getElementById('painel_rolante').style.width   = '115.6';
	  document.getElementById('painel_rolante').style.left	= '6%';
	}
	
	</script>
  <?PHP
  }
  ?>

Desculpa.. mais ali não tem unidade de medida.. nem % e nem pixels.

você acabou de editar, porque antes o teu zIndex estava: 1%

Eu não disse que "não aceita uma unidade", e sim que não aceita "unidade de medida".

você havia colocado 1%... e isso não existe. http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

Fora que esse css tb está errado:

div.topo__painel_rolante 
{
position:absolute;
z-index:1;
top: 5px;
}

Oque são esses __ ?

onde está essa div com class topo?

CappiLevi · Janeiro 14, 2009

else if(screen.width < 1024)
	{
	  document.getElementById('painel_rolante').style.width   = '115.6';
	  document.getElementById('painel_rolante').style.left	= '6%';
	}
	
	</script>
  <?PHP
  }
  ?>
Desculpa.. mais ali não tem unidade de medida.. nem % e nem pixels.
você acabou de editar, porque antes o teu zIndex estava: 1%

Eu não disse que "não aceita uma unidade", e sim que não aceita "unidade de medida".

você havia colocado 1%... e isso não existe. http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

Fora que esse css tb está errado:
div.topo__painel_rolante 
{
position:absolute;
z-index:1;
top: 5px;
}
Oque são esses __ ?
onde está essa div com class topo?

Em relação ao símbolo de percentagem realmente foi erro meu. Não tinha visto que estava fantando ali. Em relação àquilo da unidade eu interpretei mal o que você disse. E sobre a class eu só esqueci de colocar aqui, mas tenho ela no meu código. Assim, criei uma versão simplificada do código acima já com a class adicionada e renomeada para painel, em vez de topo__painel (nome da class). Veja aí.

William Bruno · Janeiro 14, 2009

Teste o seguinte:

<?php
$substring = stristr($_SERVER['HTTP_USER_AGENT'], "MSIE");
	if (!empty($substring)) 
	{
?>
<script type="text/javascript">
	window.onload = function(){
	
	var w =	screen.availWidth;
	var painel_rolante = document.getElementById('painel_rolante');
	
	alert(w);
	
	if(w == 1440)
	{
	alert('Agora entrou no IF');
	
	painel_rolante.style.width   = '90.6%';
	painel_rolante.style.left	= '4.8%';
	painel_rolante.style.backgroundColor = '#f0f';
	}
}	
</script>
<?php 
} 
?>
<style type="text/css">
#painel_rolante 
{
	position: absolute;
	z-index:1;
	top: 5px;
	background-color: #ff0;
}
</style>
</head>
<body>
  
<div id="painel_rolante">Texto qualquer</div>
</body>

Reduzi o teu código para encontrar o erro... com isso fica fácil você corrigir.

CappiLevi · Janeiro 14, 2009

Teste o seguinte:

<?php
$substring = stristr($_SERVER['HTTP_USER_AGENT'], "MSIE");
	if (!empty($substring)) 
	{
?>
<script type="text/javascript">
	window.onload = function(){
	
	var w =	screen.availWidth;
	var painel_rolante = document.getElementById('painel_rolante');
	
	alert(w);
	
	if(w == 1440)
	{
	alert('Agora entrou no IF');
	
	painel_rolante.style.width   = '90.6%';
	painel_rolante.style.left	= '4.8%';
	painel_rolante.style.backgroundColor = '#f0f';
	}
}	
</script>
<?php 
} 
?>
<style type="text/css">
#painel_rolante 
{
	position: absolute;
	z-index:1;
	top: 5px;
	background-color: #ff0;
}
</style>
</head>
<body>
  
<div id="painel_rolante">Texto qualquer</div>
</body>

Reduzi o teu código para encontrar o erro... com isso fica fácil você corrigir.

Mas eu já tinha simplificado o código numa mensagem mais acima, agradeço que dê uma olhada. Utilizei apenas javascript na simplificação. De qualquer forma vou ver seu script.

CappiLevi · Janeiro 14, 2009

Bom, simplifiquei o código para ver se encontro uma solução.

O código abaixo está no <body> da página:

<div id="painel_rolante" class="painel">Texto qualquer</div>

O código abaixo está no <head> da página:

Criei um style local:

<style type="text/css">

div.painel
{
  position:absolute;
  z-index:1;
  top: 5px;
}
</style>

Os atributos acima não serão alterados. Apenas será alterado as propriedades LEFT e WIDTH.

A alteração que eu fiz foi passar o código todo para javascript, para não haver nenhum tipo de conflito com o PHP. O script agora está assim:

<script language="javascript">

painel_rolante = document.getElementById('painel_rolante');

if (navigator.appName == "Microsoft Internet Explorer")
{ 
  if(screen.width > 1024)
  {
	painel_rolante.style.width   = '72%';
	painel_rolante.style.left	= '14%';
  }
  else if(screen.width == 1024)
  {
	painel_rolante.style.width   = '90.6%';
	painel_rolante.style.left	= '4.8%';
  }
  else if(screen.width < 1024)
  {
	painel_rolante.style.width   = '90.4%';
	painel_rolante.style.left	= '6.2%';
  }
}
else
{
  if(screen.width > 1024)
  {
	 painel_rolante.style.width   = '71.8%';
	 painel_rolante.style.left	= '14.1%';
  }
  else if(screen.width == 1024)
  {
	painel_rolante.style.width   = '89.8%';
	painel_rolante.style.left	= '5.1%';
  }
  else if(screen.width < 1024)
  {
	painel_rolante.style.width   = '115.6%';
	painel_rolante.style.left	= '6%';
  }
}

</script>

Mas ainda continuo com o problema, as propriedades WIDTH e LEFT não estão sendo alteradas.

Uma coisa que eu reparei é que o style que eu coloquei está funcionando (position, z-index e top), mas o javascript não.

William Bruno · Janeiro 14, 2009

Cara... o problema é que não está entrando nos condicionais!!

você testou o meu código?

você deve ter feito o seguinte:

</script>

<body>

<div ...

Acontece que o JS desse jeito, tenta aplicar a função em um elemento que ainda não existe, por isso adicionei o window.onload...

ai o script roda!

William Bruno · Janeiro 14, 2009

Olha... roda isso:

<script language="javascript">
window.onload = function(){
var painel_rolante = document.getElementById('painel_rolante');

if (navigator.appName == "Microsoft Internet Explorer")
{ 
  if(screen.width > 1024)
  {
	painel_rolante.style.width   = '72%';
	painel_rolante.style.left	= '14%';
	painel_rolante.style.backgroundColor = '#f00'; // vermelho se for maior que 1024
  }
  else if(screen.width == 1024)
  {
	painel_rolante.style.width   = '90.6%';
	painel_rolante.style.left	= '4.8%';
	painel_rolante.style.backgroundColor = '#ff0'; // amarelo se for igual à 1024
  }
  else if(screen.width < 1024)
  {
	painel_rolante.style.width   = '90.4%';
	painel_rolante.style.left	= '6.2%';
	painel_rolante.style.backgroundColor = '#00f'; // azul se for menor que 1024
  }
}
else
{
  if(screen.width > 1024)
  {
	 painel_rolante.style.width   = '71.8%';
	 painel_rolante.style.left	= '14.1%';
  }
  else if(screen.width == 1024)
  {
	painel_rolante.style.width   = '89.8%';
	painel_rolante.style.left	= '5.1%';
  }
  else if(screen.width < 1024)
  {
	painel_rolante.style.width   = '115.6%';
	painel_rolante.style.left	= '6%';
  }
}
}
</script>
<style type="text/css">

div.painel
{
  position:absolute;
  z-index:1;
  top: 5px;
}
</style>
</head>
<body>
<div id="painel_rolante" class="painel">Texto qualquer</div>

Eu postei o treco simplificado com a solução.. que era esperar o onload..

CappiLevi · Janeiro 14, 2009

[Resolvido parcialmente] Fiz como você disse mas continua a não funcionar. E como você disse, não está entrando no script porque não está sendo chamado em lado nenhum.

Mas, com a sua dica eu pude resolver o problema. Eu fiz assim:

No <head> fica assim:

Assim como antes o style com os atributos que não serão alterados:

<style type="text/css">

div.cl_painel 
{
  position:absolute;
  z-index:1;
  top: 5px;
}

-------------------------------------------------------------------------------------------------------------------

Também no <head> a função para alterar a div conforme o browser e a resolução que o visitante está utilizando:

<script language="javascript">

function painel()
{

painel_rolante = document.getElementById('painel_rolante');

if (navigator.appName == "Microsoft Internet Explorer")
{
  if(screen.width > 1024)
  {
	painel_rolante.style.width   = '72%';
	painel_rolante.style.left	= '14%';
  }
  else if(screen.width == 1024)
  {
	painel_rolante.style.width   = '90.6%';
	painel_rolante.style.left	= '4.8%';
  }
  else if(screen.width < 1024)
  {
	painel_rolante.style.width   = '90.4%';
	painel_rolante.style.left	= '6.2%';
  }
}
else
{
  if(screen.width > 1024)
  {
	 painel_rolante.style.width   = '71.8%';
	 painel_rolante.style.left	= '14.1%';
  }
  else if(screen.width == 1024)
  {
	painel_rolante.style.width   = '89.8%';
	painel_rolante.style.left	= '5.1%';
  }
  else if(screen.width < 1024)
  {
	painel_rolante.style.width   = '115.6%';
	painel_rolante.style.left	= '6%';
  }
}
}
</script>

--------------------------------------------------------------------------------------------------------------------

No body vamos chamar a função "painel" acima da seguinte forma:

<body onLoad="java script: painel();">

A div deverá estar dentro do <body>

<div id="painel_rolante" class="cl_painel">Texto qualquer</div>

--------------------------------------------------------------------------------------------------------------------

E por fim, quero agradecer ao William Bruno pela ajuda. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Mas agora o problema é no Internet Explore...

OBS: Como faço para anexar arquivos aqui no Imasters?

--------------------------------------------------------------------------------------------------------------------

CappiLevi · Janeiro 14, 2009

Não está funcionando no Internet Explore, apenas no Firefox. Pelo que eu percebi, no Explore não entra na função. O <body onLoad="java script: painel();"> só está funcionando no Firefox. Coloquei um alert na função: alert (navigator.appName); e só aparece o alerta no Firefox.

William Bruno · Janeiro 14, 2009

E porque você precisa diferenciar os navegadores?

tem como arrumar certas coisas no CSS...

CappiLevi · Janeiro 14, 2009

Não está funcionando no Internet Explore, apenas no Firefox. Pelo que eu percebi, no Explore não entra na função. O <body onLoad="java script: painel();"> só está funcionando no Firefox. Coloquei um alert na função: alert (navigator.appName); e só aparece o alerta no Firefox.

Encontrei uma solução!

Bom, como no script anterior, no Firefox para a função ser chamada utilizamos:

<body onLoad="java script: painel_rolante();">

Mas assim a função não será chamada no Internet Explore. Assim, temos de acrescentar um atributo à função em javascript (dica do Willian Bruno):

[color="#FF0000"]window.onload =[/color] function painel_rolante()
{

...

CappiLevi · Janeiro 14, 2009

[Resolvido]

E porque você precisa diferenciar os navegadores?

tem como arrumar certas coisas no CSS...

Porque o css que eu utilizo fica de um jeito no Firefox e no Explore de outro... E eu quero quer fique igual nos 2.

Mas eu encontrei uma solução!

Bom, como no script anterior, no Firefox para a função ser chamada utilizamos:

<body onLoad="java script: painel_rolante();">

Mas assim a função não será chamada no Internet Explore. Assim, temos de acrescentar um atributo à função em javascript (dica do William Bruno):

window.onload = painel_rolante;

function painel_rolante()
{

...

Arquivado

Problema com style

Recommended Posts

CappiLevi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

CappiLevi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

CappiLevi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

CappiLevi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

CappiLevi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

CappiLevi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

CappiLevi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

CappiLevi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

CappiLevi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

CappiLevi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante