Códigos jQuery, CSS, HTML para páginas web

   Con un código, en jQuery ,  tan sencillo como el siguiente: <!-- desplegar/ocultar contenido menu --> <script type="text/javascript"> $(document).ready(function () { $('nav').on('click','li',function () { var $submenu=$(this).next('div.submenu'); if ($submenu.is(':hidden')) { $submenu.slideDown('100'); } else { $submenu.slideUp('100'); } }); }); </script> desplegamos y ocultamos el contenido de un div .    Siguiendo como ejemplo la página Las Edades de la Tierra , en la cual, en su parte izquierda, podéis desplegar y ocultar el contenido de las diferentes Eras, voy a tratar de explicar como poner en práctica este ejemplo. Una parte del código HTML 5 podría ser como lo que sigue: <section> <nav> <article class="menu menuuno"> <hgroup> <h2 class="titulo">CENOZOICO</h2> <ul class="menu1...

   Sigo con la página Las Edades de la Tierra y quiero que la veáis para ilustrar el ejemplo. En parte derecha de la pantalla podéis ver una pestaña que está en vertical con el texto "Notas" dentro. Al pincharla se despliega una ventana que está oculta. Bien, en este post voy a explicar cómo girar ese elemento para que nos quede vertical (en el próximo post explicaré como desplegar y ocultar la ventana). La instrucción (en CSS3 ) es la siguiente: transform: rotate(-90deg); . Con esta sencilla linea conseguimos el efecto de girar , rotar tanto el div como el texto que contiene y ponerlo en vertical . Bueno, en realidad no sería una sola linea, de momento para que funcione en la mayoría de los navegadores tenemos que que poner los prefijos -ms-(para el IE9) y -webkit-(para Chrome y Safari). El código CSS nos quedaría algo como: .vertical{     background-color: black;     border-radius: 10px 10px 0 0;     border-style: solid so...

   Otra de las bondades del CSS3 . Ya no es necesario realizar complicadas lineas de código en el CSS e incluir imágenes en formato png para aplicar una sombra a nuestra caja o div . Basta con una línea de código muy sencilla de entender:    box-shadow: -5px 5px 10px black;    Con esta sencilla linea aplicamos a nuestro div o caja una sombra que estará desplazada 5 píxeles a la izquierda, 5 píxeles hacia abajo, con un difuminado de 10 píxeles y de color negro. El primer número indica el desplazamiento horizontal, si es positivo la sombra se desplazará hacia la derecha y si es negativo hacia la izquierda. El segundo número indica el desplazamiento vertical, si es positivo la desplazamos hacia arriba y si es negativo hacia abajo. El tercer número indica el grado de difuminado de la sombra , este debe de ser siempre positivo cero píxeles indicarán que no tiene difuminado. Y por último indicamos el color, este lo podemos expresar también en hexadecimal,...

  Pues en este post explicaré como hacer para que, al pasar el puntero del mouse por encima de una foto pequeña (o thumbnail), esta se vea más grande en otro sitio.    En el código HTML podríamos tener algo como: <div class="box_imgpeque"> <img src="images/100_6747.JPG" width="160" height="90" alt=""/> </div> <div class="box_imgpeque"> <img src="images/100_6745.JPG" width="160" height="90" alt=""> </div> <div class="box_imgpeque"> <img src="images/100_6710.JPG" width="160" height="90" alt=""> </div> <div class="box_imggrande"></div>    Creo que el HTML está claro. En los divs "box_imgpeque" tendríamos las imágenes en pequeño y, en el div "box_imggrande" irían las imágenes grandes. Por supuesto en el CSS de "box_imggrande...

   Este post está relacionado con el anterior sobre enviar formulario de correo en segundo plano , en este voy a hablar sobre como abrir un div que contiene un formulario de correo, tipo popup o, tal vez mejor, ventana modal . En esta página sobre taller del automóvil tengo un formulario de correo oculto que se muestra al pinchar en un enlace. Intento minimizar el scroll de la página para mostrar la información. Me parece que es mejor mostrar toda la información posible moviendo la barra del scroll lo menos posible. Y, en este caso, me parecía que incluir un formulario visible recargaría demasiado la página. Voy a intentar explicar cómo mostrar y ocultar una ventana, que contiene un formulario de correo, usando jQuery .    Primero, el código CSS: /*damos forma y posición al div formulario que, por defecto, estará oculto*/  #formulario{     display:none;     position:absolute;     top: 50%;     ...

En uno de mis primeros post explicaba lo sencillo que es, a través de jQuery , recargar un DIV contenedor sin necesidad de recargar toda la página. Durante este tiempo he visto que pueden surgir un par de problemas dependiendo del contenido de dicho DIV. Si el contenido que queremos recargar es para mostrar la información que tenemos en un menú principal... bueno me explico mejor con la imagen de la derecha. Como podéis ver esta sería una página principal sencilla que consta de una cabecera, con el menú principal arriba que sería siempre fija. Una zona de enlaces a la derecha, también fija y un pié de página también fijo. El único DIV que se recargaría sería el contenedor del medio el cual mostraría la información que queramos ver, al pinchar en los enlaces del menú principal. Espero haberme explicado bien. Bueno, uno de los problemas que nos podemos encontrar es el siguiente: lo normal sería que en el menú tuviesemos un enlace que nos vuelva a llevar a la página principal (un botón l...

Continuando con el mismo ejemplo de los anteriores posts, voy a explicar cómo lo he hecho yo para que, mientras se recarga un div, nos muestre un mensaje de que se está cargando. No es que sea necesario incluirlo pero sí conveniente. ¿Motivos?; los siguientes: No es mi caso pero es posible que vosotros, para la petición de carga del siguiente div, uséis peticiones Ajax para comunicaros con el servidor, como por ejemplo para comunicaros con la base de datos. Esto puede tardar un poco en ejecutarse. También puede ser que, el que quiera ver vuestra página, tenga una conexión lenta. Por eso es conveniente que el usuario vea que, al pinchar en el enlace, está ocurriendo algo y no se ponga a cliquear como un poseso, maldiciendo, porque no funciona. Seguimos con el ejemplo de esta página: http://www.talleresguadamia.com/index.html y los códigos serían los siguientes: En jquery: <script type="text/javascript"> $(document).ready(function(){    $("#conteni...

  En este post continúo con el código que describí en el segundo post sobre cómo refrescar un div sin necesidad de refrescar toda la página, pero añadiéndole unas lineas para este se aparezca de forma suave. La página de ejemplo es http://www.talleresguadamia.com y el código es el que sigue: <script type="text/javascript"> $(document).ready(function(){    $("#contenido a").each(function(){       var href = $(this).attr("href");       $(this).attr({ href: "#"});       $(this).click(function(event){                  $("#contenido").css("display","none");          $("#contenido").load(href).fadeIn(700);        });    }); });; </script>   Podéis ver lo fácil que es. Hemos agregado sólo dos cosas:   - La linea  "$('#contenido').css('...

Necesitaba para la página un código que actualizara sólamente el div contenedor ya que el menú principal está hecho en flash y la carga puede resultar lenta, lo cual resulta tedioso para los visitantes. (Editado: a dia de hoy el menú no es en flash ya que no es adecuado para el posicionamiento de la web por los buscadores) .El código es el siguiente:   <script type="text/javascript"> $(document).ready(function(){    $("#contenido a").each(function(){       var href = $(this).attr("href");       $(this).attr({ href: "#"});       $(this).click(function(event){          $("#contenido").load(href);                });    }); });; </script>  Dentro del div con id=#contenido tengo varias imágenes con los enlaces a las diferentes secciones. Con este código chequeamos cada una (ea...