Ir al contenido principal

Entradas

Mostrando entradas de marzo, 2012

Efecto sombra en las fotos con css

  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 {   display: block;   position: relative;   background-color: #fff;   border: 1px solid #a9a9a9;

Principios básicos para construir tu web

  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"          </head>     <body>         "aquí va la estructura de la página"      </body>      </html>  

Aviso de cargando página en jquery mientras se carga la siguiente

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

Recargar div con efecto de aparición suave (Fade In) en jQuery

  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('display','none')", que lo único que hace es cambiar la propiedad css "display" del div "#contenido&q

Llamar una función javascript desde flash

  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

Código jQuery actualizar div contenedor

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 (each) de la etiquetas "<a>" del div "contenido". Después obtenemos el atributo (attr) href (osea el enlac

div siempre a la misma altura jQuery

Voy a inaugurar este blog con un código en jQuery cuya función es la de conseguir que un div siempre esté a la misma altura independientemente de la altura del div superior. Sí ya se que esto se puede hacer en CSS con algo como: position:absolute; bottom:0px;. Pero, no sé porqué, en mi estructura no habia forma de hacerlo  funcionar, así que me hice el siguiente código en jQuery: $(document).ready(function() {     $('#content img').each(function(index) { // chequeamos todas las imagenes de content     var altura=$(this).attr('height'); // obtenemos su altura (height)     if (altura<169){                    // si esta es menor que 169         var pad=169-altura; //altura máxima de la imagen(169)-altura imagen menor que 169                                    // conseguimos el valor(pad) del padding-top         $('.g_text').eq(index).css('padding-top',pad); //entonces cambiamos el padding-top de