guidobouman / panelsnap Goto Github PK

View Code? Open in Web Editor NEW

637.0 16.0 140.0 2.39 MB

A JavaScript plugin that provides snapping functionality to a set of panels within your interface.

Home Page: https://panelsnap.com

License: MIT License

JavaScript 100.00%

panelsnap's Introduction

PanelSnap

A JavaScript library that provides snapping functionality to a set of panels within your interface.

Introduction

PanelSnap is a framework agnostic JavaScript library. This means that it works in every JavaScript project, wheter you use Vue, React, jQuery or plain vanilla JavaScript. It can snap both horizontally & vertically, connect with menu's and fire events based on user behaviour.

Installation

npm install panelsnap

import PanelSnap from 'panelsnap';

const instance = new PanelSnap();

<body>
  <section>
    ...
  </section>
  <section>
    ...
  </section>
  <section>
    ...
  </section>
</body>

Documentation

In its simplest form, PanelSnap does not need any configuration. For more advanced scenarios, PanelSnap can be aopted to about every usecase through its settings object.

Check out the documentation at https://panelsnap.com or the docs folder for all the different possibilities.

Credits

jellea for early feedback and brainpickings.
aalexandrov for small improvements & bugfixes.
akreitals for fixing keyboard navigation when disabled.
brumm far a panel count bug.
dpaquette for the offset option.
wudi96 for button navigation.

panelsnap's People

Contributors

Stargazers

Watchers

Forkers

exexzian leison tsouloftas mdlorey douglasevaristo seb-thomas 2cancan sxchoc bloc-bunny desigink adayindesign philipp-unger pedroaacunha avitapp gilmarlira pagelines irvbriscoe davgit finnbuster wayneraymond udders-hx jellea jordan-carl eshine361 mark0n6 pixel2 sreinstein msthomaz aalexandrov afilipiuk zaptronic allnetx aseaboyer-intrax englandrp akreitals leonidche ntoung otech47 adamdunkley arcticmouse appsincorporated kokarn vnguyen9 puckmugger mtrl mchelh aza dmaffioletti freddesign jonnyninetoes ethan-k dguillory hasanlussa pjcjonas teaforchris j-mcnally parik-webdev gerhobbelt franhaselden pilgrimzh olegil mrmax182 theones ynaveed krizz jeffpowrs brianyomm superafroman finchyz sandeepa007 cranca a973c uzinaduzina shermanhui webhank willemvb crockstylie kartikv11 axa-ch jurecuhalev markcarlson frank-castro katyf bucky11 mklophaus tudorsaitoc zaid-kamil gritocc chrisemoulton boldyellow jasondmoss david-streck adpopescu almorgan dananjoy zen-aperios suohred kkac jimtm23 jonomilnes

panelsnap's Issues

Does not work with a non-body container.

On Chrome 30, Windows 8.1. Haven't tested on any other browsers

Example: http://www.svelteteam.com/static/tyrecycle/panel-test.html

Removing the "base_layout" div and setting the container to body however will work.

Example: http://www.svelteteam.com/static/tyrecycle/panel-test-2.html

Is there something I'm missing?

Wrong panel might be snapped when non-panel siblings are present.

When there's a non-panel element as a sibling amongst the panels, there's a chance it will make the plugin snap to the wrong panel.

I can't make it work in Wordpress (compatibility?)

Hi, I think this is an amazing plugin but I can't make it work on a Wordpress installation.

The problem I'm seen here is that the "active" class never appears in the "section" panels.

jQuery is working perfectly (I tested it).

I copy and paste the exact code you show in your readme to start clean and nothing.

I think maybe wordpress has some internal CSS styles that broken this.

I don't know where to test or what to do to make it work.

Some ideas?

Thanks in advance.

Maxi Tromer.

PS: I'm running this wordpress installation locally for development purposes but if you need I can put it online.

How could it be made to work with horizontal scroll?

I'm in a situation where the panels are laid out horizontally, so I'd like to achieve the effect with the horizontal scroll as the main navigation axis (the mousewheel would control the scroll horizontally as well). This doesn't seem to be implemented in the current version. How easily feasible does it look to you? Thanks!

doctype

Hi,

First off, thank you for the scroll snapping. It work wonders. But when I try to use the menu_demo class to make a nav bar that has a smooth scroll animation to the anchor, it doesn't work. And when I remove the DOCTYPE and just have the code within html tags, the code works perfectly fine. I was just wondering if you could help me trouble shoot this,

Thanks,
Dakota

iOS Snap not working properly

I tested on iOS 7 iphone 5 on demo first panel working and maybe sometimes others are working too.Is this related to iOS won't lets capture on scrolling event or its just a bug ?

by the way nice plugin I'm writing something like that but this one is way more done.

thanks

panelsnap in jquery Layout. Problem by opening the north Pane

Hi,

I´m using the Jquery Layout plugin and the page is divided into 3 Panes (north west and center).

The panelsnap is bound in the center pane and works fine when all 3 panes are opened. but if i close the north pane , the center pane will be not resized and i will see the actual panel and a part of the next or the last panel. i hope you understand what i mean.

can you help please?

here is the functional html page https://s3.amazonaws.com/mizu-dev/panel.html

Regards
K.N.

Possibly doesnt work with viewport units

I have sections that use viewport units to set their heights to the full height of the browser. I'm not sure if it's a problem, but panelSnap simply does nothing when I scroll. No errors, but no snapping either.

Can’t get the plugin to work in FireFox

Can’t get the plugin to work in FireFox.
In Chrome and Safari it works fine but in FireFox it's not snapping.

Project files here: http://goo.gl/QkaaYj

active menu class only work on direct child elements

menu element has to be direct child of menu-parent. took me some time to figure this one out.
working:

<ul class="menu">
      <li data-panel="first">
        <a href="#">First</a>
      </li>
</ul>

not working:

`<div class="menu">
    <ul>
      <li data-panel="first">
        <a href="#">First</a>
      </li>
     </ul>
</div>

No snapping when using the mouse on the scrollbar

I can't get the snappene to work when i'm using the mouse on the scrollbar in the browser window.

Add horizontal snapping functionality

Horizontal snapping functionality is currently not present. Can this be added without increasing the plugin footprint unreasonably?

Opinions on wether or not you think this is crucial please.

scrollStop doesn't fire when scrolling in nested element before scrollStop has fired.

Can be fixed by properly isolating scrollstart/scrollstop instances.

Flicker when resizing window

When you resize the browser window (height), the content flickers, I guess basically it's resizing the panels. Wouldn't it be better to resize the panels on a "resizeend" event?

fire panel activation

How can i activate "go to" some panel from my code? (not using plugin "$menu")
For example, i need
$("#mylink").on("click",function()
{
//goto some panel
})

Thanx

Active section not updating after page refresh

On my project, when I refresh the page on a section that isn't the first one, the current section stays in view but the active class is applied to the first section on the page.

On the demo page, it is does assign the active class correctly, but I cannot figure out why it doesn't on my version.

Demo page last panel won't get displayed on iPhone 5 portrait

Cool script, but the demo page's last panel just won't display. Instead, it snaps back to the 2nd-to-last panel.

Shaking scroll on ipad

Hi there, great plugin, but there is a minor issue. When the menu is active and i'm changing panel by dragging on ipad it is shaking.

If no target is found the scripts gives a javascript error

I use this plugin on my site in desktop mode, but I want to disable it in tablet/phone layout. This is done by adding and removing the class "snap" from my sections. This works alright (is there any other way to turn of snapping temporarily?). But then I get a javascript error:

Uncaught TypeError: Cannot read property 'top' of undefined jquery.panelSnap.js:305

I will try and attach a pull request with a working fix for this.

Is possibile to scroll into panel with an url?

Suppose that I want to write in my browser this url "www.mysite.com/about-us".
Suppose that about-us panel is located after 3 or 4 panels.

There is a easy way to scroll down via url?

Menu
<a href="/about-us" data-panel="about-us">About Us</a>

Content
<section data-panel="about-us"> ... </section>

Thanks.

Move up/down 1 only panel per scrolling event (single mousepad swipe, up/down arrow, scroll-wheel click)

First, thanks Guido: this is beautiful.

My only concern is the limitation of the directionThreshold variable. For example, on my MacBook, a quick swipe of the mousepad might scroll 5000px in a browser, whereas a full swipe at a slower speed might scroll ~1000px.

I think it would be more intuitive to limit travel per scrolling event (a single swipe, scroll-wheel click, arrow key up-down) so there's predictable behavior regardless of the scrolling method/hardware configuration.

Firefox - Scrollbar always showing

The scrollbar is always showing when using the menu option. Could we hide the scrollbars and only display when necessary, just like chrome and safari?

Modifications required to use with Wordpress, and/or non-100% sized panels?

I am attempting to use this plugin to add a snap scrolling feature to a wordpress site.

However, I am not sure what modifications need to be made either to the options or the site. What options or general modifications will I have to make in order to make this work?

The panels in use would be within a page, but aren't necessarily 100% width panels.
Any direction at all would be appreciated.

Undefined mouseup handler in scrollStop

The scrollStop function contains the following bit of code, which executes in situations where the user scrolls with mouse to the very top or bottom of the scrollbar (scrollStop is triggered although the mouse button is still down):

if(self.isMouseDown) {
  self.$eventContainer.one('mouseup' + self.options.namespace, self.processScroll);
  return;
}

The referenced processScroll event handler, however, seems to be undefined.

Possibly referencing code removed from previous commit?

easing

I think it'd be useful to allow for different easing options. It would just require another parameter on the "animate" method and a new option. Thoughts?

Chrome update broke panelsnap?

Had panelsnap working fine yesterday but noticed it was not working for others in the office. I did not update Chrome until this morning. Since doing so, panelsnap is now not working for me too.

It does not seem to be able to work out the scrolldifference value.

Chrome 33.0.1750.117 also not working in FireFox 27.0.1, but working fine in Safari 7.0.1 (9537.73.11).

How to turn snapping off after a section

I am looking for a way to turn a page back to normal scrolling after a specific section of the page, then back to snapping once you go back up. Basically I want to have a page that has the top 2 sections snapping with full screen video, and after that have the rest of the page scroll normally. Is there a way to do this?

thank you for such an awesome plugin!
-Pete

I can't get it to work in IE8

I would love to use this script but I can't get it to display correctly in IE.

View my project here:
http://www.arinc.com/mobile/snapdemo/test.html

Any help is very appreciated!

Demo not working anymore..

It worked fine before, but recently the demo / plugin is not working anymore. Tested on Chrome / Firefox / Safari

Add keyboard support.

Working on adding keyboard support. Ideas are welcome.

How should we add keyboard support? Adding a key - value kind of list?

onSnapFinish getting called twice

Hi there,
I have some animations on onSnapFinish,but that is not working well as onSnapFinish is getting called twice,I kept a console to check and found out that onSnapFinish is getting called twice.
Can you please help me out?..am I doing some thing wrong in initiating the plugin coz I am doing it on body instead of panel_container

Cheers
Nisar

Add a test suite for Travis

All code in panelSnap is currently untested. For each method a test should be written which Travis can execute when new code is pushed to panelSnap or when a new pull request (pr) is opened.

Two requests

The first would be a disable method to turn off the functionality for instance when I want to do something to the page (like scroll it with jquery) and I don't want this plugin to interfere with it until I enable it again.

The second piggy backs on the first in that if this one isn't possible I'm sure the first should suffice for most projects but a pause method or toggle method would be awesome as well, so without totally turning if off I can just un bind it so to speak until something runs and then toggle it back on.

My use case is that I have a link that I want to scroll the page down to the bottom where a form is located, most of the time this works without any issues but every once in a while it gets caught on a snap panel and it stops and I have to click it again to get it to scroll again.

If there is a way to get around this for the time being I would be greatly appreciative to hear about it.

directionThreshold value being ignored?

I've set the directionThreshold to 300 yet the panel snaps after a scrollDifference of just 4.

Am I misunderstanding what directionThreshold is supposed to do, or is something else causing the value to be ignored?

Thanks, Paul.

Add an offset option

Thanks for a great plugin.

I just hacked in an offset option so that element dont snap to the screen top (or container top), but on a specified offset below it. in my case there was a css fixed element hanging on the top of the page and i wanted content to snap unto that.

Strict container selection option

Hi!

Thanks for the awesome plugin. I've been looking for one :)

I'd suggest adding info about the option strictContainerSelection to the readme file. It took a while for me to figure out why snapping didn't work for non-immediate descendants.

Quick question about Script placement

Normally they say to put the script stuff in the Head section rather than in the body. I tried to modify the code to mess around with it and see if I could find any other use for the concepts covered on my projects. When I move the script you have at the bottom of the body tag, the page stops snapping. Any ideas why that would happen? I was always taught that, for the most part, the script placement didn't matter to anything more than the speed of how the page is processed.

Final note to all users, you might need to update the reference to code.jquery.com in the code. I found the download didn't work out of the box until I updated it to the latest jQuery.

Container height not calculated correctly for <body> on iPhone Mobile Safari after address bar minimizes using non-"minimal-ui" viewport

When scrolling in Mobile Safari on the iPhone, the viewport window height can change without a resize event being fired. The scrollInterval value should be calculated in the scrollStop function as well as in init and resize. Additionally, if the container is body, window.innerHeight should be used to get the correct viewport height.

The unexpected behavior is that the last panel in a window may be unaccessible, because the plugin doesn't realize it has reached the bottom of the scroll window.

Fixing the self.scrollInterval calculations seems to resolve the issue.

In init:

  self.scrollInterval = self.$container.is('body') ? window.innerHeight : self.$container.height();

In resize:

  self.scrollInterval = self.$container.is('body') ? window.innerHeight : self.$container.height();

And add it to scrollStop:

  self.scrollInterval = self.$container.is('body') ? window.innerHeight : self.$container.height();

How to detach panelsnap?

I would like to activate panelsnap on desktop, but deactivate on mobile. How can I do that? This is a responsive website.
Thanks.

Panels over 100% height

Trying it on a project having certain panels with heights more than 100%

Seems that it is troublesome (reaches the last panel when scrolling from the second one - which is approximatively 3000px high — to the third one)

Just to know if this plugin is ultimately based on 100% height panels or if i did some wrong

Custom hashtag in url

Is there good way to integrate custom hashtags, so every panel have custom hashtag,
panel1 = #homepae, panel2 = #contact... etc

Im creating website with pages, so i need to share every page separately if possible with #hashtags

onSnapFinish and onSnapStart getting triggered unnecessarily

Hi,
I am using this plugin for one of my project,everything works fine except that the plugin callback functions(onSnapFinish,onSnapStart) are getting called even when we click anywhere on the website,this happens in Chrome 34.0.1847.137 and Firefox 26.0.

Basically I am doing some animation on onSnapFinish but when user is clicking any menu or anywhere on the page, onSnapFinish gets triggered and my animation runs again.

Can you please check if its a bug or am I doing something wrong

Thanks
Ramesh

Plugin doesn’t work anymore after right-click

I was wondering why there is no snapping anymore, after i inspected an element via chrome dev tools. I figured out, a simple right click anywhere will “kill” the plugin. Even on your website http://guido.vc/ occurs this issue.

It works fine in Firefox.

(Macintosh; Intel Mac OS X 10_9_2)
Chrome/34.0.1847.137 Safari/537.36

Snapping no longer working in Chrome 36.0.1985.125 (or 38.0.2119.0 canary)

I just revisited a project using PanelSnap after a few months of it being on hold and the snapping behaviour on scroll no longer works on Chrome. There are no console errors and the other functionality still seems to work. Safari and Firefox work as normal.

You can see the problem on the PanelSnap demo page.

Snap only when close to snapping position

The way the plugin seems to works now, the scrolling element always snaps to a position, either on top or bottom of the viewport. This is really useful only if every element is given the height of the viewport (or less). But if some scrolling elements are taller than the viewport, you'll want them to snap only when their top or bottom reaches the top or bottom of the viewport - not when you are somewhere in between (imagine a long article...).

Wordpress Integration

I'm really quite the fan of this plugin so I wanted to integrate it into my wordpress site at http://worthwhile.ch. Now while I have managed to load the script and execute the panelSnap initialisation with no error the problem is simple: nothing happens at all.

I am trying to snap to the header below the first panel and I would very much appreciate your help with this one. Oh and I tried to load the script both in the head section as well as in the footer and I also moved the init snippet from head to footer - neither worked.

Many thanks in advance for your time!
Marco

Scroll to a panel on load

Hi there,
Can you help me in how to to use the plugin to scroll to a particular panel on load.I have different values in URL for different panels.

Example :

So onload I will have the value of panel1 or panel2 in JS and I want to scroll to a panel now ,I saw your ticket number #23 ,but that does not work for onload.

Cheers
Nisar

Scroll up completely and first scroll down will snap back to top

I hope I can explain this appropriately. Feel free to test on your own demo as I'm able to replicate it there.

When demo loads, scroll down so that the plugin snaps you down to the next panel.
Scroll up an excessive amount so that you are already at the top of the demo page and still scrolling up, and stop.
Now attempt to scroll down and let the plugin snap you to the next panel, it won't snap to the next panel, it will actually snap straight back to the top.
NOW attempt the same mouse wheel down to snap to the next panel (panel 2) and it will NOW snap to the next panel (panel 2).

I can create a video for you to demonstrate if this doesn't make complete sense.

Help with implementation

I am trying to use panelsnap to scroll through weeks on a calendar. Imagine 12 months of a calendar where only 4 weeks are visible at a time. I'd like the scroll to snap to the nearest week (I am implementing this with each week contained in a

)

Any thoughts on how to do this?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of guidobouman/jquery-panelsnap!

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 guidobouman/jquery-panelsnap 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": "guidobouman/jquery-panelsnap",
  "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!