Menu icon Foundation

My Posts

No Content

My Comments

Jerick Tibule commented on Jon Sharpe's post over 5 years

Hi Fernanda,

I fixed my problem by going inside foundation.orbit.js and added the code below:

$('input').focus(function() {
    timer.stop();
});

It will not work if you have
Javascript
<script src="bower_components/foundation/js/foundation.js"></script>
or <script src="bower_components/foundation/js/foundation.min.js"></script>

set in your scripts area in index. You need to remove this and add each script that you need in the
bower_components/foundation/js/foundation folder. only with the change added in the foundation.orbit.js file in this folder will it work.

Cheers,

Jerick Tibule commented on Jon Sharpe's post over 5 years

Hello there,

I am having the same problem.

I have a registration form inside one of the in an orbit slider. When I type in something like my email address, etc... the slide does not pause and goes to the next slide.

Here is a sample code:

<ul class="hero-slider" data-orbit data-options="
swipe: true;
pause_on_hover: true;
slide_number: false;
bullets: true;
timer: true;
timer_speed:5000;
">

<li> 
<h1>Stuff</h1>
</li>
<li>
<h1>Stuff</h1>
<form>
<div class="email-field">
<input type="email" placeholder="Email Address" required>
</div>
<div class="password-field">
<input type="password" id="password" placeholder="Password" required pattern="password">
</div>
<div class="password-confirmation-field">
<input type="password" required placeholder="Confirm Password" pattern="password" data-equalto="password">
</div>
</form>
</li>
<li>
<h1>Stuff</h1>
</li>

</ul>

I noticed that what orbit does is it toggles "pause" on click. So if I click on input once it pauses but will play again when clicking on the next input.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Jon Sharpe's post over 5 years

Hi Fernanda,

I fixed my problem by going inside foundation.orbit.js and added the code below:

$('input').focus(function() {
    timer.stop();
});

It will not work if you have
Javascript
<script src="bower_components/foundation/js/foundation.js"></script>
or <script src="bower_components/foundation/js/foundation.min.js"></script>

set in your scripts area in index. You need to remove this and add each script that you need in the
bower_components/foundation/js/foundation folder. only with the change added in the foundation.orbit.js file in this folder will it work.

Cheers,

You commented on Jon Sharpe's post over 5 years

Hello there,

I am having the same problem.

I have a registration form inside one of the in an orbit slider. When I type in something like my email address, etc... the slide does not pause and goes to the next slide.

Here is a sample code:

<ul class="hero-slider" data-orbit data-options="
swipe: true;
pause_on_hover: true;
slide_number: false;
bullets: true;
timer: true;
timer_speed:5000;
">

<li> 
<h1>Stuff</h1>
</li>
<li>
<h1>Stuff</h1>
<form>
<div class="email-field">
<input type="email" placeholder="Email Address" required>
</div>
<div class="password-field">
<input type="password" id="password" placeholder="Password" required pattern="password">
</div>
<div class="password-confirmation-field">
<input type="password" required placeholder="Confirm Password" pattern="password" data-equalto="password">
</div>
</form>
</li>
<li>
<h1>Stuff</h1>
</li>

</ul>

I noticed that what orbit does is it toggles "pause" on click. So if I click on input once it pauses but will play again when clicking on the next input.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content