webpop / jquery.pin Goto Github PK
View Code? Open in Web Editor NEWPin any element within a container
Pin any element within a container
// $window.load(update);
update to:
$window.on('load', update);
How to support ie8?
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).
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?
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
how to align pin to bottom of page
Fixed here:
Camzilla@7abf2e4
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. =(
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 found a bug, window refresh
$this.css({width: $this.outerWidth()});
=>
$this.css({width: $this.parent().outerWidth()});
will be ok
My div won't always stick when inside her is a adsense ad.
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.
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...!
When working properly, a pinned div would look something like:
Today, I was experimenting with webp images and using Modernizr to switch out between standard images/webp based on browser functionality, and found that it broke the pinning functionality - the same div now looks like:
This is the bit of script being used to switch images out
Modernizr.on('webp', function (result) {
// result == Modernizr.webp
console.log(result); // either true
or false
if (result) {
// WebP Support
$(".webpImage").queue(function() {
var webp = $(this).attr('data-webp');
$(this).attr('src', webp)
})
}
else {
// No WebP support
$(".webpImage").queue(function() {
var nowebp = $(this).attr('data-img-fallback');
$(this).attr('src', nowebp)
})
}
});
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>
solved!! old jquery version
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.
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.
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!
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
});
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.
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.
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!
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.
Hello,
We have just add jquery.pin to twittstrap resources list
http://www.twittstrap.com/resources/details/jquery-pin
Under : Javascript
Regards
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 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 😉
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!
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.
Thanks!!
Please tag latest version so we don't have to depend on the commit hash in bower etc.
Padding options can only take a number. Can it also take other measurements like em and percent?
thanks for this awesome plugin but can you please register it as a bower package ... that can be useful :)
Need example and parametr for horizontal pin.
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.
or fix a column in a table
Please, add an option to update fixed-block position, when window size changes.
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:
If you don't mind taking a look I'd really appreciate it but I understand if you're too busy!
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.