/    Sign up×
Community /Pin to ProfileBookmark

Problems with a jquery script

Hi people of WD, first of all thanks in advance for any help.

I upload a test page so you can easily see the problem I’m having: [url]http://granjalaaurora.com/test/test-jscrollpane.html[/url]

The thing is I’m trying to make jscrollpane* to load inside the about section (and in the other sections as well), I believe I have to reinitialize it after each .fadeIn(); in the site.js sript but I’ve tried several times with no success.

  • * [URL=”http://jscrollpane.kelvinluck.com/#examples”]http://jscrollpane.kelvinluck.com/#examples [/URL]
  • As you can see in the test page jscrollpane is working right outside, but inside the about section It isn’t.

    This is the script (site.js) that i’m using for the menu:

    [code=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(); } );

    }); [/code]

    Oh one more thing I’m using a <h2> tag to load the jscrollpane inside the about section for a reason It’s not a mistake. I can’t use divs inside the content menu because all divs are hidden because of this: $(‘#content div’).hide();

    Also I’m using two versions of jquery because the “site.js” script doesn’t work with any other jquery version, but I’m using no-conflict and I also checked if there was any conflict

    Any help will be apreciated, thanks. Oh one more thing, I’m using a h2 tag to load the scrollpane for a reason It’s not a mistake. I can’t use divs inside the menu.

    to post a comment
    JavaScript

    0Be the first to comment 😎

    ×

    Success!

    Help @julittok spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...