JavaScript

Cambiar el tamaño de un Iframe con Javascript

keopx — Thu, 12 Nov 2009 13:32:21 +0000

Cambiar el tamaño de un Iframe con Javascript

Bueno pues lo dicho, me ha sido necesario el cambiar el tamaño de un Iframe de forma dinámica mediante javascript. He intentado utilizar jQuery y javascript a pelo pero no me ha sido posible por el siguiente motivo.

Vemamos tenemos el siguiente Iframe:

<iframe src="otrapagina.html" id="listado"></iframe>

He intentado acceder de la siguiente manera y NO es posible:

document.getElementById('listado').style.cols = '200px';

Como el iframe es parte del documento “padre” no podemos acceder a él de forma directa. Tendremos que utilizar el siguiente formato:

parent.document.getElementById('listado').style.cols = '200px';

keopx Jue, 12/11/2009 - 14:32

Categoria

JavaScript

Programación

Tag

JavaScript

Programación

Comentarios

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

Ordenar Array con caracteres especiales en JavaScript

keopx — Sat, 01 Aug 2009 15:25:52 +0000

Ordenar Array con caracteres especiales en JavaScript

Introducción

Los caracteres especiales como pueden ser las ñ o las tildes producen verdaderos dolores de cabeza. En este caso vamos a utilizar una función para reemplazar dichos caracteres antes de compararlo y posteriormente lo volver a colocar como corresponde.

Funciones de sustitución

Vamos a sustituir todo el array antes de compararlo:

for (var y=0; y vector[y] = vector[y].toString().replace(/Á|É|Í|Ó|Ú|Ñ/g,function (str,offset,s) {
str =str=="Á"?"A{":str=="É"?"E{":str=="Í"?"I{":str=="Ó "?"O{":str=="Ú"?"U{":str=="Ñ"?"N{":"N{"
return (str) } )
}

Procedemos a ordenar el array

Una vez ordenado pones otra vez los caracteres de forma correcta:

for (var z=0; z vector[z] = vector[z].toString().replace(/A{|E{|I{|O{|U{|N{/g,function (str,offset,s) {
str =str=="A{"?"Á":str=="E{"?"É":str=="I{"?"Í":str=="O{"?"Ó":str=="U{"?"Ú":str=="N{"?"Ñ":"Ñ"
return (str) } )
}

Referencia:

http://www.forosdelweb.com/f13/manipular-array-247815/index2.html

keopx Sáb, 01/08/2009 - 17:25

Categoria

Tag

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