Pequenos comentarios [RESOLVIDO]

1. Pequenos comentarios [RESOLVIDO]

Carlos Bruno
cbcarlos7

(usa Linux Mint)

Enviado em 15/02/2012 - 18:48h


Alguem sabe como fazer uma pequena janela parecida com um comentário em um link ou botão dentro de uma página e quando a gente clicar, ele encaminha para a posicao do texto, parecido com um âncora?

Eu acho que é simples, mas eu nao sei fazer rsrs

Se não entenderam o que eu quis dizer rsrs
Tai um exemplo,

http://www.pceamazonas.com.br/mapa-do-amazonas/
Passe o cursor sobre um dos numeros aparece algo do lado e clica, aparece logo abaixo do mapa os detalhes

Agradeço a ajuda


  


2. MELHOR RESPOSTA

André Canhadas
andrecanhadas

(usa Debian)

Enviado em 16/02/2012 - 21:05h

cbcarlos7 escreveu:

Alguem melhor do que eu consegue entender isso aqui?

Ele explica, mas ainda nao consgui entender onde pôr esses códigos

www.google.com/url?q=http://jqueryfordesigners.com/coda-popup-bubbles/&sa=U&ei=umk9T6-RC46bt...



Tente ver o source desta pagina:
http://jqueryfordesigners.com/demo/coda-bubble.html


3. Jquery

André Canhadas
andrecanhadas

(usa Debian)

Enviado em 15/02/2012 - 19:07h

No site ele esta usando tabs do jquery e carregando um html externo.

Dentro desses htmls é so criar os links para ancorar um trecho da pagina


4. Ja fiz algo parecido

André Canhadas
andrecanhadas

(usa Debian)

Enviado em 15/02/2012 - 19:10h

andrecanhadas escreveu:

No site ele esta usando tabs do jquery e carregando um html externo.

Dentro desses htmls é so criar os links para ancorar um trecho da pagina

Ja fiz algo parecido usando facebox

http://pluginjquery.com.br/plugin-jquery-facebox

Da uma olhada de como vai ficar:

http://crcmed.com.br/clinicaltrials.html



5. Re: Pequenos comentarios [RESOLVIDO]

Carlos Bruno
cbcarlos7

(usa Linux Mint)

Enviado em 15/02/2012 - 19:13h

Você consegue fazer um script simples (se der) pra mim?
Pra eu testar?

Eu estou afim de aprender isso, pois perdi um trabalho por nao saber isso ai

Vlw


6. Link

André Canhadas
andrecanhadas

(usa Debian)

Enviado em 15/02/2012 - 19:25h

cbcarlos7 escreveu:

Você consegue fazer um script simples (se der) pra mim?
Pra eu testar?

Eu estou afim de aprender isso, pois perdi um trabalho por nao saber isso ai

Vlw


Basicamente ficaria assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>Teste facebox</title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox/facebox.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a[rel*='facebox']").facebox()
})
</script>

</body>

<div id="loadHTML">

<h5>teste</h5>
<p>Algo escrito.</p>
<div>Clique em um link para ver mais:
<ul id="ullink">
<li><a href="1.html" rel="facebox" target="_self" >Testo 1</a></li>
<li><a href="2.html" rel="facebox" target="_self" c>texto 2</a></li>
</ul>
</div>
</div>


Para baixar as bibliotecas:
http://defunkt.io/facebox



7. Re: Pequenos comentarios [RESOLVIDO]

Carlos Bruno
cbcarlos7

(usa Linux Mint)

Enviado em 15/02/2012 - 19:34h

Olha sr, andrecanhadas !

Seu site ta legal...
Isso pode me servir também com certeza, e aquele exemplo acima da minha pergunda, voce consegue fazer?


8. Mesma coisa

André Canhadas
andrecanhadas

(usa Debian)

Enviado em 15/02/2012 - 21:21h

cbcarlos7 escreveu:

Olha sr, andrecanhadas !

Seu site ta legal...
Isso pode me servir também com certeza, e aquele exemplo acima da minha pergunda, voce consegue fazer?


A ideia é a mesma a diferença é que ele chama a função do jquery onmouse over ou seja quando o mouse esta em cima e claro o visual da janela.

Não sei exatamente como fazer mas pode verificar vendo o código fonte da pagina.

Outra base de busca por ideias seria jquery pop-up

ele altera o conteudo de uma div de acordo com o link escolhido no pop-up




9. Re: Pequenos comentarios [RESOLVIDO]

Carlos Bruno
cbcarlos7

(usa Linux Mint)

Enviado em 16/02/2012 - 16:21h

Vlw pela sugestao , enquanto isso eu vou tentar aqui
para executar o seu exemplo, eu devo ter instalado o WAMP ou LAMP?


10. Re: Pequenos comentarios [RESOLVIDO]

Carlos Bruno
cbcarlos7

(usa Linux Mint)

Enviado em 16/02/2012 - 16:49h


Basicamente ficaria assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>Teste facebox</title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox/facebox.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a[rel*='facebox']").facebox()
})
</script>

</body>

<div id="loadHTML">

<h5>teste</h5>
<p>Algo escrito.</p>
<div>Clique em um link para ver mais:
<ul id="ullink">
<li><a href="1.html" rel="facebox" target="_self" >Testo 1</a></li>
<li><a href="2.html" rel="facebox" target="_self" c>texto 2</a></li>
</ul>
</div>
</div>


Para baixar as bibliotecas:
http://defunkt.io/facebox
[/quote]

Na parte que encaminha para a pagina "1.html" ou "2.html"
Quando eu clico ele encaminha para a página.... e para fazer apareceber pequeno na mesma página

Obrigado pela ajuda



11. Re: Pequenos comentarios [RESOLVIDO]

André Canhadas
andrecanhadas

(usa Debian)

Enviado em 16/02/2012 - 16:58h

cbcarlos7 escreveu:


Basicamente ficaria assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">




Para baixar as bibliotecas:
http://defunkt.io/facebox


Na parte que encaminha para a pagina "1.html" ou "2.html"
Quando eu clico ele encaminha para a página.... e para fazer apareceber pequeno na mesma página

Obrigado pela ajuda
[/quote]

Não esta pagina seria uma pagina que ele carrega dentro do pop-up
Dentro tem um html basico

<H3> Hello Word </h3>
<ul>
<p> Hello Word 2 </p>
<p> Hello Word 3 </p>
</ul>

Que no seu caso pode ser um link de ancoragem na pagina principal



12. Re: Pequenos comentarios [RESOLVIDO]

Carlos Bruno
cbcarlos7

(usa Linux Mint)

Enviado em 16/02/2012 - 17:24h

Ainda nao conseguir mas tow tentando rsrs



01 02



Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts