SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb How to use jQuery Sticky-Kit ?

    II would like to know how to use Sticky-Kit from http://leafo.net/sticky-kit/#examples.
    I found that their example have many redundant codes. I did download the code but the codes also same.

    I am using $("#sidebar").stick_in_parent().

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,005
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by alouty View Post
    II would like to know how to use Sticky-Kit from http://leafo.net/sticky-kit/#examples.
    The documentation says:

    Just call stick_in_parent on the elements you want to be stuck inside of their parent.
    which seems pretty self-explanatory to me.

    Is there one part you are having trouble with?
    Could you post an example?

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,



    The documentation says:



    which seems pretty self-explanatory to me.

    Is there one part you are having trouble with?
    Could you post an example?
    Thanks for the reply. I tried it and I have a minor problem:

    I have left column and right column with class=span3. When I scroll btm right column will move left side a little bit. Any idea to make it stay vertically?

    Code:
    <script src="/mod/stricky/jquery.sticky-kit.min.js"></script>
    <script type="text/javascript">
    {literal}
      function attach() {
        $(".span3").stick_in_parent({container: $("#topResults"), offset_top: 10});
      }
    
      $(document.body).on("click", ".detach", function(e) {
        $(".span3").trigger("sticky_kit:detach");
      });
    
      $(document.body).on("click", ".attach", attach);
      attach();
    {/literal}
    </script>
    You can view action at: http://thejobs.com.my/display-job/15...Contract).html

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,005
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    That's happening, because a parent div, which has a CSS property of float:left, is being wrapped around to the right hand column when it is fixed.

    My first idea would be to give the right hand column an unique id, then do something like

    Code:
    #myuniqueid.is_stuck{
      padding-left: 20px;
    }
    The .is_stuck class is only applied when the element is stuck, which means you can compensate for the offset.

    Make sense?

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    That's happening, because a parent div, which has a CSS property of float:left, is being wrapped around to the right hand column when it is fixed.

    My first idea would be to give the right hand column an unique id, then do something like

    Code:
    #myuniqueid.is_stuck{
      padding-left: 20px;
    }
    The .is_stuck class is only applied when the element is stuck, which means you can compensate for the offset.

    Make sense?
    Thanks for the reply. Left side of Summary column didn't move to left when scroll but right side of column is smaller than before scrolling.
    The red ribbon is stay but gray background of the column is moving left making it smaller in size when scroll down.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,005
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Well that sounds like progress.
    Obviously you'll have to experiment with the CSS rules to make it behave as you want.
    If you get stuck, this would be a good question for the CSS forum.

    As an aside, I tried looking at the page you linked to previously, but it timed out


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •