Página 1 de 3123»
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » JavaScript (información de referencia acerca de la cosa)
JavaScript
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 5:58 PM
Cómo hacer un pop-up con JavaScript

Muchos de nuestros usuarios nos consultaron sobre cómo implementar un pop-up en su sitio para que se abra en forma automática al iniciar la página, o simplemente a través de un enlace.El lenguaje que vamos a utilizar para realizarlo es nada más y nada menos que JavaScript.

Abrir un ventana a través de un enlace

Esta opción es realmente útil para mostrar algún tipo de información fuera del sitio.

JavaScript: se ubica entre las etiquetas <head> y </head>:

Quote
<html>
<head>
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>
</head>
<body>
<a href="javascript:Abrir_ventana('popup.html')"><font size="1" face="Verdana">Click aquí para abrir la ventana</font></a>
</body>
</html>

En el script anterior, se puede observar el código fuente de la función encargada de abrir la ventana, y dentro del cuerpo de la página (<body>) el enlace que llama a dicha función.

Abrir una ventana automáticamente

Es muy común ingresar a un sitio y ver que se abre una ventana en forma automática. Para ello utilizaremos el mismo script que el anterior pero con la diferencia de agregar un tag en el <body> para que se ejecute la función al iniciar la carga de la página.

Quote
<html>
<head>
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>
</head>
<body onload="Abrir_ventana('popup.html')">
</body>
</html>

Aclaraciones

Notamos que en la función se puede configurar las opciones de la ventana que se va a abrir. Algunas de ellas son la posibilidad de mostrar o no la barra de herramientas, la de direcciones, la de status, la de menúes, las de desplazamiento, si se permite o no la posibilidad de cambiar el tamaño, y las medidas de la ventana.

Quote
function Abrir_ventana (pagina) {
var opciones= "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 2 | 4:27 PM
10 cosas que no puedes hacer con javascript (en el navegador)

Javascript es una herramienta bastante incomprendida - hasta hace poco nadie le hacía realmente mucho caso salvo para crear ventanas pop-up o enmascarar enlaces - pero es una herramienta potente y cada vez más gente la utiliza para crear cosas buenas.

Pero ¡hay mucha confusión! Algunas personas están confundiendo las posibilidades de Javascript con las de otros lenguajes como PHP o ASP, por tanto aquí va una lista de malentendidos que veo una y otra vez:

1. Javascript no puede acceder al sistema local de archivos. No puedes leer o escribir en la computadora del usuario - se trata de una medida de seguridad para evitar que los sitios hagan lo que quieran con tu ordenador, por ejemplo, introducirte un virus.
2. Javascript tampoco puede acceder al sistema de archivos remoto. Solía aceptarse como verdad que no podías acceder a archivos almacenados en el server… Las cosas han cambiado mucho con la expansión del soporte para XMLHttpRequest pero de todas formas sólo tienes HTTP para jugar - no puedes mover archivos, renombrarlos o cambiarles los permisos sólo mediante javascript
3. Javascript no puede ejecutar aplicaciones fuera del navegador. Al igual que el punto 1 se trata de una medida de seguridad
4. Javascript no puede acceder a tu scanner/impresora/webcam. Javascript no tiene acceso a tus periféricos si no utilizamos algún componente de terceras partes
5. Javascript no puede modificar la URL mostrada por el navegador. Otra medida de seguridad para evitar que cualquier sitio suplante la identidad de otro.
6. Javascript no puede modificar el historial del navegador.
7. Javascript no puede acceder a tu base de datos. Para acceder a tus bases de datos tendrás que utilizar un lenguaje del lado del servidor como PHP o ASP
8. Javascript no puede “encriptar” tu HTML ni evitar el “robo de imágenes”. Si se puede ver se puede copiar, no pierdas el tiempo con “medidas de seguridad” tan fáciles de saltarse.
9. Javascript no puede controlar el teclado o el ratón del usuario. No, no vas a poder controlar el ratón de tus visitantes y hacerles dar click en tus anuncios.
10. Javascript no puede utilizar múltiples hilos de ejecución. Existen algunos movimientos para tratar de crear una librería que pueda conseguirlo pero, de momento, no te preocupes de optimizar tu Javascript para ordenadores de doble núcleo.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 6:14 PM
Las 10 mejores funciones de Javascript

Esto no se puede aplicar a todos los proyectos ya que para cada uno requeriremos unas funciones u otras, dependiendo siempre de nuestras necesidades. Lo que si es cierto que generalizando estas funciones son excepcionalmente buenas, he de ahi el motivo por el cual la mayoría de las grandes librerías las integren iguales o con una leve modificación.

10 – addEvent()

Quote
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}

Empezamos fuerte, esta función se encarga de ayudarnos a gestionar los eventos de nuestra web, con ella podremos asignar a cualquier elemento un evento determinado, gracias al contenido de esta función el javascript no obstructivo es una realidad.

9 – addLoadEvent()

Quote
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}

Se trata de una versión exclusivamente para el objeto window en el evento onload, de forma que podremos asignar una serie de funcionalidades a nuestro evento onload y ver el resultado al finalizar la carga de nuestra web. También es posible usar addEvent() para realizar lo mismo.

8 – getElementsByClass()

Quote
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

Una gran función que mediante un nombre de class, podremos encontrar los elementos que la compongan, devolviendo un array de objetos para trabar con ellos de forma más cómoda. Originalmente no fue creada por nadie en particular aunque con el tiempo los desarrolladores han ido añadiendo mejoras para depurar la función.

7 – cssQuery()

Quizás la mejor aliada para trabajar con CSS desde Javascript, llama la atención por la cantidad de selectores que permite usar a la hora de realizar la consulta. Ver documentación.

6 – toggle()

Quote
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}

Esta función la habré implementado un millón de veces, es la típica que se usa una infinidad de veces y generalmente no sabes ni como se llama. Se trata de una función que oculta/muestra un elemento dependiendo de su estado anterior, osea mostrado lo que está oculto y viceversa.

5 – insertAfter()

Quote
function insertAfter(parent, node, referenceNode) {
parent.insertBefore(node, referenceNode.nextSibling);
}

Esta no la había usado nunca, nos permite insertar un nodo después de otro elemento padre.

4 – inArray()

Quote
Array.prototype.inArray = function (value) {
var i;
for (i=0; i < this.length; i++) {
if (this[i] === value) {
return true;
}
}
return false;
};

¿Cuántas veces has tenido que recorrer un array entero para saber si hay un valor o no? Pues esta función realiza la búsqueda por ti.

3 – getCookie()

Quote
function getCookie( name ) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ';', len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}

Función de manual para recoger datos de la cookie del cliente, muy cómoda y práctica.

2 – setCookie()

Quote
function setCookie( name, value, expires, path, domain, secure ) {
var today = new Date();
today.setTime( today.getTime() );
if ( expires ) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = name+'='+escape( value ) +
( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
( ( path ) ? ';path=' + path : '' ) +
( ( domain ) ? ';domain=' + domain : '' ) +
( ( secure ) ? ';secure' : '' );
}

Función compañera a getCookie() con la cual podrás almacenar en el cliente los datos necesarios en forma de cookie.

1 – deleteCookie()

Quote
function deleteCookie( name, path, domain ) {
if ( getCookie( name ) ) document.cookie = name + '=' +
( ( path ) ? ';path=' + path : '') +
( ( domain ) ? ';domain=' + domain : '' ) +
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

Función encargada de eliminar cookies en el cliente.

Mención Honorífica – $()

Quote
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}

Con diferencia la función más extendida de la red, todas las librerías la usan e incluso le han añadido funcionalidades (como xPath en jQuery), consiguiendo una función muy pontente que nos volverá un elemento o una serie de elementos, únicamente pasando como parametro los id’s de los elementos deseados.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 4 | 12:33 PM
Javascript no obstructivo, Manual de buenas maneras
Parte I

Javascript es una herramienta maravillosa para mejorar la usabilidad de las aplicaciones web. Es una capa extra entre la estructura (HTML) y el diseño (CSS). Javascript nos permite alterar el comportamiento de un elemento.

Uno de los problemas con los que nos encontramos a la hora de desarrollar aplicaciones web con javascript son problemas de accesibilidad derivados al no contemplar la posibilidad de que un usuario nos visite con un navegador que no interprete este lenguaje. Una técnica para corregir este problema sería el separar el javascript de las otras 2 capas del desarrollo web (estructura y diseño), esto recibe el nombre de Javascript no obstructivo o Javascript Accesible.

La frase, “¡¡Divide y vencerás!!” se adapta perféctamente a esta idea, en la cual separaremos cada capa en su respectivo fichero, de forma que en cuanto a mantenimiento (la etapa más costosa y larga del desarrollo de una aplicación) e incluso la comprensión de la aplicación se verán afectadas positivamente en cualquier aplicación.

Operación limpieza
El desarrollo web ha cambiado en los últimos años, estamos dejando de mezclar la presentación de la estructura, lo que nos está facilitando el trabajo de mantenimiento, modificación y mejora de nuestras aplicaciones. El código que hace años usábamos esta dando lugar a otro más complejo y fácil de mantener.

Quote
HTML:
<table border="0" cellpadding="0" width="100%" cellspacing="5">
<tr>
<td><font face="Arial" size="-2">Lorem Ipsum</font></td>
</tr>
</table>

Este código con todos los atributos referentes a la presentación en el código nos obliga a recorrer toda la aplicación para modificar cualquier aspecto que deseemos modificar. Por este motivo, nuestro código empieza a coger un poco de sensatez y nos permite separar las 2 capas, diseño y estructura.

Quote
CSS:
td.content {font-family:Arial,sans-serif;font-size:12px;}
HTML:
<table cellpadding="0"
style="width:100%;border:none" cellspacing="5">
<tr>
<td class="content">Lorem Ipsum</td>
</tr>
</table>

Y aún podemos ir más allá…

Quote
CSS:
body {font-family:Arial,sans-serif;font-size:12px;}
p {padding:5px;}

HTML:
<p>Lorem Ipsum</p>

La misma evolución ha sufrido el desarrollo con Javascript.

Reglas del Javascript no obstructivo

1. Nunca, bajo ninguna circunstancia incluyas javascript directamente en el documento.
Una de las mayores ventajas del Javascript es que al igual que CSS permite la ejecución en ficheros externos. Esto nos permite incluir los ficheros que necesitemos para cada páginas, ajustando al máximo el peso de la aplicación. Además si has de cambiar alguna funcionalidad de la aplicación únicamente has de modificar el fichero JS en cuestión.

Pero para poder disfrutar de esta propiedad siempre tendremos que hacer referencia a nuestro/s javascript desde el fichero HTML, añadiendo entre los tags <head></head> la siguiente línea haciendo alusión al fichero que deseamos adherir a nuestro proyecto.

Quote
<script type="text/javascript" src="scripts.js"></script>

2. Javascript es una mejora, no un sistema de seguridad.
Nosotros solo podemos usar Javascript como una mejora, debemos de pensar que no siempre podremos disponer de él y que agentes externos pueden deshabilitarlo sin darnos opción a activarlo, asi que hemos de programar pensando en que cualquier persona en este problema también debe poder usar nuestra aplicación.

Para ello podemos ver un ejemplo de javascript en el que vemos como valida un formulario.

Quote
HTML:
<form action="index.php" onsubmit="return checkform(this)">
<p><label for="login">Login:</label>
<input type="text" name="login" id="login" /></p>
<p><label for="pw">Password:</label>
<input type="password" name="pw" id="pw" /></p>
<p><input type="submit" value="send" /></p>
</form>
Javascript:
function checkform(f)
{
var error='';
error+=f.login.value==''?'\nlogin':'';
error+=f.pw.value==''?'\npassword':'';
if (error!='')
{
alert('Please enter the following:'+error);
}
return error=='';
}

Esto es perfectamente válido, nos permite controlar el formulario sin perjudicar a los usuarios que no tiene Javascript. De modo que en caso de no tenerlo activado únicamente tendremos que tener en cuenta que en la página de recepción de datos tendremos que validarlos directamente en el servidor, devolviendo al usuario a la página anterior en caso de que no sean válidos.

Otra forma de afrontar el problema sería la siguiente.

Quote
HTML:
<form action="index.php">
<p><label for="login">Login:</label>
<input type="text" name="login" id="login" /></p>
<p><label for="pw">Password:</label>
<input type="password" name="pw" id="pw" /></p>
<p><input type="button" onclick="checkform()" value="send" /></p>
</form>
Javascript:
function checkform()
{
var f=document.forms[0];
var error='';
error+=f.login.value==''?'\nlogin':'';
error+=f.pw.value==''?'\npassword':'';
if (error!='')
{
alert('Please enter the following:'+error);
} else {
f.submit();
}
}

De esta forma estamos condenando al fracaso nuestra aplicación ya que si el navegador de nuestro usuario no soporta la llamada onclick, no podrá realizar un submit ya que nuestro boton es del tipo button.

3. Checkea la disponibilidad de un objeto antes de acceder a él.
Muchos de los errores en Javascript se deben a que se intenta acceder a elementos o métodos que no existen en un determinado momento del período de ejecución. Para solucionar esto basta con realizar un pequeña comprobación antes de utilizar dicho elemento o método.

Quote
Javascript:
function color(o,col)
{
if(o)
{
o.style.background=col;
}
}

Antes de usar el elemento o, comprobamos que exista, así conseguimos una robustez en nuestra aplicación que el usuario agradecerá. Esta técnica es muy usada para el famoso cross-browsing.

4. Crea un Javascript no especifico para un navegador
Quizás la regla más complicada de todas, pero la más importante. Al igual que tenemos que tener en cuenta navegadores sin Javascript hemos de tener en cuenta todos los navegadores, para ello usaremos la regla anterior como la mejor baza a nuestro favor.

Quote
Javascript:
function doDOMstuff()
{
if(document.getElementById && document.createTextNode)
{
[...]
}
}

Comprobamos la existencia del método getElementById y createTextNode del objeto document antes de usarlo, así nos aseguramos una victoria al lanzar esta función.

5. No uses variables de otros scripts.
Cuando creemos una función o funcionalidad debemos estar seguros de usar variables locales para dicha función o funcionalidad. De esta forma nos prevenimos de que otras funciones o funcionalidades modifiquen nuestras variables.

Quote
Javascript:
var i=42; // global variable
function dothings()
{
for (i=0;i<200;i++) // i gets changed
{
// some code
}
}
function dothingsright()
{
var i; // define i locally
for (i=0;i<200;i++)
{
// some code
}
}
alert(i); // = 42
dothingsright()
alert(i) // = 42 (due to local definition)
dothings()
alert(i) // = 200, oops!

6. Mantén los efectos de ratón de forma independiente
Tener en cuenta que el javascript esté activo o no no es suficiente. Hemos de tener en cuenta que hay usuarios que no pueden utilizar el ratón para navegar como normalmente se hace, esto obliga a usar el teclado para realizar todas las tareas que requiera nuestra aplicación. Un problema típico es el onchange o onblur en los elementos de un formulario ya que el teclado ejecuta estos eventos de forma distinta que el ratón.

Quote
HTML:
<form>
<p>
<label for="go2">Go to:</label>
<select name="go2" id="go2" onchange="send(this)">
<option value="index.html">Home</option>
<option value="chapter1.html">Operation Cleanout</option>
<option value="chapter2.html">Reaching things</option>
</select>
</p>
</form>
Javascript:
function send(f)
{
var chosen;
chosen=f.options[f.selectedIndex].value;
self.location=chosen;
}

El problema que tenemos aqui es que cada vez que hacemos nos desplazamos hacia abajo desde nuestro teclado, estamos realizando la función send(), no siendo el resultado deseado (en FF parece no pasar). Los usuarios con experiencia sabrán que usan alt+abajo podrán omitir este evento.

La forma de solucionar esto es delegando la obtención del valor al evento onsubmit, de forma que podremos realizar cuantos cambios deseemos sobre nuestro formulario y únicamente lanzará la función al realizar el submit.

Quote
HTML:
<form action="send.php" method="post" onsubmit="return send(this)">
<p>
<label for="go2">Go to:</label>
<select name="go2" id="go2">
<option value="index.html">Home</option>
<option value="chapter1.html">Operation Cleanout</option>
<option value="chapter2.html">Reaching things</option>
</select>
<input type="submit" value="go" />
</p>
</form>
Javascript:
function send(f)
{
var chosen;
chosen=f.go2.options[f.go2.selectedIndex].value;
self.location=chosen;
return false;
}

¿Que pasa con onkeypress?

Según la W3C, en estos casos.
Otherwise, if you must use device-dependent attributes, provide redundant input mechanisms (i.e., specify two handlers for the same element):
• Use “onmousedown” with “onkeydown”.
• Use “onmouseup” with “onkeyup
• Use “onclick” with “onkeypress

Esto suena perfecto en la teoría pero en la vida real el evento onkeypress está mal soportado por diferentes navegadores. Los usuarios que dependen del teclado para navegar normalmente tienen una configuración para simular los clicks, intro o espacio. Entonces esto nos lanza el evento onclick.

Cómo alcanzar lo que deseamos cambiar
Para un desarrollador javascript inexperto, el HTML es un patio de juegos.

Quote
HTML:
<a href="index.html"
onmouseover="image1.src='1on.gif'"
onmouseout="image1.src='1off.gif'">
<img src="1off.gif" name="image1" border="0" height="150" width="150"
alt="home"></a>

O incluso puede ser un poco más avanzado…

Quote
HTML:]/b]
<a href="index.html"
onmouseover="roll('home',1)"
onmouseout="roll('home',0)">
<img src="home.gif" name="home" border="0"
height="150" width="150"
alt="home"></a>
[b]Javascript:

// preloading image
homeoff = new Image();
homeoff.src = 'home.gif';
homeon = new Image();
homeon.src = 'homeoff.gif';
function roll(imgName,a)
{
imgState=a==0?eval(imgName + 'on.src'):eval(imgName + 'off.src');
document.images[imgName].src = imgState;
}

En cualquier caso los eventos son llamados desde el HTML y si la función cambia de nombre, tendremos que cambiarlo en cada documento.Para ello debemos saber que usar y cuando usarlo, por ejemplo para este rollover, usaremos CSS que cumple nuestra misión sin alterar en nada la accesibilidad ni el resultado.

Quote
HTML:
<a href="index.html"><img src="home.gif" id="home" alt="home"></a>

(CONTINUARÁ)

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 5 | 12:38 PM
Javascript no obstructivo, Manual de buenas maneras
Parte II

CONTINUACIÓN

Subir por los ramas del árbol del nodo
Cada fichero XML (en ellos se incluye el xHTML) es como un árbol. Un nodo una parte de este árbol, y al igual que en un arbol para subir a un rama en la copa del arbol tendremos que pasar por todas las ramas que nos encontremos por el camino, no podemos saltarnos ninguna. En javascript disponemos de una buena serie de herramientas que nos permiten recorrer este árbol poder manipular las propiedades de un elemento de dicho árbol.

Funciones para alcanzar un elemento en la página

getElementById(’elementID’)
Devuelve el elemento con el ID asignado

getElementsByTagName(’tag’)
Devuelve todos los elemento con la etiqueta (tag)

Funciones para recorrer las cercanias de un elemento

childNodes
Devuelve un array con todos los hijos que cuelguen del elemento. Tambien disponemos de firstChild y lastChild, que son versiones reducidas de childNodes[0] y childNodes[this.childNodes.length-1].

parentNode
Nos devuele el elemento padre

nextSibling
El siguiente elemento al mismo nivel dentro del árbol.

previousSibling
El elemento anterior al mismo nivel dentro del árbol.

Atributos y funciones para elementos

attributes
Devuelve un array con todos los atributos del elemento.¿Cómo no? No funciona con Internet Explorer 6 o inferior.

data
Devuelve o asigna los datos textuales del nodo

nodeName
Devuelve el nombre del nodo (El nombre de elemento HTML)

nodeType
Devuelve el tipo de nodo

1. Es un elemento nodo
2. Un atriburo
3. Un texto

nodeValue
Devuelve o asigna el value de un nodo.

getAttribute(attribute)
Devuelve el valor del atributo demandado.

Conociendo estas funciones y atributos, podremos mejorar nuestro código y hacer algo parecido a esto.

Quote
HTML:
<a href="index.html"><img src="home.gif" class="roll" alt="home"></a>
Javascript:
function findimg()
{
var imgs,i;
// loop through all images of the document
imgs=document.getElementsByTagName('img');
for(i=0;i<imgs.length;i++)
{
// test if the class 'roll' exists
if(/roll/.test(imgs[i].className))
{
// add the function roll to the image onmouseover and onmouseout and send
// the image itself as an object
imgs[i].onmouseover=function(){roll(this);};
imgs[i].onmouseout=function(){roll(this);};
}
}
}
function roll(o)
{
var src,ftype,newsrc;
// get the src of the image, and find out the file extension
src = o.src;
ftype = src.substring(src.lastIndexOf('.'), src.length);
// check if the src already has an _on and delete it, if that is the case
if(/_on/.test(src))
{
newsrc = src.replace('_on','');
}else{
// else, add the _on to the src
newsrc = src.replace(ftype, '_on'+ftype);
}
o.src=newsrc;
}
window.onload=function(){
findimg();
}

Bien por el momento, aunque no hemos olvidado de una cosa, ahora esta imagen realizará un roll-over al pasar el ratón por encima, pero tenemos que pensar en los usuarios sin ratón. Para conseguir esto debemos chequear si el enlace de alrededor tiene el focus o no. Para ello usaremos el comando parentNode de nuestro objeto de la siguiente forma.

Quote
Javascript:
function findimg()
{
var imgs,i;
// Loop through all images, check if they contain the class roll
imgs=document.getElementsByTagName('img');
for(i=0;i<imgs.length;i++)
{
if(/roll/.test(imgs[i].className))
{
// add the function roll to the parent Element of the image
imgs[i].parentNode.onmouseover=function(){roll(this);};
imgs[i].parentNode.onmouseout=function(){roll(this);};
imgs[i].parentNode.onfocus=function(){roll(this);};
imgs[i].parentNode.onblur=function(){roll(this);};
}
}
}
function roll(o)
{
var i,isnode,src,ftype,newsrc,nownode;
// loop through all childNodes
for (i=0;i<o.childNodes.length;i++)
{
nownode=o.childNodes[i];
// if the node is an element and an IMG set the variable and exit the loop
if(nownode.nodeType==1 && /img/i.test(nownode.nodeName))
{
isnode=i;
break;
}
}
// check src and do the rollover
src = o.childNodes[isnode].src;
ftype = src.substring(src.lastIndexOf('.'), src.length);
if(/_on/.test(src))
{
newsrc = src.replace('_on','');
}else{
newsrc = src.replace(ftype, '_on'+ftype);
}
o.childNodes[isnode].src=newsrc;
}

window.onload=function(){
findimg();
}

Creando y destruyendo contenidos
Una de las fortalezas de DOM es que no es únicamente de lectura, y esto nos permite modificar más aún nuestra aplicación. Para ello disponemos de una serie de funciones y métodos que nos facilitarán el trabajo.

Crear un nodo
createElement(element)
Crea un nuevo elemento

createTextNode(string)
Crea un elemento de texto con el valor string

Alterando un contenido existente
setAttribute(attribute,value)
Añade un nuevo valor al atributo del objeto

appendChild(child)
Añade un nodo hijo a la lista de childNode del objeto, el hijo debe de ser un objeto, no un texto.

cloneNode()
Copia el nodo completo con todos sus hijos.

hasChildNodes()
Comprueba que el nodo no se un nodo hoja, osea que tenga hijos

insertBefore(newchild,oldchild)
Crea un nuevo hijo (newchild) antes del hijo antiguo (oldchild)

removeChild(oldchild)
Borra un hijo.

replaceChild(newchild,oldchild)
Reemplaza el viejo hijo (oldchild) por el nuevo (newchild).

removeAttribute(attribute)
Elimina un atributo del objeto.

Vamos a ver un ejemplo práctico y accesible. Imaginar que queremos hacer una lista en la cual tendremos enlaces a imagenes, si no disponemos de Javascript abriremos una ventana nueva para ver la imagen seleccionada.

Quote
HTML:
<ul id="imglist">
<li><a href="home.gif" target="_blank">Home
(new window)</a></li>
<li><a href="home_on.gif" target="_blank">Home active
(new window)</a></li>
<li><a href="jscsshtml.gif" target="_blank">HTML-CSS-Javascript
(new window)</a></li>
</ul>

De esta forma tenemos una válida de mostrar una lista de imagenes, al hacer click sobre el enlace el target actuará y mostrará la imagen en una ventana nueva. Pero, ¿si disponemos de javascript? ¿por que no podemos enriquecer el aspecto?

Si disponemos de Javascript y DOM vamos a hacer lo siguiente:
• Eliminar el texto (new window) de los links
• Añadir al evento onclick la llamada a la función popw()

Quote
Javascript:
function imgpop()
{
var il,imga,imgatxt;

// get all LIs in imagelist, loop over them
il=document.getElementById('imglist').getElementsByTagName('li');
for(i=0;i<il.length;i++)
{

// grab first link in the LI
imga=il[i].getElementsByTagName('a')[0];

// delete the wording (new window) in the link text
// (which is the nodeValue of the first node)
imgatxt=imga.firstChild;
imgatxt.nodeValue=imgatxt.nodeValue.replace(/ \(new window\)/,'');

// add the event handlers to call popw();
imga.onclick=function(){return popw(this);}
//imga.onkeypress=function(){return popw(this);}
}
}

La función debe:
• Mostrar la imagen debajo del link.
• Ocultar la imagen en caso de ya estar visible.
• Hacer que la imagen desaparezca al hacer click sobre ella.

Quote
Javascript:
function popw(o)
{
var newimg;
// if there is already an image in the parentNode (li)
if(o.parentNode.getElementsByTagName('img').length>0)
{
// delete it
o.parentNode.removeChild(o.parentNode.getElementsByTagName('img')[0]);
} else {
// else, create a new image and add a handler that removes it when you
// click it
newimg=document.createElement('img');
newimg.style.display='block';
newimg.onclick=function(){this.parentNode.removeChild(this);};
newimg.src=o.href;
o.parentNode.appendChild(newimg)
}
return false;
}

Pueden ver el ejemplo del autor. Activar y desactivar el javascript para ver las diferencias.

¿Como llamar a las funciones
La parte más importante de la separación del Javascript de nuestro HTML es la forma en la que llamamos a las funciones, para ello hasta ahora usabamos los métodos que incorporan los tags HTML.

Quote
HTML:
<body onload="foo();">

Esto debe cambiar, y aprovechandonos de que sabemos como obtener un objeto concreto a partir del DOM de nuestro HTML, podemos asignar estos eventos desde javascript sin tener que influir en nuestro HTML.

Quote
Javascript:
window.onload=foo;

or

window.onload=function(){
foo();
bar();
baz();
}

Pero aún podemos mejorarlo más aún, y para ello usaremos los gestores de eventos.

Quote
Javascript:
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
addEvent(window, 'load', foo);
addEvent(window, 'load', bar);

Esto nos permite desligar por completo nuestra capa de estrucutura de la funcional de forma eficiente y estandarizada.

Separacion de CSS y Javascript
Quizás en los ejemplos anteriores no se está usando la forma más apropiada, pero es bastante clara para demostrar lo que queremos expresar. La idea desde un principio es separar de forma bien definida las 3 capas que influjen en una aplicación web. Por eso debemos evitar código parecidos a estos.

Quote
Javascript:
if(!document.getElementById('errormsg')){
var em=document.createElement('p');
em.id='errormsg';
em.style.border='2px solid #c00';
em.style.padding='5px';
em.style.width='20em';
em.appendChild(document.createTextNode('Please enter or change the fields marked with a '))
i=document.createElement('img');
i.src='img/alert.gif';
i.alt='Error';
i.title='This field has an error!';
em.appendChild(i);
}

Esto además de no ser nada claro, es un coñazo a la hora de ponerte a modificar cualquier opción o añadir cualquier mejora. Por eso hemos de delegar es tema del aspecto a los CSS. Para ello usaremos el nexo entre la capa del diseño y la capa funcional, los tags.

Todos los tags tienen 2 atributos como mínimo, ID y class. ID se refiere al nombre único que le damos a un elemento concreto de la imagen, los ID’s nunca deben repetirse en la página. Despues tenemos class, que asigna un aspecto a nuestro elemento, en cierta manera el class engloba a todos los elementos designados dentro de dicha clase.

Sintaxis de multiples clases
Los elementos pueden tener más de una clase, simplemente hay que separarlas por espacios. Esto esta soportado por los navegadores más modernos. IE en Mac no le gusta mucho cuando una clase conteniene el nombre de otra.

Aplicando clases via Javascript
Para cambiar la clase de un elemento debemos atacar al atributo className del objeto.

Quote
HTML:
<ul id="nav">
[...]
</ul>
Javascript:
if(document.getElementById && document.createTextNode)
{
if(document.getElementById('nav'))
{
document.getElementById('nav').className='isDOM';
}
}

Esto no origina que nuestro CSS pueda tener dos estados, uno el que ataque al ID directamente #nav y otro que ataque al ID más la clase #nav.isDOM

Quote
ul#nav{
[...]
}
ul#nav.isDOM{
[...]
}

Usando el operador += podremos añadir una o más clases a nuestro elemento.

Quote
if(document.getElementById && document.createTextNode)
{
var n=document.getElementById('nav');
if(n)
{
n.className+=n.className?' isDOM':'isDOM';
}
}

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 6 | 5:03 PM
Cómo escribir código en JavaScript

En este apéndice aprenderemos a insertar código JavaScript en nuestras páginas. Como sabemos, las páginas web se componen de código HTML (HyperText Markup Language), y para incluir el código Javascript utilizamos una marca HTML, <script>. Esta marca puede encontrarse en cualquier parte de la página web, tanto en el <head> como en el <body>.

Quote
<html>

<head>

<title>Esta es una pagina web</title>

<script>

var mi_numero = 1;

function calcula(numero) {

return numero + mi_numero;

}

</script>

<body>

<script>

document.write(calcula(1));

</script>

</body>

</html>

Este ejemplo mostrará un numero ‘2′ en el navegador.

Además, podemos especificarle el lenguaje en el que queremos programar. Existen otros lenguajes para navegador como Visual Basic Script y PerlScript, pero nosotros usamos Javascript porque es universal: todos los navegadores lo soportan, mientras que los otros dependen de la plataforma donde nos encontremos. Para indicar el lenguaje, podemos escribir lo siguiente:

Quote
<script language="Javascript">

</script>

De esta forma indicamos el lenguaje a usar. Esto es necesario en el caso de que tengamos que usar lenguajes combinados en la misma página, como en el caso de que queramos enlazar una película flash con nuestra pagina web.

Otra forma de escribir Javascript en una página web es utilizando los eventos de las etiquetas HTML. Las etiquetas HTML tienen varios “eventos” que responden a determinados sucesos, como por ejemplo el click del ratón, el envío de un formulario, o la carga de una página. Por ejemplo, si queremos que aparezca un mensaje al cargar la página que estamos viendo, haríamos algo como esto:

Quote
<html>

<head>

</head>

<body onload="alert('Hola, esto es una página web')">

texto

</body>

</html>

Esto hará que aparezca un mensaje nada más cargar la página web. También podemos aplicar estos eventos como enlaces, botones, imágenes, etc… Prácticamente cualquier etiqueta HTML soporta eventos como onclick, que permite responder a una pulsación del botón izquierdo del ratón.

Quote
<html>

<head>

</head>

<body>

<a href="http://www.google.com/"
onclick="alert('Ir a Google')">Google</a>

</body>

</html>

En este ejemplo vemos cómo al mismo tiempo que vamos a Google, el navegador nos avisa de lo que vamos a hacer antes de que ocurra. Este tipo de acciones se pueden usar para comprobar formularios antes de enviar los datos (e incluso, evitar su envío si no son correctos), comprobar dónde pinchamos en una imagen, etc…, observando los cambios en los objetos Javascript.

Y una última manera de ejecutar código Javascript es adjuntando un archivo al código principal, de tal forma que podemos agrupar las funciones, clases y demás en un archivo, y reutilizar ese archivo tantas veces como queramos posteriormente. Un ejemplo puede ser éste:

Quote
funciones.js:
function saludo(nombre) {

alert('Hola, ' + nombre);

}
saludo.html:
<html>

<head>

<title>Esta es una pagina web</title>

<script language="Javascript" src="funciones.js"></script>

<body>

<script>

saludo('Ana');

</script>

</body>

</html>

En este ejemplo vemos cómo podemos incluir un código Javascript desde otro archivo y utilizar las funciones incluidas dentro de nuestro código, en tantos archivos como queramos. De esta forma podemos reutilizar el código todo lo necesario.

Los comentarios.
Los comentarios son uno de los elementos más despreciados en todos los lenguajes de programación, pero son de suma utilidad: permiten aclarar y sintetizar el código, además de servir de eventuales “ocultadores” de código, ya que todo lo que se encuentra en un comentario no es interpretado por el navegador. Podemos escribir comentarios de dos formas diferentes:

Quote
// Este es un comentario de una línea

Ponemos dos barras normales para crear un comentario de una línea. Este comentario también lo podemos usar en el caso de que queramos ocultar una línea concreta de la ejecución del programa. Si queremos realizar un comentario de múltiples líneas, haremos:

Quote
/* Este

es un

comentario

de

múltiples

líneas */

De esta forma, podemos comentar varias líneas de texto o código en un bloque. Esto es bastante interesante cuando tenemos que ocultar una gran cantidad de código continuo, que de otra forma tendríamos que comentar línea a línea con las dos barras.

Los comentarios en el código son muy útiles para ayudar a comprender el sentido del programa, tanto para el creador del código como para otros que puedan leerlo.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 7 | 4:37 PM
Javascript: ¿Cuándo usarlo y cuándo no?

Javascript es tan flexible y permite llevar a cabo una cantidad de tareas tal que es fácil pecar utilizándolo para cosas que, originalmente, no fue concebido.

Esto implica un problema cuando hay otros lenguajes que harían mejor una tarea determinada. Repasemos en qué casos resulta mejor usar Javascript y en cuáles no.

Cuándo NO usar javascript

Validación de formularios
Con Javascript puedes validar formularios. Puedes crear una gran experiencia del usuario utilizando este método, pero sería tonto no validar todas las entradas nuevamente con un lenguaje de lado del servidor antes de procesarlas. Si deseas elegir uno o el otro, utiliza el del lado de servidor. Si puede hacerse con otro lenguaje, usa el otro lenguaje.

Insertando contenido
Si necesitas cargar un bloque de navegación dinámico y no lo puedes crear en un archivo que puede ser incluido en el lado del servidor de la página de inicio; puedes utilizar la función load de jQuery para llamar al bloque. Funciona genial a menos que no puedas o quieras utilizar JavaScript. Si puede hacerse con otro lenguaje, usa el otro lenguaje.

De forma similar, el concepto completo de AJAX es generalmente considerado un hack. Es una manera de simular la comunicación bidireccional en una tecnología construida para una entrega de un solo lado. Cuando surge algo nuevo que acomoda con más naturalidad la comunicación bidireccional de navegador-servidor, AJAX se marcha. Si puede hacerse con otro lenguaje, usa el otro lenguaje.

Dando estilo
JavaScript es capaz de aplicar estilo a los elementos de una página. Ese también es el trabajo de CSS. Tener mucha información de estilo hace que el Javascript sea más difícil de leer, y las actualizaciones de estilo más difíciles de rastrear. Si puede hacerse con otro lenguaje, usa el otro lenguaje.

Una de las mayores razones por la cuál las librerías JavaScript son populares es porque abren la puerta a una gran cantidad de posibilidades de diseño. Puedes realizar fades in y out, animar los tamaños y posiciones y más. Pero estas cosas están, por lo general, relacionadas con el diseño y no con la funcionalidad. Por lo que CSS es más apropiado para estas cosas. Si puede hacerse con otro lenguaje, usa el otro lenguaje.

Cuándo usarlo

Suficientes casos de cuándo no usarlo. Existen muchas circunstancias en las que utilizar Javascript es la única opción. Por ejemplo, en los eventos. Javascript es el único lenguaje disponible para hacer que tu sitio web se comunique con el navegador y observar eventos como clics, doble clics, focos de mouse, teclas presionadas… y la lista sigue. Si necesitas acceso a dichos eventos, Javascript es tu territorio.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 8 | 4:50 PM
10 tips para mejorar tu JavaScript al máximo

El lenguaje JavaScript es uno de los más utilizados en la web y es uno de los códigos más versátiles a la hora de aplicarlo en la creación de tu sitio.

Para todos los desarrolladores que suelen trabajar con JavaScript a continuación les dejamos 10 tips, que consideramos los mejores, para que mejoren su codificación Javascript al máximo.

1. Utiliza el atributo defer sólo para scripts IE externos
Esto no es algo necesariamente obligatorio, pero puede resultar útil a veces. El atributo defer está declarado dentro de un tag <script> en XHTML, de esta forma:

Quote
<script type=”text/javascript” defer=”defer”></script>

El propósito de defer es decirle al script linkeado externamente que espere a que la página termine de cargar antes de ponerse a andar. Lo mismo se puede lograr por medio de métodos no-obstrusivos de Javascript, que usualmente incluye código que previene que los scripts se ejecuten hasta que el DOM termine de cargar.

Las ventajas de defer ocurren en conexión con Internet Explorer, dado que este navegador es el único que soporta este atributo. Por lo que si necesitas un script rápido para utilizar sólo en IE, y no te molesta que la página entera se cargue antes de que este se ejecute, simplemente añade defer=”defer” en tu etiqueta <script> y eso solucionará el problema. Un uso práctico para defer es solucionar el problema de la transparencia PNG en IE6.

NOTA: El atributo defer debe ser utilizado al esconder un script de otros navegadores mediante un comentario condicional que etiquete un script IE-solo, de otra forma el script funcionará normalmente en otros navegadores.

2. Utiliza una sección CData para prevenir XHTML de errores estrictos de validación
La mayoría de tus scripts residirán en archivos externos, y serán llamados en una etiqueta <script> ya sea en <head> del documento, o justo antes del tag finalizador </body>.

Pero puede que haya una instancia en la que estés incluyendo Javascript directamente en la misma página HTML, dentro de la etiqueta <script>, de esta forma:

Quote
<div>
<p>
<script type=“text/javascript”>
var my_variable = 100;
if (my_variable < 50) {
// do something here…
}
</script>
</p>
</div>

¿Notan el símbolo “menor”, que es parte de la declaración id? Este símbolo causará errores de validación en tu página a menos que envuelvas tu código en una sección CData, de esta forma:

Quote
<div>
<p>
<script type=“text/javascript”>
//<![CDATA[
var my_variable = 100;
if (my_variable < 50) {
// do something here...
}
//]]>
</script>
</p>
</div>

3. Evita las palabras claves JavaScript al crear identificadores de usuario
Muchas palabras son reservadas como palabras claves en JavaScript, por lo que deberías evitar utilizarlas como nombres de variables u otros identificadores personales. La lista completa de palabras claves es la que sigue:

• break
• case
• catch
• continue
• default
• delete
• do
• else
• finally
• for
• function
• if
• in
• instanceof
• new
• return
• switch
• this
• throw
• try
• typeof
• var
• void
• while
• with

4. Evita las palabras Javascript reservadas al crear identificadores de usuario
Existen también palabras JavaScript reservadas, que no necesariamente son utilizadas actualmente en el lenguaje, pero están reservadas para su uso futuro como palabras claves. Estas palabras son las siguientes:

• abstract
• boolean
• byte
• char
• class
• const
• debugger
• double
• enum
• export
• extends
• final
• float
• goto
• implements
• import
• int
• interface
• long
• native
• package
• private
• protected
• public
• short
• static
• super
• synchronized
• throws
• transient
• volatile

5. No cambies el tipo de una variable después de la declaración inicial
En JavaScript, técnicamente, lo siguiente es perfectamente legal:

Quote
var my_variable = “This is a String”;
my_variable = 50;

Luego de la declaración inicial de la variable como una cuerda en la línea 1, en la línea 2 su valor es cambiado y su tipo de información también. Esto no es bueno y debería evitarse.

6. No utilices variables globales
Para prevenir posibles conflictos, en el 99% de los casos, utiliza la palabra clave var al declarar inicialmente las variables y sus valores. Esto asegura que tus variables estén localizadas y no sean accesibles fuera de la función en la que han sido declaradas. Así que si utilizas el mismo nombre de variable en dos funciones diferentes, no habrá conflicto dado que cada variable será abolida en el momento en que su función termine de ejecutarse.

7. JavaScript discrimina mayúsculas y minúsculas
Recuerda que las siguientes dos variables representan dos contenedores completamente distintos:

Quote
var myVariable = “data”;
var myvariable = “more data”;

Así que utiliza prácticas buenas y consistentes en tus identificadores para asegurarte de no declarar dos variables diferentes cuando en realidad sólo querías crear una.

8. Utiliza switch para manejar condiciones múltiples
No hagas esto:

Quote
if (example_variable == “cyan”) {
// do something here…
} else if (example_variable == “magenta”) {
// do something here…
} else if (example_variable == “yellow”) {
// do something here…
} else if (example_variable == “black”) {
// do something here…
} else {
// do something here…
}

Haz esto:

Quote
switch (example_variable) {
case “cyan”:
// do something here…
break;
case “magenta”:
// do something here…
break;
case “yellow”:
// do something here…
break;
case “black”:
// do something here…
break;
default:
// do something here…
break;
}

El segundo bloque de código logra exactamente lo mismo que el primero, pero el segundo está limpio, es fácil de leer, de mantener y de modificar.

9. Utiliza try-catch para prevenir que los errores se muestren a los usuarios
Al envolver todo tu código en una declaración try-catch, puedes asegurarte que los usuarios nunca vean un desagradable error JavaScript. Cómo esto:

Quote
try {
nonExistentFunction();
} catch (error) {
document.write(”An error has occured.”)
}

En el código de abajo, hemos intentado llamar a una función que no existe, para forzar un error. El navegador no mostrará el típico error “not an object” o “object expected” , pero en su lugar mostrará el error personalizado que hemos incluido en la sección catch. También puedes dejar la sección catch vacía, y nada sucederá en el lado del cliente, o podrías crear una función para llamar dentro de la sección catch y manejar el error de forma tranquila para tus propios propósitos de debuggeo.

Ten presente que esto puede causar que los errores se escondan también del desarrollador, por lo que buena documentación de código y comentarios sería útil aquí.

10. Realiza comentarios multi-línea legibles, pero simples
En JavaScript, puedes comentar una línea de código poniendo // al principio de la misma. También puedes comentar un bloque de código como se muestra aquí

Quote
/* [el código va aquí] */.

Algunas veces necesitarás incluir una línea de comentario más larga y múltiple. Un buen método para usar que es fácil de localizar en el código es el siguiente:

Quote
/*
* This is a multi-line comment …
* cont’d…
* cont’d…
* cont’d…
* cont’d…
*/


Eso es todo. Diez prácticas JavaScript simples que esperamos les sirvan a todos.

¿Qué consejo añadirían ustedes?

ok


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 9 | 12:33 PM
Snippets de Javascript y jQuery para ahorrar tiempo

Somos varios los desarrolladores que tenemos un juego de snippets siempre a mano para no perder tiempo reescribiendo código idéntico una y otra vez.
Para los que se especialicen en el Frontend, aquí les dejo un puñado de snippets de Javascript y jQuery para validar e-mails, chequear la carga de imágenes, desactivar el clic derecho del mouse, pasar parámetros con setTimeout, crear selectores personalizados y cancelar peticiones de AJAX.

Hacer un refresh del atributo src de una imagen:

Quote
$(imageobj).attr('src', $(imageobj)
.attr('src') + '?' + Math.random() );
Chequear si una imagen fue cargada:
var imgsrc = 'img/image1.png';
$('<img/>').load(function () {
alert('La imagen se cargó');
}).error(function () {
alert('Error al cargar la imagen');
}).attr('src', imgsrc);

Chequear si un set de imágenes se cargó:
Para este ejemplo, chequearemos si 10 imágenes fueron cargadas correctamente:

Quote
var totalImagenes = 10;
var imagenesCargadas = 0;
$("<img/>").load(function() {
++imagenesCargadas;
if(imagenesCargadas == totalImagenes){
//Las 10 imágenes fueron cargadas
}
});

Remover un texto seleccionado luego de hacer doble clic con el mouse:

Quote
clearSelection : function () {
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
}
$(element).bind('dblclick',function(event){
//hacer algo
clearSelection();
});

Validar dirección de e-mail (línea ofuscadísima ^_^):

Quote
var email = 'info@tympanus.net' //Obviamente esta variable la tomaremos de un form o algo así happy
if(!(/^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i.test(email)))
alert('e-mail inválido');

Ordenar ítems de una lista:
Nótese que usamos la clase “para_ordenar” en la lista.

Quote
<ul>
<li>Pérez</li>
<li>Gómez</li>
<li>Álvarez</li>
<li>Martínez</li>
</ul>

var items = $('.para_ordenar li').get();
items.sort(function(a,b){
var keyA = $(a).text();
var keyB = $(b).text();

if (keyA <keyB) return -1;
if (keyA> keyB) return 1;
return 0;
});
var ul = $('.para_ordenar');
$.each(items, function(i, li){
ul.append(li);
});

Pasar parámetros a una función llamada con setTimeout:

Quote
timeout = setTimeout(function(){myFunction(param)},time);

Desactivar el botón derecho del mouse:

Quote
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

Desvanecer una imagen y hacer aparecer otra en su reemplazo:
Usamos la variable "otroSource" que tiene que valer el src;

Quote
$('imageelement').fadeOut(function() {
$(this).load(function() {
$(this).fadeIn();
}).attr('src', otroSource);
});

Crear tus propios selectores:

Quote
//extender jQuery
$.extend($.expr[':'], {

//nombre del selector personalizado
mayorQueMil : function (a){
//Matcheo del elemento
return parseInt($(a).html())> 1000;
}
});

$(document).ready(function() {
$('td:mayorQueMil').css('background-color', '#ff0000');
});

Correr 5 veces una función con intervalos de 20 segundos:

Quote
var count = 0;
function miFuncion() {
count++;
if(count> 5) clearInterval(timeout);
//hacer algo
}
var timeout = setInterval(miFuncion, 20000);

Checkear que existe un elemento:

Quote
if ($("#id-elemento").length) {
//existe!
}

Cancelar una petición por AJAX:

Quote
var req = $.ajax({
type: "POST",
url: "unaurl",
data: "id=1",
success: function(){
//hacer algo
}
});
//Cancelar la petición
req.abort()

Bueno, creo que serán muy útiles para cualquier tipo de proyecto en el que estén trabajando.

Mientras tanto... ¿Cuáles son los snippets que utilizas con más frecuencia?

Esta vez con snippets para chequear cookies, tildar/destildar varios checkboxes, validar una fecha de nacimiento, centrar elementos en la pantalla, obtener urls y saber si el usuario presiona una tecla en especial.

Chequear si las cookies están activadas:

Quote
$(document).ready(function() {
var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesActivadas = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesActivadas){
//las cookies no están activadas
}
});

Tildar/destildar una serie de checkboxes:

Quote
var tog = false; // o true si vienen con tildadas por default
$('a').click(function() {
$("input[type=checkbox]").attr("checked",!tog);
tog = !tog;
});

Obtener el índice de un elemento:

Quote
$("ul> li").click(function () {
var index = $(this).prevAll().length;
});

Validar fecha de nacimiento:

Quote
$("#lda-form").submit(function(){
var dia = $("#dia").val();
var mes = $("#mes").val();
var anio = $("#anio").val();
var edad = 18;
var miFecha = new Date();
miFecha.setFullYear(anio, mes-1, dia);

var fechaActual = new Date();
fechaActual.setFullYear(fechaActual.getFullYear() - edad);
if ((fechaActual - miFecha) <0){
alert("Disculpa, sólo personas de más de " + edad + " pueden ingresar a este sitio.");
return false;
}
return true;
});

Chequear si un elemento es visible:

Quote
if($(element).is(":visible") == "true") {
//El elemento es visible
}

Contar los hijos de un elemento:

Quote
<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>

//codigo jQuery para contar elementos hijos
$("#foo> div").length

Centrar un elemento en la pantalla:

Quote
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}

//Usar la función así:
$(element).center();

Mover las opciones de una lista A a una lista B:

Quote
$().ready(function() {
$('#add').click(function() {
!$('#select1 option:selected').appendTo('#select2');
});
$('#remove').click(function() {
!$('#select2 option:selected').appendTo('#select1');
});
});

Seleccionar todos los checkboxes de una sola vez:

Quote
$(document).ready(function(){
$("#checkboxall").change(function(){
var checked_status = this.checked;
$("input[name=checkall]").attr("checked", checked_status);
});

});

Obtener la url actual:

Quote
$(document).ready(function() {
var pathname = window.location.pathname;
});

Saber si se presionó una tecla y cuál:

Quote
$(function() {
$(document).keypress(function(e){
switch(e.which){
// "ENTER"
case 13:
alert('Se presionó Enter');
break;

// "s"
case 115:
alert('Se presionó S');
break;

//(etc...)

}
});

});

¿Conoces alguna forma mejor de llevar a cabo alguna de las tareas de estos snippets? ¡Compártela con nosotros!


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 10 | 3:51 PM
Javascript: chequeando si está activo el bloqueo de pop-ups

Hoy en día muchos usuarios utilizan el bloqueador automático de popups en su navegador, y otro tanto lo tienen configurado por default sin siquiera saberlo.

Si necesitas usar un pop-up en tu sitio porque no te queda otra, te recomiendo primero chequear por Javascript si el navegador del usuario tiene habilitado el bloqueador y, en caso de ser así, realizar alguna otra maniobra para avisarle que permita esa ventana emergente.

Puedes usar esta técnica para mostrar un mensaje estilo: "Por favor deshabilita el bloqueador de ventanas emergentes y vuelve a hacer clic en Descargar archivo".

Quote
var windowName = 'userConsole';
var popUp = window.open('/pagina-de-popup.php', windowName, 'width=1000, height=700, left=24, top=24, scrollbars, resizable');
if (popUp == null || typeof(popUp)=='undefined') {
alert('Por favor deshabilita el bloqueador de ventanas emergentes y vuelve a hacer clic en "Descargar archivo".');
}
else {
popUp.focus();
}

Lo primero es dar la directiva de abrir la nueva ventana, guardando lo que devuelva la función. Entonces chequeamos si existe el objeto. Si no, podemos disparar un alert() informando el bloqueador puede estar activo, o usar cualquier medio que nos parezca más efectivo.

¿Qué otras formas de resolver el tema de los pop-up blockers conoces?


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 11 | 4:41 PM
Modernizr: Javascript para evadir incompatibilidades entre navegadores

Existe una nueva herramienta llamada Modernizr que llegó para hacer que nuestra vida como diseñadores web sea un poquito más fácil.

En la nota de de hoy te enseñaremos cómo aplicar este útil script para lograr el máximo efecto en tu sitio. ¡Esperamos que te sea de utilidad!

Descripción General
Aunque el uso de CSS3 ha ido aumentando entre los diseñadores web, el soporte de los distintos navegadores para algunas de sus funcionalidades es todavía inexistente. Modernizr se utiliza para atender a aquellos navegadores que no soportan determinadas propiedades CSS3 y hace que el desarrollo sea mucho más fácil porque así sabemos qué le estamos brindando a estos navegadores con menos posibilidades una experiencia alternativa, en lugar de ignorarlos. Tengan en mente (y esto está indicado incluso en la portada del sitio oficial) que Modernizr no habilita mágicamente estas propiedades para los navegadores que no las admiten. Simplemente le dice a la página si esta función es compatible con el navegador que el usuario está usando o no.

Cómo funciona
Para instalar Modernizr, descarga el archivo de su página oficial. Luego, en la etiqueta HEAD de tu sitio, añade un link al archivo. Por ejemplo:

Quote
<script src="js/modernizr-1.0.min.js"></script>

El segundo paso es incluir en tu etiqueta HTML una clase de "no-js":

Quote
<h2>¿Por qué añadir esta etiqueta?</h2>

Porque ese será el estado por defecto de la página. Si JavaScript (js) no está activado, entonces Modernizr no funcionará (y probablemente otras características de tu sitio tampoco lo harán) por lo que es útil tener un fallback para estos casos. Si el JavaScript está habilitado, una vez que la página se cargue en el navegador, esa clase será reemplazada dinámicamente y lucirá parecida a esto:

¿Qué quiere decir esto? Echemos un vistazo
En este caso, hemos abierto la página en Firefox 3.5. Este navegador (lamentablemente) no soporta la funcionalidad de fondos múltiples, gradientes CSS o transformaciones CSS, por lo tanto, los resultados de Modernizr serán "no-multipebgs", "no-cssgradients" y "no-csstransforms". Por otra parte, sí soporta canvas y border-radius, lo que explica "canvas" y "borderradius".

Cómo utilizar esta preciada información
Por lo tanto ¿Qué podemos hacer con esto? Se pueden llegar a preguntar de qué forma los ayuda. Miremos el ejemplo:

Fondos múltiples
Has construido el fondo de tu sitio web cuidadosamente y estás utilizando la técnica de fondos múltiples para hacerlo más fácil y rápido de codificar. Tu CSS lucirá similar a este:

Quote
#nice {
background: url(background-one.png) top left repeat-x,
url(background-two.png) bottom left repeat-x;
}

Y un buen navegador mostrará esto:

Utilizando Modernizr, tu CSS en cambio lucirá así:

Quote
#nice {
background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
background: url(background-one.png) top left repeat-x,
url(background-two.png) bottom left repeat-x;
}

Esto es lo que tus visitantes obtendrán, dependiendo del navegador que utilicen:

Esta es una implementación muy simplificada de Modernizr, pero esperamos que sea suficiente para mostrarles lo que pueden lograr con esta herramienta.

HTML5
Modernizr también te permite utilizar los nuevos elementos HTML5 –header, hgroup, section, footer, video, etc... - y darles estilo. Esto no quiere decir que algunos de estos elementos comenzarán a funcionar en Internet Explorer, pero puedes darle estilo para que IE los entienda y no los ignore.

JavaScript
También puedes detectar propiedades utilizando Modernizr en tu JavaScript, mediante esta sintaxis:

Quote
if (Modernizr.geolocation) {
}

Conclusión
Mientras no podamos confiar en el hecho de que los navegadores soporten todo el espectro completo de funcionalidades que deseamos usar, la mejor herramienta disponible es Modernizr.

Haz clic aquí para visitar el sitio oficial de Modernizr »

¿Ustedes ya la utilizan? Si no lo hacen ¿Cómo manejan estos inconvenientes?


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 12 | 6:59 PM
Agregando movimiento vía JavaScript

Más de alguna vez nos hemos preguntado cómo funciona el menú superior del sitio. Ese movimiento de la etiqueta que de tan fluido parece ser Flash. Bueno, para eso se utiliza una librería JavaScript gratuita llamada script.aculo.us, la que a través de un simple comando y fácil configuración permite ese y otros muchos interesantes efectos. Existen algunas otras librerías, también gratis que hacen lo mismo. Tal es el caso de mootools, jquery o simpleJs. Es decisión de cada uno cuál utilizar.

Bien, para el ejemplo específico del efecto del menú de este sitio, se utilizó Effect.toggle(), el que permite con un sólo onclick() (en un <a>, <span>, etc) mostrar y esconder el div con el id que necesitamos. En el fondo se trata de eso, tenemos un div, le damos un id específico y único, el que a través del onclick le decimos que muestre ese div si está escondido, o que lo esconda si está visible. Para que el div esté escondido desde un inicio, le damos un display: none; en el mismo HTML o en una hoja de estilos externa, como prefieras. Como la mayoría de las veces, muestro un ejemplo visual y código utilizado explicado. Primero, el código HTML:

Quote
<a onclick="new Effect.toggle($(‘cajatexto’),’blind’)">Mostrar y Esconder Texto</a>
<div id="cajatexto" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris eget ante. Integer sollicitudin urna eget est. Phasellus pharetra rutrum erat. Phasellus non augue et sapien nonummy……………..</p>
</div>

Fijarse que al onclick se le agregó el id cajatexto, al igual que el div que queremos que se vea el efecto aplicado.

Ver ejemplo

Debemos agregar 2 elementos JavaScript a la página que queremos que ocurra el efecto: prototype.js y scriptaculous.js (en ese mismo orden).

Quote
<script src="include/prototype.js" type="text/javascript"></script>
<script src="include/scriptaculous.js" type="text/javascript"></script>

Como dije, script.aculo.us ofrece muchas más funcionalidades, además de efectos. Chequeen su sitio para más información.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 13 | 6:34 PM
Lupa sencilla en javascript

Veremos cómo crear una lupa sencilla usando las propiedades layerX y layerY,
soportadas por los navegadores estándar, y sus equivalentes para Explorer

Las propiedades layerX y layerY del objeto event proporcionan las coordenadas x e y del ratón, relativas al elemento que dispara el evento. Dichas propiedades son soportadas por todos los navegadores modernos, salvo por Explorer que, como bien sabemos, maneja los eventos a su manera. En este caso, ese fantástico navegador utiliza las propiedades offsetX y offsetY, que son equivalentes a las anteriores.
Veamos un ejemplo de cómo obtener las coordenadas del ratón relativas a una imagen:

Como podemos apreciar, las coordenadas son relativas a la imagen y no al área de visualización de la página o viewport, como ocurriría si utilizáramos en su lugar las propiedades clientX y clientY del objeto event, complementadas con self.pageXOffset y self.pageYOffset y sus equivalentes para Explorer (document.body.scrollLeft/scrollTop o document.documentElement.scrollLeft/scrollTop, según el compatMode que usemos) para añadir el desplazamieno del scroll.

El código utilizado es el siguiente:

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>coordenadas imagen</title>
<style>
*{ margin:0; padding:0; font-size:10px; color#666; font-family:Verdana, Arial, Helvetica, sans-serif}
img{cursor:crosshair}
</style>
<script>
function getPos(e){
var ev=e || window.event;
var obj=ev.target || ev.srcElement;
obj.style.position='relative';
posX=ev.layerX || ev.offsetX || 0;
posY=ev.layerY || ev.offsetY || 0;
return {x:posX,y:posY}
}
</script>
</head>

<body>
<img src="img/38.jpg" width="400" height="400" onmousemove="var pos=getPos(event);document.getElementById('log').innerHTML='x: '+pos.x+', y: '+pos.y" />
<div id="log">pase el mouse sobre la imagen</div>
</body>

</html>

Si tomamos ese código como base y agregamos algunos estilos css y regla de tres simple, podemos fácilmente conseguir un efecto lupa semejante a este:

El código que utilizamos para lograrlo es el siguiente:

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lupa Sencilla</title>
<style>
*{ margin:0; padding:0; font-size:10px; color#666; font-family:Verdana, Arial, Helvetica, sans-serif}
#lupa{width:167px;height:167px;position:absolute;border:1px solid #000;overflow:hidden;left: 258px;top:0px;background-color:#999}
#im{position: relative; left:0;top:0}
#im0{cursor:crosshair}
</style>
<script>
function t(id){return document.getElementById(id);}
function addEvent(obj,fun,type){
if(obj.addEventListener){
obj.addEventListener(type,fun,false);
}else if(obj.attachEvent){
var f=function(){
fun.call(obj,window.event);
}
obj.attachEvent('on'+type,f);
obj[fun.toString()+type]=f;
}else{
obj['on'+type]=fun;
}
}
function getPos(e){
var ev=e || window.event;
var obj=ev.target || ev.srcElement;
obj.style.position='relative';
posX=ev.layerX || ev.offsetX || 0;
posY=ev.layerY || ev.offsetY || 0;
return {x:posX,y:posY}
}
function css(id,prop){
if(window.getComputedStyle){
return document.defaultView.getComputedStyle(t(id),null).getPropertyValue(prop);
}else{
var re = /(-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return t(id).currentStyle[prop] ? t(id).currentStyle[prop] : null;
}
}
function cambiar(pos,rel,e,a,a2,w,h){
var al=parseInt(a);
var al2=parseInt(a2);
if(pos.x<(al/2)/rel)
pos.x=(al/2)/rel;
if(pos.y<(al2/2)/rel)
pos.y=(al2/2)/rel;
if(pos.x>(w)-(al/2)/rel)
pos.x=(w)-(al/2)/rel;
if(pos.y>(h)-(al2/2)/rel)
pos.y=(h)-(al2/2)/rel;
t('im').style.left=-(rel*pos.x)+(al/2)+'px';
t('im').style.top=-(rel*pos.y)+(al2/2)+'px';
}
onload=function(){
addEvent(
t('im0'),
function(e){
var al2=css('lupa','height');
var al=css('lupa','width');
var pos=getPos(e);
cambiar(pos,(t('im').width)/this.width,e,al,al2,this.width,this.height);
},
'mousemove'
);
}
</script>
</head>

<body>
<img id="im0" src="img/18.jpg" width="250" height="167" />
<div id="lupa"><img id="im" src="img/18.jpg" width="500" /></div>
<div>recorra con el mouse la primera imagen</div>

</body>
</html>

El truco consiste en enmascarar la imagen a tamaño completo con una capa con overflow hidden, y desplazarla (seguimos hablando de la imagen), en sentido inverso al movimiento del mouse, la misma distancia en pixeles respecto de su ubicación inicial en las coordenadas 0,0 de la capa, obtenida con layerX y layerY (y sus análogas para Explorer) durante el evento onmousemove, pero recalculada en función a la diferencia de proporción entre la imagen pequeña y la ampliada.

Adicionalmente, debemos frenar el movimiento al llegar a los límites de la imagen pequeña, para no mostrar blancos en la visualización de la ampliación.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 14 | 6:50 PM
Gradientes livianos en Javascript
Gradientes en Javascript

Veremos cómo crear gradientes que consuman pocos recursos sin usar bucles, clipeo de capas o imágenes

Hasta ahora los ejemplos que he visto de creación de gradientes en Javascript no me convencen demasiado ya que, o usan imágenes de fondo con el degradado aplicado en ellas (imágenes que es necesario generar con algún editor o con lenguaje de servidor), o utilizan diferentes métodos de clipeo o división de capas (todo termina en un largo bucle en el que se recorre cada una de las subdivisiones generadas con el fin de aplicarle el color necesario para lograr el gradiente). En especial este último método puede consumir demasiados recursos si la superficie a cubrir es extensa.

Afortunadamente, gracias a la compatibilidad del elemento canvas con todos los navegadores modernos y a los filtros propietarios de Explorer, podemos, de manera crossBrowser, generar gradientes livianos en javascript, con un mínimo consumo de recursos y sin usar imágenes u otros extras.

Veamos algunos ejemplos:

Código utilizado:

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gradientes</title>
<style>
#v,#h,#v2,#h2{ width:500px;height:100px; border:1px solid #000; margin-bottom:2px}
</style>
<script>
function $(x){return document.getElementById(x);}
function css(id,prop){
if(window.getComputedStyle){
return document.defaultView.getComputedStyle($(id),null).getPropertyValue(prop);
}else{
var re = /(-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return $(id).currentStyle[prop] ? $(id).currentStyle[prop] : null;
}
}
function gradiente(idObj,col1,col2,tipo){
if (document.createElement("canvas").getContext) {
/* ---- canvas ---- */
var b1=parseInt(col1.substr(5,2),16);
var g1=parseInt(col1.substr(3,2),16);
var r1=parseInt(col1.substr(1,2),16);
var b2=parseInt(col2.substr(5,2),16);
var g2=parseInt(col2.substr(3,2),16);
var r2=parseInt(col2.substr(1,2),16);
var ref = document.createElement("canvas");
ref.width = parseInt(css(idObj,'width'));
ref.height =parseInt(css(idObj,'height'))
var context = ref.getContext("2d");
context.translate(0,0);
context.scale(1,1);
if(tipo){
context.translate(ref.width,0);
context.rotate(Math.PI/2);
var gradient = context.createLinearGradient(0, 0, 0, ref.width);
gradient.addColorStop(1, "rgba("+r1+","+g1+","+ b1+", 1.0)");
gradient.addColorStop(0, "rgba("+r2+","+g2+","+ b2+", 1.0)");
context.fillStyle = gradient;
context.fillRect(0,0,ref.height, ref.width);
}else{
var gradient = context.createLinearGradient(0, 0, 0, ref.height);
gradient.addColorStop(0, "rgba("+r1+","+g1+","+ b1+", 1.0)");
gradient.addColorStop(1, "rgba("+r2+","+g2+","+ b2+", 1.0)");
context.fillStyle = gradient;
context.fillRect(0,0,ref.width, ref.height);
}
$(idObj).appendChild(ref);
} else {
/* ---- DXImageTransform ---- */
$(idObj).style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+col1+", endColorstr="+col2+", GradientType="+tipo+")"
}
}
window.onload=function(){
gradiente('v','#FF0000','#FFFF00',0);
gradiente('h','#00FF00','#FFFF00',1);
gradiente('v2','#663399','#CCFFFF',0);
gradiente('h2','#00FFCC','#CCFFFF',1);
}
</script>
</head>

<body>
<div id="v"></div>
<div id="h"></div>
<div id="v2"></div>
<div id="h2"></div>
</body>
</html>



Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 15 | 2:22 PM
Mensajes personalizados según la URL de referencia

Existe una bonita practica en javascript para detectar desde donde provienen tus visitas y personalizar masajes o saludos sobre la base de la dirección URL de referencia. El estilo del ejemplo no es muy bonito, pero basándose en este idea pueden hacerlos mucho mas atractivos por su cuenta.

Quote
JavaScript:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
// URLs usando expresiones regulares que quieres que detecte
var msgs = [
// null url : tráfico directo
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
// Mi url!
,{'url':/^http:\/\/(\w+\.)?midominio\.com/, 'msg':null}
// Otras
,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
// URL genéricas
,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
// Si no existe la capa no se muestra el mensaje
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// Si existe mensaje
if(msg) {
// Añade un botón para cerrar
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}

// Llama al detector de referrers cuando se carga en DOM
$(DetectReferrer);
</script>

Agregamos el siguiente código donde mostraremos los mensajes:

Quote
HTML:

<div id="WelcomePlaceHolder"></div>

Las Base del estilo que pueden utilizar como Guía, (la idea es q lo mejoren)

Quote
CSS:

/* Style your Message Div */
#WelcomePlaceHolder{
/* Keep hidden until called by javascript */
display:none;
Border:silver 2px solid;
width:240px;
height:125px;
/* some space for BG image */
padding:2px 2px 2px 100px;
background:url('http://www.01gif.com/base/les_gifs_personnage_humains/hommes/hommes002.gif') no-repeat left center;
font-size:25px;
color:#333333;
margin:5px;
}
/* Style Close Button */
A.CloseButton {
font-size:11px;
font-weight:bolder;
color:black;
border:silver 2px solid;
text-decoration:none;
float:right;
padding:2px;
}
A.CloseButton:hover {
border:gray 2px outset;
text-decoration:none;
}


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » JavaScript (información de referencia acerca de la cosa)
Página 1 de 3123»
Búscar: