Carlos Rocha Posted February 23, 2014 at 11:37 AM Report #546331 Posted February 23, 2014 at 11:37 AM Pessoal, bom dia! Tenho um JCarroussel no site abaixo: http://www.bateriasadvance.com.br/morrodesaopaulo.inf.br/ O JCarroussel se encontra abaixo do banner na seção de Portais. À cada imagem exibida no JCarroussel, esta associado um id="nome do portal". Preciso criar uma função que pegue o valor de uma caixa de teste e vai comparando letra a letra que o usuário digitar se existe uma imagem com aquele id. Se existir, duas coisas deverão acontecer: 1) A imagem ganhará uma borda; 2) Se ela estiver escondida no JCarroussel, ela virá para o meio dele. Alguém tem um tutorial de como fazer isso? Eu até tentei. Mas ainda estou esbarrando na verificação se já existe ou não imagem coim aquele id. Veja: <label class="titulos">Portais</label> <div id="container"> <?php $pesquisaPortaisString ="SELECT id, nome, logo FROM portais ORDER BY nome"; $pesquisaPortaisQuery=$conexao->Query($pesquisaPortaisString); if ($pesquisaPortaisQuery->num_rows==0) { echo "Ainda não há portais cadastrados!"; } else { if ($pesquisaPortaisQuery->num_rows<=5) { $quantasFotos=$pesquisaPortaisQuery->num_rows; } else { $quantasFotos=5; } ?> <script type="text/javascript"> $(window).load(function () { $("#carrossel").jCarouselLite({ btnPrev : '#prev1', btnNext : '#next1', auto : 0, speed : 500, visible : <?php echo $quantasFotos; ?> }) }) </script> <script> function pesquisa(campo) { valor='"#'+campo.value+'"'; if ( $(valor).length ) { alert(valor); $(valor).css({ "border": '2px solid #ff0000'}); } } </script> <div id="result"></div> <div> Pesquisa: <form name="selecionaPostal" action=""> <input type="text" name="pesquisaPortal" id="pesquisaPortal" onkeyup="pesquisa(this)" /> </form> </div> <div><a href="#" class="prev" id="prev1"><img src="img/anterior.png" width="30px" /></a></div> <div id="carrossel" style="float:left"> <ul> <?php while(list($id, $nome, $nomeFoto)=$pesquisaPortaisQuery->fetch_row()) { ?> <li><img id="<?php echo $nome; ?>" src="<?php echo endereco_portais."/".$nomeFoto; ?>" alt="<?php echo $nome; ?>" title="<?php echo $nome; ?>" onclick="javascript:AbreImagemGrande('portaisMostrar.php?id=<?php echo $id; ?>','ImpNot','1100','700')" width="183px" /></li> <?php } ?> </ul> </div> <div><a href="#" class="next" id="next1"><img src="img/proximo.png" width="30px" /></a></div> <?php } ?> </div> Alguma orientação? Grato a quem puder ajudar!
Devexz Posted February 23, 2014 at 01:23 PM Report #546340 Posted February 23, 2014 at 01:23 PM não sei porque abriste um novo tópico se podias continuar no outro... Primeiro problema: não podes ter espaços no teu id ou seja <div id = "Este id nao vai funcionar"> Minha div é fixe </div> Mas já podes ter este método em classes: <div class = "Esta vai funcionar"> Minha div é fixe que a tua </div> Sendo assim todo o css reference às classes .Esta .vai .funcionar Será aplicado na div. Moral da história, primeiro resolve o problema do id das divs para poder identificá-las. Contador de calorias: caloriaspordia.com
Carlos Rocha Posted February 23, 2014 at 02:55 PM Author Report #546356 Posted February 23, 2014 at 02:55 PM (edited) Eu abri este tópico pois o assunto do outro estava indo para um lado mais de Ajax que de JQuery. Bom. Quer dizer que id's não podem conter espaço? Então como reconhecer o nome do id? Retirando os espaços? Com class="" eu não entendi muito como validar a existência do campo. Pode explicar melhor fazendo favor? Uma observação: Eu coloquei o id na <img> não na <div>. Seria melhor na <div>? <img id="<?php echo str_replace(' ','',$nome); ?>" src=.. Não resolveu não! Edited February 23, 2014 at 05:11 PM by carcleo
Carlos Rocha Posted February 24, 2014 at 02:59 PM Author Report #546476 Posted February 24, 2014 at 02:59 PM Consegui assim: <label class="titulos">Portais</label> <div id="container"> <?php $pesquisaPortaisString ="SELECT id, nome, logo FROM portais ORDER BY nome"; $pesquisaPortaisQuery=$conexao->Query($pesquisaPortaisString); if ($pesquisaPortaisQuery->num_rows==0) { echo "Ainda não há portais cadastrados!"; } else { if ($pesquisaPortaisQuery->num_rows<=5) { $quantasFotos=$pesquisaPortaisQuery->num_rows; } else { $quantasFotos=5; } ?> <div> Pesquisa: <form name="selecionaPostal" action=""> <input type="text" name="pesquisaPortal" id="pesquisaPortal"/> </form> </div> <div><a href="#" class="prev" id="prev1"><img src="img/anterior.png" width="30px" /></a></div> <div id="carrossel" style="float:left"> <ul> <?php while(list($id, $nome, $nomeFoto)=$pesquisaPortaisQuery->fetch_row()) { ?> <li><img src="<?php echo endereco_portais."/".$nomeFoto; ?>" alt="<?php echo $nome; ?>" title="<?php echo $nome; ?>" onclick="javascript:AbreImagemGrande('portaisMostrar.php?id=<?php echo $id; ?>','ImpNot','1100','700')" width="183px" /></li> <?php } ?> </ul> </div> <div><a href="#" class="next" id="next1"><img src="img/proximo.png" width="30px" /></a></div> <script type="text/javascript"> $("#pesquisaPortal").on("keyup", function(){ //Pesquisa pot title $("[title='" + $(this).val() + "']").css('border', '1px solid red'); }); $(window).load(function () { $("#carrossel").jCarouselLite({ btnPrev : '#prev1', btnNext : '#next1', auto : 0, speed : 500, visible : <?php echo $quantasFotos; ?> }) }) </script> <?php } ?> </div> Mas acontece que este código esta ocorrendo uma falha ainda: Achado uma imagem e estando ela marcada, se eu apagar alguma letra ou acrescentar mais alguma, o valor do title é mudado e então, aquela imagem já não é a procurada. Obviamente, o que se espera é que o Jquery desmarque. Mas não esta desmarcando não. Ou seja, se acrescentando (ou excluindo) alguma letra na caixa de pesquisa, se existir aquela combinação, então teremos duas imagens marcadas em vez de uma. Como corrigir isso?
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now