Ir para conteúdo
  • Cadastre-se

Effeito toggle

fermel2

Por fermel2
em Gerenciadores de hospedagem

 Compartilhar

Posts Recomendados

joaopaulo

joaopaulo

Postado
Postado
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...

Link para o comentário
Compartilhar em outros sites
fermel2

fermel2

Postado
  • Autor
Postado (editado)
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>

Editado por fermel2
Link para o comentário
Compartilhar em outros sites
joaopaulo

joaopaulo

Postado
Postado

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

Link para o comentário
Compartilhar em outros sites
fermel2

fermel2

Postado
  • Autor
Postado

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}

Link para o comentário
Compartilhar em outros sites
fermel2

fermel2

Postado
  • Autor
Postado

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

Link para o comentário
Compartilhar em outros sites
fermel2

fermel2

Postado
  • Autor
Postado

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>

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para a lista de tópicos

  • Quem Está Navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...

Informação Importante

Concorda com os nossos termos?

  I accept