Buenas tardes a todos (para los que sean tardes, para el resto, lo que corresponda!).
Acudo una vez mas en busca de su gran ayuda, para poder resolver un problema que se me ha presentado a probar mi nuevo script en todos los navegadores.
Resulta que estoy haciendo una web donde la pagina principal es un acordion que, al hacer clic en cada uno de ellos, se abre un div que contiene un contenido distinto. Para que ello pase, le doy al div width=0, para que este oculto. Esto lo hago, en vez de display:none, ya que quiero que el div aparezca gradualmente, incrementando su ancho con el paso del tiempo. Para ello utilizo los setTimeout.
La cuestion es, entonces, que yo primero, debo verificar si el div en cuestio se encuentra abierto o cerrado (si su ancho es =0, esta cerrado), y entonces hago uno u otra cosa. Probando en los distintos navegadores, funciona perfecto, hasta que llegue a EL navegador, ese que te arruina la emocion de que lo has hecho bien y te dice que tienes un error en el codigo: FIREFOX. Y por ende, el efecto funciona realmente mal.
http://www.prevefilms.com/prueba.html
El codigo en cuestion es :
Código:
var divs = ["proyectos_con","staff_con","servicios_con","contacto_con"];
var frames = ["frame_pro","frame_con","contiene_secciones_pro","frame_ser"];
/* array con todos los divs */
/* FUNCIONES GENERALES */
function efecto(div,ancho) {
/* Recib el nombre del div por parametro. Si el div esta cerrado, lo abre. Sino, lo cierra" */
if(document.getElementById(div).style.width == ""){
setTimeout (function() {document.getElementById(div).style.width = ancho;},300);
setTimeout (function() {document.getElementById(div).style.width = "400px";},250);
setTimeout (function() {document.getElementById(div).style.width = "300px";},200);
setTimeout (function() {document.getElementById(div).style.width = "200px";},150);
setTimeout (function() {document.getElementById(div).style.width = "100px";},100);
setTimeout (function() {document.getElementById(div).style.width = "";},50);
}
else {
setTimeout (function() {document.getElementById(div).style.width = ancho;},50);
setTimeout (function() {document.getElementById(div).style.width = "400px";},100);
setTimeout (function() {document.getElementById(div).style.width = "300px";},150);
setTimeout (function() {document.getElementById(div).style.width = "200px";},200);
setTimeout (function() {document.getElementById(div).style.width = "100px";},250);
setTimeout (function() {document.getElementById(div).style.width = "";},300);
}
for (i=0; i<divs.length; i++){
if (divs[i]==div){} else if (document.getElementById(divs[i]).style.width != ""){
efecto(divs[i]);}
}
}
function cambia_tam (div,imagen,tamano){
setTimeout(function() {document.getElementById(div).style.width = tamano;},300);
setTimeout(function() {document.getElementById(div).style.background = "url('images/" + imagen + "') no-repeat";
},300);
}
function frames_fx(frame,ancho){
/* hace aparecer y desaparecer los frames de cada solapa */
if (document.getElementById(frame).style.width ==""){
setTimeout (function() {document.getElementById(frame).style.width = ancho;},350);}
else {document.getElementById(frame).style.width = "";}
for (i=0; i<frames.length; i++){
if (frames[i]==frame){} else if (document.getElementById(frames[i]).style.width != ""){
document.getElementById(frames[i]).style.width = "";}
}
}
/*FUNCIONES QUE HACEN LOS EFECTOS DE CADA SOLAPA */
function proyectos_fx(){
efecto("proyectos_con","512px");
frames_fx("frame_pro","500px");
frames_fx("contiene_secciones_pro","500px")
if (document.getElementById("contacto").style.width !="85px"){
cambia_tam("contacto","contacto_ultimo.jpg","85px");}
else {cambia_tam("contacto","contacto.jpg","57px");}
}
function servicios_fx(){
efecto("servicios_con","512px");
frames_fx("frame_ser","500px");
frames_fx("contiene_secciones_ser","500px")
if (document.getElementById("contacto").style.width !="85px"){
cambia_tam("contacto","contacto_ultimo.jpg","85px");}
else {cambia_tam("contacto","contacto.jpg","57px");}
}
function staff_fx(){
efecto("staff_con","460px");
if (document.getElementById("contacto").style.width !="57px"){
cambia_tam("contacto","contacto.jpg","57px");}
}
function contacto_fx(){
efecto("contacto_con","454px");
frames_fx("frame_con","450px");
if (document.getElementById("contacto").style.width !="57px"){
cambia_tam("contacto","contacto.jpg","57px");}
}
Entonces, queria ver si me podian ayudar en como se hace correctamente que un div tenga width 0, y el efecto funcione, ya que si en el CSS pongo que tenga width=0px y en el JS verifico con esa condicion, el codigo no funciona.
Alguna ayuda??
Desde ya, espero que haya sido bastante explicativo, de no ser asi, por favor, diganlo y vere si puedo reformular mi pregunta, ya que es cierto, he dado varias vueltas, pero he tratado de ser lo mas explicativo y certero posible.
Desde ya, muchas gracias!!
Saludos,
Pablo.