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

Entradas

Mostrando las entradas etiquetadas como html

HTML5. ¿Gráfico en un canvas usando javascript?

Para mi gusto no, ¿porqué?, porque me parece demasiado engorroso. Yo prefiero crear el dibujo en cualquier programa, Gimp por ejemplo que, además, es gratuito y cargarlo en la página. No obstante, para ilustrar el ejemplo de creación de dibujos en un canvas usando javascript , en la página Las Edades de la Tierra , en la sección "Enlaces de interés", abajo del todo tengo un enlace llamado "ver gráfico de escala geológica", si pincháis sobre él se abrirá una ventana, esta ventana es un canvas que contiene un gráfico realizado en javascript. Ahora os comento como se realiza esto. En primer lugar el código en HTML5 : <canvas id="migrafico"> Tu navegador no soporta Canvas </canvas> El HTML es así de sencillo, una sola línea. El texto " Tu navegador no soporta Canvas " sólo aparecerá en el caso de que el navegador no soporte esa función. Tenemos que darle un id para poder dibujar dentro del canvas y, en este caso, tamb...

Código jQuery para ver foto más grande

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

ventana modal con html, css y jQuery

Intentaré explicar cómo crear, sólo con CSS , HTML y un poco de jQuery , un tipo de esas ventanitas que no nos permiten pinchar fuera de ellas hasta que las cerremos. Con que hechéis un vistazo al post anterior ya está más de la mitad del trabajo hecho. En dicho post ya expliqué cómo crear la ventana (un div oculto), posicionarla y darle forma con css y abrirla y cerrarla con jQuery, pero, ¿cómo evitar que se pinche fuera de ella?. Lo más sencillo que he encontrado para ello es lo siguiente: (la ventana a abrir será el formulario de correo que comenté en el post anterior el cual os aconsejo tenerlo abierto) Colocar el siguiente div en el html de nuestra página: <div id="fondoformulario"></div> cuyo css será el siguiente: #fondoformulario { position:absolute; top:0px; left:0px; width:100%; /*ocupará todo el ancho de nuestra página*/ height:1860px; /*le d...

Leer un archivo XML con jQuery y javascript y modificar un HTML con su contenido

Una manera muy interesante y fácil de modificar los textos de tu página web. Si, por ejemplo, tenemos una página donde cambiamos a menudo unas noticias que tenemos en el margen derecho, podríamos tener un código HTML como este: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Manejar archivo XML</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="leerxml.js"></script> <link rel="stylesheet" href="estilos.css"> </head> <body> <h1>Titulo de la página</h1> <div id="derecha"> <div class="noticias"> <div class="prim...

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