2

He creado una lista ul y en cada elemento li he colocado imágenes, el caso es que desktop cuando hago hover encima de estas imágenes se despliega una capa sobre la imagen que ya tenia previamente oculta, en esa capa se muestra información de la imagen. Cuando hago ya no paso el cursor por encima de la imagen esta capa se vuelve a ocultar. El problema es que en versión móvil el efecto hover no funciona como en desktop sino que hay que hacer uno y hasta dos click encima de la imagen para que pueda mostrar esta capa con información.

he creado este código en javascript para que en dispositivos móviles al hacer un click tipo tap me muestre la información:

$(".item").on('click touchend', function(e) {

var mediaquery = window.matchMedia("(max-width: 767px)");

if (mediaquery.matches) 
{
// mediaquery yes
$(".menu-desc").css("left", "0px");
} 
else 
{
// mediaquery no
}

});//click event

funciona para lo que necesito el problema es que detecta el click en una de las cajitas, aparece la información en todas las cajitas a la vez, lo cual no es lo deseado, si el touched se hace en una de las cajitas solo en esa debe aparecer la información, y asi sucesivamente. No puedo hacer referencia a las cajitas por medio de un id ya que no tengo control de cuantas cajitas se crean, ya que estas cajitas se van agregando por medio de un panel de administración de contenido. Pueden haber tantas cajitas como el usuario quiera, entonces no se cómo hacer para que me detecte exactamente cada cajita de forma individual.

Cómo podría lograr esto? La idea es sustituir hover, en versión móvil.

Código de las cajitas:

            <ul id="menu-pricing" class="menu-price">
                            <?php 

                            for ($j=0; $j <count($categories); $j++) 
                             { 
                              ?>
                            <li class="item <?php echo $categories[$j][1];?>">
                                <a href="#">
                                    <img src="admin/<?php echo $categories[$j][4];?>" class="img-responsive" alt="Referenzen Works" >
                                    <div class="menu-desc text-center">
                                        <span>
                                        <h3><?php echo $categories[$j][5];?></h3>
                                          <?php 
                                          if ($categories[$j][6] !== "empty") 
                                          {
                                            ?>
                                            <h4><?php echo $categories[$j][6]; ?></h4>
                                            <?php 
                                          }
                                          ?>
                                        </span>
                                    </div>
                                </a>
                            </li>
                          <?php 
                            } //for
                            ?>
                        </ul>

HTML resultante:

                            <ul id="menu-pricing" class="menu-price">

                 <li class="item aqui-va-una-clase-definida-por-el-usuario">
                                <a href="#">
                                    <img src="admin/public/imagen.png" class="img-responsive" alt="Referenzen Works" >
                                    <div class="menu-desc text-center">
                                     <span>
                                        <h3>Titulo principal de cada box</h3>

                                         <h4>Subtitulo de cada box (este es opcional,el usuario elige si lo quiere poner o no)</h4>
                                        </span>
                                    </div>
                                </a>
                            </li>

                        </ul>

La información en las cajitas viene desde la base de datos.

Este es el css:

              /** menu-pricing list **/
                #images_li_options_container
                {
                  margin-left: 0px !important;
                  margin-right: 0px !important;
                  padding-left: 0px !important;
                  padding-right: 0px !important;
                }

                #images_li_options_container .row
                {
                  padding-left: 0px !important;
                  padding-right: 0px !important;
                }

                #menu-pricing {
                  display: block;
                    width: 100%;
                    padding: 50px 0px 25px 0px;
                    margin-bottom: 0;
                  text-align: left;
                }

                #menu-pricing .item {
                  background-color: white;
                  /*box-shadow: 0px 2px 5px white; #948E8E;*/
                  display: none;
                  /*opacity: 0;*/
                  vertical-align: top;
                  margin-bottom: 0px;
                  margin-right: 0px;
                  color: #fff;
                  text-align: center;
                  width: 33.1%;
                  height: 220px;
                  -moz-box-sizing: border-box;
                }

                #menu-pricing .item a {
                  display: inline-block;
                  max-width: 100%;
                  max-height: 220px;
                  text-decoration: none;
                  background: #fff;
                  text-align: center;

                }

                @media (min-width: 991px) {
                  #menu-pricing .item:nth-child(7),
                  #menu-pricing .item:nth-child(8),
                  #menu-pricing .item:nth-child(9) {
                    margin-bottom: 0px;
                  }
                }

                @media (min-width: 1200px)
                {
                #images_li_options_container.container {
                    width: 100% !important;
                }

                }

                /*  --========================    for  hover direction  =============================-- */

                .menu-price li a,
                .menu-price li a img {
                  display: block;
                  position: relative;
                }
                .menu-price li a {
                  overflow: hidden;
                  color: #fff;
                }
                .menu-price li a .menu-desc {
                  position: absolute;
                  font-size: 14px;
                  background: rgba(255, 255, 255, 0.7); /*rgba(29, 136, 197, 0.4); blue */
                  width: 100%;
                  height: 100%;
                  top: 0px;
                  left: -100%;

                  -webkit-transition: all 0.3s ease;
                  -moz-transition: all 0.3s ease-in-out;
                  -o-transition: all 0.3s ease-in-out;
                  -ms-transition: all 0.3s ease-in-out;
                  transition: all 0.3s ease-in-out;

                }

                .menu-price li a .menu-desc span h3 {
                  font-size: 30px;
                  margin-bottom: 15px;
                }

                .menu-price li a:hover .menu-desc {
                  left: 0px;
                }

                #menu-pricing .item img {
                  max-width: 100%;
                  height: 220px;
                  text-align: center;
                  -webkit-transition: all .2s ease-in-out;
                  -moz-transition: all .2s ease-in-out;
                  -o-transition: all .2s ease-in-out;
                  -ms-transition: all .2s ease-in-out;
                }

                #menu-pricing .item:hover img 
                {
                 -webkit-transform: scale(1.8); 
                    -moz-transform: scale(1.8);
                    -o-transform: scale(1.8);
                    transform: scale(1.8);
                }

                .menu-price li a:hover .menu-desc span {
                  display: block;
                  /*color: rgba(255,255,255,0.9);*/
                  font-size: 23px;
                  padding: 22% 20px;
                  line-height: 23px;
                  color: black !important;
                  font-weight: bold !important;
                }  
6
  • has intentado con @media querys ? asi solo a los moviles le aplicas ciertos CSS.
    – elporfirio
    Commented el 21 nov. 2018 a las 18:25
  • para este caso en particular estoy usando media queres pero por medio de javascript. He editado mi pregunta, agregando nueva información que explica mejor la duda.
    – Carmen B.
    Commented el 21 nov. 2018 a las 18:50
  • id="box-{$j}" para cada cajita tendra un numero no importa cuantas cree el usuario el numero no se repetira :v y sera unico e.target.id recuperar el id de ese click o touched $(".menu-desc #" + e.target.id ).css("left", "0px"); esto recuperara y el selector qudaria asi $(".menu-desc #box-2") por ejemplo! tambien podrias publicar el codigo html generado por el php ya que como es de js no necesitamos ver el php!
    – Bryro
    Commented el 21 nov. 2018 a las 19:18
  • @Bryro pero en esta parte $(".item").on('click touchend', function(e) se le sigue dejando la clase .item ?
    – Carmen B.
    Commented el 21 nov. 2018 a las 19:28
  • publica el html resultante y doy respuestas con la solucion y explicacion!
    – Bryro
    Commented el 21 nov. 2018 a las 19:33

1 respuesta 1

1

No es necesaria la utilización de IDs, puedes hacer referencia a cada uno de los elementos de la lista mediante la palabra reservada this, que te permite manipular el elemento con el que estás interactuando en cada momento.

Te he creado un ejemplo sencillo para que se vea mejor el efecto, sólo tendrías que adaptarlo en tu código a tu gusto. En el momento en el que des click sobre cada uno de los elementos, el elemento cambiará de color a verde y aparecerá un mensaje en el log con el valor de su atributo name.

Ejemplo:

$(".item").on('click touchend', function(e) {
  $(this).css("color","green");
  console.log($(this).attr('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item" name="elemento1">Elemento 1</li>
  <li class="item" name="elemento2">Elemento 2</li>
  <li class="item" name="elemento3">Elemento 3</li>
</ul>

3
  • El ejemplo funciona, cuando voy haciendo scroll en cada tocada(touched) que le doy a la pantalla por esas imagenes se va haciendo el efecto, lo cual es genial, lo único es que si le doy un doble click
    – Carmen B.
    Commented el 23 nov. 2018 a las 14:05
  • Hola @RolandF, creo que se ha cortado el comentario a mitad. ¿cual es el problema que estás experimentando? Commented el 25 nov. 2018 a las 20:07
  • cuando voy haciendo scroll or las imagenes todo funciona bien, solo que si me detengo en alguna de las imagenes y hago un click la informacion que se mostraba(debido al touched) se esconde y al instante vuelve a aparecer, lo cual proviene del efecto hover en la version desktop.
    – Carmen B.
    Commented el 26 nov. 2018 a las 1:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.