Problema con LyteBox con Javascript en IE 7

ingeday · #1 (**permalink**) 07/07/2009, 09:15

Buenas espero todos esten bien.

Tengo el siguiente codigo.

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
<!--
bandera_ActivarML=0;
function ActivarML(idObj, idObj_Destino) {
	if(bandera_ActivarML==0) {
		bandera_ActivarML=1;
		refObj_Div=document.createElement('div');
		refObj_Div.setAttribute('id','light');
		/*refObj_Div.setAttribute('class','white_borde');*/
		refObj_Div.setAttribute('style','background:#09F; position:absolute; top: 25%; left: 25%; width: 50%; height: 50%; z-index:1003;');
		refObj_Destino=document.getElementById(idObj_Destino);
		refObj_Destino.appendChild(refObj_Div);
		//  	position:absolute;
		refObj_Div2=document.createElement('div');
		refObj_Div2.setAttribute('id','lightContent');
		/*refObj_Div.setAttribute('class','white_borde');*/
		refObj_Div2.setAttribute('style','position:absolute; top:10%; left:2%; right:2%; bottom:10%; background-color:white; z-index:1002; overflow:auto;');
		refObj_Destino2=document.getElementById(refObj_Div.id);
		refObj_Destino2.appendChild(refObj_Div2);
		// black_overlay{
		refObj_Div3=document.createElement('div');
		refObj_Div3.setAttribute('id','fade');
		refObj_Div3.setAttribute('onClick','document.getElementById(\'light\').style.display=\'none\';document.getElementById(\'fade\').style.display=\'none\'');        
		refObj_Div3.setAttribute('style','position: absolute; top: 0%; left: 0%; width: 100%; height: 960px; background-color:black; z-index:1001; -moz-opacity: 0.3; opacity:0.30; filter:alpha(opacity=30);');
		refObj_Destino=document.getElementById(idObj_Destino);
		refObj_Destino.appendChild(refObj_Div3);
	} else if(bandera_ActivarML==1){
document.getElementById('light').style.display=''; document.getElementById('fade').style.display='';
		}
}
-->
</script>
</head>

<body>
<a href="javascript:;" id="ok" onclick="ActivarML(this.id, 'ContenedorML')">Click Me!</a>
<div id="ContenedorML"></div>
</body>
</html>

Todo ese código lo que tiene es una funcion Javascript que me crea un lyteBox y me sirve en Firefox, Chrome,etc. menos en IE. Alguien tiene alguna sugerencia para que me sirva esa función que he creado pero en el navegador IE ?

Lo he probado con IE 7.

Gracias en lo que me puedan ayudar.

ingeday · #2 (**permalink**) 07/07/2009, 10:11

He buscado un poco y al parecer el SetAtribute en IE no funciona normal...

dice que se haría así:

Código:

elemento.setAttribute('className','negrita');

entonces se tendría que hacer un hoja de estilo independiente y ahi crear las clases, por ejemplo 'negrita'

Código HTML:

<style>
.negrita {
...
}
</style>

Pero tengo una duda cuando quiera definir unos atributos que no son de estilo por ejemplo el Id

Código:

elemento.setAttribute('id','Registro1');  // esto no se puede hacer por estilo

Alguien tiene algo que aportar?

Gracias.

David · #3 (**permalink**) 07/07/2009, 10:26

Efectivamente, no es recomendable asignar style ni tampoco los eventos (onclick, onmousemove, etc.) con setAttribute. Para los estilos, asigna una clase y los asignas con className:

Código javascript:

Ver originalelemento.className = "clase";

Y para los eventos usa addEventListener/attachEvent o asigna una función:

Código javascript:

Ver originalelemento.onclick = function() {
    alert("click");
}