Web Analytics Made Easy -
StatCounter nicescroll Breaking When Element Is Repositioned - CodingForum

Announcement

Collapse
No announcement yet.

nicescroll Breaking When Element Is Repositioned

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • jQuery nicescroll Breaking When Element Is Repositioned

    Live Preview Available on the 12th.

    I am working on a sidebar which has currently playing music at the top and a play queue below. The album artwork has a button to be able to resize the artwork to show more of the play queue. I am wanting to be able to add more features to this such as adding to the play queue increasing the size and whatnot however cannot continue with this problem.

    The play queue also has jQuery nicescroll;

    Calling jQuery nicescroll
    PHP Code:
    $('.playQ').niceScroll({
        
    zindex1000000,
        
    cursorborder"0px solid #ccc",
        
    cursorborderradius"2px",
        
    cursorcolor"#ddd",
        
    cursoropacitymin0.1
    }); 
    Album Cover Resize
    PHP Code:
    // Album Controls
    $(".cover .controls .scale").click(function() {
        if ($(
    this).parent().width() === 210) {
            $(
    ".currently_playing .cover").animate({
                
    height"50px",
                
    width"50px",
                
    margin"20px 100px 0 100px"
            
    });
            $(
    ".currently_playing").animate({
                
    height"250px"
            
    });
            $(
    ".cover .controls .scale").css({
                
    'background-position' 'top right'
            
    });
            $(
    ".right-sidebar .nicescroll-rails").css({
                
    top"430px"
            
    });
        } else {
            $(
    ".currently_playing .cover").animate({
                
    height"210px",
                
    width"210px",
                
    margin"20px 20px 5px 20px"
            
    });
            $(
    ".currently_playing").animate({
                
    height"410px"
            
    });
            $(
    ".cover .controls .scale").css({
                
    'background-position' 'top left'
            
    });
            $(
    ".right-sidebar .nicescroll-rails").css({
                
    top"270px"
            
    });
        }
    }); 
    The problem is that upon page load, everything works as it should, however upon resizing the album artwork and the .playQ is moved up, the scrollbar stays exactly where is was, still works to scroll the element, just in the wrong place, however upon opening up the Google Chrome developers tab which must trigger a resize event, the scrollbar locates to where it should.

    Browsing StackOverflow, I've tried several attempts to resolve this;

    PHP Code:
    $(".playQ").getNiceScroll().resize(); // No Effect
    $(".playQ").getniceScroll().resize(); // No Effect
    $(".playQ").getniceScroll().resize(); // No Effect
    $(".playQ").niceScroll(); // No Effect
    $('.playQ').live('click', function(e){ // Broke Script
    $('body').on('click''.playQ', function(e){ // No Effect 

  • #2
    You really need to post a link to a test site or something.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

    Comment

    Working...
    X