BtnOpen

Archivos de la Categoria ‘Scripts’

Posts siguientes »

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>

PLAIN TEXT
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).

PLAIN TEXT
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:

PLAIN TEXT
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:

PLAIN TEXT
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>

  

Escrito en Scripts | 2 Comentarios »

Detecta el navegador y la versión con Javascript

Mayo 8th, 2008

Os dejo un código muy útil que detecta el tipo de navegador y su versión:

1. // Browser detection

2.3. // Internet Explorer

4. var ie  = document.all != null;  //ie4 and above

5. var ie5 = document.getElementById && document.all;

6. var ie6 = document.getElementById && document.all&&(navigator.appVersion.indexOf("MSIE 6.")>=0);

7.

8. // Netscape

9. var ns4 = document.layers != null;

10. var ns6 = document.getElementById && !document.all;

11. var ns  = ns4 || ns6;

12.

13. // Firefox14. var ff  = !document.layers && !document.all;

15.

16. // Opera17. var op  = navigator.userAgent.indexOf("opera")>0;

18. var op7 = op && operaVersion() <= 7;

19. var op8 = op && operaVersion()>= 8;

20.

21. // Detects the Opera version

22. function operaVersion() {

23. agent = navigator.userAgent;

24. idx = agent.indexOf("opera");

25. if (idx>-1) {

26. return parseInt(agent.subString(idx+6,idx+7));

27.}

28.}

Vía | informatica-practica.net

  

Escrito en Scripts | 0 Comentarios »

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