1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Xenplaza - Magic Floating Sidebar [Deleted]

Discussion in 'Template Modifications' started by X_Plaza, Sep 4, 2012.

  1. X_Plaza

    X_Plaza Active Member

    X_Plaza submitted a new resource:

    Xenplaza - Magic Floating Sidebar (version 1.0.0) - Make your forum's sidebar can floating

    Read more about this resource...
     
  2. kkm323

    kkm323 Well-Known Member

    this mod is useful when users are using the sidebar in other places such as threads
    watched
     
  3. Jake Hakoda Shirley

    Jake Hakoda Shirley Active Member

  4. Bram

    Bram Well-Known Member

    Can somebody share a live demo please? Looks very interesting :)
     
  5. Jake Hakoda Shirley

    Jake Hakoda Shirley Active Member

    Bram likes this.
  6. twollert

    twollert Active Member

    Great, but: There's a little problem with the resource when the sidebar is much higher than the content:

    1.) Go to http://www.radioforen.de/index.php?members/&type=staff

    2.) Scroll down to the end of the site, then scroll back to the top of the site.

    A part of the sidebar is hidden now. How can I fix that?
     
  7. twollert

    twollert Active Member

    I'm using the Magic Floating Sidebar javascript by Xenplaza. Unfortunately he is no longer a active member here.

    Code:
    // XENPLAZA
     
    $(document).ready(function(){
                     $(function() {
                                   $sidebar = $("aside .sidebar")
                                   var offset = $sidebar.offset();
                                   var topPadding = 10;
     
                                   $parent = $sidebar.parent().parent().children('.mainContainer');
                                   $margin = 0;
                                   $(window).scroll(function() {
                                                   $range = $parent.height() + parseInt($parent.css('margin-top')) + parseInt($parent.css('padding-top'))+ parseInt($parent.css('padding-bottom')) +$parent.offset().top;
                                                   $safe =  $parent.height() -  $sidebar.height();
                                                   if (($(window).scrollTop() + $sidebar.height() + topPadding) > $range) {
                                                                   $("aside .sidebar").stop().animate({
                                                                                  marginTop: $safe
                                                                   });
                                                   }else if ($(window).scrollTop() > offset.top) {
                                                                   $margin = $(window).scrollTop() - offset.top + topPadding
                                                                   $("aside .sidebar").stop().animate({
                                                                                  marginTop: $margin
                                                                   });
     
                                                  } else {
                                                                    $("aside .sidebar").stop().animate({
                                                                                   marginTop: 0
                                                                    });
                                                    };
                                    });
                     });
    });
    
    If the sidebar is higher than the content (on the left side) I run into this problem:

    1.) Go to http://www.radioforen.de/index.php?members/&type=staff

    Everything looks fine.

    2.) Scroll down to the end of the site, then scroll back to the top of the site.

    A part of the sidebar is hidden now. How can I fix that? Thanks for your help!
     

Share This Page