BtnOpen

Archivos de la Categoria ‘Scripts’

Navegango por EvanBot.com he encontrado un código que realmente puede ser muy útil cuando necesitamos crear rutas amigables y no tenemos la posibilidad de Tener un Servidor Linux, con Apache y el Mod_Rewrite activado y Htacces.

La idea es que de una URL tipo: http://www.tudominio.com/index.php?idioma=es&seccion=miseccion&id=22

Nos quede algo como: http://www.tudominio.com/index.php/es/miseccion/22

HTML:
  1. // Get the URL relative to the script
  2. $url = $_SERVER['PATH_INFO'];
  3.  
  4. // If for some reason $_SERVER["PATH_INFO"] does not work then
  5. // you could use $_SERVER["REQUEST_URI"] or $_SERVER["PHP_SELF"]
  6.  
  7. // Remove the /index.php/ at the beginning
  8. $url = preg_replace('/^(\/)/','',$url);
  9.  
  10. // Split URL into array
  11. $url = explode('/',$url);
  12.  
  13. // Display array
  14. print_r($url);
  15.  
  16. ?>

Y OBTENDREMOS ALGO COMO:

HTML:
  1. Array
  2. (
  3. [0] =>es,
  4. [1] =>seccion,
  5. [2] =>22
  6. )

Vía | Evanbot.com

  

DD_belatedPNG es una libreria que nos permite visualizar correctamente (transparencias) los archivos PNG en IE6.
Además nos permite que los PNG se puedan poner como Background y se sigan visualizando bien. Permite hacer un background-repeat + background-position + 24-bit PNGs, cosa que otras librerias anteriores no lo permitian y es de gran utilidad.

DD_roundies Es otra libreria que te permite hacer cajas redondeadas de una forma muy sencilla y rápida cómo esta.

HTML:
  1. <script src="DD_roundies.js"></script>
  2.     DD_roundies.addRule('.box', 10);
  3. </script>

Link a DD_belatedPNG Link a DD_roundies

  

47 Javascript plugins

Septiembre 23rd, 2008

En webdesignerwall encuentro un gran recopilatorio de 47 Javascript Plugins. Ideal para construcción de páginas web y ahorro de mucho tiempo para efectos especiales:

  • Pop up de ventanas y zoom
  • Galerías
  • Carruseles
  • Sliders
  • Pestañas
  • Scrolls animados
  • Tooltips
  • Acordeones
  • Sustitución de texto en flash e imágenes
  • Switchers de la hoja de estilos
  • Estilo de Formularios
  • Validación de formularios

Javascript in Modern Web Design

  

Jqzoom es un plugin para jQuery el cual te permite hacer un Zoom en tus imágenes de una maner fácil.

En la foto pequeña aparece un cuadro translúcido que sigue al ratón para ampliar la zona por donde pase.

Cómo instalar jqzoom

Jqzoom, zoom en imágenes con jQuery

Descargar Jqzoom

  

Alternativa a Iconize

Mayo 10th, 2008

Hace un tiempo publiqué un post sobre Iconize.

Es un código con CSS que sirve para poner un icono automáticamente a tus enlaces hacia archivos. Por ejemplo que al linkar a un pdf el link de este aparezca un icono de pdf y asi con cualquier fichero.
Al parecer este código no servia para IE6 (menuda novedad).
Así pues, a través de Blogandweb he encontrado una solución hecha en jQuery que sí funciona en IE6.

Alternativa a Iconize
Lo primero. Bajar la librería jQuery y enlazarla dentro de las etiquetas <head></head>

HTML:
  1. <script src="jquery.js" type="text/javascript"></script>

En el mismo después de incluir la librería jQuery incluimos el las siguientes funciones:

La primera función añade un estilo al enlace para cada tipo de extensión (PDF, ZIP, DOC).
La segunda función añade el atributo target="_blank" a todos los enlaces externos de nuestro site para que se ejecuten en una nueva ventana. (Muy útil).

HTML:
  1. <script type="text/javascript"></script>
  2. $(document).ready(function(){
  3.  
  4. //Definición de clases para cada tipo de archivo.
  5.  
  6. $("a[@href$=pdf]").addClass("pdf");
  7.  
  8. $("a[@href$=zip]").addClass("zip");
  9.  
  10. $("a[@href$=doc]").addClass("doc");
  11.  
  12. //Estilos y atributos a los enlaces externos.
  13.  
  14. $("a:not([@href*=http://blogandweb.com])").not("[href^=#]")
  15.  
  16. .addClass("externo")
  17.  
  18. .attr({ target: "_blank" });
  19.  
  20. });

Código para los estilos en CSS para cada extensión:

HTML:
  1. .pdf {
  2. padding-left: 20px;
  3. background: transparent url(icono-pdf.png) left top no-repeat;
  4. }
  5.  
  6. .zip {
  7. padding-left: 20px;
  8. background: transparent url(icono-zip.png) left top no-repeat;
  9. }
  10.  
  11. .doc {
  12. padding-left: 20px;
  13. background: transparent url(icono-doc.png) left top no-repeat;
  14. }
  15.  
  16. .externo {
  17. padding-left: 20px;
  18. background: transparent url(icono-ext.png) left top no-repeat;
  19. }

Ahora cada vez que pongamos en nuesta web enlaces a archivos como estos, automáticamente nos aparecerán los iconos de archivo en los enlaces:

HTML:
  1. <a href="documento.pdf">Archivo PDF</a>
  2. <a href="documento.zip">Archivo ZIP</a>
  3. <a href="documento.doc">Archivo DOC</a>
  4. <a href="http://google.com">Enlace externo</a>
  5. <a href="http://undominio.com">Enlace externo</a>
  6. <a href="http://blogandweb.com">blogandweb</a>
  7. <a href="#enlaces">Enlace local </a>

  

Add to Technorati Favorites BlogESfera Directorio de Blogs Hispanos - Agrega tu Blog