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

  Hay un buen puñado de sliders fotográficos, realizados en jquery , para elegir; véase la página de AjaxShake . Pero en este post me voy a centrar en uno: bxslider . En realidad sólo he probado dos, el mencionado, y CodaSlider . El CodaSlider también está bien, pero en la página de Gutierrez Sustacha , lo sustituí por el bxslider solamente porque tenía una función de la que carecía el Coda: la de poder parar la presentación al pasar el mouse por encima. Algo que me interesaba ya que, al lado de las fotos hay bastante letra y, además, enlaces. Así, el visitante puede revisar con tranquilidad el contenido.   Además, según mi criterio, creo que los sliders fotográficos pueden encajar en páginas variadas. Podéis ver esta de mecánica del automóvil y esta otra de excavaciones y movimientos de tierra .   Bueno, vamos al grano. Lo primero,  descargaros de aquí todo lo necesario para empezar a funcionar. Lo segundo, dentro de las etiquetas <head> de tu página, c...

  Ya sé que a dia de hoy se puede realizar un efecto sombra en CSS3 pero, a fecha de este post, internet explorer no lo soporta, así que os diré cómo hice el efecto a las fotos, en css y con un par de imágenes.   Antes de nada quiero comentaros que en esta página: http://www.talleresguadamia.com , el título principal del contenido tiene una sombra realizada en CSS3, los que abráis la página con el explorer no la veréis y el resto depende del navegador. El efecto sombra al que me refiero es el véis en las fotos del contenido. Lo realmente importante el código que sigue: @charset "utf-8"; /* CSS Document */ .dropshadow1{     float:left;     background: url(images/shadowAlpha.png) no-repeat bottom right !important ;     background: url(images/shadow.gif) no-repeat bottom right;     margin: 10px 0 0 10px !important ;     margin: 5px 0 0 5px; }     .dropshadow1 img {   di...

  Dado el título de este blog y que he comenzado con entradas un poco avanzadas, este post lo voy a dedicar a la gente que no tiene ni idea del tema pero que le gustaría saber cómo se construye una página web.   Lo primero que debéis saber es que, para empezar, sólo necesitáis un editor de texto simple como el block de notas.   Lo segundo, para la gente que no tiene ni pajolera idea de que código se usa para diseñar una página web, les recomiendo que, en cualquier página que estén viendo con su navegador, pulsen en ella el botón derecho del ratón y, en el menú que les aparece, elijan "ver código fuente de la página", así se darán una idea de la estructura.   Lo tercero, la estructura principal de una página web es la siguiente:          <html >          <head>              "aquí va el código de head"       ...

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('...

  Como dije en el anterior post hoy voy a tratar de explicar cómo realizar una llamada a una función javascript, insertada en tu página web, desde flash.   En la siguiente página: http://www.talleresguadamia.com , tengo un menú principal creado en flash. Creí conveniente modificarlo para que, al pinchar en los enlaces, no actualizase toda la página de nuevo, sino solamente el contenido. Para conseguir esto tenía que modificar los enlaces de forma que hiciesen un llamamiento a una función (en este caso hecha en jQuery) que realizasen dicha tarea. Para ello es necesario editar el código de flash y realizar el siguiente cambio: on (release) {   getURL("javascript:refrescardiv(\'ubicacion.html\')", ""); }   Como podéis ver, en lugar de incluir URL de la página que queremos ver, la pasamos como parámetro de la función que queremos que se ejecute (en este caso la función se llama "refrescardiv").   Para la edición y cambio del código (actionscr...

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...