webpop / jquery.pin Goto Github PK

Hey, maintainer(s) of webpop/jquery.pin!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library webpop/jquery.pin is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "webpop/jquery.pin",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Please tag latest version so we don't have to depend on the commit hash in bower etc.

After a little headache I found the problem to the width. The original code is as follow:
[code]$this.css({width: $this.outerWidth();});[/code]
The issue with this is that upon re-sizing the window the pinned element wont re-size (like I wanted it to do.

So all I had to do was the following change:
[code]$this.css({width: $this.parent().outerWidth();});[/code]

Now, this might not be something you'd want to make happen on every instance, so maybe do it an option:

$('.pinned').pin({
resize: true
});

Thanks!!

Please, add an option to update fixed-block position, when window size changes.

I am trying to design an interaction where the user can decide to pin a given element in the UI. And I want to design it to toggleable, is there any way for me to 'unpin' that element, short of reattaching the element to Dom?

Hello,
We have just add jquery.pin to twittstrap resources list
http://www.twittstrap.com/resources/details/jquery-pin
Under : Javascript
Regards

As what I written in the title, please help me reslove this problem. Your plugin is good for me and I really don't want use other.

Thanks in advance!

Padding options can only take a number. Can it also take other measurements like em and percent?

I found a bug, window refresh
$this.css({width: $this.outerWidth()});
=>
$this.css({width: $this.parent().outerWidth()});
will be ok

It can be useful to pin an object instead a scrollable container, instead of pinning it inside the main window. For example with markup like this:

<div class="container" style="max-height: 100px; overflow: auto">
  <div class="pinned">Something pinned</div>
  ...
</div>

When scrolling the container I want the .pinned div to always be visible within the container.

I had seen your plugin somewhere on some days ago (HN I think), but when I needed it, as usual, couldn't find it anymore. Adding the plugin to the Plugin registry will help me (and perhaps others?) find it when we need it, and thus perhaps increase popularity too 😉

Fixed here:
Camzilla@7abf2e4

When working properly, a pinned div would look something like:

its showing error with latest jquery version

Please Replace the window load function in script
line number 110 in jquery.pin.js

$window.load(update);
with
$window.on('load', function(){ update});

now it will not show any error

If collumns is not on table or on flexbox (http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/) them has differents heights. In popular "bootstrap 3" the same bad grid. But your script working only with height one collumn. =(

Is it possible to have multiple pins but target different screen sizes - ie the equivalent of having both these on the page:

$(".pin-1").pin({containerSelector: ".container-1", minWidth: 768});
$(".pin-2").pin({containerSelector: ".container-2", minWidth: 1024});

Many thanks for any pointers...!

How to support ie8?

// $window.load(update);

update to:

$window.on('load', update);

jquery.pin.js:38 Uncaught TypeError: Cannot read property 'top' of undefined

Need example and parametr for horizontal pin.

On Safari 7 and iOS 7 position:sticky exists, and it won't be long before it lands in Chrome – in my experience it's provides significantly smoother scrolling.

It might be worth looking at using that where it's supported instead of scroll events.

When appending child to pinned, need to update recalculateLimits, for now workaround is to call $(window).trigger("resize"); setTimeout(function() { $(window).trigger("scroll") }, 1); after append operation.

how to align pin to bottom of page

solved!! old jquery version

hello there. thanks for this great plugin. i have a page where the height of the content is constantly changing because dom nodes are being inserted and removed a lot. this seems to break the pinning behavior. i'll try to fork and see if i can figure out what's going on. thanks.

The minWidth option is great, but it doesn't work if the window is resized; only if window is that size on load. Any ideas how I could get this to work?

:)

I can see that the demo only shows sidebar usage. Does it support headers too? Headers are different because a pinned header is required to still take space in the layout, AS IF it were relatively positioned with the top property adjusted on scroll.

(I want basically what position: sticky does, but without all the draconian restrictions on ancestors' position, size and overflow that render position: sticky unusable in real world scenarios).

Take a look here:
http://www.architetturaecosostenibile.it/design/arredamento/fattoria-fai-da-te-terrazza-citta-077

The pinned element is the sidebar on the left, that go out of the parent when you scroll down the page.

I'm not sure if it's because I'm using Twitter Bootstrap or not, but your plugin doesn't seem to be functioning correctly on my page.

I'm trying to pin my navbar, but upon scrolling half way down the page the navbar disappears.

View an example here:

http://axschech.info/pin.php

If you don't mind taking a look I'd really appreciate it but I understand if you're too busy!

thanks for this awesome plugin but can you please register it as a bower package ... that can be useful :)

Code is below. It will pin my .one element, but ignores my attempt to pin .two and .three

<style type="text/css">
    .one, .two, .three { 
        width: 100%;
        height: 500px;
        background-size: 100% auto;
        position: relative;
    }
    .one {
        z-index: 1 !important;
    }
    .two {
        z-index: 11 !important;
    }
    .three {
        z-index: 111 !important;
    }
</style>
<div class="mymain">
    <div>
    This is a nav section.<br />
    </div>
    <div class="main">
        <div class="one " >
            <h2>Section 1</h2>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
        </div>
        <div class="two " >
            <h2>Section 2</h2>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
        </div>
        <div class="three">
            <h2>Section 3</h2>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
            <p>Lorem ipsum dolar sit amet. Lorem ipsum blah blaah.</p>
        </div>
    </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="http://enterprise.blob.core.windows.net/microsoftcloud/pih/jquery.pin.js"></script>
    <script>


    $(".one").pin({containerSelector: ".main"})

    $(".two").pin({containerSelector: ".main"})
    $(".three").pin({containerSelector: ".main"})

    </script>

Needed to add class, when block is pinned for working some css styles for this class. And I want to change height of block when it is pinned.

or fix a column in a table

My div won't always stick when inside her is a adsense ad.

This is all on the sample page.

Things can jump a bit. The "left nav" example follow scrolling beyond the bottom, then scrolls all the way back to the top, when the sticky note pops back in and the left-nav disappears.

The cat pin follows into the title of the next section.

I'm in horizontal orientation, FYI.

I have multiple tabs with pricing (div) tables, I am unable to stick table header div on all the tabs. It works only on first tab.

I noticed that when a page is refreshed (in Chrome, at least, which retains your scroll position on page refresh) while a pinned element is being pinned, that element will now only become pinned at or below the point on the page that was at the top of the browser window upon reloading.

When changed window width and height plugin don't reinitializing.

First off - thank you for this awesome plugin!

I'm experiencing a bug though.

I am using the "containerSelector" parameter, and find that once I scroll to the beginning of the container, the pinned element (which is within the container, but lower down) suddenly moves up to the top of the container, and then becomes sticky onscroll.
It should wait to become "sticky" until the element has been scrolled to.

Not sure if this is just an unusual bug with my page setup? I also have a sticky navbar (using bootstrap), could it be interfering?

I tested using the latest version of Chrome and FF on OSX.

There's an inconsistency present when passing in selectors. IE, activeClass can be passed in unqualified, but containerSelector needs to be fully qualified.

EG, this will not work

$('.post .sidebar.lower').pin({
    padding: {
        top: 10,
        bottom: 10
    },
    activeClass: 'pinned',
    containerSelector: 'pin-parent'
});

But this does

$('.post .sidebar.lower').pin({
    padding: {
        top: 10,
        bottom: 10
    },
    activeClass: 'pinned',
    containerSelector: '.pin-parent'
});

It could be argued that this is semantically correct, given the difference between the option names.. EG "Class" as opposed to "Selector".

Will open a PR for this issue if no-one else gets to it first

The pinned element doesn't stay within the contained container when you adjust the screen size. In other words, it appears to pin within the container vertically, but not horizontally. Any way to fix this? Thanks!