Archive for the ‘Scripts’ Category

Alternativa a Iconize

Saturday, May 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][/html]
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]

$(document).ready(function(){

//Definición de clases para cada tipo de archivo.

$(“a[@href$=pdf]”).addClass(“pdf”);

$(“a[@href$=zip]”).addClass(“zip”);

$(“a[@href$=doc]”).addClass(“doc”);

//Estilos y atributos a los enlaces externos.

$(“a:not([@href*=http://blogandweb.com])”).not(“[href^=#]”)

.addClass(“externo”)

.attr({ target: “_blank” });

});[/html]
Código para los estilos en CSS para cada extensión:
[html].pdf {
padding-left: 20px;
background: transparent url(icono-pdf.png) left top no-repeat;
}

.zip {
padding-left: 20px;
background: transparent url(icono-zip.png) left top no-repeat;
}

.doc {
padding-left: 20px;
background: transparent url(icono-doc.png) left top no-repeat;
}

.externo {
padding-left: 20px;
background: transparent url(icono-ext.png) left top no-repeat;
}[/html]
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]Archivo PDF
Archivo ZIP
Archivo DOC
Enlace externo
Enlace externo
blogandweb
Enlace local [/html]

Detecta el navegador y la versión con Javascript

Thursday, May 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