Ir para conteúdo
Fórum Script Brasil
  • 0

fade out com menu

BrunoVieira

Perguntado por BrunoVieira,

 Share

Pergunta

BrunoVieira

BrunoVieira

Postado
Postado

oi pessoal,

sou novo nesta area, estou a fazer um fade out ao carregar no menu, este já está a funcionar, mas so funciona quando o link no menu é somente # .... eu quero fazer tipo page.php ele ai altera o conteudo mas não faz o fade..

alguém me pode ajudar?

desde já um muito obrigado pela ajuda de todos..

<!DOCTYPE html>
<html>
<head>
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>  
<script src="http://jqueryui.com/latest/ui/effects.core.js"></script>
<script src="http://jqueryui.com/latest/ui/effects.slide.js"></script>

<style type="text/css">
  .teste {
        margin: 0px;
        width: 250px;
        height:700px;
        background-image:url(imgs/box.gif);
        background-repeat:no-repeat;
        position:absolute;
        z-index:1;
        top: 114px;
}

body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
}
</style>

<script type="text/javascript">
$(window).load(function(){
   $('#testea').show("slide", { direction: "left" }, 2000);
});

$(document).ready(function(){
    
    $("h3").click(function () {
      $("#alinha").fadeOut("slow");
    });

  });
</script>

<script type="text/javascript">

ddaccordion.init({
        headerclass: "expandable", //Shared CSS class name of headers group that are expandable
        contentclass: "categoryitems", //Shared CSS class name of contents group
        revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
        mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onmouseover
        collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
        defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
        onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
        animatedefault: false, //Should contents open by default be animated into view?
        persiststate: true, //persist state of opened contents within browser session?
        toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
        oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
                //do nothing
        },
        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                //do nothing
        }
})


</script> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body >
<table width="1060" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center"><img src="imgs/logo.gif" width="388" height="103"></td>
  </tr>
  <tr>
    <td bgcolor="#CCCCCC"; height="600" valign="top" style="padding-top:10px">
    
    <table width="1060" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200" >
    <div id="testea"  class="teste" >
    <table width="258" border="0" cellpadding="0" cellspacing="0"  >
      <tr>
 <td width="200"  valign="top"  style="padding-left:70px; padding-top:20px;" > 
  <div class="arrowlistmenu">
 <h3 id="fade_out" class="link"> <a href="index.php?page=1">QUEM SOMOS</a></h3>
<h2 class="menuheader expandable">MOBILIARIO</h3>
<ul class="categoryitems"  >
<li><a href="index.php">teste</a></li>
<li><a href="#">teste</a></li>
</ul>

<h3 class="link"><a href="index.php">SOFAS</a></h3>
<h3 class="link"><a href="#">COLCHOES</a></h3>
<h3 class="link"><a href="#">CONSTRU&Ccedil;&Atilde;O</a></h3>
<h3 class="link"><a href="#">CONTACTOS</a></h3>
</ul>     
        </td>

      </tr>
    </table>
</div></td>
    <td width="860">
    <div id="alinha"> 

<!-- aqui entra um include de paginas em php -->
 <table width="860" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
teste teste teste teste teste teste 


</td>
  </tr>
</table>
<!-- aqui fecha um include de paginas em php -->
</div></td>
  </tr>
</table>  
    </td>
  </tr>

  <tr>
    <td> </td>
  </tr>
</table>
</body>
</html>

não sei mesmo como alterar isso...

não tem forma de ficar a funcionar?

já agora estes cursos online são bens?

Link para o comentário
Compartilhar em outros sites

12 respostass a esta questão

Posts Recomendados

  • 0
BrunoVieira

BrunoVieira

Postado
  • Autor
Postado

eu não quero esconder o menu. o menu sempre que eu carrego num link ele faz o que eu quero que é o slide....

o k está em falta é o fade out do conteudo que esta dendtro da DIV Alinha..

postei a pasta no servidor.. http://brunovieira.com.pt/12/

se reparar o menu esta a abrir bem, so que eu queria que quando carrego numa opção qualquer o que esta dendro la div Alinha faça fadeout e apareça o novo conteudo.

se carregar por exemplo em SOFAS ele não faz o fadeout pois o link esta como <a href="index.php">SOFAS</a>

mas se carregar em COLCHOES este já funciona bem e esta como <a href="#">COLCHOES</a>

ou seja o problema aki acho que é o #. Há forma de eu dar a volta?

já agora, estou a ver que é monitora, aconselha o curso de javascript aki do scriptbrasil?

desde já um obrigado pela atenção

Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Agora acho que entendi melhor. O que ocorre é que o menu não dá fadeout quando o link utiliza o "#", que implica que a página não será modificada.

Não analisei o código, mas é provável que você esteja fazendo esse efeito no menu com o evento onload da página. Quando você escreve a URL do link, o navegador recarrega a página e chama novamente esse efeito. No entanto, ao clicar num link apontando para "#" (topo da página) a URL não é modificada e o evento onload não é chamado.

O que lhe aconselho a fazer é criar uma função que dá o fadeout e chamá-la tanto no carregamento da página (onload) quanto no clique do link (onclick)

Link para o comentário
Compartilhar em outros sites
  • 0
BrunoVieira

BrunoVieira

Postado
  • Autor
Postado

a função que eu tenho é:

$(document).ready(function(){
    
    $("h3").click(function () {
      $("#alinha").fadeOut("slow");
    });

  });

eu não sei nada de javascript mas penso que $("h3").click(function () { é quando se faz o click correcto?

era isso que me queria dizer?

Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Nesse caso você está aplicando o efeito na div com id alinha, que é essa aqui:

<div id="alinha">

 <table width="860" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="imgs/fotobg.jpg" width="1024" height="582" ></td>
  </tr>
</table>

</div>
Edit: Esquece, era isso mesmo que você queria fazer. vou analisar o resto do código e posto algo aqui. Edit²: Esquece o edit anterior (putz !) O que esse código faz está funcionando perfeitamente, a div alinha sofre o efeito. No entanto, o código responsável pelo fade out no menu é esse aqui: 
$(window).load(function(){
   $('#testea').show("slide", { direction: "left" }, 2000);
});
Como já havia comentado antes, ocorre somente com links que redirecionem a outras páginas de seu site, já que o efeito ocorre no carregamento. Como quer que seja chamado também em links para a própria página (#), deve fazer utilizar esse código também ao clicar um botão do menu 
$(document).ready(function(){
    
    $("h3").click(function () {
      $("#alinha").fadeOut("slow");
      $('#testea').show("slide", { direction: "left" }, 2000);
    });

  });

Link para o comentário
Compartilhar em outros sites
  • 0
BrunoVieira

BrunoVieira

Postado
  • Autor
Postado (editado)

sim penso que é assim que diz..

<!DOCTYPE html>
<html>
<head>
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>  
<script src="http://jqueryui.com/latest/ui/effects.core.js"></script>
<script src="http://jqueryui.com/latest/ui/effects.slide.js"></script>

<style type="text/css">
  .teste {
    margin: 0px;
    width: 250px;
    height:700px;
    background-image:url(imgs/box.gif);
    background-repeat:no-repeat;
    position:absolute;
    z-index:1;
    top: 114px;
}

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
    
    $("h3").click(function () {
      $("#alinha").fadeOut("slow");
      $('#testea').show("slide", { direction: "left" }, 2000);
    });

  });

</script>

<script type="text/javascript">

ddaccordion.init({
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})


</script> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body >
<table width="1060" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center"><img src="imgs/logo.gif" width="388" height="103"></td>
  </tr>
  <tr>
    <td bgcolor="#CCCCCC"; height="600" valign="top" style="padding-top:10px">
    
    <table width="1060" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200" >
    <div id="testea"  class="teste" >
<?php include("munuu.php"); ?> 
</div></td>
    <td width="860">
    <div id="alinha"><!-- o fade entra aqui -->
<?php include("verifica_page.php");?></div></td>

  </tr>
</table>   
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Editado por BrunoVieira
Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Quase todos os links estão funcionando, com exceção daqueles "teste".

Isso porque o seu código está escondendo no clique dos h3, e o "teste" está num li.

Recomendo que utilize classes e esconda no clique de uma classe.

Algo assim:

$(".nome_de_sua_classe").click(function () {
      $("#alinha").fadeOut("slow");
      $('#testea').show("slide", { direction: "left" }, 2000);
    });

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...