Como puedo hacer funcionar esto?

[julittok]

Hola gente de foros del web, estoy teniendo un problema y quería saber si alguien sabe como solucionarlo:

Subi una pagina de test para que puedan apreciar el problema: http://granjalaaurora.com/test/test-jscrollpane.html

Estoy usando jscrollpane* para modificar las barras de desplazmiento y necesito que cargue dentro de la sección about (y en las otras secciones también) Creo que tengo que reiniciar jscrollpane despues de cada .fadeIn() en el script site.js pero no logro conseguirlo.

* http://jscrollpane.kelvinluck.com/#examples

El script del menu es el siguiente:

Código PHP:

  $(document).ready(function() {

// load all links in a new window
$('p a').each(function(){
    $(this).attr('target','_blank');
});

// the currently loaded section
var curLoaded = 'about';

// start by showing the about us section
$('#contentContainer').animate({
    height: 350
},"slow", function(){
    // fade in the content
    $('#' + curLoaded).fadeIn();
});

// navigation trigger
$('#navbar a').each(function() {
    var $this = $(this)
    var target = $this.attr('href').split('#')[1];
    var $contentContainer = $('#contentContainer');
    var oldPos = 60;
    var newPos = 350;

    // add a click handler to each A tag
    $this.click(function(){
        // if the container isn't open, then open it...duh!
        if ($contentContainer.css('height') == '60px') {
            // trigger the animation
            $contentContainer.animate({
                height: newPos
            },"slow", function(){
                // fade in the content
                $('#' + target).fadeIn();
            });
        } else {
            if (curLoaded == target) {
                $contentContainer.animate({
                    height: oldPos
                },"slow", function(){
                    $('#content div').hide();
                });
            } else {
                $contentContainer.animate({
                    height: oldPos
                },"slow", function(){
                    $('#content div').hide();
                    $contentContainer.animate({
                        height: newPos
                    },"slow", function(){
                        $('#' + target).fadeIn();
                    });
                });
            }
        }

        curLoaded = target;

        return false;
    });

});

// remove the focus lines
$('a').focus( function() { $(this).blur(); } );

});  
   

Un par de aclaraciones más, estoy usando dos versiones de jquery porque el script del menu no funciona con otra version que no sea la 1.2.1, pero estoy usando noconflict y no creo que sea eso.

Segundo estoy ejecutando jscrollpane dentro de una etiqueta <h2> porque no puedo incluir divs dentro del div "#content" debido a esto: $('#content div').hide();

Eso es todo, cualquier ayuda será muy bienvenida y agradecida

[IXtremeLT]

Holas, man a k t refieres cuando dices que quieres que cargue dentro de las secciones?, ¿cargar que?.

Quieres meter el contenido scroleado dentro de las secciones?, o que cosa?

Saludos.

[julittok]

Iniciado por IXtremeLT

Holas, man a k t refieres cuando dices que quieres que cargue dentro de las secciones?, ¿cargar que?.

Quieres meter el contenido scroleado dentro de las secciones?, o que cosa?

Saludos.

Exacto! el contenido con el scroll que se vea dentro de las secciones eso mismo.

[IXtremeLT]

Ok, mira la verdad eso del jScrollPane no me da, pero te puedo dar una opcion.

Puedes probar agregando una altura mas corta a tus secciones, por k lo k veo estan sobrepasadas, me parece k la altura exacta es de 290px.

Mira nadamas pon este codigo css en el head:

Código CSS:

<style type="text/css">
    #content div {
        height: 290px;
        overflow: auto;
    }
</style>
 

No es necesario el jScrollPane pues utilizara las barras de scroll k tiene por defecto el OS.

[julittok]

Gracias por tu ayuda IXtremeLT lo del CSS no funcionó lamentablemente, y la opción de usar las barras por defecto no es viable puesto que son demasiado antiestéticas. jscrollpane es la mejor alternativa a flash para un diseño profesional y es crossbrowser.
Igualmente probé otros scripts como scrollpaper sin éxito, realmente creo que hay que reiniciar jscrollpane y es por eso que no carga despues de hacer .fadeIn()
Necesitaría alguien que sepa bastante de javascript porque mis conocimientos no alcanzan.