Jquery jScrollpane

Rebe_Lunitari · #1 (**permalink**) 28/12/2011, 13:14

Buenas tardes!

Estuve investigando como personalizar una barra de scroll, para el contenido de mi web. (No de la ventana en si). Encontre maneras de hacerlo para IE, pero nada más. Después me topé con algo llamado "jScrollpane" de jQuery... que parece ser sirve para ello.

Pero no tengo mas que conocimientos básicos en Javascript y jQuery. ¿Qué me recomendais? ¿Alguno sabe como puedo hacerlo? ¿Podeis indicarme?

Gracias!

Carlangueitor · #2 (**permalink**) 28/12/2011, 17:55

En realidad no es complicado si tienes algunos conocimientos básicos, recomiendo que mires la página y sigas las instrucciones: http://jscrollpane.kelvinluck.com/

Saludos

Rebe_Lunitari · #3 (**permalink**) 29/12/2011, 09:59

Le eché un ojo a los demos de la página y me leí todo lo que pude. Pero a la hora de instalarlo en mi propia pagina, con su correspondiente css, le doy a previsualizar. Más que nada para ver el efecto que hace, y en base a eso... ir modificando los parametros que quiero.

Pero no se ve nada, solamente me desordena todo el texto. Asi que no tengo idea de que punto partir o como corregir...

Carlangueitor · #4 (**permalink**) 29/12/2011, 10:01

Sin ver cómo lo has puesto y el código exacto no podemos saber en que te equivocas, ponlo. También te recomiendo que no pruebes en un editor como Dreamweaver, pruébalo directamente en el Navegador.

Saludos

Rebe_Lunitari · #5 (**permalink**) 29/12/2011, 10:09

Buenas! A ver, primero inserto el script en el head.

Código:

<link type="text/css" href="CSS/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.mousewheel.js"></script>
<script type="text/javascript" src="javascript/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(function()
{
$('#cuerpo').jScrollPane();
});
</script>

Luego añado la funcion, donde "cuerpo" es el div donde va el scroll. Este div tambien le añadi el class "scroll-pane" para que concordara con la hoja css.

El texto que tengo en la pagina de momento es simulado, por lo que esta distribuido asi:

TITULO
Parrafo de texto
Subtitulo
Parrafo de Texto
Subtitulo2
Parrafo de texto.

Al previasualizar, dos de los parrafos de textos se colocan encima de los titulos.

Soy novata en todo esto, es probable que me haya comido pasos, o a saber que. Mousewheel es el jquery q recomiendan instaalr con el scrollpane, para la rueda del raton.

Aunque cuando dices previsualizar en el navegador a que te refieres? Estoy escribiendo el codigo en Dreamweaver, pero siempre hago la vista previa en varios navegadores, no en la ventana diseño.

Muchas gracias por tu tiempo!

Carlangueitor · #6 (**permalink**) 29/12/2011, 10:29

Y el HTML?

Te decía de verlo en el navegador por que muchos ven l vista previa del Dreamweaver y no funciona correctamente.

Saludos

Rebe_Lunitari · #7 (**permalink**) 29/12/2011, 10:38

Código:

<link rel="stylesheet" href="CSS/circodelmar2.css" type="text/css" />
<link rel="stylesheet" href="CSS/menu.css" type="text/css" />
<link type="text/css" href="CSS/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.mousewheel.js"></script>
<script type="text/javascript" src="javascript/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(function()
{
$('#cuerpo').jScrollPane();
});
</script>
</head>

<body id="quienessomos-page">
<div id="banner"><img class="displayed" src="images/banner.jpg" width="800" height="200" alt="banner" /></div>
<div id="menu">
	<ul id="nav">
    	<li id="quienessomos"><a class="selected" href="index.html" title="¿Quiénes somos?"></a></li>
		<li id="animaciones"><a href="animaciones.html" title="Animaciones"></a></li>
		<li id="actividades"><a href="actividades.html" title="Actividades Educativas"></a></li>
        <li id="galeria"><a href="galeria.html" title="Galería"></a></li>
		<li id="contacto"><a href="contacto.html" title="Contacto"></a></li>
		<li id="aula"><a href="aula.html" title="Aula Virtural"></a></li>
	</ul>
</div>
<div id="cuerpo" class="scroll-pane">
<h1>TITULO</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra convallis malesuada. Nunc et leo id nunc aliquam faucibus id non mauris. Nunc tincidunt fermentum magna. Donec ultricies leo sit amet erat cursus placerat. Donec condimentum lacinia arcu, sit amet consectetur libero dictum vitae. Sed in felis quis quam fringilla consequat ac sed felis. <br />
<h2>SUBTITULO</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra convallis malesuada. Nunc et leo id nunc aliquam faucibus id non mauris. Nunc tincidunt fermentum magna. Donec ultricies leo sit amet erat cursus placerat. Donec condimentum lacinia arcu, sit amet consectetur libero dictum vitae. Sed in felis quis quam fringilla consequat ac sed felis. <br />
<h3>SUBTITULO 2</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra convallis malesuada. Nunc et leo id nunc aliquam faucibus id non mauris. Nunc tincidunt fermentum magna. Donec ultricies leo sit amet erat cursus placerat. Donec condimentum lacinia arcu, sit amet consectetur libero dictum vitae. Sed in felis quis quam fringilla consequat ac sed felis. <br />
</p>
</div>
<div id="pie">Mapa Web</div>
<div id="extra1"></div>
<div id="extra2"></div>
<div id="extra3"></div>
</body>

Perdon, ahi tienes.

Carlangueitor · #8 (**permalink**) 29/12/2011, 13:07

Usa una etiqueta <p> por cada párrafo y no metas dentro los títulos.

Saludos

Rebe_Lunitari · #9 (**permalink**) 29/12/2011, 13:30

Hecho, cada parrafo en su <p></p> y los titulos correspondientes fuera, en su <h1><h2><h3>.

Ahora el texto no se descoloca, simplemente desaparece =_=

Carlangueitor · #10 (**permalink**) 29/12/2011, 13:33

Y sin el código del ScrollPane te sigue funcionando?

Rebe_Lunitari · #11 (**permalink**) 29/12/2011, 13:40

Si quito el codigo de scrollpane y mousewheel, funciona todo, y en su sitio (aun con las <p> como las tenía anteriormente). Unicamente, que el scrollbar es el del navegador por defecto.

Con codigo:

-Colocando una <p> por parrafo, me desaparece el texto a previsualizar y no aparece ni rastro del scroll.

-Colocando una <p> para todo el texto, se descoloca todo y no hay rastro de scroll.

Carlangueitor · #12 (**permalink**) 29/12/2011, 13:42

En que navegador estás viéndolo?

Saludos

Rebe_Lunitari · #13 (**permalink**) 29/12/2011, 13:44

Pues Chrome y Firefox.

Uso un Mac, así que no tengo IE. A veces pruebo con Safari, pero las menos.

Carlangueitor · #14 (**permalink**) 29/12/2011, 13:51

Tendrás la posibilidad de subirlo a un servidor (aunque sea gratuito) para ver con detalle doto completo?

Saludos

Rebe_Lunitari · #15 (**permalink**) 29/12/2011, 14:03

llamame boba, pero subiendo los archivos a un servidor, vi que el problema era la hoja de estilos del scrollpane! No tenía el mismo nombre que en la ruta ¬¬'

Me dedicare a ver que sale modificando parametros, y si consigo algo decente, te enseñare.

Muchisimas gracias! A veces solo se encuentra el error yendo paso a paso >.<

Carlangueitor · #16 (**permalink**) 29/12/2011, 14:05

jeje, Pues que bien que encontraste el problema, esto suele pasar seguido así que no te preocupes.

Saludos