Supongamos que tenemos una imagen como está en nuestro html
<img id="mi_imagen" src="img/origen_1.jpg"/>
Si queremos cambiar el origen de donde toma la imagen nuestro elemento img podemos utilizar jquery:
$("#mi_imagen").attr("src","img/origen_2.jpg");
Para ajustar una capa a la altura de la pantalla con css es necesario especificar lo primero las alturas a las etiquetas html y body del documento. Y después ajustarle a la capa que queremos establecer el alto.
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
Make this division 100% height.
</p>
</div>
</body>
</html>
Quizá ya conozcamos que si estamos en una página que tiene distintas secciones se puede ir a través de un menú o enlaces.
... <div id="seccion_1">contenido 1</div> <div id="seccion_2">contenido 2</div> ... <a href="#seccion_1">ir a sección 1</a> <a href="#seccion_2">ir a sección 2</a> ...
La navegación a estos elementos o capas es instantánea. Con jQuery podemos establecer la velocidad con la que se producirá la navegación haciendo un efecto de transición que en muchas ocasiones es visualmente más atractivo.
Lo primero que haremos es importarnos, si no la tenemos ya, nuestra librería de jQuery.
Después para cada elemento que queramos el efecto de animación usaremos este código:
$('a[href=#seccion_1]').click(function (event)
{
event.stopPropagation();
var Position = jQuery('[id="seccion_1"]').offset().top;
jQuery('html, body').animate({ scrollTop: Position }, 1100);
return false;
});
Donde pone 1100 se refiere al tiempo en milisegundos que estará realizando la animación.
Con este valor podemos establecer un scroll lento a secciones de una página.
Si tenemos una pestaña y queremos obtener índice seleccionado de un tab con jquery puedes probar:
...
var current_index = $("#tabs").tabs("option","selected");
...
En caso de que no funcione es porque en la versión más reciente de jquery se utiliza lo siguiente:
...
var current_index = $("#tabs").tabs('option', 'active');
...
Donde #tabs es el id de la capa que contendrá las pestañas con jquery.
Si se produce el siguiente error en PHP:
PHP Warning: Cannot modify header information – headers already sent by …
Asegurate de que el fichero que te está produciendo el error no está enviando código html al servidor. Esto quiere decir que hay que tener mucho cuidado con todo, no solo los echo sino también espacios en blanco que el intérprete php pueda considerar código html.
Este error se suele producirse con relativa asiduidad cuando desde el código hacemos un
...
<html>
<?php
/* Esto producirá un error. Fíjese en el html
* que se muestra antes que la llamada a header() */
header('Location: http://www.example.com/');
exit;
?>
...
Este post indicará la manera de como centrar menu en Foundation.
Por defecto Foundation no permite centrar un menú en su framework.
Tenemos el siguiente marcado html:
<nav id="mi_menu" data-topbar=""> <ul> <ul> <ul><!-- Title Area --></ul> </ul> </ul> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> <ul> <li><a><span>Menu</span></a></li> </ul> <section> <ul> <li><a href="#">HOME</a></li> <li><a href="#" target="_blank">BLOG</a></li> <li><a href="#" target="_blank">SHOP</a></li> </ul> </section></nav>
Para centrar el menú podemos utilizar el siguiente código en css:
@media only screen and (min-width: 40.063em) {
#mi_menu {
width: 100%;
height: 3em;
margin: 0;
text-align: center;
}
#mi_menu .nav-bar {
height: auto;
margin: 0;
padding: 0;
display: inline-block;
}
}
El otro día descubrí un sitio que permite descargarte iconos vectoriales para web.
Se llama fontawesome y te ofrece iconos altamente personalizables – tamaño, color, sombra y cualquier otra cosa en base a css.
En realidad lo que te descargas es una fuente en distintos formatos (svg, ttf, otf, woff, eot) que te asegura la legibilidad en prácticamente el 100% de navegadores. La fuente contiene más de 300 iconos representados por un identificador en su propiedad content de css:
.fa-envelope-o:before {
content: "\f003";
}
También contiene los ficheros para estilos dinámicos con sass y less.
Es muy sencillo de utilizar y personalmente los considero muy apropiados para muchas webs. El problema que veo es que este estilo de iconos se están poniendo muy de moda en muchos sitios web haciendo que parezcan todos muy similares.
El otro día tuve un problema con un enlace en html cuyo text-decoration none no funciona.
Quería que el enlace en cuestión quitara el subrayado cuando el ratón pasara por encima y le apliqué el siguiente estilo css a su clase:
... text-decoration:none; ...
Era muy extraño pero esto no funcionaba así que decidí aplicárselo al elemento directamente con firebug pero… ¡seguía sin funcionar!
Después de darle muchas vueltas llegué a pensar que se le estaba aplicando este estilo a través de javascript pero la solución era la hoja de estilos ya que no me había percatado de que se le estaba poniendo un border-bottom:
... border-bottom: 1px solid black; ...
Simplemente le quité esta propiedad y conseguí solucionar el problema.
Fallo tonto 🙂
Lo primero es ubicar en el sistema de archivos del sitio web los archivos fuente woff. Lo recomendable es crear un directorio fonts dentro de tu hoja de estilos css.
Lo siguiente sería definir en el archivo css las fuentes:
@font-face {
font-family: "mifuente";
src: url("fonts/fuente.woff") format('woff');
}
@font-face {
font-family: "mifuente";
src: url("fonts/fuente-bold.woff") format('woff');
font-weight: bold;
}
@font-face {
font-family: "mifuente";
src: url("fonts/fuente-boldoblique.woff") format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "mifuente";
src: url("fonts/fuente-oblique.woff") format('woff');
font-style: italic;
}
Por último para aplicar la fuente en código html, en este caso en un div:
<div class="micapa">
<b>Esto esta escrito con fuente-bold.woff</b>
<br/>
<b><i>Esto está escrito con fuente-boldoblique.woff</i></b>
<br/>
<i>Esto está escrito con fuente-oblique.woff</i>
<br/>
Esto está escrito con fuente.woff
</div>
y en el css:
.micapa{
font-family: mifuente;
}
A veces es necesario que el servidor calcule la url raíz donde está ubicado nuestro sitio WordPress.
Pongamos el siguiente ejemplo, tenemos en html lo siguiente:
<img src="./wp-content/themes/template/assets/img/ICON-twitter.png" id="twitter"/>
Si este código html está dentro de un archivo que se utiliza en muchas partes de la web (mediante include o require) es posible que la imagen no llegue a mostrarse.
Si pasa esto podemos asegurarnos de que el servidor se irá al directorio correcto poniendo la ruta absoluta mediante la variable $baseUrl.
<img src="<?php echo $baseUrl?>/wp-content/themes/template/assets/img/ICON-twitter.png" id="twitter"/>
Con el anterior código nos aseguramos que irá a la ruta correcta a buscar nuestra imagen ya que $baseUrl contiene la url raíz en WordPress correcta donde está instalado.