Foros del Web - Ver Mensaje Individual - Problemas al ejecutar javascript en un div

acornazzani · #3 (**permalink**) 27/03/2013, 20:49

Buenas Rosencrantz, en primer lugar, gracias por tu pronta respuesta. Te comento que el ejemplo lo saque de [URL="http://www.jqwidgets.com/"]http://www.jqwidgets.com/[/URL]. Mi archivo menu.php es:

Código PHP:

  <?php

$titulo = "Agencion OnLine 2013";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

        <title><? echo $titulo; ?></title>

        <link rel="stylesheet" href="css/menu.css" type="text/css" />

        <script type="text/javascript" src="js/tinydropdown.js"></script>

        </script>

        <div class="nav">

            <ul id="menu" class="menu">

                <li class="nodiv"><a href="index.php">Home</a></li>

                <li><a href="#">Agencia</a></li>

                <li><span>Unidades</span>

                    <ul>

                        <li><a href="paginas/panel.php" class="ajaxmenu">En Venta</a></li>

                        <li><a href="#">Vendidas</a></li>

                        <li><a href="#">Retiradas</a></li>

                        <li><a href="#">Pedidas</a></li>

                        <li><a href="#">Todas</a></li>

                        <li class="submenu">

                            <span>Selecci&oacute;n</span><ul>

                                <li class="noborder"><a href="#">Por Tipo</a></li>

                                <li><a href="#">Por Tipo y Precio</a></li>

                                <li><a href="#">Por valor Max y Min</a></li>

                                <li><a href="#">Cat&oacute;logo</a></li>

                            </ul>

                        </li>

                    </ul>

                </li>

                <li><a href="paginas/agenda.php" class="ajaxmenu">Agenda</a>

                    

            </ul>

        </div>

        <script type="text/javascript">

            var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});

        </script>

        </body>

</html>

Y el
tinydropdown.js

Código:

var TINY={};

function T$(i){
    return document.getElementById(i)
    }
function T$$(e,p){
    return p.getElementsByTagName(e)
    }

TINY.dropdown=function(){
    var p={
        fade:1,
        slide:1,
        active:0,
        timeout:200
    }, init=function(n,o){
        for(s in o){
            p[s]=o[s]
            }
            p.n=n;
        this.build()
    };
    init.prototype.build=function(){
        this.h=[];
        this.c=[];
        this.z=1000;
        var s=T$$('ul',T$(p.id)), l=s.length, i=0;
        p.speed=p.speed?p.speed*.1:.5;
        for(i;i<l;i++){
            var h=s[i].parentNode;
            this.h[i]=h;
            this.c[i]=s[i];
            h.onmouseover=new Function(p.n+'.show('+i+',1)');
            h.onmouseout=new Function(p.n+'.show('+i+')')
        }
    };
    init.prototype.show=function(x,d){
        var c=this.c[x], h=this.h[x];
        clearInterval(c.t);
        clearInterval(c.i);
        c.style.overflow='hidden';
        if(d){
            if(p.active&&h.className.indexOf(p.active)==-1){
                h.className+=' '+p.active
                }
            if(p.fade||p.slide){
                c.style.display='block';
                if(!c.m){
                    if(p.slide){
                        c.style.visibility='hidden';
                        c.m=c.offsetHeight;
                        c.style.height='0';
                        c.style.visibility=''
                    }else{
                        c.m=100;
                        c.style.opacity=0;
                        c.style.filter='alpha(opacity=0)'
                    }
                    c.v=0
                }
                if(p.slide){
                    if(c.m==c.v){
                        c.style.overflow='visible'
                    }else{
                        c.style.zIndex=this.z;
                        this.z++;
                        c.i=setInterval(function(){
                            slide(c,c.m,1)
                            },20)
                    }
                }else{
                    c.style.zIndex=this.z;
                    this.z++;
                    c.i=setInterval(function(){
                        slide(c,c.m,1)
                        },20)
                }
            }else{
                c.style.zIndex=this.z;
                c.style.display='block'
            }
        }else{
            c.t=setTimeout(function(){
                hide(c,p.fade||p.slide?1:0,h,p.active)
                },p.timeout)
        }
    };
    function hide(c,t,h,s){
        if(s){
            h.className=h.className.replace(s,'')
            }
        if(t){
            c.i=setInterval(function(){
                slide(c,0,-1)
                },20)
            }else{
            c.style.display='none'
            }
    }
    function slide(c,t,d){
        if(c.v==t){
            clearInterval(c.i);
            c.i=0;
            if(d==1){
                if(p.fade){
                    c.style.filter='';
                    c.style.opacity=1
                    }
                c.style.overflow='visible'
            }
        }else{
            c.v=(t-Math.floor(Math.abs(t-c.v)*p.speed)*d);
            if(p.slide){
                c.style.height=c.v+'px'
                }
            if(p.fade){
                var o=c.v/c.m;
                c.style.opacity=o;
                c.style.filter='alpha(opacity='+(o*100)+')'
                }
        }
    }
    return{
        init:init
    }
}();

Saludos!