Blog Borchani Studios

El son de 2 divs a continuación. Uno dice: “Esto no es Mac/IE5″, y debe ser visible para todos los CSS de apoyo de los navegadores, excepto MacI/E5.
El otro dice: “Este es MacI/E5″ y sólo debe ser visible en Mac/ IE5

El CSS que lo hace:

#isnotMacIE5 { display: none;  }
#isMacIE5 { display: block; background-color: #060; color: #fff; }

/* commented backslash hack v2 \*/
#isnotMacIE5 { display: block; background-color: #060; color: #fff; }
#isMacIE5 { display: none; }
/* end hack */

Notas:

V2 de la barra invertida comentó hack fue sugerido por James Craig.
Al principio yo había descubierto que si se inserta un comentario que contiene una barra invertida entre las normas en su hoja de estilo, MacIE5 pasaría por alto la próxima .. (single) Estado (siempre que el selector de contenidos a. o #). James señaló que si mueve el \ y efectivamente escapar de la final de marcador de comentario (eliminación de todos los personajes y el espacio de la BTW \ y * /), puede comentar un bloque conjunto de normas para MacIE5 – que es muy práctico.

He aquí un ejemplo de la regla de una sola barra invertida comentó hack en acción:

Este párrafo debería ser resaltado en verde en IE5/Mac, rojo de otro modo
Compatibilidad con navegadores para Comentado Backslash hack v2

fuente:sam-i-am.com

Empecemos con definir los procesos de la ventana.

• Cuando se quiera mostrar la ventana, el fondo se volverá semi-opaco y resaltará la ventana modal (lo clásico) y su contenido.
• Mantener la ventana modal en el centro de la pantalla.
• Permitir cerrar la ventana.
• Permitir configurar su contenido y dimensión.

modal.css

Especificamos los caracteristicas de diseño. Vamos a usar dos clases 1) .bgtransparent, es para el fondo semi-opaco y 2) .bgmodal, es para la ventana en si.

.bgtransparent{
        position:fixed;
        left:0;
        top:0;
        background-color:#000;
        opacity:0.6;
        filter:alpha(opacity=60);
}

.bgmodal{
        position:fixed;
        font-family:arial;
        font-size:1em;
        border:0.05em solid black;
        overflow:auto;
        background-color:#fff;
}

Ahora la parte de JavaScript que explicaremos en cada línea de código:

modal.js

$(document).ready(function(){
        //parametros principales
       
        var contenidoHTML = ‘<p>Tu contenido HTML aqui</p><button onclick=\”closeModal()\”>Cerrar</button>’;
       
        var ancho = 600;
        var alto = 250;

        $(‘#button’).click(function(){
                // fondo transparente
                // creamos un div nuevo, con dos atributos
                var bgdiv = $(‘<div>’).attr({
                                        className: ‘bgtransparent’,
                                        id: ‘bgtransparent’
                                        });
               
                // agregamos nuevo div a la pagina
                $(‘body’).append(bgdiv);
               
                // obtenemos ancho y alto de la ventana del explorer
                var wscr = $(window).width();
                var hscr = $(window).height();
               
                //establecemos las dimensiones del fondo
                $(‘#bgtransparent’).css(“width”, wscr);
                $(‘#bgtransparent’).css(“height”, hscr);
               
               
                // ventana modal
                // creamos otro div para la ventana modal y dos atributos
                var moddiv = $(‘<div>’).attr({
                                        className: ‘bgmodal’,
                                        id: ‘bgmodal’
                                        });    
               
                // agregamos div a la pagina
                $(‘body’).append(moddiv);

                // agregamos contenido HTML a la ventana modal
                $(‘#bgmodal’).append(contenidoHTML);
               
                // redimensionamos para que se ajuste al centro y mas
                $(window).resize();
        });

        $(window).resize(function(){
                // dimensiones de la ventana del explorer
                var wscr = $(window).width();
                var hscr = $(window).height();

                // estableciendo dimensiones de fondo
                $(‘#bgtransparent’).css(“width”, wscr);
                $(‘#bgtransparent’).css(“height”, hscr);
               
                // estableciendo tamaño de la ventana modal
                $(‘#bgmodal’).css(“width”, ancho+‘px’);
                $(‘#bgmodal’).css(“height”, alto+‘px’);
               
                // obtiendo tamaño de la ventana modal
                var wcnt = $(‘#bgmodal’).width();
                var hcnt = $(‘#bgmodal’).height();
               
                // obtener posicion central
                var mleft = ( wscr - wcnt ) / 2;
                var mtop = ( hscr - hcnt ) / 2;
               
                // estableciendo ventana modal en el centro
                $(‘#bgmodal’).css(“left”, mleft+‘px’);
                $(‘#bgmodal’).css(“top”, mtop+‘px’);
        });
       
 });
       
function closeModal(){
        // removemos divs creados
        $(‘#bgmodal’).remove();
        $(‘#bgtransparent’).remove();
}

Ahora para aplicarlo bastará con lo siguiente:

<html>
<head>

<link type=“text/css” rel=“stylesheet” href=“modal.css” />
<script type=“text/javascript” src=“jquery-1.2.3.min.js”></script>
<script type=“text/javascript” src=“modal.js”></script>

<title>Modal JavaScript</title>
</head>

<body>
        <input type=“button” id=“button” value=“Mostrar Ventana” />
</body>
</html>

fuente:  ribosomatic

El chat de GMail, el de Facebook y el nuevo chat de Hi5 son muy atractivos y funcionales porque se integran al sitio web y hacen que el usuario no se vaya del sitio para poder seguir chateando y cosas por el estilo, así que si estas pensado en integrar un sistema de chat parecido al de estos sitios mencionados anteriormente, lo podrás hacer fácilmente con un script creado por Anant Garg que usa jQuery, PHP y MySQL, , este sistema de chat está bajo licencia libre LGPL para propósitos no comerciales. A diferencia de los chats de Facebook o GMail que usan un protocolo llamado Comet este chat es un poco menos eficiente y consume un poco más de recursos porque hace una consulta a la base de datos para ver si hay mensajes nuevos cada cierto tiempo lo cual puede sobrecargar nuestro servidor web, aunque es un opción muy buena para quienes no tienen un servidor dedicado que no pueden instalar Comet en sus servidores. Comet es una técnica de programación Web muy similar a AJAX, que utiliza XMLHttpRequest, se utiliza para la entrega de datos entre cliente servidor a través del protocolo HTTP, y la entrega de datos se hace sin que el cliente lo haya solicitado, a diferencia de AJAX que sí necesita que el usuario haga la petición para poder entregar los datos.

descargar el chat

fuente: carlos leopoldo