Comunidad de diseño web y desarrollo en internet online

div con slide y ajax que carga contenido

Citar            
MensajeEscrito el 03 Sep 2009 07:51 pm
Hola.
Tengo un div que abro y cierro con un enlace. El contenido del div se carga via ajax. El javascript para la animación del slide para abrir y cerrar el div funciona bien, también el javascript que carga el contenido desde un archivo php, pero el problema es que el contenido del div cargado con ajax no respeta la animación y aparece encima. El div realiza la animación correctamente pero el texto aparece de golpe.

Este es el javascript que estoy usando, "masdiv" es la función que llama al resto cuando apreto el enlace:

Código Javascript :

var timerlen = 5;
var slideAniLen = 200;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function slidedown(objname){
        if(moving[objname])
                return;

        if(document.getElementById(objname).style.display != "none")
                return; 

        moving[objname] = true;
        dir[objname] = "down";
        startslide(objname);
}

function slideup(objname){
        if(moving[objname])
                return;

        if(document.getElementById(objname).style.display == "none")
                return; 

        moving[objname] = true;
        dir[objname] = "up";
        startslide(objname);
}


function startslide(objname){

   obj[objname] = document.getElementById(objname);
   obj[objname].style.display = "block";

   endHeight[objname] = parseInt(obj[objname].offsetHeight);
   obj[objname].style.display = "none";

   startTime[objname] = (new Date()).getTime();

   if(dir[objname] == "down"){
      obj[objname].style.height = "1px";
   }

   obj[objname].style.display = "block";

   timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}


function slidetick(objname){
        var elapsed = (new Date()).getTime() - startTime[objname];

        if (elapsed > slideAniLen)
                endSlide(objname)
        else {
                var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
                if(dir[objname] == "up")
                        d = endHeight[objname] - d;

                obj[objname].style.height = d + "px";
        }

        return;
}

function endSlide(objname){
        clearInterval(timerID[objname]);

        if(dir[objname] == "up")
                obj[objname].style.display = "none";

        obj[objname].style.height = endHeight[objname] + "px";

        delete(moving[objname]);
        delete(timerID[objname]);
        delete(startTime[objname]);
        delete(endHeight[objname]);
        delete(obj[objname]);
        delete(dir[objname]);

        return;
}

function masdiv(objname){
  if(document.getElementById(objname).style.display == "none"){
    slidedown(objname);
  }else{
    slideup(objname);
  }
}

function ajaxpage(containerid,id){
   var url="/mas.php?id="+id;
   var page_request=false;
   if(window.XMLHttpRequest){
      page_request=new XMLHttpRequest();
   } else if(window.ActiveXObject){
      try{
         page_request=new ActiveXObject("Msxml2.XMLHTTP");
         }
   catch(e){
      try{
         page_request=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e){}
      }
   } else { 
      return false;
   }

   page_request.onreadystatechange=function(){
      loadpage(page_request,containerid)
   };
   page_request.open('GET', url, true);
   page_request.send(null);
};

function loadpage(page_request,containerid){
   if(page_request.readyState==4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
      document.getElementById(containerid).innerHTML=page_request.responseText;
   }
};

function masdiv(contid,id) {
         ajaxpage(contid,id);
         masabre(contid);
}


Yo no escribí todo el javascript, como se puede ver, pero modifiqué varias cosas para hacerlas funcionar de la manera que necesitaba, menos ese detalle, que no logro entender.

¿Por qué se produce eso? ¿Lo puedo evitar?

Saludos!

Por -Javier-

21 de clabLevel



Genero:Masculino  

Diseñador programático o Programador gráfico

firefox
Citar            
MensajeEscrito el 04 Sep 2009 02:53 am
Ya lo solucioné. Claro, me concentré en el javascript y olvidé buscar la solución por otros lados. Fue algo tan ridículamente simple:

Código HTML :

overflow: hidden;


Saludos!

Por -Javier-

21 de clabLevel



Genero:Masculino  

Diseñador programático o Programador gráfico

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.