Jump to content


glauciarezende

Member Since 09/06/2009
Offline Last Active 08/07/2009, 10:09
-----

Topics I've Started

Aumentar/diminuir Fonte - No Ie 6 Não Funciona.

06/07/2009, 20:36

Pessoal,

Estou com um problema cabeludo e arrepiado, é o seguinte:

Tenho um script que aumenta e diminui fonte (resize font), que funciona em todos os outros Browsers ... menos no IE 6. :angry:

vejam:

Dentro do meu html (ops, php): tá assim:

dentro do
<head>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/glaucia/javascript/md_stylechanger.js"></script>
</head>

dentro do <body> tá assim:

<div id="fonte">
<script type="text/javascript">
//<![CDATA[

document.write('<h3><?php echo JText::_('Tamanho do texto:'); ?></h3><p>');

document.write('<a href="index.php" title="<?php echo JText::_('Increase size'); ?>"onclick="changeFontSize(2); return false;" class="larger"><?php echo JText::_('&nbsp;'); ?></a><span class="unseen">&nbsp;</span>');

document.write('<a href="index.php" title="<?php echo JText::_('Decrease size'); ?>"onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_('&nbsp;'); ?></a><span class="unseen">&nbsp;</span>');

document.write('<a href="index.php" title="<?php echo JText::_('Revert styles to default'); ?>"onclick="revertStyles(); return false;" class="reset"><?php echo JText::_('&nbsp;'); ?></a></p>');

//]]>
</script>
</div>

Já no script linkado tá assim:

var prefsLoaded = false;
var defaultFontSize =100;
var currentFontSize = defaultFontSize;

function revertStyles(){

	currentFontSize = defaultFontSize;
	changeFontSize(0);

}

function toggleColors(){
	if(currentStyle == "White"){
		setColor("Black");
	}else{
		setColor("White");
	}
}

function changeFontSize(sizeDifference){
	currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 5);

	if(currentFontSize > 220){
		currentFontSize = 220;
	}else if(currentFontSize < 60){
		currentFontSize = 60;
	}

	setFontSize(currentFontSize);
};

function setFontSize(fontSize){
	var stObj = (document.getElementById) ? document.getElementById('content_area') : document.all('content_area');
	document.body.style.fontSize = fontSize + '%';

	//alert (document.body.style.fontSize);
};


function createCookie(name,value,days) {
  if (days) {
	var date = new Date();
	date.setTime(date.getTime()+(days*24*60*60*1000));
	var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
};

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
	var c = ca[i];
	while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
};

window.onload = setUserOptions;

function setUserOptions(){
	if(!prefsLoaded){

		cookie = readCookie("fontSize");
		currentFontSize = cookie ? cookie : defaultFontSize;
		setFontSize(currentFontSize);

		prefsLoaded = true;
	}

}

window.onunload = saveSettings;

function saveSettings()
{
  createCookie("fontSize", currentFontSize, 365);
}

FIM


Desculpa enviar tooooooodo o script, eu sou iniciante nesse negócio de javascript. Quero, Preciso, Aprendeeeer! Ai que dói minha cabeça! :pinch:

Rodapé X Menu Acordion

02/07/2009, 01:14

Olá, pessoal!

Tenho um site na LocaWeb, feito em Joomla. O layout está com problema entre o menu acordion e o rodapé. Acontece que se eu tiro o height (altura está em 750px) da minha div principal (um container)... o bendito rodapé cola no meu menu acorrdion... se eu não tiro essa altura da div, quando os outros textos passam de 750px eles atropelam meu rodapé... Já postei tempos atrás o problema, pensei que tinha resolvido...dai o cliente manda um textão e ele sobrepõe o rodapé... se tiro o 750px (height da div principal) fica ok onde não tem menu acordion, mas onde tem o menu acordion ele cola (sobe) no menu.

O site é esse: http://www.wimpel.com.br/

As seções que usam menu acordion (produtos, manuais e ass. técnica).

O código do index.php :

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>


<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>
<jdoc:include type="head" />
<link href="<?php echo $this->baseurl ?>http://wimpel.com.br/favicon.ico" type="image/x-icon" rel="shortcut icon">
<link href="<?php echo $this->baseurl ?>http://wimpel.com.br/favicon.ico" type="image/x-icon" rel="icon">
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/wimpel/javascript/md_stylechanger.js"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/wimpel/css/estilo.css" type="text/css" />
</head>

<body> 

	<div id="tudo">
	
		<div id="menu">
			<jdoc:include type="modules" name="mod_mainmenu" />
		</div>
	
	
	<div id="principal">
				
	<div id="artigos">	
	
	<jdoc:include type="modules" name="slides"/>
	
					<div id="fonte">
						<script type="text/javascript">
						//<![CDATA[
						document.write('<h3><?php echo JText::_('Tamanho da Letra:'); ?></h3><p class="fonte">');				document.write('<a href="index.php" title="<?php echo JText::_('Increase size'); ?>"onclick="changeFontSize(2); return false;" class="larger"><?php echo JText::_('&nbsp;'); ?></a><span class="unseen">&nbsp;</span>');
						document.write('<a href="index.php" title="<?php echo JText::_('Decrease size'); ?>"onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_('&nbsp;'); ?></a><span class="unseen">&nbsp;</span>');
						document.write('<a href="index.php" title="<?php echo JText::_('Revert styles to default'); ?>"onclick="revertStyles(); return false;" class="reset"><?php echo JText::_('&nbsp;'); ?></a></p>');
						//]]>
						</script>
					</div>
				
							<div id="navega">
								<p><?php echo JText::_('Voc&ecirc; est&aacute; aqui:');?>
								<jdoc:include type="module" name="mod_breadcrumbs" style="none" />
								</p>
							</div>

									<jdoc:include type="modules" name="NOTICIAS"/>
									<jdoc:include type="modules" name="conteudo"/>
									<jdoc:include type="component" />
</div>		

									<div id="menus">
									<jdoc:include type="modules" name="menu_produtos" />	
									<jdoc:include type="modules" name="menu_noticias" />	
									<jdoc:include type="modules" name="menu_manuais" />	
									</div>

									<div id="menu_assis">
									<jdoc:include type="modules" name="menu_assis" />
									</div>
									
									
									
								
																	
				</div>	


										<div id="clear">&nbsp;</div>
		
								<jdoc:include type="modules" name="fim"/>					
						
						
</div>
	
</body>
</html>

E o meu CSS:

* {
margin:0;
padding:0;
}

body {
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
background: #2f7ed5 url(../images/fundo-wimpel-1.jpg) repeat-x;
}

* html #tudo  #artigo {
height: 100%;
min-height:670px;
}


img  {
border:0;
}

a {
text-decoration:none;
}


div#principal {
width:773px;
height:750px;
background-color:transparent;
}

#tudo {
position:absolute;
width:773px;
left:50%;
top:3%;
background: transparent url(../images/fundoIdeal.jpg) no-repeat;
margin-left:-387px;
}

#fonte {
position:relative;
color:#999999;
font-weight:normal;
z-index:1;
margin-top:10px;
margin-left:40px;
margin-bottom:10px;
}

#fonte h3, #fonte p {
border:0;
display:inline;
margin-right:5px;
font-size:14px;
}

#fonte p {
margin-top:-15px;
}

#fonte p a {
font-weight:normal;
display:inline;
text-decoration:none;
}

#fonte p a.larger {
background: url(../images/mais.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#fonte p a.smaller {
background: url(../images/menos.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#fonte p a.reset {
background: url(../images/zerar.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#fonte p a.larger:hover,#fonte p a.larger:active,#fonte p a.larger:focus {
background: url(../images/mais_out.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#fonte p a.smaller:hover,#fonte p a.smaller:active,#fonte p a.smaller:focus {
background: url(../images/menos_out.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#fonte p a.reset:hover,#fonte p a.reset:active,#fonte p a.reset:focus {
background: url(../images/zerar_out.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#menu {
position:relative;
background-color:transparent;
margin-left:6px;
margin-top:12px;
z-index:2;
line-height:20px;
}

#menu ul {
list-style-type:none;
background-color:transparent;
}

#menu li a {
color:#ffffff;
background-color:transparent;
font-weight:bold;
font-size:13px;
}

#menu li a:hover {
background-color:transparent;
color:#00ccff;
font-weight:bold;
font-size:13px;
}

img.direita {
float:right;
margin-right:-30px;
margin-top:-20px;
}

#navega {
position:relative;
display:inline;
font-size:14px;
margin-left:40px;
background-color:transparent;
}

#navega p {
height:25px;
display:inline;
color:#666666;
font-size:14px;
}

#navega a {
display:inline;
color:#666666;
font-size:14px;
}

h1 {
position:relative;
color:#333399;
width:460px;
left:0px;
margin-top:20px;
font-weight:bold;
font-size:26px;
text-transform:uppercase;
border-bottom:1px dashed #cccccc;
}

.titulo_produtos {
color:#333399;
position:absolute;
width:470px;
top:200px;
font-size:26px;
left:167px;
font-weight:bold;
text-transform:uppercase;
border-bottom:1px dashed #cccccc;
}

div#slides {
position:absolute;
left:194px;
margin-top:145px;
}

div.noticias {
position:absolute;
top:200px;
left:490px;
width:103px;
height:401px;
font-size:12px;
padding-top:95px;
list-style-type:none;
color:#000099;
background:url(../images/noticias.png) no-repeat;
}


.noticias ul li {
float:left;
list-style-type:none;
margin-left:-20px;
margin-top:30px;
}

div.noticias  a {
float:left;
color:#000099;
font-weight:bold;
}

div#produtos table {
position:relative;
margin-left:-5px;
margin-top:15px;
border: 2px solid #ccc;
background-color:#fff;
width:570px;
text-align:center;
border: 1px solid #ccc;
}

div#produtos tr td {
border: 1px solid #ccc;
}

div#menu_produtos h1 {
color:#000099;
position:relative;
width:100%;
margin-top:12px;
margin-bottom:15px;
margin-left:4px;
font-weight:bold;
text-transform:upercase;
border-bottom:1px dashed #cccccc;
}

div#produtos img {
margin:10px;
}

div#produtos p {
text-align:justify;
margin-left:5px;
margin-right:5px;
}

div#produtos h4 {
text-align:justify;
color:#000099;
text-align:center;
font-weight:bold;
}

div#produtos ul {
text-align:left;
margin-left:20px;
list-style-type:square;
color:#000099;
margin-bottom:15px;
}

div#produtos li {
line-height:15px;
margin-top:10px;
padding-left:3px;
}

div#conteudo {
left:-25px;
top:20px;
width:460px;
background-color:transparent;
}

div#conteudo p {
color:#000099;
margin-top:10px;
text-align:justify;
}

#artigos {
position:relative;
margin-top:-35px;
margin-left:150px;
	min-height:100%; /* Para browsera modernos */
	height:auto !important; /* Para browsera modernos */
	height:100%; /* Para o IE6 */
background-color:transparent;
width:590px;
padding:5px;
color:#000099;
z-index:10000;
overflow:auto;
}


#artigos ol {
float:left;
list-style-type:none;
background-color:transparent;
margin-top:-10px;
margin-bottom:30px;
color:#000099;
}

#artigos li {
margin-top:15px;
color:#000099;
padding-left:30px;
line-height:20px;
background:url(../images/conexao1.gif) no-repeat;
}

div#manuais table {
color:#000099;
text-align:justify;
margin-top:30px;
width:440px;
}

div#manuais_lista table tr td{
border: 1px solid #ccc;
padding:4px;
color:#000099;
}

div#manuais_lista {
margin-top:30px;
}

.tituloTabelaManuais {
text-transform:uppercase;
font-weight:bold;
color:#000099;
}

div#manuais_lista a {
color:#000099;
}

div#manuais_lista a:hover {
color:#000099;
}

div#secao a {
position:relative;
margin-left:-24px;
margin-top:-2px;
line-height:27px;
text-align:left;
color:#000099;
}


div#secao a:hover {
color:#000099;
}

div#secao li {
list-style-type:none;
}

div#categoria a {
position:relative;
left:-4px;
top:25px;
line-height:27px;
text-align:left;
color:#000099;
}

div#categoria li {
list-style-type:none;
}

div#categoria a:hover {
color:#000099;
}

div#assistencia_endereco p {
position:relative;
margin-left:50px;
text-align:left;
color:#000099;
}

div#assistencia_endereco  h4 {
color:#000099;
margin-top:50px;
margin-left:50px;
margin-bottom:17px;
}

div#contato {
position:relative;
margin-left:0px;
width:460px;
margin-bottom:-300px;
background-color:transparent;
}

div#contato h1 {
position:relative;
color:#333399;
width:450px;
left:0px;
margin-top:20px;
font-weight:bold;
font-size:26px;
text-transform:uppercase;
border-bottom:1px dashed #cccccc;
}

div#contato input {
position:absolute;
left:80px;
margin-bottom:6px;
background-color:#e1f9ff;
color:#000099;
}

div#contato textarea {
background-color:#e1f9ff;
color:#000099;
}

div#contato label {
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
color:#000099;
}

div#contato .copia_email {
margin-left:-85px;
margin-top:6px;
}


div#tabela_thumb  table {
width:570px;
background-color:#ffffff;
text-align:center;
}

div#tabela_thumb  p {
text-align:center;
}

div#tabela_thumb {
position:relative;
margin-bottom:-400px;
}

div#tabela_thumb  a {
font-size:12px;
text-align:center;
}

div#tabela_thumb  img {
border:0;
}

div#tabela_thumb h4 {
text-align:center;
margin-bottom:10px;
}

div#icones {
margin-left:0px;
width:60px;
margin-top:30px;
background-color:transparent;
}


div#menus {
position:relative;
margin-left:50px;
margin-top:30px;
background-color:transparent;
}

div#box_noticia {
position:relative;
background-color:#ffcc33;
}

div#box_conteudo {
position:relative;
background-color:#000099;
}

div#mapa {
position:relative;
margin-top:30px;
margin-left:46px;
overflow:auto;
height:500px;
width:400px;
color:#000099;

}

div#mapa a, a:hover, a:visited {
color:#000099;
font-size:12px;
}

div#mapa h4 {
color:#333399;
font-weight:bold;
font-size:18px;
text-transform:uppercase;
margin-top:20px;
}

div#fim {
position:relative;
padding-top:40px;
left:0px;
height:79px;
margin-top:-60px;
background:transparent url(../images/pistola.jpg) no-repeat;
width:770px;
}

div#fim p {
color:#ffffff;
text-align:center;
}

div#menu_assis {
float:left;
margin-left:10px;
margin-top:0px;
background-color:transparent;
}

div#kel {
	margin-top: 10px;
	margin-left: 160px;
	min-height:670px;
	background-color: transparent;
}

div#clear {
	clear: both;
}

Alguém tem alguma idéia? Meu cliente está satisfeito com tudo... mas preciso resolver essa questão do rodapé.

Preciso muito desta ajuda, estou desanimada... :wacko:

Obrigada !

Trocar Imagem Conforme Horário.

22/06/2009, 13:32

Olá!

Pessoal, eu não sei nada de javascript (infelizmente, preciso aprender...) e queria mudar o topo e rodapé (juntos) conforme horário...tipo, se é de manhã o céu fica claro e o rodapé... se é de tarde outra céu ao entardecer e também o rodapé... e a noite mesma coisa.

Olhei aqui no fórum e não achei nada parecido...Alguém sabe onde estou errando no meu script? O topo e o rodapé apareceriam como background da div topo e da div fim (rodapé).

Vejam a minha tentativa no javascript :wacko:




<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>

<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

<script language="javascript">
var topoDia="imagens/topoDia.jpg"
var topoTarde="imagens/topoTarde.jpg"
var topoNoite="imagens/topoNoite.jpg"
var fimDia="imagens/fimDia.jpg"
var fimTarde="imagens/fimTarde.jpg"
var fimNoite="imagens/fimNoite.jpg"

var horario=new Date();

if((horario.getHours() >= 6) && (horario.getHours() < 12))
topo=topoDia
fim=fimDia

else if((horario.getHours() >= 12) && (horario.getHours() < 18))
topo=topoTarde
fim=fimTarde


else if((horario.getHours() >= 18) && (horario.getHours() < 5))
topo=topoNoite
fim=fimNoite


document.write('<div id="topo"="'+topo+''+fim+'" bgcolor="#FFFFFF">');</script> NÃO TÁ FUNFANDO... SOCOOOORRO!
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/pibpenha/javascript/md_stylechanger.js"></script>

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/pibpenha/css/estilo.css" type="text/css" />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/pibpenha/js/glaucia.js"></script>

</head>

<body>


<div id="tudo">

<div id="fonte">
<script type="text/javascript">
//<![CDATA[
document.write('<h3><?php echo JText::_(''); ?></h3><p class="fonte">');
document.write('<a href="index.php" title="<?php echo JText::_('Increase size'); ?>"onclick="changeFontSize(2); return false;" class="larger"><?php echo JText::_('&nbsp;'); ?></a><span class="unseen">&nbsp;</span>');
document.write('<a href="index.php" title="<?php echo JText::_('Decrease size'); ?>"onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_('&nbsp;'); ?></a><span class="unseen">&nbsp;</span>');
document.write('<a href="index.php" title="<?php echo JText::_('Revert styles to default'); ?>"onclick="revertStyles(); return false;" class="reset"><?php echo JText::_('&nbsp;'); ?></a></p>');
//]]>
</script>
</div>

<div id="principal">

<div id="topo"> aqui entra o background conforme horário </div>


<div id="menu">
<jdoc:include type="modules" name="mod_mainmenu" />
</div>

<div id="slides">
<jdoc:include type="modules" name="slides"/>
</div>

<div id="navega">
<p><?php echo JText::_('Voc&ecirc; est&aacute; aqui:');?>
<jdoc:include type="module" name="mod_breadcrumbs" style="none" />
</p>
</div>

<div id="conteudo">
<jdoc:include type="component" />
</div>

</div>
<div id="fim">
aqui entra background conforme horário...
</div>
</div>
</body>
</html>


Aguardo a resposta de algum de vocês...

Obrigada!




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

glauciaRezende
www.site-genial.com.br
glauciarezende@gmail.com

IPB Skin By Virteq