Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

XicoXperto

Criar um div clickable ("clicavel")

Recommended Posts

XicoXperto

Boas pessoal,

Estou a fazer um calendário (grande), onde aparecem datas de aniversario eventos e outros, e o que eu queria era conseguir clicar no dia (não nos eventos/aniversarios) e ir directamente para o dia, já fiz alguns testes, como:

<a href="?pagina=agenda&dia='.$dia.'" style="display:block;width:100%;height:100%;text-decoration:none;"> </a>

neste caso, se acrescentar alguma info, o div deixa de poder ser clicado e apenas o espaço é que pode ser.

tentei outras coisas que nem resultado deram, e econtrei

http://css-tricks.com/snippets/jquery/make-entire-div-clickable/

que é jQuery,

no entanto existe um comentário que fala da possibilidade de isso ser efectuado apenas por CSS:

There’s a pure CSS way to go about doing this. Just have an anchor (a) tag within the DIV that links to the URL you want. Then, set it to a block display, relative positioning, left and top equal to 0, width and height to full (or use jQuery to match all A’s within DIV’s to the same dimensions as the DIV).

mas não percebi o que ele queria dizer com isto.

Será que alguém tem ideias, ou sabe o que ele queria dizer com isto?

Share this post


Link to post
Share on other sites
brunoais

Eu não usava a tag a. Eu usava classes (por causa dos seletores) e atributos data-*. Depois usava o addEventListener() para todos os elementos que cumprem um seletor (querySelectorAll) para fazer o que indicas. Fora isso, é o q o yoda afirmou.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
XicoXperto

Quer dizer exactamente o que diz, não podia ser mais explícito, a não ser que fizesse o trabalho todo.

Se eu tivesse percebido, não tinha perguntado... Provavelmente já não te deves lembrar de como era quando estavas a aprender. De qualquer forma, obrigado pela resposta, vou pesquisar o que ele disse...

Eu não usava a tag a. Eu usava classes (por causa dos seletores) e atributos data-*. Depois usava o addEventListener() para todos os elementos que cumprem um seletor (querySelectorAll) para fazer o que indicas. Fora isso, é o q o yoda afirmou.

mas que linguagem é essa? jQuery? Eu sou novo nisto e procurava algo dentro de HTML / CSS / PHP, caso não seja possivel agradecia que me dissesses qual é essa linguagem.

Obrigado

Share this post


Link to post
Share on other sites
yoda

Se eu tivesse percebido, não tinha perguntado... Provavelmente já não te deves lembrar de como era quando estavas a aprender. De qualquer forma, obrigado pela resposta, vou pesquisar o que ele disse...

Quando aprendi sabia ler Inglês.

mas que linguagem é essa? jQuery? Eu sou novo nisto e procurava algo dentro de HTML / CSS / PHP, caso não seja possivel agradecia que me dissesses qual é essa linguagem.

Google it, aparece logo.

Se não mostras empenho na resolução das tuas próprias dúvidas, dificilmente conseguirás algo da comunidade, ou de ti próprio.

Share this post


Link to post
Share on other sites
XicoXperto
Se não mostras empenho na resolução das tuas próprias dúvidas, dificilmente conseguirás algo da comunidade, ou de ti próprio.

Realmente, tu fartas-te de ajudar...

Depois de voltar a pesquisar, o que percebi, foi exactamente o mesmo, ou seja, p o que ele diz é para fazer a tag <a> com href para onde quero e com width e height = 100% e posição relativa(posição relativa não tinha posto, mas não ajudou):

<a href="?pagina=agenda&dia='.$dia.'" style="display:block;width:100%;height:100%;text-decoration:none; position:relative;"> </a>

no entanto acontece isto:

screenshot20111220at123.th.png

Uploaded with ImageShack.us

as barras a preto são as tags <a>, realmente não entendo se era suposto ser este o efeito.

obrigado.

Share this post


Link to post
Share on other sites
Sergio S

Para além do PHP, HTML e CSS que já conhece, recomendo que investique o JavaScript. O JavaScript (ou ECMAScript), é a linguagem que serve de base ao AJAX, jQuery e muitas outras tecnologias web. Com esta linguagem, fazer um div clicável seria tão simples como adicionar um evento "onclick="javascript:window.location='[endereço]';"" ao div. Consulte a secção "Event Atributes" na página http://www.w3schools.com/tags/tag_div.asp.

Se optar por esta abordagem, recomendo que adicione o CSS "cursor:pointer;" aos div clicáveis, para fornecer uma indicação visual ao utilizador.

Embora hoje em dia o JavaScript seja amplamente suportado, por uma questão de SEO e compatibilidade pode ser preferível optar pela abordagem do a dentro do div. O que a citação em inglês lhe sugere é adicionar um a imediatamente dentro do div, de forma a que aquele o preencha completamente (tornando-o efetivamente clicável) e que coloque depois todos os sub-elementos dentro do a (<div><a>[elementos]</a></div>). O CSS completo para o a será "display:block; position:relative; left:0; top:0; height:100%; width:100%;".

Pela imagem que apresenta, eu diria que as barras a preto se devem ao fato de ter definido algures um CSS que torna preto o fundo dos elementos a.


Mais vale saber e não precisar, que precisar e não saber.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.