Clicky

Jump to content
Portal do Host
  • Sign Up

Sign in to follow this  
fermel2

Effeito toggle

Recommended Posts

Olá pessoal estou tentando colocar um efeito jquery no whmcs mas não está funcionando...

o efeito que quero colocar é um desses aqui

http://www.engenhosweb.com.br/arquivos/jquery/fadeToggle/index.php

não funciona de jeito nenhum se alguem puder me ajudar eu agradeço

Fica complicado avaliar se você não coloca o erro que ocorre. Porém deve ser relacionado com a chamada do ID ou classe da DIV ou ainda com aspas...


Não respondo dúvidas em particular, nem via msn, bilhete elegante, PM, foto de mulher bonita no perfil, telegrama, pombo correio, sinal de fumaça, dança da chuva, fogueira, ou qualquer outra forma válida e/ou bizarra. Pergunte no fórum assim todos podem compartilhar a pizza.

Share this post


Link to post
Share on other sites

Tem outra coisa também a div tanto a que recebe a ação como o a que mostra o conteúdo tem nomes muito comuns, provavelmente já está sendo usada em outro local. Se for isto é so mudar no chamada do js e nas próprias div...

Share this post


Link to post
Share on other sites
Tem outra coisa também a div tanto a que recebe a ação como o a que mostra o conteúdo tem nomes muito comuns, provavelmente já está sendo usada em outro local. Se for isto é so mudar no chamada do js e nas próprias div...

bom fiz tudo direitinho teve uma hora que funcionou mas do nada parou... já troquei o nome das divs e tudo e não está indo... não aparece nenhum erro ele aparece as divs mas não faz o efeito segue abaixo o código que inseri no meu header.tpl

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

<!--[if IE 6]><link rel="stylesheet" href="templates/{$template}/style.ie6.css" type="text/css" media="screen" /><![endif]-->

<!--[if IE 7]><link rel="stylesheet" href="templates/{$template}/style.ie7.css" type="text/css" media="screen" /><![endif]-->

<meta http-equiv="content-type" content="text/html; charset={$charset}" />

<title>{$companyname} - {$pagetitle}{if $kbarticle.title} - {$kbarticle.title}{/if}</title>

{if $systemurl}<base href="{$systemurl}" />

{/if}<link rel="stylesheet" type="text/css" href="templates/{$template}/style.css" />

{literal}<script type="text/javascript" src="templates/{$template}/jquery.js"></script>{/literal}

{literal}<script type="text/javascript">

$(document).ready(function(){ // Inicia o bloco de código

$("#conteudoo").hide(); // Esconde o contéudo do #conteudo

$("#botaoo").click(function(){

$("#conteudoo").fadeToggle("slow"); // Propriedade Slow (devagar)

});

//Efeito slideToggle ja visto aqui no blog

$("div#conteudo2").hide();

$("div#botao2").click(function(){

$("div#conteudo2").slideToggle("slow"); // Propriedade Slow (devagar)

});

//efeito fadeToggle com a propriedade ("fast")[Rápido]

$("#conteudoo3").hide();

$("#botaoo3").click(function(){

$("#conteudoo3").fadeToggle("fast"); // Propriedade Fast

});

//efeito slideToggle com a propriedade ("fast")[Rápido]

$("#conteudoo4").hide();

$("#botaoo4").click(function(){

$("#conteudoo4").slideToggle("fast"); // Propriedade Fast

});

//efeito fadeToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.

$("#conteudoo5").hide();

$("#botaoo5").mouseover(function(){ // Função mouseover

$("#conteudoo5").fadeToggle("slow"); // Propriedade Slow (devagar)

});

//efeito slideToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.

$("#conteudoo6").hide();

$("#botaoo6").mouseover(function(){ // Função mouseover

$("#conteudoo6").slideToggle("slow"); // Propriedade Slow (devagar)

});

});

</script>{/literal}

{if $livehelpjs}{$livehelpjs}

{/if}</head>

<body class="home blog">

<div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;">

<div id="botaoo" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;">

Clique aqui para ver o fadeToggle.

</div>

<div id="conteudoo" style="float: left; margin-top: 5px;">

Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.

Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in

erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.

Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.

</div>

</div>

<!-- Efeito slideToggle // Ja foi mostrado no blog -->

<div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;">

<div id="botaoo2" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;">

Clique aqui para ver o slideToggle.

</div>

<div id="conteudoo2" style="float: left; margin-top: 5px;">

Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.

Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in

erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.

Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.

</div>

</div>

<!-- Efeito fadeToggle Rápido -->

<div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;">

<div id="botaoo3" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;">

Efeito fadeToggle rápido.

</div>

<div id="conteudoo3" style="float: left; margin-top: 5px;">

Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.

Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in

erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.

Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.

</div>

</div>

<!-- Efeito slideToggle Rápido // Ja foi mostrado no blog -->

<div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;">

<div id="botaoo4" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;">

Efeito slideToggle rápido.

</div>

<div id="conteudoo4" style="float: left; margin-top: 5px;">

Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.

Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in

erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.

Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.

</div>

</div>

<!-- Efeito fadeToggle Rollover -->

<div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;">

<div id="botaoo5" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;">

Efeito fadeToggle Rollover(mouseover).

</div>

<div id="conteudoo5" style="float: left; margin-top: 5px;">

Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.

Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in

erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.

Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.

</div>

</div>

<!-- Efeito slideToggle Rollover // Ja foi mostrado no blog -->

<div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;">

<div id="botaoo6" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;">

Efeito slideToggle Rollover(mouseover).

</div>

<div id="conteudoo6" style="float: left; margin-top: 5px;">

Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.

Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in

erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.

Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.

</div>

</div>

Edited by fermel2

Share this post


Link to post
Share on other sites

Se você utiliza o {literal} todas as expressões com { contindas dentro dessa tag não irão funcionar... A tag literal desabilita o interpretador do smarty....


[COLOR=#0000CD]{literal}<script type="text/javascript" src="templates/{$template}/jquery.js"></script>{/literal}

[/COLOR]
Nesse caso, troque por:

[COLOR=#0000CD]{literal}<script type="text/javascript" src="templates/[/COLOR][COLOR=#0000CD]{/literal}[/COLOR][COLOR=#0000CD]{$template}[/COLOR][COLOR=#0000CD]{literal}[/COLOR][COLOR=#0000CD]/jquery.js"></script>{/literal}

[/COLOR]

Se conselho fosse bom, ninguém daria... but... eu jamais coloco css e js dentro da pasta /template. Vai que aparece alguma vulnerabilidade no Smarty e aí pronto.. já sabem onde fica o seu diretório de templates...

Eu geralmente uso /css e /js na raiz do website.

Abraços


Não respondo dúvidas em particular, nem via msn, bilhete elegante, PM, foto de mulher bonita no perfil, telegrama, pombo correio, sinal de fumaça, dança da chuva, fogueira, ou qualquer outra forma válida e/ou bizarra. Pergunte no fórum assim todos podem compartilhar a pizza.

Share this post


Link to post
Share on other sites

então no meu script vou ter que fazer isso também?

{literal}<script type="text/javascript">

$(document).ready(function(){ // Inicia o bloco de código

$("#conteudoo").hide(); // Esconde o contéudo do #conteudo

$("#botaoo").click(function(){

$("#conteudoo").fadeToggle("slow"); // Propriedade Slow (devagar)

});

//Efeito slideToggle ja visto aqui no blog

$("div#conteudo2").hide();

$("div#botao2").click(function(){

$("div#conteudo2").slideToggle("slow"); // Propriedade Slow (devagar)

});

//efeito fadeToggle com a propriedade ("fast")[Rápido]

$("#conteudoo3").hide();

$("#botaoo3").click(function(){

$("#conteudoo3").fadeToggle("fast"); // Propriedade Fast

});

//efeito slideToggle com a propriedade ("fast")[Rápido]

$("#conteudoo4").hide();

$("#botaoo4").click(function(){

$("#conteudoo4").slideToggle("fast"); // Propriedade Fast

});

//efeito fadeToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.

$("#conteudoo5").hide();

$("#botaoo5").mouseover(function(){ // Função mouseover

$("#conteudoo5").fadeToggle("slow"); // Propriedade Slow (devagar)

});

//efeito slideToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.

$("#conteudoo6").hide();

$("#botaoo6").mouseover(function(){ // Função mouseover

$("#conteudoo6").slideToggle("slow"); // Propriedade Slow (devagar)

});

});

</script>{/literal}

Share this post


Link to post
Share on other sites

O Script está certo a principio, não rodei ele aqui. Mas e aí, testou?


Não respondo dúvidas em particular, nem via msn, bilhete elegante, PM, foto de mulher bonita no perfil, telegrama, pombo correio, sinal de fumaça, dança da chuva, fogueira, ou qualquer outra forma válida e/ou bizarra. Pergunte no fórum assim todos podem compartilhar a pizza.

Share this post


Link to post
Share on other sites

sim testei alguns daqueles que te mostrei funcionaram normal hehe obrigadão... agora o problema que eu to é que tenho que colocar um botão nesse efeito e quando clicar para abrir a div o botão mudar para um botão diferente eX:

abrir ai quando o cara clica ele vira fechar

mas obrigadão a sua ajuda já foi de grande tamanho já estou com meio caminho andado... obrigado mesmo

Share this post


Link to post
Share on other sites

abrir ai quando o cara clica ele vira fechar

Esse aí há inúmeras formas de fazer... Esse "Abrir" é imagem ou texto?

Poste aí o trechinho do código e um print screen da área para facilitar.


Não respondo dúvidas em particular, nem via msn, bilhete elegante, PM, foto de mulher bonita no perfil, telegrama, pombo correio, sinal de fumaça, dança da chuva, fogueira, ou qualquer outra forma válida e/ou bizarra. Pergunte no fórum assim todos podem compartilhar a pizza.

Share this post


Link to post
Share on other sites

seguinte esse é meu site atual www.eluzaihost.com.br

ali em acessar é o efeito que estou passando para o whmcs estou montando um outro site e estou integrando ao whmcs só que esse efeito que tenho no site atual que está dando o trabalho para passar para o whmcs...

segue o script que estou usando no jquery:

//efeito slideToggle com a propriedade ("fast")[Rápido]

$("#conteudoo4").hide();

$("#botaoo4").click(function(){

$("#conteudoo4").slideToggle("fast"); // Propriedade Fast

});

aqui é a chamada da função:

<div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;">

<div id="botaoo4" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;">

Efeito slideToggle rápido.

</div>

<div id="conteudoo4" style="float: left; margin-top: 5px;">

Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.

Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in

erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.

Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.

</div>

</div>

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.



×
×
  • Create New...