Complejo Jquery me parte la cabeza HELP

bkolores · #1 (**permalink**) 08/11/2010, 15:49

estoy tratando de hacer este efecto:
http://www.mastercafe.com/?jquery/jQ...nes/1537/po/es

segui el tutorial hice todo bien pero no funciona HELPPPPP

Código HTML:

Ver original<!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>Documento sin título</title>
 
<style>
ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}
ul.sdt_menu a{
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li{
    float:left;
    width:170px;
    height:85px;
    position:relative;
    cursor:pointer;
}
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:170px;
    height:85px;
    z-index:12;
    background:transparent url(http://www.mastercafe.com/ejemplos/slideboxmenu/images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:0px;
    width:170px;
    height:60px;
    z-index:15;
}
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:170px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:15px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:24px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0B75AF;
    float:left;
    clear:both;
    width:155px; /*For dumbass IE7*/
    font-size:10px;
    letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:170px;
    overflow:hidden;
    height:170px;
    top:85px;
    left:0px;
    display:none;
    background:#000;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#fff;
}
body { background-color:#000; }
</style>
 
 
</head>
 
<body>
 
    <div class="content">
 
            <h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1>
 
            <ul id="sdt_menu" class="sdt_menu">
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/2.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">About me</span>
 
                            <span class="sdt_descr">Get to know me</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/1.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Portfolio</span>
 
                            <span class="sdt_descr">My work</span>
 
                        </span>
 
                    </a>
 
                    <div class="sdt_box">
 
                            <a href="#">Websites</a>
 
                            <a href="#">Illustrations</a>
 
                            <a href="#">Photography</a>
 
                    </div>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/2.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Inspiration</span>
 
                            <span class="sdt_descr">Where ideas get born</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/4.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Photos</span>
 
                            <span class="sdt_descr">I like to photograph</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/5.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Blog</span>
 
                            <span class="sdt_descr">I write about design</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/6.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Projects</span>
 
                            <span class="sdt_descr">I like to code</span>
 
                        </span>
 
                    </a>
 
                    <div class="sdt_box">
 
                        <a href="#">Job Board Website</a>
 
                        <a href="#">Shopping Cart</a>
 
                        <a href="#">Interactive Maps</a>
 
                    </div>
 
                </li>
 
            </ul>
 
        </div>
</body>
</html>

mayid · #2 (**permalink**) 08/11/2010, 17:03

Dos cosas:

- no estas incluyendo las librerias, no? Yo no las veo y son la parte fundamental del asunto...

- sabes usar un debuger, como firebug? Fijate que te marca la consola de errores javascript.

bkolores · #3 (**permalink**) 09/11/2010, 00:38

agregue las librerias jquery y jquery.easing.1.3 y la consola de errores dice esto

Jquery is not defined y al hacer click me selecciona eso help
jQuery.easing['jswing'] = jQuery.easing['swing'];

Código HTML:

Ver original<!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>Documento sin título</title>
 
<style>
ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}
ul.sdt_menu a{
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li{
    float:left;
    width:170px;
    height:85px;
    position:relative;
    cursor:pointer;
}
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:170px;
    height:85px;
    z-index:12;
    background:transparent url(http://www.mastercafe.com/ejemplos/slideboxmenu/images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:0px;
    width:170px;
    height:60px;
    z-index:15;
}
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:170px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:15px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:24px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0B75AF;
    float:left;
    clear:both;
    width:155px; /*For dumbass IE7*/
    font-size:10px;
    letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:170px;
    overflow:hidden;
    height:170px;
    top:85px;
    left:0px;
    display:none;
    background:#000;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#fff;
}
body { background-color:#000; }
</style>
 
 
</head>
 
<body>
    <div class="content">
 
            <h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1>
 
            <ul id="sdt_menu" class="sdt_menu">
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/2.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">About me</span>
 
                            <span class="sdt_descr">Get to know me</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/1.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Portfolio</span>
 
                            <span class="sdt_descr">My work</span>
 
                        </span>
 
                    </a>
 
                    <div class="sdt_box">
 
                            <a href="#">Websites</a>
 
                            <a href="#">Illustrations</a>
 
                            <a href="#">Photography</a>
 
                    </div>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/2.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Inspiration</span>
 
                            <span class="sdt_descr">Where ideas get born</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/4.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Photos</span>
 
                            <span class="sdt_descr">I like to photograph</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/5.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Blog</span>
 
                            <span class="sdt_descr">I write about design</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/6.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Projects</span>
 
                            <span class="sdt_descr">I like to code</span>
 
                        </span>
 
                    </a>
 
                    <div class="sdt_box">
 
                        <a href="#">Job Board Website</a>
 
                        <a href="#">Shopping Cart</a>
 
                        <a href="#">Interactive Maps</a>
 
                    </div>
 
                </li>
 
            </ul>
 
        </div>
 
 
 
 
<script src="http://www.mastercafe.com/ejemplos/slideboxmenu/jquery.easing.1.3.js" language="javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
 
            $(function() {
 
                /**
 
                * for each menu element, on mouseenter, 
 
                * we enlarge the image, and show both sdt_active span and 
 
                * sdt_wrap span. If the element has a sub menu (sdt_box),
 
                * then we slide it - if the element is the last one in the menu
 
                * we slide it to the left, otherwise to the right
 
                */
 
                $('#sdt_menu > li').bind('mouseenter',function(){
 
                    var $elem = $(this);
 
                    $elem.find('img')
 
                         .stop(true)
 
                         .animate({
 
                            'width':'170px',
 
                            'height':'170px',
 
                            'left':'0px'
 
                         },400,'easeOutBack')
 
                         .andSelf()
 
                         .find('.sdt_wrap')
 
                         .stop(true)
 
                         .animate({'top':'140px'},500,'easeOutBack')
 
                         .andSelf()
 
                         .find('.sdt_active')
 
                         .stop(true)
 
                         .animate({'height':'170px'},300,function(){
 
                        var $sub_menu = $elem.find('.sdt_box');
 
                        if($sub_menu.length){
 
                            var left = '170px';
 
                            if($elem.parent().children().length == $elem.index()+1)
 
                                left = '-170px';
 
                            $sub_menu.show().animate({'left':left},200);
 
                        }   
 
                    });
 
                }).bind('mouseleave',function(){
 
                    var $elem = $(this);
 
                    var $sub_menu = $elem.find('.sdt_box');
 
                    if($sub_menu.length)
 
                        $sub_menu.hide().css('left','0px');
 
                    
 
                    $elem.find('.sdt_active')
 
                         .stop(true)
 
                         .animate({'height':'0px'},300)
 
                         .andSelf().find('img')
 
                         .stop(true)
 
                         .animate({
 
                            'width':'0px',
 
                            'height':'0px',
 
                            'left':'85px'},400)
 
                         .andSelf()
 
                         .find('.sdt_wrap')
 
                         .stop(true)
 
                         .animate({'top':'25px'},500);
 
                });
 
            });
 
        </script>
 
 
 
</body>
</html>

mastercafe · #4 (**permalink**) 09/11/2010, 04:09

Si te fijas bien en el ejemplo que creamos stand alone (para que la gente no se lie con las librerias propias de nuestra web), solo necesitas jquery y easing plugin.
Mirate el enlace:
http://www.mastercafe.com/ejemplos/slideboxmenu/

Revisa en la parte de abajo del código y verás:
script de jquery
Script de easing
Script para el menú

Si tienes dudas puedes contactarnos en la misma web http://www.mastercafe.com registrándote y usando nuestro blog.

spider_boy · #5 (**permalink**) 09/11/2010, 20:10

Por convención interesterlar, los <script> deben ir dentro de los tags <head></head>. Segundo, no sé como funciona, pero el easing que depende de jQuery, debería ser llamado después de este último, no antes

.

mastercafe · #6 (**permalink**) 10/11/2010, 03:16

Me temo que en la via lactea hubo una modificación sobre esa norma y ahora los script y otras cosas se autoriza a que se pongan en el BODY e incluso se recomienda al final para acelerar la carga y ejecución de la web. Revisate lo nuevo para SEO.
Sobre el orden, en efecto la "Norma" intergaláctica es definir primero y llamar después, salvo que lo que tengamos sea funciones que si pueden estar desordenadas (de nuevo este no es el caso ya que es una extensión de jQuery), por tanto como dice SpiderBoy... ordena las líneas.
Lo dicho el ejemplo que pusimos no es nada complicado, solo necesita orden.
[URL="http://www.mastercafe.com/ejemplos/slideboxmenu/"]http://www.mastercafe.com/ejemplos/slideboxmenu/[/URL]

Dany_s · #7 (**permalink**) 10/11/2010, 11:10

[QUOTE]

Cita:

se recomienda al final para acelerar la carga y ejecución de la web

Si querés acelerar hay que enlazar un archivo js y no poner código js en el html, porque los js quedan en caché, si tenés una página dinámica simpre va a cargar los trozos de código javascript que tengas pero si está en un archivo externo se ahorra la carga de ese trozo.
Si vamos al caso, no solo es para el javascript sino también para css.

Aparte por separar html de javascript y html de css.

Código js (y css) en cualquier parte del body, arriba, abajo, al centro y adentro (no voy a si se autoriza o no, de hecho valida) pero es Horrible. Es ilegible, no se puede trabajar.

Se separa por cuentión de organización y optimización.

Cita:

Revisate lo nuevo para SEO

¿qué tiene que ver SEO con decidir normas o estándares?

Cita:

Por convención interesterlar, los <script> deben ir dentro de los tags <head></head>.

Si, no me imagino trabajar con alguien que me incluya código por cualquier lado para que yo me tenga que esforzar en encontrarlos jeje

Es como que un programador te diga para trabajar con MVC y le contestes "para qué si el resultado es el mismo metiendo html, consultas a la db, css, jacascrit en cualquier lado"

Pero bien, a modo de ejemplo/tutorial eso no importa, la idea es mostrar como se hace y el que lo implemente lo haga como quiera, yo cuando posteo algo no me importa ni meter estilos en los elemento html porque no va al caso algo de css cuando querés enseñar/mostrar/transmitir algo de jquery

mastercafe · #8 (**permalink**) 11/11/2010, 07:49

"¿qué tiene que ver SEO con decidir normas o estándares?"
Pues casi todo con el Google Caffeine:
- velocidad de descarga
- claridad de contenidos HTML
- semántica del código (meter jvs por el medio penaliza)
- cantidad de peticiones de archivos (meter 5 llamadas a css es peor que 1 sola y lo mismo para scripts)

Como bien dices meter todo en archivos siempre mejora el tema de cache en equipos, si además agrupas "mejor que mejor".

Dany_s · #9 (**permalink**) 11/11/2010, 09:04

Las prácticas o técnicas de optimización (on page) para buscadores se basa en los estándares web, son los estándares que van definiendo la w3c

Tengo que leer al que me guia http://www.w3.org/

Compresión de código, css sprites, configuración de servidores, programación, usar esto o lo otro, etc, etc, muchisimas cosas ayudan a que una web sea más rápida, de ahi que me tenga que leer sobre SEO.... no

Esas cosas no hay que hacerlo para los buscadores, son para mi, para los que desarrollan conmigo, para el próximo que se una al equipo y para los usuarios de la web.

Leer sobre SEO hay que dejarlo para lo último.