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

Esto no suele suceder mucho, pero alguna vez nos ha interesado el tener mas de una clase para una misma etiqueta html. Bueno pues muy fácil decirle que si están las 2 darle cierto aspecto.

Yo lo he utilizado en el caso de Drupal.

De esta forma:

.not-logged-in.node-type-recorrido #sidebar-left {
background: transparent url(images/info.png) no-repeat scroll top center;
height:317px;
}

Se pone una clase y pegado la otra que este a la misma altura.

Otro ejemplo quizás mas claro:

p.italic {color: blue;}
p.underline {text-decoration: underline;}
p.large {font-size: 120%;}
p.small {font-size: 70%;}
p.underline.small {font-variant: small-caps;}

Bueno, aunque estoy en contra del uso de IE, por varios motivos, he de reconocer que es necesario para muchos desarrollos ya que en los proyectos piden el uso del mismo.

Versiones soportadas:

• Internet Explorer 1.0 (4.40.308)
• Internet Explorer 1.5 (0.1.0.10)
• Internet Explorer 2.01 (2.01.046)
• Internet Explorer 3.0 (3.0.1152)
• Internet Explorer 3.01 (3.01.2723)
• Internet Explorer 3.03 (3.03.2925)
• Internet Explorer 4.01 (4.72.3110.0)
• Internet Explorer 5.01 (5.00.3314.2100)
• Internet Explorer 5.5 (5.51.4807.2300)
• Internet Explorer 6.0 (6.00.2800.1106)
• Internet Explorer 6.0 (6.00.2900.2180)
• Internet Explorer 7.0 (7.00.5730.13)
• Internet Explorer 8.0 (8.00.6001.18702)

Yo solo recomendaría la instalación de IE7 e IE8

Para la descarga:

Aqui

Fuente original:

http://finalbuilds.edskes.net/iecollection.htm

Eliminar los bordes de los enlaces con CSS nos facilitar a las cosas. Muchas veces esto (los bordes) hace que se nos muevan los enlaces con que resulta bastante feo, la solución es sencilla.

a:focus{ outline:none; }

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.

Cuando queremos enlazar a una pagina externa y que siga en nuestra pagina solemos utilizar la propiedad target con el valor _blank. Ahora bien si queremos validar nuestra pagina pues w3c no lo permite.

El atributo target ha sido movido en xhtml strict. Si queremos poder enlazar de dicha forma podemos hacerlo con un poco de javascript, para ello podemos visitar la siguiente url: New-Window Links in a Standards-Compliant World

La forma facil es poner rel (relacion) con valor external y un javascript para la poder enviarlo.

Posibles soluciones:

$(‘a[@rel$='external']‘).click(function(){
this.target = “_blank”;
});

/*
Usage:
<a href=”http://www.keopx.net/” rel=”external”>keopx.net</a>
*/

Otra opción puede ser la siguiente:

Codigo jQquery
$(function() {
$(".external").attr("target","_blank");
});

Codigo CSS
.external { background: url(../images/external.png) center right no-repeat; padding-right: 10px; }

Actualización:

Otra opción mas es la siguiente, añadiendo rel=”external” en el enlace:

html

<a rel="external" href="http://www.ejemplo.com">www.ejemplo.com</a>

Codigo javascript, devemos de tener la libreria de jQuery:

function external(){
jQuery("a[@rel~='external']").click(function(){
window.open(jQuery(this).attr("href"));
return false;
});

La parte de jQuery puede ser sustituida por $ según la librería que se use.