Acesso a div especifica

[joserenato 0]

Olá, galera


Gostaria muito da ajuda de vocês...o meu problema é o seguinte, tenho a página home que listo três postagem do banco com quantidade minima de 100 caracteres e no final tenho um link leia mais onde o usuário clica e direciona para uma outra página serviço e lá existem três div's conteúdo com o restante do poste...minha dúvida é:
No link $linhaTabela[link] estou passando o link gravado no banco com a pagina serviço

<?php echo limitar($post); ?>...<br /><a href="<?php echo $linhaTabela[link]; ?>"><strong>Leia Mais</strong></a>

Gostaria que conforme o assunto clicado na página home encaminhasse para a div especifica com o conteúdo desejado...
Isso é possível ?

Obrigado

[William Phantom 32]

isso é html :)

é só colocar o no endereço:

pagina.php#nome-da-div

[joserenato 0]

Olá, william.

 

Não da certo, eu passo o link da pagina no <a href="<?php echo $linhaTabela[link]; ?>"><strong>Leia Mais</strong></a>

Coloquei no banco na coluna link o endereço, e passei desse forma que você me mostrou, ex: index.php?pag=10#nome-da-div e não deu certo...

[Maykel-ctba 233]

HTML Anchors não funcionam apenas com links?

 

Tente assim:

 

- Em cima de cada div com conteudo completo, bote um link: <a id="#click01"></a> (exemplo)

- Aí onde você clicar, você passa o ID do link acima... <a href="pagina.php#click01">Clica aqui e vai que é tua Taffarel</a>

[joserenato 0]

Sei lah, fiz da forma que você pediu e não funcionou...

 

att

[Bacsh 4]

Coloque o código da sua página para entender, porque está complicado.

 

O que você está querendo fazer é uma coisa bem simples pelo jeito, se chama âncora, você quer clicar em um link e a página vai até a div que você precisa.

 

Se for apenas isso olhe isso:

 

http://chocoladesign.com/ancora-html

[joserenato 0]

//Vou explicar melhor...

 

//Na página serviço eu tenho duas div's e também um menu para essas duas div's, se o usuário entrar direto na página serviço vai //aparecer o conteúdo um e a outra vai ficar escondida e o menu da página vai ficar marcado de outra cor referenciando a div //mostrada

 

<div class="conteudo" id="pagina-6">

conteudo um

</div>

 

<div class="conteudo" id="pag7">

conteudo dois

</div>

 

 

//aqui o código do menu

 

<td class="serv-style" width="235" >

<a id="pag6" title="Gestão Patrimonial"><span style="float:left; margin-left:7px; ">Software Patrimonial</span></a>

</td>

 

 

<td class="serv-style " width="235">

<a id="pag7" title="Gestã de Patrimônio"><span style="float:left; margin-left:7px; ">Etiquetas de RFID</span></a>

</td>

//vou postar aqui tbem o javascrit que fiz para quando clicar marcar a div correspondente no menu

<script type="text/javascript">

$(function() {

$(".serv-lista").tabs("div.conteudo", {event:'click'});

$('.serv-style').click(function(){

$('.serv-style').removeClass('ativo');

$(this).addClass('ativo');

$(this).load('ativo');

});

});

</script>

//Até ai tudo bem, na página home eu tenho três colunas com o resumo do serviço que prestamos...e faço um select do banco //pegando o conteúdo da tabela e o link que direciona para página serviço e coloco aqui

<a href="<?php echo $linhaTabela[link]; ?>">Leia Mais</a>

//Só que tem um detalhe, eu estou usando o plugin do jquery para esconder a demais div's...se eu tirar isso e ao clicar no link ele me //direciona a div correta mas não esconde as demais. Concluindo, a ancora funciona mas eu queria mostrar apenas uma div...teria //alguma função para esse evento ?

att

[Evandro Oliveira 331]

<a href="<?=$linhaTabela['link'];?>#ancora">Leia Mais</a>

A página alvo, deve ter um elemento com [inline]id="ancora"[/inline]

[joserenato 0]

Desse forma é ancora, ela funciona mas não pega a id da div que passei...isso tudo é pq eu estou usando script na página-serviço que mostra apenas uma div as demais ficam escondidas...fazendo esse ex que você passou ela carrega a primeira div, é como se eu não tivesse passado nada. Preciso talvez de uma função, ou sei lah se isso é possível também... não consegui pensar em nada...você tem alguma solução ?

 

Mas muito obrigado por me ajudar Evandro.

 

Abraço

Acho que pra resolver meu caso eu teria que passar um parâmetro pela URL e pegar com o javascript e associar com o valor da div, mas dizendo bem a verdade...eu não sei como fazer isso...

att

[Bacsh 4]

Bom pelo o que eu entendi:

 

Você te, uma página chamada: serviços.html

 

Nesta página você tem 3 div's mostrando cada serviço, vamos supor que eu tenho um menu com 3 botões: Principal, Serviços, Contato.

 

Clicando no Serviços você quer que apareça apenas a primeira DIV e destaque um botão, ok, aparentemente você já fez isso.

 

Na página Principal você tem 3 botões que cada um mostra um serviço da página serviço.html que representa uma div, você quer passar um valor nesta página para que quando entre na página apenas aquele serviço apareça, ok.

 

Se o que eu entendi está correto o que você precisa fazer é passar um valor no link na principal como se fosse PHP, para o primeiro serviço da página principal link assim:

 

http://www.seusite.com.br/servicos.html?valor=servico1

 

 

 

e no outro coloca servico2...

 

http://www.seusite.com.br/servicos.html?valor=servico2

 

e no outro coloca servico3...

 

http://www.seusite.com.br/servicos.html?valor=servico3

 

 

Agora você vai precisar de uma função para capturar o valor, como se fosse o GET do PHP só que em javascript:

 

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
 
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
		hash[1] = unescape(hash[1]);
		vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
 
    return vars;
}
 
//Exemplo de URL get-url-variables.htm?variavel1=Primeira variavel&variavel2=Segunda variavel
 
var pedaco = getUrlVars();
alert(pedaco['variavel1']); // Caixa de alerta resultara "Primeira variavel"
alert(pedaco['variavel2']); // Caixa de alerta resultara "Segunda variavel"

 

 

Aqui está um exemplo que já usei, com certeza vai lhe ajudar.

 

Agora basta fazer um IF ELSE básico com o pedaco['variavel1'] e exibir apenas a div que você quer :)

[Evandro Oliveira 331]

Sem bola de cristal fica difícil mesmo.

[joserenato 0]

E ae, Bacsh.

 

É isso mesmo, fazer uma função para pegar o valor da url e associar o valor com a div...

 

 

Valew pela ajuda.

 

Obrigadão

Abraço

[Bacsh 4]

E ae, Bacsh.

 

É isso mesmo, fazer uma função para pegar o valor da url e associar o valor com a div...

 

 

Valew pela ajuda.

 

Obrigadão

Abraço

 

Fico feliz por ter ajudado,

 

Se possível poste o resultado dos códigos aqui, provavelmente vai ajudar alguém futuramente e não se esqueça de marcar o tópico como resolvido :)

[joserenato 0]

Bacsh, estou usando sua função para pegar o valor da url, em seguida eu faço a condição IF ELSE comparando com o valor, quando uso o

document.getElementById('valorum').style.display = 'block';

ele me da esse erro


Cannot read property 'style' of null

 

poxa, mas estou passando o o valor da div correta....o que estou fazendo de errado ?

 

abraço

[Bacsh 4]

Olá amigo segue um exemplo para mostrar a div:

if(option == "show"){            document.getElementById("hiddenDiv").style.visibility ="visible";        }

Use aspas duplas e verifica se sua div está com o id valorum

 

Deve estar assim:

<div class="seu_estilo" id="valorum">O que eu quero mostrar</div>

[joserenato 0]

Coloquei todos os valores dentro de aspas dupla...e mais esse exemplo que me passou e ainda continua dando no concole javascript

 

Cannot read property 'style' of null

 

E me mostrando as duas div's

 

O código que estou usando para mostrar a div

 

 

if (varURL["variavel"] == "primeira"){

document.getElementById("valorum").style.visibility ="visible";

}else {

document.getElementById("valordois").style.visibility = "visible";

}

Estou fazendo alguma coisa de errado ?

[Bacsh 4]

Qual o css que está na div?

 

Tente colocar um style ali para ver se funciona...

 

exemplo:

 

<div style="visibility:visible" class="sua_classe" id="seu_id">
</div>

 

Lembre-se que no javascript você está tentando achar pelo id da div e não pela class.

[contento 1]

Coloque o código da sua página para entender, porque está complicado.

[joserenato 0]

Olha pessoal, vou postar aqui um teste, é a mesma coisa que estou usando no site

 

Página index.html

 

 

<head>

<script type="text/javascript" src="jquery.tools.min.js"></script>

</head>

<body>

<a href="conteudo.php?variavel=segunda">Click aqui !</a>

</body>

Página conteudo.php, nela contem o código javascript que pega o valor da url

<head>

<script type="text/javascript">

function getUrlVars(){

var vars = [], hash;

var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

for (var i = 0; i < hashes.length; i ++){

hash = hashes.split('=');

hash[1] = unescape(hash[1]);

vars.push(hash[0]);

vars[hash[0]] = hash[1];

}

return vars;

}

var varURL = getUrlVars();

//alert(pedaco['variavel']);

if (varURL["variavel"] == "primeira"){

document.getElementById("valorum").style.visibility = "visible"

}else {

document.getElementById("valordois").style.visibility = "visible";

}

</script>

</head>

em seguida as div´s que quero mostrar conforme a comparação do valor que estou passando na url

<body>

<div id="valorum" style="visibility:hidden;" >

<p>aqui esta o valor da div um</p>

</div>

<div id="valordois" style="visibility:hidden;" >

<p>aqui fica o valor da div dois</p>

</div>

</body>

Toda essa demostração é um teste que estou usando para depois eu use no meu site. No console javascript da o seguinte erro

Cannot read property 'style' of null

Desculpa galera, mas eu não estou entendendo porque não esta dando certo...talvez um olhar mais profissional de vocês seja a solução...

Abraço

[Bacsh 4]

Olá amigo o problema é que você está usando javascript puro, isso aqui resolveria o seu problema se usasse jquery:

 

$(document).ready(function() {  
   //
});

 

Então para você entender o valor está dando null porque a div não existe, entenda que o html é lido de cima para baixo, já como seu javascript está em cima da div ele tenta colocar um style para uma div que nem existe naquele momento, por isso ele retorna null, a forma mais simples é jogar o seu javascript lá para baixo, não se preocupe em ter que ficar dentro do head, isso não é necessário.

 

Eu testei aqui e funcionou, alterei o nome das páginas mas olha só:

 

Página 1:

 

<html>
<head>
</head>

<body>
<a href="teste_imaster.html?variavel=primeira">Click aqui !</a>
</body>

</html>

 

Página 2:

 

<html>
<head>
<script type="text/javascript">
function getUrlVars(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
 
for (var i = 0; i < hashes.length; i ++){
hash = hashes[i].split('=');
hash[1] = unescape(hash[1]);
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
 
}
</script>
</head>
 


<body>
<div id="valorum" style="visibility:hidden">
 
<p>aqui esta o valor da div um</p>
</div>
 
 
<div id="valordois" style="visibility:hidden">
<p>aqui fica o valor da div dois</p>
</div>

 <script type="text/javascript">
                 var varURL = getUrlVars();
//alert(pedaco['variavel']);
if (varURL["variavel"] == "primeira"){            
document.getElementById("valorum").style.visibility = "visible";
 
}else {
document.getElementById("valordois").style.visibility = "visible";
}
 </script>
 
</body>
</html>

 

Fazendo isso o navegador já vai ter lido as div's com os id's assim o seu javascript vai conseguir localizar a div e atribuir o style, assim não retornando mais o null, legal né?

 

Caso você usasse aquela função do jquey que citei acima ela força o arquivo ser lido antes do javascript portanto não importa onde você coloca o javascript que ele sempre vai funcionar, é apenas uma curiosidade de brinde para você :D

 

Não se esqueça de marcar o tópico como resolvido :)