lunes, 9 de mayo de 2011

Como crear un border css redondeado que se vea bien en todos los navegadores

Si quiereis saber como crear un border css redondeado que se vea bien en todos los navegadores ademas sin utilizar imagenes solo con css y la ayuda de un ficherito, pero bueno ya debes de saber que con firefox usando el prefijo -moz va bien y con el resto de navegadores menos internet explorer con -webkit tambien funciona perfecto.

Bueno dejo la el link para tener bordes css redondeados y que se vea en todos los exploradores

http://code.google.com/p/curved-corner/

martes, 19 de abril de 2011

Manipular cookies en javascript

Aqui dejo unas buenos metodos para manipular cookies en javascript que son un poco tediosas y esto es algo que funciona a la perfeccion:

Clase cookie en javascript para manipularlas
var Cookie = {
set: function(name,value,seconds){
if(seconds){
d = new Date();
d.setTime(d.getTime() + (seconds * 1000));
expiry = '; expires=' + d.toGMTString();
}else
expiry = '';
document.cookie = name + "=" + value + expiry + "; path=/";
},
get: function(name){
nameEQ = name + "=";
ca = document.cookie.split(';');
for(i = 0; i < ca.length; i++){ c = ca[i]; while(c.charAt(0) == ' ') c = c.substring(1,c.length); if(c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null }, unset: function(name){ Cookie.set(name,'',-1); } }




Posibles usos de la clase

Cookie.set('nombre','valor', 86400);
Cookie.unset('nombre');



Otra solucion para manipular cookies pero esta vez mediante una funcion javascript

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 ) );
}

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' : '' );
}

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';
}



Y ahora como se usa esta funcion para manipular cookies


// Párametros para setCookie
// nombre, valor, expira, camino, dominio, seguro
setCookie( 'test', 'mi valor', '', '/', '', '' );
if ( getCookie( 'test' ) ) alert( getCookie('test'));

// Párametros para deleteCookie
// nombre, camino, dominio
// Asegúrese de usar los mismos parámetros en setCookie y deleteCookie.
deleteCookie('test', '/', '');
( getCookie( 'test' ) ) ? alert( getCookie('test')) :
alert( 'No existe');


martes, 14 de diciembre de 2010

Imagen interactiva con jQuery


Aqui dejo un link de un tutorial que muestra como hace una imagen interactiva al estilo de IKEA aunque este sitio utiliza flash pero aqui lo muestran con jQuery.



http://buildinternet.com/2009/08/lights-out-dimmingcovering-background-content-with-jquery

viernes, 10 de diciembre de 2010

Deshabilitar el botón derecho con JQuery

Este es código bastante sencillo para que el usuario no pueda utilizar el botón derecho, para incorporarlo en nuestras paginas tan solo has de tener la ultima version de jQuery y listo.



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

viernes, 6 de agosto de 2010

Jquery encriptar desencriptar javascript JQuery

Existe una clase que nos ayuda a encriptar o desencriptar cadenas de texto para nuestros diferentes usos, el js en cuestion es JQuery RC4 y seria tan sencillo de utilizar como lo siguiente:

para encriptar

var href = $("#linki").attr("href");
$('#linki').attr('href', 'http://www.weblaquesea.com/descarga_juegos/descargajuegos.php?juegos='+ $.rc4EncryptStr(href,"descarga"));



Para desencriptar

$('#link').attr('href', "http://" + $.rc4DecryptStr(href,"descarga"));});


Aqui estamos pasando una variable codificada y despues la descodificamos, si te das cuenta hay que utilizar una palabra clave tanto en el metodo de encriptar como en el de desencriptar

lunes, 19 de julio de 2010

Eventos en Javacript

En cada elemento o etiqueta XHTML se define su propia lista de posibles eventos ya sean uno o varios.
En la siguiente tabla se resumen los eventos más importantes definidos por JavaScript:

onblur
Deseleccionar el elemento
<button>, <input>, <label>, <select>, <textarea>, <body>


onchange
Deseleccionar un elemento que se ha modificado
<input>, <select>, <textarea>


onclick
Pinchar y soltar el ratón
Todos los elementos


ondblclick
Pinchar dos veces seguidas con el ratón
Todos los elementos


onfocus
Seleccionar un elemento
<button>, <input>, <label>, <select>, <textarea>, <body>


onkeydown
Pulsar una tecla (sin soltar)
Elementos de formulario y <body>


onkeypress
Pulsar una tecla
Elementos de formulario y <body>


onkeyup
Soltar una tecla pulsada
Elementos de formulario y <body>


onload
La página se ha cargado completamente
<body>


onmousedown
Pulsar (sin soltar) un botón del ratón
Todos los elementos


onmousemove
Mover el ratón
Todos los elementos


onmouseout
El ratón "sale" del elemento (pasa por encima de otro elemento)
Todos los elementos


onmouseover
El ratón "entra" en el elemento (pasa por encima del elemento)
Todos los elementos


onmouseup
Soltar el botón que estaba pulsado en el ratón
Todos los elementos


onreset
Inicializar el formulario (borrar todos sus datos)
<form>


onresize
Se ha modificado el tamaño de la ventana del navegador
<body>


onselect
Seleccionar un texto
<input>, <textarea>


onsubmit
Enviar el formulario
<form>


onunload
Se abandona la página (por ejemplo al cerrar el navegador)
<body>

viernes, 2 de julio de 2010

JQuery selectores basicos - selectores formulario - selectores de filtro - selectores de atributos

[atrr(=)(!=)(^=)($=)(*=)value]


(=)Igual

var myVar = 'es';  
$('a[hreflang='+myVar+']');
$('input[type=checkbox][checked=true]');


(!=)Diferente

$("label[name!='identificador']");


(^=)Empieza

$('a[href^=http]');

$("input[name^='Esto']").val("Aquin");


($=) Acaba>

$('a[href$=html]');

$("a[href$=.jpg], a[href$=.jpeg], a[href$=.png]");



(*=)contiene

$('a').not("[href*=value]")



Selectores Filtro basico


:animated

selecciona los elementos que están en proceso de animación en este momento

$(".navArticals:not(:has(:animated))")



:eq()

Obtiene o modifica el valor de un elemento de la referecia que se le pase
$('a.enlacePdf:eq(2)')




:even

Selecciona los elementos pares en el conjunto resultado (en base 0).

$("tr:even").css("background-color", "#bbbbff");



:odd

Selecciona los elementos impares en el conjunto resultado (en base 0).
$("tr:even").css("background-color", "#ffbbbb");


:first

Selecciona el primer elemento asociado

$("tr:first").css("background-color", "#bbbbff");



:last

Selecciona el ultimo elemento asociado
$("tr:last").css("background-color", "#bbbbff");


:header

Elementos de encabezado como h1, h2, h3

$(":header").css({background:'#CCC', color:'blue'});


:gt()

Selecciona los elementos desde el del índice hasta el ultimo

$("tr:gt(6)").css("background-color", "#bbbbff");



:lt()

Selecciona los elementos desde el primero hasta el del índice dado
$("tr:lt(6)").css("background-color", "#bbbbff");



:not()

Selecciona todos los elementos en conjunto que no coincidan con el valor de la referencia pasada

$('tr').not("[href*=value]")
$("tr:not(':last')")



:hidden - Selecciona elementos que son hidden o estan ocultos por css

:visible - Selecciona elementos que son visible o estan visibles por css

:parent - Selecciona elementos que tiene nodos hijos

:empty - Selecciona elementos sin nodos hijos

:contains() - Selecciona elementos que tiene el valor o texto especificado

:has()- Selecciona elementos que contienen elemento que le pasemos



:first-child - Selecciona el primer elemento hijo de su padre.

:last-child - Selecciona el ultimo elemento hijo de su padre.

:only-child - Selecciona el elemento que esta solo(unico) hijo de su padre

:nth-child

Existe con diferentes valores


:nth-child(even) - Selecciona el elemento hijo de su padre indicado pero con la condición de que sea par

:nth-child(odd) - Selecciona el elemento hijo de su padre indicado pero con la condición de que sea impar

:nth-child(3n+1) - Selecciona el primer elemento hijo de su padre y siguiente sera el tercero

:nth-child(2) - Selecciona el segundo elemento hijo de su padre

$("div p:*****child").text("Cambio texto");


Filtros de formulario



:button

Selecciona todos los elementos de tipo button.

:checkbox

Selecciona todos los elementos de tipo checkbox.

:checked

Selecciona todos los elementos que estan checked.

:disabled

Selecciona todos los elementos que estan disabled.

:enabled

Selecciona todos los elementos que estan enabled

:file

Selecciona todos los elementos de tipo file.

:image

Selecciona todos los elementos de tipo image.

:input

Selecciona todos los elementos input

:password

Selecciona todos los elementos de tipo password.

:radio

Selecciona todos los elementos de tipo radio.

:reset

Selecciona todos los elementos de tipo reset.

:selected

Selecciona todos los elementos de tipo selected.

:submit

Selecciona todos los elementos de tipo submit

:text

Selecciona todos los elementos de tipo text.