EragonJ / Trip.js

🚀 Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.

Home Page:https://eragonj.github.io/Trip.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

item positioning depends on window size

taburetkin opened this issue · comments

Hi.
thank you for this project, its realy nice

first
positioning of tripObject need some improvements for flexible html sites because of different position of same html elements on mobile and desktop.
for example:
navigation bar with attached trip on desktop appear at the left side and have to have position 'e' in corresponding tripObject for correct tip displaying but on the mobile same navigation is at the top and should have position 's' in tripObjects.

and the second
when html ellement is near screen edge showed tripObject is fall outside the screen

and finaly
all tripObject callbacks are runs after tripObject is shown.
I think there should be something like beforeTripStart callback.
This can help to do own calculations and position changing before every tripObject appear on the screen

For different positioning rules on mobile and desktop, instead of relying on "awesome" algorithm behind, I think the better way is to make two different sets of trips in different scenarios because only the project owner (you) knows which position should be needed in different scenarios. This is the same as how you write your responsive CSS !

While for the second problem you mentioned, can you attach an jsfiddle example for it ?

when html ellement is near screen edge showed tripObject is fall outside the screen

While for the beforeTripStart callback, I need to think about it and can't give you an answer yet, but your case does happen to the others too.

here it is
https://jsfiddle.net/apscpnj7/2/

there is another problem i didnt illustrate in this fiddle.
the problem is in expose and position:fixed but lets talk about this later :)

@taburetkin sorry for the late reply, i got so many things stuck here in my side XD I think the better way here is to have max-width for the trip block and then automatically change the position of arrow then the problem should be solved !