jQuery

JQuery: Redimesionar imagen sin perder proporción

keopx — Sat, 26 Sep 2009 16:06:57 +0000

JQuery: Redimesionar imagen sin perder proporción

Con este script basándonos en JQuery nos sera fácil redimensionar una imagen o varias imágenes según las capas aquellas imágenes que superen en x tamaño la anchura. También se puede utilizar la altura como medida pero bueno con unos pequeños ajustes no hay mayores problemas.

jQuery(document).ready(function(){
  jQuery('.content img.imagefield').each(function(){
    var width = jQuery(this).width();
    var new_width = 680; //nuevo tamaño
    if (width > new_width){
      var height = jQuery(this).height();
      var calculo = Math.round((100*new_width)/ width); //porcentaje
      var new_height = Math.round((height*calculo)/100);
      jQuery(this).css( {
        width : new_width+'px',
        height : new_height+'px'
      } );
    }
  });
});

keopx Sáb, 26/09/2009 - 18:06

Categoria

JavaScript

Tag

JavaScript

jQuery

Comentarios

Cambiar estilos de un input con JQuery cuando es seleccionado

keopx — Sat, 26 Sep 2009 14:37:00 +0000

Cambiar estilos de un input con JQuery cuando es seleccionado

Es un script muy sencillo pero que hará mas agradable la visualización cuando seleccionemos un campo.

$(document).ready(function () {
  $('input[type="text"]').addClass("normal");
  $('input[type="text"]').focus(function () {
    $(this).removeClass("normal").addClass("selecionado");
    if (this.value == this.defaultValue) {
      this.value = '';
    }
    if (this.value != this.defaultValue) {
      this.select();
    }
  });
  $('input[type="text"]').blur(function () {
    $(this).removeClass("selecionado").addClass("normal");
    if ($.trim(this.value == '')) {
      this.value = (this.defaultValue ? this.defaultValue : '');
    }
  });
});

type="text" se puede cambiar por type="password" o que sea para poder realizar las mismas modificaciones.

Fuente: http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/

keopx Sáb, 26/09/2009 - 16:37

Categoria

JavaScript

Tag

jQuery

JavaScript

Comentarios

Detectar navegador con jQuery

keopx — Wed, 29 Jul 2009 15:22:41 +0000

Detectar navegador con jQuery

Bueno esto es otra librería de jquery para detectar el navegador. Últimamente estoy metiendo muchas horas en esto que jamas me ha gustado, javascript, pero que últimamente me ha salvado de muchos browns. La verdad que jQuery facilita muchas de mis tareas y añadiendo algunas librerías, pues aporta mucha practica visual a los desarrollos web, aunque como siempre he opinado y creo que seguiré opinando por tiempo, considero inseguro.

En este caso os presento jQBrowser:

Uso

Deteccion de navegador

var browser = $.browser.browser(); // the detected browser (defaults to 'Unknown')

// The following functions return a boolean value indicating whether or not the given browser was detected: var aol = $.browser.aol(); // AOL Explorer var camino = $.browser.camino(); // Camino var firefox = $.browser.firefox(); // Firefox var flock = $.browser.flock(); // Flock var icab = $.browser.icab(); // iCab var konqueror = $.browser.konqueror(); // Konqueror var mozilla = $.browser.mozilla(); // Mozilla var msie = $.browser.msie(); // Internet Explorer Win / Mac var netscape = $.browser.netscape(); // Netscape var opera = $.browser.opera(); // Opera var safari = $.browser.safari(); // Safari

Deteccion de version

$.browser.version.string() returns the full browser version string detected, while $.browser.version.number() attempts to wrangle that string into a usable number. alert( "You're using version " + $.browser.version.string() ); // defaults to 'Unknown' if( $.browser.version.number() > 1.5 ) { // defaults to undefined // Do something... }

Descarga:

jqbrowser.tar.gz

Web:

http://davecardwell.co.uk/javascript/jquery/plugins/jquery-browserdetect/

keopx Mié, 29/07/2009 - 17:22

Categoria

Tag

Comentarios

Curso jQuery UI impartido por Irontec y organizado por e-ghost

keopx — Fri, 24 Jul 2009 17:54:43 +0000

Curso jQuery UI impartido por Irontec y organizado por e-ghost

Bueno el otro día tuve la oportunidad de pasarme un años mas por los cursos que organiza el grupo e-ghost perteneciente a ESIDE de la Universidad de Deusto.

El curso me pareció muy interesante con ejemplos muy claros, tanto que casi diría que vale con copy&paste para utilizarlos. El curso fue impartido por la empresa Irontec. El curso trata de trabajar de forma visual con la interface de la aplicación web a través del uso de la librería javascript jQuery UI.

Os dejo el material para la descarga

Material:

Curso jQuery UI

keopx Vie, 24/07/2009 - 19:54

Categoria

JavaScript

Tag

JavaScript

jQuery

Comentarios

Selector de color con jQuery

keopx — Fri, 24 Jul 2009 17:40:41 +0000

Selector de color con jQuery

Encontré el otro día una herramienta que por lo menos me parece interesante, ColorPicker. Se basa en jQuery para ella y se puede descargar de la pagina "oficial" o desde este enlace: Descarga ColorPicker.

Esta muy bien ya que nos permitirá ir viendo que color seleccionamos en cada momento y mediante firebug podemos ir probando en nuestros sitios de desarrollo.

Fuente:

http://www.eyecon.ro/colorpicker/

keopx Vie, 24/07/2009 - 19:40

Categoria

Tag