Jump to content

Recommended Posts

Posted

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!

Posted

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

Posted (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 by carcleo
Posted

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?

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
×
×
  • Create New...

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.