Isotipo » ajax http://www.isotipo.net Diseño, internet y estándares | blog personal de Basilio Cáceres Tue, 26 Jul 2011 02:52:11 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 CSS condicionado por navegador en distintos lenguajes http://www.isotipo.net/2008/02/css-condicionado-por-navegador-en-distintos-lenguajes/ http://www.isotipo.net/2008/02/css-condicionado-por-navegador-en-distintos-lenguajes/#comments Thu, 28 Feb 2008 03:58:36 +0000 Basilio http://www.isotipo.net/ajax/css-condicionado-por-navegador-en-distintos-lenguajes/ Una amiga me hizo esta pregunta en un mail ayer, así que esto fue lo que le conteste

HTML

Es una buena opción si estás trabajando sólo con documentos HTML. Aunque se dice que se pueden ocupar condiciones para todos los navegadores, la verdad es que nunca he conseguido aplicarla para otros agentes que no sean IE6 o IE7

<!--[if IE 7]>
<link href="css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

JAVASCRIPT

Trabajando con la variable navigator se pueden obtener datos como el agente del usuario (userAgent) o el nombre de la aplicación (appName) que estemos usando. Sin embargo, no es 100% accesible, ya que no funciona si se tiene el javascript del navegador desactivado.

<script type="text/javascritp>
if(navigator.userAgent.match("MSIE 6")) {
     document.write('<link href="css/ie6.css" rel="stylesheet" type="text/css" />');
}
if(navigator.userAgent.match("Firefox")) {
     document.write('<link href="css/firefox.css" rel="stylesheet" type="text/css" />');
}
</script>

PHP

Perfecta si se esta trabajando en este lenguaje porque es más segura y accesible que la opción en JS. Además de obtener similares datos que la opción en JS

<?php
if(stristr($_SERVER["HTTP_USER_AGENT"],"firefox")) {
     echo '<link href="css/firefox.css" rel="stylesheet" type="text/css" />';
}

if(stristr($_SERVER["HTTP_USER_AGENT"],"firefox")) {
     echo '<link href="css/firefox.css" rel="stylesheet" type="text/css" />';
}
?>
]]> http://www.isotipo.net/2008/02/css-condicionado-por-navegador-en-distintos-lenguajes/feed/ 5 Colapsable http://www.isotipo.net/2007/06/colapsable/ http://www.isotipo.net/2007/06/colapsable/#comments Wed, 13 Jun 2007 03:19:57 +0000 Basilio http://www.isotipo.net/2007/06/12/colapsable/ Están en todos lados… son lo más cool de lo cool… hijos directos de la Web 2.0, los famosos… can can can… colapsables. Bueno, como también me considero un seudo hijo de esta corriente, voy a explicar un poco como se hacen, a través de uno de los juguetitos regalones, Prototype.

Primero, comenzamos llamando esta librería javascript en el head de nuestro sitio

<head>
    <script type="text/javascript" src="http://www.isotipo.net/wp-includes/js/scriptaculous/prototype.js"></script>
</head>

Luego, tenemos nuestro pequeño código HTML donde describiremos el título de la página, un div contenedor, el ancla que despliega el div oculto con un conveniente id que será recogido para ejecutar la acción, y por supuesto, el div oculto, también con su respectivo id.

<body>
    <h1>Colapsable</h1>
    <div class="contenedor">
	<a href="#" title="ejemplo" id="colapsa">Despliegalo !!</a>
        <div id="oculto">
            <p>Texto dentro del contenedor que se colapsará y se desplegará.</p>
        </div>
    </div>
</body>

Pasando a nuestro texto en javascript, tenemos que:

    function ocultar(){
        if($('oculto')){
            $('oculto').hide();
            $('colapsa').href="javascript:mostrar()";
        }
    }
    function mostrar(){
        $('oculto').show();
        $('colapsa').href="javascript:ocultar()";
    }

    Event.observe(window,"load",ocultar);

, donde la funcion ocultar() define que si existe el id “oculto”, le otorga un display:none a través de la funcion hide() de prototype, al mismo tiempo que le dice al ancla con id “colapsa” que su comportamiento href sea llamar a la función mostrar(), que hemos creado nosotros. Luego, al hacer click en el ancla y ejecutarse la función mostrar, el div “oculto” se muestra a través de la funcion show(), y el ancla pasa a tener un comportamiento href que llama a la función ocultar(), que también hemos creado nosotros. Así, al volver a clickear en el ancla, se completa la recursividad del proceso.

Por último, cargamos nuestra funcion inicial ocultar() al final del script, a través del modo Event.observe() y .. can can can… , le tenemos un sencillo pero eficiente colapsable en Ajax.

Ver ejemplo

Por supuesto es absolutamente editable, y si se agrega la librería para efectos scriptaculous, se pueden tener muchas posibilidades para nuestro elemento colapsable.

Ver ejemplo



]]> http://www.isotipo.net/2007/06/colapsable/feed/ 4