Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Turnbox.JS - Animate without user interaction

I really like to use KeiichiroHirai's Turnbox.JS script (http://www.noht.co.jp/turnbox),

However, This script seems only to work with a user clicking/hovering on any button this script is appending itself to.

I wish use these animations when DOM is ready,

I tried:

$(function() {
     $.turnBoxLink({
      box: ".example"
    });
});

But since I'm posting here, It's obviously not working.

Thank you in advance!

like image 263
GRX Avatar asked Oct 20 '15 07:10

GRX


2 Answers

If you wish to do that when DOM is ready you should wrap your init code into

$(document).ready(function() {
   // go when DOM is ready
});

or

$(window).load(function() {
   // go when page and images are loaded
});

And also, Turnbox can be initialized like this :

HTML markup

<div class='login_form'>
   <h3>My form element<h3>
</div>

With the following code you'll get the extra simple sample, without any options. but for test purposes it could be good to start here :

$(".login_form").turnBox();

If now, you want to launch the animation at specific event (for example to the ready or load event), you'll be able to do so by using :

$(".login_form").turnBoxLink({
  box: ,
  events: "ready", // you can also try 'load'
  dist: "next"
});
like image 116
Alex Avatar answered Nov 15 '22 19:11

Alex


After initializing, click the generated .turnBoxButton child element:

$.turnBoxLink({
    box: ".example"
});
setInterval(function() {
    $(".example .turnBoxButton").click();
}, 1000);

This will spin the box every second.

like image 1
Streetlamp Avatar answered Nov 15 '22 20:11

Streetlamp