Etiquetado de la entrada: JavaScript

JavaScript — Sin comentarios
26
Abr 10

Crear un pequeño plugin para barra de marcadores

Actualmente todos los navegadores (a excepción de Internet Explorer, como siempre) acepta añadir a la barra de marcadores funciones javascript que nos pueden facilitar la vida.

En esta ocasión traigo cómo hacer que se envíen datos a una página en función de un texto seleccionado en la página actual, así al pinchar en la barra de marcadoes haría lo que le dijéramos con ese texto.

Lo primero que hay que tener en cuenta es cómo se añade el javascript a la barra de marcadores. Siempre hay que empezar con

javascript:

Después hay que añadir lo que queremos que haga. Aquí teneis un ejemplo para comprobar el whois de un dominio en el caso de seleccionarlo:

javascript:location.href='http://www.who.is/' + encodeURIComponent(document.getSelection());

Si lo que queremos es comprobar el dominio donde estamos podemos emplear:

javascript:location.href='http://www.who.is/' + encodeURIComponent(document.location.href);
JavaScript — 1 Comentario
11
Abr 10

Formularios estilo inline en HTML y javascript

En muchos formularios nos puede venid bien que tengan un formato inline al estilo del login de facebook, es decir, que el contenido del campo nos indique qué hay que introducir y cuando vayamos a ese campo eliminemos el contenido para que el usuario lo rellene. Con esto nos ahorraríamos poner “label” para cada campo.

<input type="text" name="mi_variable"
     onfocus="if( this.value == 'etiqueta' ) { this.value = ''; }"
     onblur="if( this.value == '' ) { this.value = 'etiqueta'; }"
     value="etiqueta" />

Siendo ‘etiqueta’ el nombre del contenido. En el caso de las contraseñas se podría hacer igual pero solamente veríamos asteriscos, así que habría que cambiar el type también. Como añadido podríamos cambiar el color según es onfocus u onblur a través de this.style.color.
Aquí va otro ejemplo:

<input type="text" name="Password"
     onfocus="
       if( this.value == 'Password' ) {
          this.value = ''; // Borramos el contenido para dejarlo limpio para el usuario
          this.style.color = '#000000'; // Lo ponemos en negro
          this.type = 'password'; // Lo convertimos en password para que muestre asteriscos
       }"
     onblur="
       if( this.value == '' ) {
          this.value = 'Password'; // Volvemos a ponerle el texto en caso de no haber añadido una password
          this.style.color = '#CCCCCC'; // Lo ponemos en gris
          this.type = 'text'; // Lo pasamos a texto si no ha introducido password
       }"
     value="Password" />
PHP — Sin comentarios
9
Mar 10

Protección de email con hide-email

Leo en kabytes (un blog más que recomendado) una utilidad para encriptar el email en webs para robots curiosos con una función bastante simple y eficiente con php que genera javascript.
El uso en bien sencillo

<?php echo( hide_email('test@test.com') ); ?>

Hace uso de la función:

function hide_email( $email ) {
  $character_set = '+-.0123456789@ABCDEFGHIJKLMNOPQRSTUVWXYZ' . '_abcdefghijklmnopqrstuvwxyz';
  $key = str_shuffle($character_set); $cipher_text = ''; $id = 'e'.rand(1,999999999);
  for ($i=0;$i<strlen($email);$i+=1)
    $cipher_text.= $key[strpos($character_set,$email[$i])];
  $script = 'var a="'.$key.'";var b=a.split("").sort().join("");var c="'.$cipher_text.'";var d="";';
  $script.= 'for(var e=0;e<c.length;e++)d+ = b.charAt(a.indexOf(c.charAt(e)));';
  $script.= 'document.getElementById("'.$id.'").innerHTML = "<a href=\\"mailto:"+d+"\\">"+d+"</a>"';
  $script = "eval(\"".str_replace(array("\\",'"'), array("\\\\",'\"'), $script)."\")";
  $script = '<script type="text/javascript"> /* <![CDATA[*/'.$script.'/*]]>*/</script>';
  return '<span id="'.$id.'">[javascript protected email address]</span>'.$script;
}

Esta función se encuentra disponible en www.maurits.vdschee.nl/php_hide_email/

JavaScript / PHP / jQuery — Sin comentarios
19
Feb 10

Cargar un php con jquery a través ajax.

En esta ocasión proponemos un snippet para ejecutar un php dentro de un div con jquery.

$(document).ready(function() {
    $('#divdondequeremoscolocarlo').load(
        '/mifichero.php', { id: '1' });
});