Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde, estou no final de um projeto, e com um problema que o cliente pediu pra incluir, e há duas semanas que não consigo evoluir nada na solicitacao dele. se alguem puder me ajudar.
detalhe do projeto:
o fotografo faz o upload de aproximadamente 3mil fotos para um album e o cliente acessando a area do cliente visualiza essas 3 mil fotos para escolher quais vai querer.
as fotos do album sao exibidas por um foreach, com o codigo abaixo:
<?php
$readGb = read('galeria',"WHERE post_id = '$postid'");///////////////////////////// lê os dados da galeria de acordo com a id do album ////////////////////////////////////
if(!$readGb){
}else{
echo '<ul class="gblist">';$i++;
?>
<li>
<?php
$verificaGb = read('pedidos',"WHERE id_foto ='$gb[id]'");////////////////////////// verifica se existe a foto gravada na tabela pedido, se nao existir exibe um link para poder "compa-la", se existir a foto o link nao é exibido //////////////////////////////////////////////////////////////////
if(!isset($verificaGb)){
?>
<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>" />Foto Álbum</a>/////////////////// ao clicar no link, é passado para a url o id do album + o id da foto //////////////////////////////////
<?php
}
?>///////////////// o codigo abaixo exibe a thumb e a imagem para o cliente ///////////////////////////////////////////////////
<span><img src="../tim.php?src=../uploads/<?php echo $gb['img'];?>&w=85&h=65&q=100&zc=1" width="147" height="109" /></span>
<div class="action">
<a href="../uploads/<?php echo $gb['img']; ?>" rel="shadowbox" title="<?php echo $gb['img_nome'];?>"><img src="ico/view.png" title="<?php echo $gb['img_nome'];?>" alt="<?php echo $gb['img_nome'];?>" /></a>
</div><!-- /action -->
</li>
<?php
endforeach;
echo '</ul>';
}
?>O que acontece, como é apenas uma div, o foreach exibe as 3mil fotos, a pagina fica imensa, o cliente vai rolando para baixo, e clica em uma determinada foto pra escolher, nisso a pagina da um refresh e volta para o topo, gostaria de saber se tem como ao cliente clicar no link, ele nao voltasse para cima, lembrando que é apenas uma div, no caso uma ancora o levaria ao final da pagina e ficaria na mesma.
detalhes adcionais:
é passado a id do album e id da foto, nisso meu codigo pega varios parametros como nome da imagem e outros atributos para gravar em outra tabela, tentei fazer como carrinho de compras, crianda um array, mas nao consegui fazer ele pegar todos os outros campos e gravar, e no caso de um array, ele teria que fazer um loop pelo pedido até finalizar.
Só se você colocasse a âncora no final da página...
entao, tipo como todos dizem, é meu primeiro projeto, a div que eu uso pra exibir a galeria é só uma, enquanto tem imagem no banco ele vai listando, como eu faria pra barra de rolagem voltar pro lugar exato que ela tava? a ancora iria fazer ela voltar?
aqui no imasters eu notei que tem isso, ao dar um f5 na pagina, ela recarregou e a barra de rolagem voltou para a posição que estava antes.
JavaScript get window X/Y position for scroll
Pode usar o que há no link acima. Entretanto, todavia e contudo, eu indicaria alterar a forma que a imagem está sendo inserida no "carrinho" para uma forma assíncrona (ajax), assim, além de evitar o scroll, evita o refresh da página e a demora de carregar todas as fotos novamente.
Essa propriedade de manter o scroll ao apertar F5 é feita pelo navegador, e não no html/php/javascript.
Existem dois tipos de refresh:
Utilizando o cache, o navegador mantem a janela no exato ponto aonde o usuário estava "ancorado" na página. Já no outro refresh, nada é armazenado.
>
JavaScript get window X/Y position for scroll
Pode usar o que há no link acima. Entretanto, todavia e contudo, eu indicaria alterar a forma que a imagem está sendo inserida no "carrinho" para uma forma assíncrona (ajax), assim, além de evitar o scroll, evita o refresh da página e a demora de carregar todas as fotos novamente.
Essa propriedade de manter o scroll ao apertar F5 é feita pelo navegador, e não no html/php/javascript.
Existem dois tipos de refresh:
Utilizando o cache, o navegador mantem a janela no exato ponto aonde o usuário estava "ancorado" na página. Já no outro refresh, nada é armazenado.
Gabriel Heming, obrigado pela ajuda, vou testar e retorno com o resultado.
como eu faria pra barra de rolagem voltar pro lugar exato que ela tava? a ancora iria fazer ela voltar?
Sim, observe que no iMaster ele faz isso quando tem um #entryX na URL. Isto é uma âncora.
Utilizando o cache, o navegador mantem a janela no exato ponto aonde o usuário estava "ancorado" na página. Já no outro refresh, nada é armazenado.
Acabei de testar o Ctrl + F5 no Chrome e voltou ao mesmo lugar.
Você testou uma URL com a âncora, faça o teste sem a âncora. É uma propriedade do navegador.
------
Adendo: isso pode variar de navegador (CTRL + F5).
- Opera (meu navegador principal), está salvando;
- Firerox, não salva no refresh sem cache;
- Internet Explorer, salva;
- Safari, não tem esse modo de refresh;infelizmente nao consegui posicionar o scroll conforme o eixo x e y, o jeito é apelar para as soluções provisorias, usei a paginação para exibir um limite de fotos na div, por exemplo, a tela suporta 30 imagens, o restante será carregado nas proximas paginas, o refresh nao vai sair do lugar.
jQuery
var posicao = $(document).scrollTop(); // OBTÉM A POSIÇÃO DO SCROLL
$.get('pagina.php?scroll='+posicao, function(data){
location.reload(); // ATUALIZA A PÁGINA
$(document).scrollTop(posicao); // POSICIONA O SCROLL DE ONDE PAROU
});Você testou uma URL com a âncora, faça o teste sem a âncora. É uma propriedade do navegador.
Negativo, me atentei a isso. E concluindo então, não dá pra depender do navegador sobre isso.
jQuery
Acho que estamos complicando uma coisa simples. Âncoras resolvem.
Acho que estamos complicando uma coisa simples. Âncoras resolvem.
cabe o autor do post decidir.
é só mais uma opção man, relax :thumbsup:
>
jQuery
var posicao = $(document).scrollTop(); // OBTÉM A POSIÇÃO DO SCROLL
$.get('pagina.php?scroll='+posicao, function(data){
location.reload(); // ATUALIZA A PÁGINA
$(document).scrollTop(posicao); // POSICIONA O SCROLL DE ONDE PAROU
});Hugo, desculpe minha ignorância, como utilizo o codigo acima? inseri o mesmo na minha jqruey, substitui a pagina.php? pela minha url, mas nao obtive sucesso,
se ajudar minha url é assim: index2.php?exe=album/gallery-cliente&postid=id_do_album
onde o postid= é uma variavel passada pela url, de acordo com id do album do cliente
o código abaixo é da página index2.php ?
<?php
$readGb = read('galeria',"WHERE post_id = '$postid'");echo '<ul class="gblist">';$i++;
?>
<li>
<?php
$verificaGb = read('pedidos',"WHERE id_foto ='$gb[id]'");?>
<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>" />Foto Álbum</a><?php
}
?><span><img src="../tim.php?src=../uploads/<?php echo $gb['img'];?>&w=85&h=65&q=100&zc=1" width="147" height="109" /></span>
<div class="action">
<a href="../uploads/<?php echo $gb['img']; ?>" rel="shadowbox" title="<?php echo $gb['img_nome'];?>"><img src="ico/view.png" title="<?php echo $gb['img_nome'];?>" alt="<?php echo $gb['img_nome'];?>" /></a>
</div><!-- /action -->
</li>
<?php
endforeach;
echo '</ul>';
}
?>>
o código abaixo é da página index2.php ?
<?php
$readGb = read('galeria',"WHERE post_id = '$postid'");echo '<ul class="gblist">';$i++;
?>
<li>
<?php
$verificaGb = read('pedidos',"WHERE id_foto ='$gb[id]'");?>
<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>" />Foto Álbum</a><?php
}
?><span><img src="../tim.php?src=../uploads/<?php echo $gb['img'];?>&w=85&h=65&q=100&zc=1" width="147" height="109" /></span>
<div class="action">
<a href="../uploads/<?php echo $gb['img']; ?>" rel="shadowbox" title="<?php echo $gb['img_nome'];?>"><img src="ico/view.png" title="<?php echo $gb['img_nome'];?>" alt="<?php echo $gb['img_nome'];?>" /></a>
</div><!-- /action -->
</li>
<?php
endforeach;
echo '</ul>';
}
?>esse codigo é da pagina gallery-cliente,segue abaixo minha index2:
<?php
ini_set("display_errors", "0");
ob_start(); session_start();
require('../dts/dbaSis.php');
require('../dts/getSis.php');
require('../dts/setSis.php');
require('../dts/outSis.php');
if(!$_SESSION['autUser']){
header('Location: index.php'); $userid = $_SESSION['autUser']['id'];
$readAutUser = read('up_users',"WHERE id = '$userid'");
if($readAutUser){
foreach($readAutUser as $autUser);
if($autUser['nivel'] < '1' || $auUser['nivel'] > '2'){
header('Location: '.BASE.'/pagina/perfil');
}elseif($_SESSION){
$status = $_SESSION['autUser']['status'];
$readStatus = read('up_users',"WHERE status = '1'");
if($readStatus){
foreach($readStatus as $autStatus);
if($autStatus['status'] == '0'){
header('Location: index.php');
}
}
}
}else{
header('Location: index.php');
}
}
//echo '<pre class="debug">';
//print_r ($_SESSION);
//echo '</pre>';
?><!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Painel Administrativo - Virgilius da Costa</title>
<meta name="title" content="Painel Administrativo - Virgilius da Costa" />
<meta name="description" content="Área restrita aos administradores" />
<meta name="keywords" content="Login, Recuperar Senha, Virgilius da Costa" />
<meta name="author" content="Rafael Ferreira" />
<meta name="url" content="http://localhost/projeto" />
<meta name="language" content="pt-br" />
<meta name="robots" content="NOINDEX,NOFOLLOW" />
<link rel="icon" type="image/png" href="ico/chave.png" />
<link rel="stylesheet" type="text/css" href="css/painel.css" />
<link rel="stylesheet" type="text/css" href="css/geral.css" />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/upd.js'></script>
</head>
<body>
<div id="painel">
<?php require_once('includes/header.php'); ?>
<div id="content">
<?php require_once('includes/menu.php'); ?>
<div class="pg">
<?php
if(empty($_GET['exe'])){
require('home.php');
}elseif(file_exists($_GET['exe'].'.php')){
require($_GET['exe'].'.php');
}else{
echo '<div class="bloco"><span class="ms in"> Desculpe, esta página nao existe!</span></div>';
}
?>
<!-- conteudo do site aqui-->
</div><!-- fechou pg -->
</div><!-- /content -->
<div style="clear:both"></div>
<div id="footer">
Desenvolvido por <a href="#" title="Sistema desenvolvido por Rafael Ferreira">Rafael Ferreira</a>
</div> <!-- fecha footer -->
</div><!-- //painel -->
</body>
<?php
require_once('../js/jscSis.php');
require_once('js/jsc.php');
ob_end_flush();
?>
</html>Como você mesmo citou, observe o iMaster:
Página normal:
http://forum.imasters.com.br/topic/516335-recuperar-posicao-da-barra-de-rolagem-ao-dar-refresh/
Página apontando uma âncora:
http://forum.imasters.com.br/topic/516335-recuperar-posicao-da-barra-de-rolagem-ao-dar-refresh/#entry2051026
Para isso você só precisa da tag [](http://www.w3schools.com/html/html_links.asp) com o atributo id indicando as âncoras. E da mesma tag com o atributo href indicando os links pelos quais as âncoras serão acessadas.
Execute o código abaixo, clicando e observando a URL, terá o mesmo efeito aqui do fórum:
<html>
<body>
<p>
<h3>
<!-- Âncora <-> Link -->
<a id="post1">Post</a> <a href="#post1">#1</a>
</h3>
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>
<h3>
<!-- Âncora <-> Link -->
<a id="post2">Post</a> <a href="#post2">#2</a>
</h3>
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>
<h3>
<!-- Âncora <-> Link -->
<a id="post3">Post</a> <a href="#post3">#3</a>
</h3>
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>
<h3>
<!-- Âncora <-> Link -->
<a id="post4">Post</a> <a href="#post4">#4</a>
</h3>
</p>
</body>
</html>>
Como você mesmo citou, observe o iMaster:
Página normal:
http://forum.imasters.com.br/topic/516335-recuperar-posicao-da-barra-de-rolagem-ao-dar-refresh/
Página apontando uma âncora:
Para isso você só precisa da tag [](http://www.w3schools.com/html/html_links.asp) com o atributo id indicando as âncoras. E da mesma tag com o atributo href indicando os links pelos quais as âncoras serão acessadas.
Execute o código abaixo, clicando e observando a URL, terá o mesmo efeito aqui do fórum:
<html>
<body>
<p>
<h3>
<!-- Âncora <-> Link -->
<a id="post1">Post</a> <a href="#post1">#1</a>
</h3>
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>
<h3>
<!-- Âncora <-> Link -->
<a id="post2">Post</a> <a href="#post2">#2</a>
</h3>
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>
<h3>
<!-- Âncora <-> Link -->
<a id="post3">Post</a> <a href="#post3">#3</a>
</h3>
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>
<h3>
<!-- Âncora <-> Link -->
<a id="post4">Post</a> <a href="#post4">#4</a>
</h3>
</p>
</body>
</html>Compreendo, a questao é que eu tenho apenas 1 link
<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>"
/>Foto Álbum</a>
como as fotos sao apresentadas por um foreach, ele faz um loop e mostra todas as fotos, cada foto aparece um botaozinho nela com esse link em cima, o que diferencia é que no final do link ele mostra o id da foto : &foto=<?php echo $gb['id'];?>ou seja, si eu ancorar o link, quando eu clicar nele, ele vai fazer o refresh e vai voltar pra primeira foto
Ta.. então ao clicar no link
<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>" />Foto Álbum</a>utilizado jquery você poderia envia os dados sem sair da página.
onde ta location.reload(); para atualizar. pode ser substituída por $(campo).html( data ); afim de atualizar um determinado campo sem atualizar toda a página (opcional).
<script>
$(document).ready(function(){
$('.action').click(function(){
var posicao = $(document).scrollTop(), // OBTÉM A POSIÇÃO DO SCROLL
url = $(this).attr('href'); // PEGA O LINK
$.get(url, function(data){ // ENVIA OS DADOS
location.reload(); // ATUALIZA A PÁGINA
$(document).scrollTop(posicao); // POSICIONA O SCROLL DE ONDE PAROU
});
return false;
});
});
</script><a class="btn action" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>" />Foto Álbum</a><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
>
Ta.. então ao clicar no link
<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>" />Foto Álbum</a>utilizado jquery você poderia envia os dados sem sair da página.
onde ta location.reload(); para atualizar. pode ser substituída por $(campo).html( data ); afim de atualizar um determinado campo sem atualizar toda a página (opcional).
<script>
$(document).ready(function(){
$('.action').click(function(){
var posicao = $(document).scrollTop(), // OBTÉM A POSIÇÃO DO SCROLL
url = $(this).attr('href'); // PEGA O LINK
$.get(url, function(data){ // ENVIA OS DADOS
location.reload(); // ATUALIZA A PÁGINA
$(document).scrollTop(posicao); // POSICIONA O SCROLL DE ONDE PAROU
});
return false;
});
});
</script><a class="btn action" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>" />Foto Álbum</a><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
|o| Hugo Sóstenes, simplismente resolvido, nao sei nem como agradecer, show de bola
Só se você colocasse a âncora no final da página...