Comments (7)
Hey @HongPong
Sorry for the delayed response.
To programatically navigate to a slide will require a workaround. Doing a simple window.scrollTo
would suffice but then you lose the animation and can hit z-index
issues.
To retain the animation, the quickest solution will be to use jQuery
. Also, each panel element has a STARTING_POS
property which tells us where to scroll to in the body to get to the start of a panel.
This will of course first require that you have jQuery
available to you on the page. Then add the following;
window.Doormat.prototype.travelTo = function(index) {
var panels = document.querySelectorAll('.dm-pnl');
if (panels[index - 1]) {
var pos = panels[index - 1].STARTING_POS;
if (pos !== undefined) $('body').animate({scrollTop: pos});
} else {
throw Error('Doormat: no panel available at that index!');
}
}
The result will be that you can slide to any panel you want by index. For example;
var myDoormat = new Doormat();
myDoormat.travelTo(4);
Hope that helps you out! 😎
I'll add a note about this in the README
.
from doormat.
I am doing a workaround similar to this:
window.getPanelHeight = function() {
var firstpanel = $('.dm-pnl:first');
window.panelheight = parseInt($(firstpanel).css('min-height').replace('px', ''));
console.log(window.panelheight);
};
// debounced resize event catcher.
$( window ).resize(function() {
window.getPanelHeight();
var paneltimeout = window.setTimeout(getPanelHeight, 1000);
});
window.goToSlide = function(num) {
var oneheight = window.panelheight;
var targetheight = oneheight * num;
$("html,body").scrollTop(targetheight);
}
from doormat.
This is great! excellent timing and works like a charm. Cheers!
from doormat.
No problem 😄 glad I could help!
from doormat.
At least for me, this isn't working for IE11 (oh joy, fun times) - I can post diagnostic info if you can point me to what you might need. Thanks again. I'm not up on all the oddities that might happen with passing through prototype constructors in IE, maybe that is the issue?
from doormat.
Hey @HongPong
Sorry for the delayed response. I sometimes miss the notifications. Hmm I ran it in Edge
with no problems and IE9
.
You definitely pulled in jQuery
to leverage the .animate
function?
from doormat.
I found a different way to work around it. Best regards, thanks again for all the help.
from doormat.
Related Issues (15)
- index.html reference to the css/flat-ui.css HOT 4
- Fix screen jumping and scroll reset for mobile
- Change number of panels HOT 1
- unconventional css class HOT 1
- Are there any good integrations for snapping? HOT 10
- Snap travel
- Doormats get skipped when scrolling with scrollbar HOT 1
- Behaves oddly when panels are bigger than viewport height HOT 1
- Deprecate CoffeeScript use in favor of Babel
- Fix snap travelling behavior
- Script not working after update HOT 1
- Scrollable Li
- Content flash on load
- Window resize should trigger reset
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from doormat.