Foros del Web » Programando para Internet » Jquery »

podeis aclararme porque no me funciona este jquery?

Estas en el tema de podeis aclararme porque no me funciona este jquery? en el foro de Jquery en Foros del Web. Lo primero comentaros que no tengo ni idea de javascript ni jquery. Estoy intentado hacer un menú de imágenes en acordeón horizontal. Sacado de aquí: ...
  #1 (permalink)  
Antiguo 26/07/2013, 04:19
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
podeis aclararme porque no me funciona este jquery?

Lo primero comentaros que no tengo ni idea de javascript ni jquery.

Estoy intentado hacer un menú de imágenes en acordeón horizontal. Sacado de aquí:

http://wordpressmetablog.com/2011/08...vertical-text/

He hecho una version adaptada a lo que necesito. Pero tengo ciertas dudas. El jquery puedo incluirlo en el head del propio html o tengoque ponerlo en un archivo aparte. Y si es así como lo llamo a ese archivo y si tengo que poner algo en el codigo de la pagina para vincularlo.

Este es mi HTML con el jquery metido entre el HEAD pero no me funicona y quisiera saber porque:

Código:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<script>
$(document).ready(function() {
 
    $('.slide')
        .bind('open', function(){
            if(! $(this).hasClass('open')){
                $(this).next().trigger('open');
                $(this).addClass('open');
                $(this).animate({left: "-=590px"});
            }
            else{
                $(this).prev().trigger('close');
            }
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
        })
        .bind('close', function(){
            if($(this).hasClass('open')){
                $(this).removeClass('open');
                $(this).animate({left: "+=590px"});
                $(this).prev().trigger('close');
            }
        });
 
    $('.slidebutton')
        .click(function(){
            $(this).parent().trigger('open');
            $('#content-' + $(this).parent().attr('id')).trigger('show');
        });
 
});
</script>
<style>
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
 
#accordion {
    position: relative;
    width: 880px;
    height: 290px;
    margin: 60px auto;
}
 
#slides {
    list-style: none;
    width: 880px;
    overflow: hidden;
    height:290px
}
 
#slides li.slide {
    overflow: hidden;
    clear: both;
    width: 708px;
    background: #00202f;
    height: 290px;
}
 
#slides .slide-content {
    width: 653px;
    height: 290px;
    color: #444;
    margin-left: 50px;
    padding: 5px 0;
}
#slide-1 { position: absolute; top: 0; left: 400px; z-index: 9; }
 
#slide-2 { position: absolute; top: 0; left: 350px; z-index: 8; }
 
#slide-3 { position: absolute; top: 0; left: 300px; z-index: 7; }
 
#slide-4 { position: absolute; top: 0; left: 250px; z-index: 6;}

#slide-5 { position: absolute; top: 0; left: 200px; z-index: 5; }
 
#slide-6 { position: absolute; top: 0; left: 150px; z-index: 4; }
 
#slide-7 { position: absolute; top: 0; left: 100px; z-index: 3; }
 
#slide-8 { position: absolute; top: 0; left: 50px; z-index: 2;}

#slide-9 { position: absolute; top: 0; left: 0px; z-index: 1;}

#slides a.slidebutton {
    display: block;
    width: 290px;
    height: 55px;
    position: absolute;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform-origin: 120px 120px;
    -moz-transform-origin: 130px 130px;
    top: 70px;
    padding-top: 15px;
    text-align: right;
    color: #fff;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    text-shadow: 1px 2px #077691;
}

#slide-1 {
    position: absolute;
    top: 0;
    left: 150px;
    z-index: 4;
    background: url(file:///Macintosh%20HD/Users/adaptart2/Desktop/images/spine1.jpg) no-repeat left;
}
 
#accordion {
    position: relative;
    width: 880px;
    height: 290px;
    margin: 60px auto;
    background: url(file:///Macintosh%20HD/Users/adaptart2/Desktop/images/bg.jpg) no-repeat;
    padding: 5px 0;
}

</style>
</head>
<body>
<div id="accordion">
    <ul id="slides">
 
        <li class="slide open active" id="slide-1">
            <a class="slidebutton" href="javascript:void(0);">Oferta Educativa</a>
            <div class="slide-content">
                <img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image1.jpg" alt="image1" width="653" height="354" />
            </div><!-- slide content -->
        </li><!-- slide 1 -->
 
        <li class="slide open" id="slide-2">
            <a class="slidebutton" href="javascript:void(0);">Guitarra</a>
            <div class="slide-content">
                <img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image2.jpg" alt="image2" width="653" height="354" />
            </div><!-- slide content -->
        </li><!-- slide 2 -->
 
        <li class="slide open" id="slide-3">
            <a class="slidebutton" href="javascript:void(0);">Bajo</a>
            <div class="slide-content">
                <img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image3.jpg" alt="image3" width="653" height="354" />
            </div><!-- slide content -->
        </li><!-- slide 3 -->
 
        <li class="slide open" id="slide-4">
            <a class="slidebutton" href="javascript:void(0);">Coros</a>
            <div class="slide-content">
                <img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image4.jpg" alt="image4" width="653" height="354" />
            </div><!-- slide content -->
        </li><!-- slide 4 -->
        
        <li class="slide open" id="slide-5">
            <a class="slidebutton" href="javascript:void(0);">Combos y Ensembles</a>
            <div class="slide-content">
                <img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image5.jpg" alt="image5" width="653" height="354" />
            </div><!-- slide content -->
        </li><!-- slide 5 -->
        
        <li class="slide open" id="slide-6">
            <a class="slidebutton" href="javascript:void(0);">Lenguaje Musical</a>
            <div class="slide-content">
                <img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image6.jpg" alt="image6" width="653" height="354" />
            </div><!-- slide content -->
        </li><!-- slide 6 -->
        
        <li class="slide open" id="slide-7">
            <a class="slidebutton" href="javascript:void(0);">Educación Auditiva</a>
            <div class="slide-content">
                <img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image7.jpg" alt="image7" width="653" height="354" />
            </div><!-- slide content -->
        </li><!-- slide 7 -->
        
        <li class="slide open" id="slide-8">
            <a class="slidebutton" href="javascript:void(0);">Armonía</a>
            <div class="slide-content">
                <img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image8.jpg" alt="image8" width="653" height="354" />
            </div><!-- slide content -->
        </li><!-- slide 8 -->
        
        <li class="slide open" id="slide-9">
            <a class="slidebutton" href="javascript:void(0);">Composición y Arreglos</a>
            <div class="slide-content">
                <img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image9.jpg" alt="image9" width="653" height="354" />
            </div><!-- slide content -->
        </li><!-- slide 9 -->
 
    </ul>
</div><!-- accordion -->
</body>
</html>
Muchas gracias y un saludo
  #2 (permalink)  
Antiguo 26/07/2013, 04:48
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 4 meses
Puntos: 2111
Respuesta: podeis aclararme porque no me funciona este jquery?

Si quieres usar la librería jQuery tendrás que descargártela e incluirla/vincularla en tu fichero HTML también.

Y nunca es malo ni tarde para aprender algo.
  #3 (permalink)  
Antiguo 26/07/2013, 06:28
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: podeis aclararme porque no me funciona este jquery?

pero lo que yo he incluido es lo que mencionaba el del tutorial, lo que no se es si lo tengo que poner en un archivo aparte o incluirlo como he hecho entre el head?
  #4 (permalink)  
Antiguo 26/07/2013, 06:30
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 9 años, 1 mes
Puntos: 48
Respuesta: podeis aclararme porque no me funciona este jquery?

A ver, si quieres usar JQuery tendrás que incluir la librería de JQuery, ¿no?.
Tienes que incluirlo en el "head" antes de usarlo, puedes descargartelo e incluirla desde tu propia copia o puedes usar el CDN JQuery o el CDN de Google, por ejemplo.
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España

Última edición por Trublux; 26/07/2013 a las 06:36
  #5 (permalink)  
Antiguo 26/07/2013, 07:03
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 8 años, 10 meses
Puntos: 2
Respuesta: podeis aclararme porque no me funciona este jquery?

Correcto, para que te funcione el Slide, debe agregar estas lineas en tu HEAD

Código HTML:
Ver original
  1. <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
  2.     <script type="text/javascript" src="./Scripts/jquery-1.7.2.js"></script>
  3. </head>

Asi haces el llamado, en www.jquery.com te descargas la ultima version
  #6 (permalink)  
Antiguo 27/07/2013, 10:37
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: podeis aclararme porque no me funciona este jquery?

gracias a todos por ayudarme. He conseguido resolverlo pero no se porque uno de los apartados del menu no me aparece, el de "oferta educativa". Y cuando clickas se alarga por la derecha el menu. Porque puede estar pasandome esto?

Mirar: http://www.elcollage.com/isra/pruebas/Untitled-1.html
  #7 (permalink)  
Antiguo 30/07/2013, 01:58
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: podeis aclararme porque no me funciona este jquery?

no consigo dar con ello. No se por donde puede estar fallando.
  #8 (permalink)  
Antiguo 30/07/2013, 02:28
 
Fecha de Ingreso: julio-2013
Ubicación: Lima
Mensajes: 6
Antigüedad: 6 años, 4 meses
Puntos: 1
Respuesta: podeis aclararme porque no me funciona este jquery?

Cita:
Iniciado por mixzplit Ver Mensaje
Correcto, para que te funcione el Slide, debe agregar estas lineas en tu HEAD

Código HTML:
Ver original
  1. <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
  2.     <script type="text/javascript" src="./Scripts/jquery-1.7.2.js"></script>
  3. </head>

Asi haces el llamado, en [url]www.jquery.com[/url] te descargas la ultima version
Asi debes hacer tienes toda la razon descargate la query de la pagina! esta bien explicado arriba.
  #9 (permalink)  
Antiguo 30/07/2013, 08:05
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 8 años, 10 meses
Puntos: 2
Respuesta: podeis aclararme porque no me funciona este jquery?

Hola 00israel, recuerda que tambien debes agregar en tu HEAD aparte de la libreria JQUERY que te descargaste, tambien la libreria del SLIDE en caso de que asi sea, OJO con eso


Saludos
  #10 (permalink)  
Antiguo 31/07/2013, 02:04
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: podeis aclararme porque no me funciona este jquery?

Si eso he conseguido solucionarlo. El slide me funciona pero no se porque no me aparece la primera seccion del slide. Son 9 partes y solo me aparecen 8 y cuando pulsas uno se alarga todo el slide por la derecha y no se porque...

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:46.