Scroll while in expose ruin all position

[valik1228]

Hi, recently I started using trip.js and when I try use the expose option the scroll after the trip is not working, is is not scrolls down(I have button that start the trip, if the button is in the bottom the trip will be scrolled up to the first step otherwise sadlly the trip just continue without me).

Is there an option to make the trip follow each step? is there any option that lock the scroll for the user while the trip is on?

attached the simple example of the scrolling without me :(

Thank you, valik1228.

[valik1228]

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="trip.css">

<button id="trip-run">Start this trip</button>

<div class="box1" id="1">1</div>
<div class="box2" id="2">2</div>
<div class="box3" id="3">3</div>
<div class="box4" id="4">4</div>
<div class="box1" id="5">5</div>
<div class="box2" id="6">6</div>
<div class="box3" id="7">7</div>
<div class="box4" id="8">8</div>

<!-- scripts -->
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="trip.js"></script>
<script type="text/javascript" src="main.js"></script>

[valik1228]

$( document ).ready(function() {

var options = {
tripTheme : "yeti",
delay : 4000

};

var trip1 = new Trip([ { sel : $('#4'), content : 'This is element 4', expose : true, position : "e" }, { sel : $('#5'), content : 'This is element 5', expose : true, position : "e" }, { sel : $('#6'), content : 'This is element 6', expose : true, position : "e" }, { sel : $('#7'), content : 'This is element 7', expose : true, position : "e" }, { sel : $('#8'), content : 'This is element 8', expose : true, position : "e" }, ], options);

$("#trip-run").on("click", function() {
    trip1.start();
});

});

[valik1228]

.box1 { height: 150; width: 150; background-color: blue; padding: 30px; margin: 50px; }

.box2 { height: 150; width: 150; background-color: red; padding: 30px; margin: 50px; }

.box3 { height: 150; width: 150; background-color: black; color: white; font-weight: bold; padding: 30px; margin: 50px; }

.box4 { height: 150; width: 150; background-color: green; padding: 30px; margin: 50px; }

[EragonJ]

@valik1228 sorry for the late reply, I just came back from my vacations. Can you help to create an example in jsfiddle or somewhere to make sure we can test on it ? Thanks !!

[valik1228]

@EragonJ wow! it works just fine, sorry for blaming :) maybe its only my version of chrome. https://jsfiddle.net/pmuub39x/

[EragonJ]

it would be nice that you can put more information here about your chrome version and put the demo into jsfiddle ! I can give it a try and see what's going on there.

[valik1228]

@EragonJ , i've got chrome "Version 45.0.2454.101 m" it is up to date. demonstration: https://jsfiddle.net/pmuub39x/

it runs great there, but for me it is just start the trip somewhere down and not scroll the screen(like in the screenshot below ).

do you know what can be the reason for this?

[EragonJ]

@valik1228 I checked the demo and I think it runs well, what's the problem ??

[EragonJ]

If it works well in jsfiddle, then it should work fine in your local ! Did you mess up your local environment (?!) Not sure this is related to file:/// protocol or no. Can you copy all the codes from jsfiddle and put them into one single file and user your webserver (apache, nginx or something) to open the file and see whether it works well or not ?

[EragonJ]

BTW, from your code above, you are using jquery 2.1.4 and I am not quite sure whether Trip.js works well with latest version or not (In jsFiddle, you are using 1.8.3). Please try to change your jQuery version and give it a try again. Hope this helps !

[EragonJ]

close first and feel free to re-open if you got any ideas for this :+1: