Establecer el foco a un h4?

tofol · #1 (**permalink**) 28/06/2013, 14:37

Hola.
Tengo un menu acordeon realizado con JqueryUI y me funciona perfecto.
El encabezado de cada apartado del acordeón es un h4, cuando los despliego haciendo click del ratón en cada h4 me gustaría que se quedase la pantalla en dicho h4 porque el contenido posterior es muy extenso.
¿Hay alguna forma de hacerlo con CSS3?

El código que tengo es:

Código:

h4.acordeon {

           font-size: 1.5em;
           background: rgb(158, 156, 156);
           width: 90%;
           margin-bottom: 3px;
           -webkit-border-radius: 0.625em;
           -moz-border-radius: 0.625em;
		   -ms-border-radius: 0.625em;
           border-radius: 0.625em;
           padding: 0.3125em;
           text-decoration: none;
           cursor: pointer;
}
h4.acordeon:after{ content: '\25BE'; margin-left: 10px; cursor: pointer;}
h4.acordeon a {
           text-decoration: none;
           color: black;

}
h4.acordeon a:hover {
           color: white;
}

.contacordeon {
           border: 0.0625em solid #666;
           margin-bottom: 3px;
           height: auto;
}
.contacordeon .block {
    padding: 1.25em;
}
.contenido-texto p{
	text-align: justify;
	line-height: 40px;

}

Por cierto, en la línea que pone:

Código:

 content: '\25BE';

He notado que en Dolphin (navegador móvil) no lo veo bien, sale un símbolo raro, ¿hay alguna forma de que se pueda ver correctamente en todos los navegadores?

Gracias

pzin · #2 (**permalink**) 28/06/2013, 14:57

¿Cómo abres la sección correspondiente a ese h4? Pon tambien algo del HTML, que a veces uno no conoce la estructura que se está usando.

tofol · #3 (**permalink**) 28/06/2013, 23:56

La sección la abro dando un click con el ratón.
Pongo un trozo explicativo del html

Código HTML:

<!DOCTYPE html>
<html dir="ltr" lang="es">
<head>
    <meta charset="utf-8" />
    <?php
      include('xua.php');
    ?>
    <title>Ejemplos Segundo Bachiller Tema 1</title>
    <!--[if IE]><script src="js/HTML5forIE.js" type="text/javascript"></script><![endif]-->
    <!--[if lt IE 9]><script src="js/flexboxIE9.js"></script><![endif]-->
   
    <meta name="viewport" content="width=device-width">

    <link rel="icon" href="images/favicon.ico"  type="image/x-icon" />
    <link rel="shortcut icon" href="images/favicon.ico"  type="image/x-icon" />

	<link href="css/style.css" rel="stylesheet" media="all" />
	<link href="css/canvas_funciones.css" rel="stylesheet" media="all" />
	<link href="css/tooltips.css" rel="stylesheet" media="all" />

    <script type="text/javascript" src="js/jquery.js"></script>
   <!-- LOS JQUERYUI DE ACORDEON -->
    <script type="text/javascript" src="js/jqueryui/jquery-ui.js"></script>
    <script src="js/jqueryui/jquery.ui.widget.js"></script>
    <script src="js/jqueryui/jquery.ui.accordion.js"></script>
    <!-- EL PROPIO PARA QUE FUNCIONE MI ACORDEON -->
    <script src="js/jqueryui/acordeon.js"></script>
   

</head>

<body>
<!-- AQUI SUPRIMO CODIGO QUE NO VIENE A CUENTO AHORA -->

<div class="accordion">
                    <h4 class="acordeon">Ejemplo 1:</h4>
		    <section class="contacordeon">
			<div class="block">
                    <section class="enunciados">
                      <!-- AQUI PONGO EL ENUNCIADO. -->
                    </section>
                   <!-- AQUI PONGO LA RESOLUCIÓN -->
                  </div>
		</section>
                <h4 class="acordeon">Ejemplo 2:</h4>
		    <section class="contacordeon">
			<div class="block">
                    <section class="enunciados">
                      <!-- AQUI PONGO EL ENUNCIADO. -->
                    </section>
                   <!-- AQUI PONGO LA RESOLUCIÓN -->
                  </div>
		</section>
               <h4 class="acordeon">Ejemplo 3:</h4>
		    <section class="contacordeon">
			<div class="block">
                    <section class="enunciados">
                      <!-- AQUI PONGO EL ENUNCIADO. -->
                    </section>
                   <!-- AQUI PONGO LA RESOLUCIÓN -->
                  </div>
		</section>
 </div> <!-- FINALIZA EL ACORDEON -->
</body>
</html>

El código js de acordeon.js es el siguiente:

Código:

$(document).ready(function() {
        $( ".accordion" ).accordion({
            heightStyle: "content",
            collapsible: true
        });
});

Espero que sea suficiente código

Gracias

pzin · #4 (**permalink**) 29/06/2013, 03:41

En realidad habría que ver el código relativo a los h4 y a las secciones. De todas no te había entendido bien antes, ahora creo que si.

Pues en lo referente a CSS, tendría que poner a ese h4 una vez seleccionado una posición fija. Lo ideal, supongo, sería que le añadieras una clase mediante JavaScript a dicho elemento solo cuando esté seleccionado y el scroll llegue a donde está situado para luego ponerle una posición fija.

Primero le añades una clase para marcar el h4 como seleccionado —tal vez el plugin de jQuery ya lo haga, fíajte en el HTML que genera:

Código Javascript:

Ver original$("h4.accordion" ).click.().addClass('selecciomado');

Luego creas una variable en JavaScript para saber la distancia del h4 seleccionado a la parte de arriba. Y añades un listener para que en el caso de que al hacer scroll la posición llegue hasta el h4 seleccionado, se añada otra clase mas.

Código Javascript:

Ver originalvar titulo = $('h4.accordion.selecciomado')
var top = titulo.offset().top - parseFloat(titulo.css('marginTop').replace(/auto/, 0));
  
$(window).scroll(function (event) {
  var y = $(this).scrollTop();
  if (y >= top) {
    titulo.addClass('fijado');
  } else {
    titulo.removeClass('fijado');
  }
});

Y en tu CSS creas esa clase .fijado:

Código CSS:

Ver originalh4.accordion.selecciomado.fijado {
  position: fixed;
  top: 0;
}

En principio sino indicas left/right creo que debería de quedarse en el mismo sitio que está.

Ten en cuenta que al ponerlo como posición fija, tendrás que ajustar su tamaño y alguna que otra cosa. Tienes que ajustarlo todo para que quede tal cual necesites y, sobre todo, ser muy conciso para que el efecto quede del todo bien. Te lo comento porque si se hace bien queda muy bien, y si se deja algo queda un poco raro.

tofol · #5 (**permalink**) 29/06/2013, 07:34

Hola

Mira ya casi está, tu javascript lo he metido en un fichero .js y le he llamado fijaracordeon.js le he cambiado un par de erratas y es éste:

Código:

$(document).ready(function() {
$("h4.acordeon" ).click.().addClass('seleccionado');
    var titulo = $('h4.acordeon.seleccionado');
    var top = titulo.offset().top - parseFloat(titulo.css('marginTop').replace(/auto/, 0));

    $(window).scroll(function (event) {
      var y = $(this).scrollTop();
      if (y >= top) {
        titulo.addClass('fijado');
      } else {
        titulo.removeClass('fijado');
      }
    });
 });

Bien, lo estoy aplicando en la siguiente página[URL="http://matracas.net46.net/ProblemasMatracas/EjemplosSegundoBatTema1.html"] http://matracas.net46.net/ProblemasMatracas/EjemplosSegundoBatTema1.html[/URL]
Al acceder a ella hay dos menus acordeón en la parte principal, uno para los ejercicios y otro para las cuestiones. En ambos, tanto el primer ejercicio como la primera cuestión aparecen desplegados por defecto.
Si los recojo con el ratón tu script funciona, pero si no lo hago no se nota la diferencia a no tenerlo.
Muchas gracias

pzin · #6 (**permalink**) 29/06/2013, 07:42

Puse un punto de más aquí:

Código Javascript:

Ver original$("h4.accordion" ).click.().addClass('seleccionado');

Debería de ser:

Código Javascript:

Ver original$("h4.accordion" ).click().addClass('seleccionado');

Si usas Chrome, puedes usar el inspeccionador de elementos, y en console te marca el error.