..:: MX Studio Fóruns ::..: jQuery - Dúvida com "Efeito corrediço reverso", criar mais de um - ..:: MX Studio Fóruns ::..

Jump to content

Publicidade

Page 1 of 1

jQuery - Dúvida com "Efeito corrediço reverso", criar mais de um Preciso criar 4-5 div's independentes com o "Efeito corrediço

#1 User is offline   Renan A. Mendonça 

  • Group: Membros
  • Posts: 52
  • Joined: 05-February 08

Posted 14 July 2009 - 12:35 PM

Bom o código é o seguinte:

CÓDIGO
<html>
<head>
<title>GHTI</title>
<style type="text/css" media="all">
.slide {
  position: relative;
  overflow: hidden;
  height: 436px;
  width: 613px;
  margin: 1em 0;
  background: #FFFFFF url(fundo.png) no-repeat bottom right;
  border: 1px solid #999;
}
.slide .inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 198px;
  height: 383px;
  padding: 6px;
  background-color: #999999;
  color: #333;
}
/*#bt_empresa{
    width: 105px;
    font-family: verdana;
    background-color: #669900;
    color:rgb(255,255,255);
    border: 1px solid lightblue;
}*/
.slide #bt_empresa {
  margin: .7em 0 0 1.3em;
}
#slidebottom .inner {
  display: none;
}
</style>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
      $('#slidebottom #bt_empresa').click(function() {
        $(this).next().slideToggle();
      });
    });
</script>
</head>
<body>
<div id="Principal">
    <div id="slidebottom" class="slide">
    <button id="bt_empresa">A Empresa</button><button id="bt_empresa">Produtos</button>
    
    <div id="empresa" class="inner"><table id='tabela1'>
            <tr>
                <td>
                    <font color="white">-</font>
                </td>
                <td>
                    <font size='4'>A  Empresa</font>
                    <hr />
                    <br />
                    Algum texto sobre a empresa
                </td>
            </tr>
        </div>
    </div>

    
    <div id="produtos" class="inner"><table id='tabela2'>
        <tr>
            <td>
                <font color="white">-</font>
            </td>
            <td>
                <font size='4'>Produtos</font>
                <hr />
                <br />
                Algum texto sobre os produtos
            </td>
        </tr>
    </div>
</div>


</body>
</html>


Bom, não está dando certo.
E preciso de 4 ou 5 divs que abram independente do outro div, e com um botão diferente.
E de quebra, quando eu abrir um, se tiver algum outro aberto, ele tem que fechar.
Sou iniciante em jQuery ainda, portanto, se tiver como explicar também, vou achar ótimo!!
Obrigado e abraços.

Meu exemplo: http://www.ghti.com.br/struft/novo/
0

#2 User is offline   Renan A. Mendonça 

  • Group: Membros
  • Posts: 52
  • Joined: 05-February 08

Posted 14 July 2009 - 03:10 PM

A parte de ter várias Divs com efeito, sendo controlado por diferentes botões eu já resolvi!!

Segue o código abaixo:

CÓDIGO
<html>
    <head>
        <title>GHTI</title>
        <style type="text/css" media="all">
        #principal{
            position: relative;
            overflow: hidden;
            height: 436px;
            width: 604px;
            margin: 1em 0;
            background: #FFFFFF;
            border: 1px solid #999;
        }
        
        
        /* Produtos */
        #slide_produtos {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 383px;
            width: 187px;
            padding: 6px;
            background-color: #999999;
            color: #333;
        }
        
        #slide_produtos {
            position: absolute;
            left: 199;
            bottom: 0;
            height: 383px;
            width: 187px;
            padding: 6px;
            background-color: #999999;
            color: #333;
        }
        #bt_produtos{
            width: 105px;
            font-family: verdana;
            background-color: lightpink;
            color:rgb(255,255,255);
            border: 1px solid lightpink;
        }
        #bt_produtos {
            margin: .7em 0 0 1.3em;
        }

        #slide_produtos {
            display: none;
        }
        
        /* Contato */
        #slide_contato {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 383px;
            width: 187px;
            padding: 6px;
            background-color: #999999;
            color: #333;
        }
        
        #slide_contato {
            position: absolute;
            left: 398;
            bottom: 0;
            height: 383px;
            width: 187px;
            padding: 6px;
            background-color: #999999;
            color: #333;
        }
        #bt_contato{
            width: 105px;
            font-family: verdana;
            background-color: lightgreen;
            color:rgb(255,255,255);
            border: 1px solid lightgreen;
        }
        #bt_contato {
            margin: .7em 0 0 1.3em;
        }

        #slide_contato {
            display: none;
        }
        
        
        /* Empresa */        
        #slide_empresa {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 383px;
            width: 187px;
            padding: 6px;
            background-color: #999999;
            color: #333;
        }
        
        #slide_empresa {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 383px;
            width: 187px;
            padding: 6px;
            background-color: #999999;
            color: #333;
        }
        #bt_empresa{
            width: 105px;
            font-family: verdana;
            background-color: lightblue;
            color:rgb(255,255,255);
            border: 1px solid lightblue;
        }
        #bt_empresa {
            margin: .7em 0 0 1.3em;
        }

        #slide_empresa {
            display: none;
        }
        
        </style>
        <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
              $('#bt_empresa').click(function() {
                $(this).next().slideToggle();
              });
              
              $('#bt_produtos').click(function() {
                $(this).next().slideToggle();
              });
              
              $('#bt_contato').click(function() {
                $(this).next().slideToggle();
              });
            });
        </script>
    </head>
    <body>
        <div id="principal">
            
                <button id="bt_empresa">A Empresa</button>
                <div id="slide_empresa">
                    <table id='tabela1'>
                        <tr>
                            <td>
                                <font color="#999999">-</font>
                            </td>
                            <td>
                                <font size='4'>A  Empresa</font>
                                <hr />
                                <br />
                                Algum texto sobre a empresa
                            </td>
                        </tr>
                    </table>
                </div>
                
                <button id="bt_produtos">Produtos</button>
                <div id="slide_produtos">
                    <table id='tabela2'>
                        <tr>
                            <td>
                                <font color="white">-</font>
                            </td>
                            <td>
                                <font size='4'>Produtos</font>
                                <hr />
                                <br />
                                Algum texto sobre os produtos
                            </td>
                        </tr>
                    </table>
                </div>
                
                <button id="bt_contato">Contato</button>
                <div id="slide_contato">
                    <table id='tabela3'>
                        <tr>
                            <td>
                                <font color="white">-</font>
                            </td>
                            <td>
                                <font size='4'>Contato</font>
                                <hr />
                                <br />
                                Algum texto sobre o contato
                            </td>
                        </tr>
                    </table>
                </div>

        </div>
    </body>
</html>


Mas agora falta o seguinte, quando eu clicar em um botão, e tiver algum div já ativado, eu preciso fazer com que esse div volte a desaparecer, em quanto o outro aparece.
Abraços e obrigado!!
0

#3 User is offline   Renan A. Mendonça 

  • Group: Membros
  • Posts: 52
  • Joined: 05-February 08

Posted 15 July 2009 - 02:54 PM

Problema resolvido, já achei a solução.
Abraços p/ comu!
0

#4 User is offline   xanburzum 

  • Group: Administrador
  • Posts: 2374
  • Joined: 04-November 08

Posted 15 July 2009 - 10:57 PM

foi rápido, hein...
ehhehehehe
0

Share this topic:


Page 1 of 1

Similar Topics Collapse

  Topic Forum Started By Stats Last Post Info
New Replies Google une armas medievais com tecnologia em torneio de catapultas Notícias Notícias 
  • 0 Replies
  • 161 Views
New Replies Personalizando textarea com setStyle Flash & ActionScript Filipe Medeiros 
  • 1 Reply
  • 2370 Views
New Replies Paginação como faz ColdFusion Merenda 
  • 3 Replies
  • 1240 Views
New Replies Efeito de mágica
efeito de mágica com estrelas 		Flash & ActionScript netoshp 
  • 0 Replies
  • 212 Views
New Replies Praga do spam completa 30 anos Notícias Notícias 
  • 0 Replies
  • 330 Views
New Replies Quadrado virar bola
como fazer?? 		Flash & ActionScript drop13 
  • 1 Reply
  • 1784 Views
New Replies Samsung segue cautelosa com setor de semicondutores Notícias Notícias 
  • 0 Replies
  • 174 Views
*New Replies canada goose jacket it's forex trading moment get on the market and come on top graded
canada goose femme ringing ears more well-known while ringing in the e 		Eventos Guest_Fribrespignee_* 
  • 0 Replies
  • 4 Views

Publicidade


Fast Reply

  

2 User(s) are reading this topic
0 membro(s), 2 visitante(s) e 0 membros anônimo(s)