I am making a web page about music that looks like this:
For each year there are 15 songs that are arranged one below the other repeating this same pattern (in addition to other things that are not relevant, this would be one col
of the main
).
What I want is that when I hover over the video the number changes its appearance (I approved of making it bigger, but maybe it would be better to oscillate or something, this is not important at the moment) and when I move it outside the limits of the iframe, the number returns to normal.
The code is the following:
while($fila = mysqli_fetch_assoc($resultados))
{
$enlace_youtube = $fila['enlace_youtube'];
$titulo_cancion = utf8_encode($fila['titulo_cancion']);
$nombre_autor = utf8_encode($fila['nombre_autor']);
$enlace_rym = $fila['enlace_rym'];
$nombre_ciudad = utf8_encode($fila['nombre_ciudad']);
$nombre_pais = utf8_encode($fila['nombre_pais']);
$votos_facebook = $fila['votos_facebook'];
$tipo = $fila['tipo'];
$titulo_disco = utf8_encode($fila['titulo_disco']);
$ano = $fila['ano'];
$id_cancion = $fila['id_cancion'];
$inicio = strpos($enlace_youtube, "watch?v=");
$enlace_youtube = substr_replace($enlace_youtube, "embed/", $inicio, 8);
if(strpos($nombre_autor, ", The")) $nombre_autor = "The ".substr($nombre_autor, 0, strpos($nombre_autor, ", The"));
$decada = substr($ano, 0, 3)."0s";
if(strpos($titulo_disco, "/")) $nombre_foto = substr($titulo_disco, 0, strpos($titulo_disco, "/"));
elseif(strpos($titulo_disco, ":")) $nombre_foto = substr($titulo_disco, 0, strpos($titulo_disco, ":"));
else $nombre_foto = $titulo_disco;
if($condicion == true) $ano_disco = '('.$ano.')';
else $ano_disco = null;
$count++;
echo '<div class ="row contenedor-youtube pt-4"><iframe id="video" width="575" height="323.5" src='.$enlace_youtube.' allowfullscreen></iframe></div>'; #Vídeo
?>
<div class="row pt-2"> <!-- Portada, información y sistema de votación -->
<div class="contenedor-portada mr-2"> <!-- Portada -->
<?php echo '<img id="portada" src="imagenes/'.$decada.'/'.$ano.'/'.$nombre_foto.'.jpg" width="150" height="150">'; ?>
</div>
<div class="col"> <!-- Información y sistema de votación -->
<div class="row"> <!-- Información (con clasificación) -->
<div class="mr-3"> <?php echo '<span id="numero">'.$count.'</span>'; ?> </div> <!-- Clasificación -->
<div class="col informacion"> <!-- Información -->
<div class="row"><?php echo '<div class="puntos"><span class="titulos">'.$titulo_cancion.'</span> de <span><a id="autor" href="'.$enlace_rym.'" target="_blank">'.$nombre_autor.'</a></span></div>'; ?></div>
<div class="row"><?php echo '<div class="puntos">('.$nombre_ciudad.', '.$nombre_pais.')</div>'; ?></div>
<div class="row"><?php echo '<div class="puntos">Incluida en su '.$tipo.' <span class="titulos">'.$titulo_disco.'</span> '.$ano_disco.'</div>'; ?></div>
<div class="row "><?php echo '<span id="votos">'.$votos_facebook.' </span>'; if($votos_facebook == 1) echo 'voto'; else echo 'votos'; ?></div>
</div>
</div>
<div class="row"> <!-- Sistema de votación -->
<span class="estrellas mt-3 ml-2">
<?php if($_SESSION['conectado']) for($i = 1; $i <= 5; $i++) echo '<input type="radio" name="'.$id_cancion.'" value="'.$i.'"><i></i>'; ?>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function()
{
$('#video').mouseover(function()
{
$('#numero').css("font-size", "62.5px");
});
$('#video').mouseout(function()
{
$('#numero').css("font-size", "50px");
});
});
</script>
<?php
}
This comes from a call to the database, so that through the while loop it presents all the relevant information for each song, one after the other.
What matters is the video:
echo '<div class ="row contenedor-youtube pt-4"><iframe id="video" width="575" height="323.5" src='.$enlace_youtube.' allowfullscreen></iframe></div>';
The number:
<div class="mr-3"> <?php echo '<span id="numero">'.$count.'</span>'; ?> </div>
With your CSS styling:
#numero {
color: mediumvioletred;
font-weight: bold;
font-size: 50px;
font-family: 'Rock Salt', cursive;
padding: 10px;
text-shadow: 5px 5px 4px pink;
transition: all 0.25s ease;
}
And the jQuery script (it's one of my first attempts with JS):
<script type="text/javascript">
$(function()
{
$('#video').mouseover(function()
{
$('#numero').css("font-size", "62.5px");
});
$('#video').mouseout(function()
{
$('#numero').css("font-size", "50px");
});
});
</script>
Well, the thing is that I couldn't use addClass()
it because then nothing happens (I guess because the number has a id
and not a class
), so to check that it wasn't a basic jQuery syntax error I put it in css()
and there is a certain reaction, but limited: depending on whether id
or not it is assigned class
to the two elements that concern us, the video and the number, the behavior is different but in no case satisfactory; as it is now, when moving the pointer over the video the number gets bigger and when removing it it gets smaller, but it only happens for the first video, in the remaining 14 there is no reaction; if instead of id="video"
I putclass="video"
then (I think, I speak from memory from tests I did yesterday) it continues to react only to the first number but when you move the mouse over any of the videos, and so on, trying the four different combinations.
In short: how do I make each number react if and only if it interacts with its video. I intuit that I have to relate each video and each number in some way, as I did with the radio button, assigning it the id_cancion
one that comes from the DB:
<?php if($_SESSION['conectado']) for($i = 1; $i <= 5; $i++) echo '<input type="radio" name="'.$id_cancion.'" value="'.$i.'"><i></i>'; ?>
What a mess I have left. Thanks for just reading this far.
The attribute
id
must be unique, so when you use the Jquery function, the selector('#video')
is applying it only to the first one (you should avoid having elements withid
inside loops, as this will cause multiple elements to have the sameid
. If necessary that they have it, an autoincremental is usually usedid
so that it is not exactly the same). I would remove theid
from the video and change it to a class, which is an attribute that can be repeated throughout our page. The same goes for your<span>
, it should be changedid="numero"
toclass="numero"
.But then we would have a new problem: How do we detect which video is being made
mouseenter/mouseleave
? Well, through the selectorthis
, which in our case will refer to the element that fires the event. Your Javascript would look like this:JQUERY
In this way the
this
refers to the element.contenedor-youtube
in which the mouse enters/exits, withnext()
we look for its immediately subsequent sibling element in the DOM (in our case it isdiv class="row pt-2"> <!-- Portada, información y sistema de votación -->
) and withfind()
we look for the child of that element that has the class.numero
and that is the one that We apply the style change.It works for you with the id to be more specific , but so much so that it only works with the first one. You don't need to mess with JS, with the hover pseudo-class and the adjacent-sibling selector in css you can: