Comments (7)
I added a pull request for this. Let me know what you think. #31
from hopscotch.
The pull request appears to only address bottom or top placed bubbles. What about left or right placed ones that show up off screen?
from hopscotch.
Hi all - thanks for the great plugin. Has there been any progress made for responsive design?
from hopscotch.
Sorry, not presently. @kate2753, I think we need to come to some sort of conclusion if this is a plugin candidate or core enhancement. Feels like this should be an update to core since all the placement logic is currently the responsibility of the core library... perhaps a broader rewrite of our placement logic to consider if a given bubble placement will end up off screen. Though, then what edge cases might we start crashing into if we start assuming alternate placements and bubble sizes for tour steps?
from hopscotch.
I can partially address this by separating steps from placement and creating multiple placement configurations. However, it's not great because the same element might be in different positions depending on viewport size (line-wrapping) so I would need to either go even more granular on widths or just deal with it looking bad.
All this really needs to do is intelligently say, "If I am placed off-screen, how far do I need to move (x/y) to be on-screen and then readjust the arrow (if no hard-coded offset, or just override) to still point correctly."
It would be ideal to sort of define placement separately and responsively:
var responsiveTour = {
id: "responsive",
steps: [
{
target: ".target",
xOffset: "center",
arrowOffset: "target",
media: {
"min-width: 480px": {
// exact same options as normal step, but cascades
},
"min-width: 768px": {
// exact same options as normal step, but cascades
}
}
}
]
Would use window.matchMedia
if available or use matchMedia poly.
By the way, target
option for arrow would have it try its best to position itself along x-axis of bubble closest to target element.
For this to work nicely, calculating positioning should always happen after calling onShow
or if possible, onBeforeShow
because I might take action that adjusts the DOM in preparation for a step (right now I do this in onShow
).
from hopscotch.
This is what I added after VERTICAL OFFSET
conditional in setPosition
.
// ADJUST FOR VIEWPORT
var wd = { width: $(window).outerWidth(), height: $(window).outerHeight() };
var right = (left + bubbleBoundingWidth),
bottom = (top + bubbleBoundingHeight);
if (right > wd.width) {
left -= (right - wd.width + 20);
if (arrowOffset !== 'center' && (step.placement === 'bottom' || step.placement === 'top')) {
arrowEl.style.left = (arrowOffset + (right - wd.width + 20)) + "px";
}
}
if (left < 0) {
left += (-left + 20);
}
if (bottom > wd.height) {
top -= (bottom - wd.height + 20);
}
I know I'm missing a couple cases (moving arrow when top changes) but this fixed my issues. I combined it with the approach I mentioned above (though simpler), like this:
var isMobile = $("header.mobile").css("display") === "block";
// step
{
target: isMobile ? "#toggle-sidebar" : "#sidebar header",
placement: isMobile ? "bottom" : "right",
title: "Foo",
content: "Bar"
}
I could have just as easily done my own matchMedia query but I use bootstrap so some things are visible/hidden depending on screen size and I'd rather just test the display state of an element.
This pretty much resolves it for me. The code I added to bubbles will simply nudge it back into the viewport. If a user wants to handle special cases, they can do it themselves like I did. A more formal way to declare responsive placement would be the next step.
Note: this doesn't make the tour "responsive" when adjusting viewport because I don't need to handle that. The only use case that would make sense for is ensuring orientation change works.
from hopscotch.
I just wanted to note that kamranayub's solution above worked perfectly for me, except I had some issues with the first line and ended up changing it to:
var wd = { width: screen.availWidth, height: screen.availHeight };
After that minor change, my tour bubbles all now stay within the viewport on mobile devices (though I haven't tested it extensively with every possible option or OS yet).
from hopscotch.
Related Issues (20)
- SVGs for sprites?
- Using functions or helpers for target prop
- How to use this library using TypeScript in ng4? HOT 1
- How would I implement a way to cancel the tour if the user navigates away?
- Current step
- FeatureRequest: on-demand Tours
- Hopscotch with tabset
- Issue with going back between multi-site steps between pages
- nextOnTargetClick doesn't work while animating in.
- onStart and onEnd being executed as soon as I start the tour. HOT 1
- How to set up onNext function, when using a database to set up the steps properties? HOT 11
- How to create multiple tours on one page? HOT 5
- sprite-green and sprite-orange don't work HOT 2
- Is it possible to fixe the "popup" on not fixed target
- Customizable theme (background color and text color)
- Visibility for templating and `setRenderer` HOT 1
- Add multiple pages for tour?
- Why previous and Next button displayed after some delay in safari 12.1?
- hopscotch and iframes
- Addclass not working HOT 1
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 hopscotch.