Keopx

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

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


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/

Bueno me a parecido un articulo interesante y lo voy a enlazar por el momento cuando tenga un poco mas de tiempo puede que añada aqui las lineas, pero de momento dejo el enlace.

http://www.anieto2k.com/2009/05/13/optimizando-el-rendimiento-de-nuestros-scritps-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/

Bueno aquí dejo las fuentes para poder crear los bordes curvos y se visualicen correctamente, he utilizado varios plugin sobre jQuery.

El problema que tenia es que utilizaba una imagen de fondo, de no haber sido así habría resultado muchos mas sencillo, pero como siempre, me gusta hacer lo que quiero aunque cueste. Espero que así a otros muchos le resulte mucho mas facil.

En html escribimos las capas y en nuestros css añadimos las capas que sean necesarias. Y en el script ejecutamos según el navegador que sea. Como he dicho el problema la imagen de fondo sino habría solo necesario la función .corners().

$(document).ready(function() {
if (navigator.userAgent.indexOf("Firefox")!=-1) {
$("#fondo").corners('20px');
$("#subfondo").corners();
$("#texto").corners();
} else {
DD_roundies.addRule('#fondo', '20px');
}
});

Descarga el ejemplo: Round Example

Plugin:

• http://jquery.com/
• http://www.atblabs.com/jquery.corners.html
• Para IE7: http://www.dillerdesign.com/experiment/DD_roundies/#download

Actualización:

Iñaki esta en lo cierto, dejo un ejemplo de lo que comenta:

#block-menu-menu-cabecera .menu a {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-top-right-radius: 5px;
-khtml-border-top-left-radius: 5px;
}

Similar pasaría con Opera. Hay que tener en cuenta que tema de los bordes, en esta explicación esta realizada para ponerlo “mas bonito”, no como diseño que el cliente nos solicito.

Otra vez mas gracias por tus comentarios Iñaki.