ML Design

Tag: iteration


An iteration plugin.

Demo

Using text printing, this example shows how the inbuilt controls work showing frame / total frames, current time in the complete cycle / total time for the complete cycle.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique eget orci ut rhoncus. Etiam magna enim, auctor eget ipsum nec, hendrerit eleifend nisi. Nulla facilisi. Fusce eu mollis nibh, in hendrerit leo. Sed ut augue id sem mattis vestibulum eget et orci. Nunc nec sapien urna. Phasellus quis turpis vestibulum, convallis elit ut, scelerisque ipsum. Maecenas venenatis leo eu nibh tincidunt pharetra. Phasellus tincidunt venenatis justo, at euismod ante pharetra ut. Donec vel orci faucibus, porttitor justo at, facilisis lacus. Donec ornare sem a nibh gravida sodales.

Code

$(‘div#iterate_div_one’).css({opacity: 0}).mlIterate({

i: 0,

j: string.length,

delay: { speed: 0.041, repeat: 0 },

triggerElement: {},

useControls: { use: true, selector: ‘div#iterate_div_one’, showCounter: true },

enablePause: true,

onBeforeIterate: function() {

output = ”;

this.data.$element.text(”);

this.data.$element.css({opacity: 1});

},

onNavigate: function() {

output = string.substr( this.data.settings.i, this.data.inc );

this.data.$element.html( output );

},

onIterate: function() {

output += string.charAt(this.data.inc);

this.data.$element.html( output );

}

});

Plugin Options

  • i : 0, (integer) – minimum iteration value
  • j : 100, (integer) – maximum iteration value
  • delay : { speed: 0.2, repeat: 0 }, (object) – speed: (float) translates to delay between new frames, repeat: (integer) num times or (string) ‘infinite’
  • useControls: {use: false, selector: ”, showCounter: false}, (object) – (boolean) whether to use inbuilt controls, (string) css selector to add controls after, (boolean) show time and frame counters
  • triggerElement : { class: ”, search: ‘closest’ }, (object) – (string) class of element for binding iterate events to, (string) whether to find the element in the DOM ‘closest’, ‘find’, ‘next’ or ‘prev’
  • triggerInit : true, (boolean) – trigger immediately when the plugin is initialised
  • enablePause: false, (boolean) – enable pausing, set to true if using triggerElement or useControls is set to true
  • pausePoints: [], (array) – pause-at-iteration array of objects {i: (integer)iteration, duration: (integer)seconds} – i.e [{i:20, duration:5}, {i:60, duration:8}, {i:80, duration:3}….]
  • onBeforeIterate : function() {}, (function) properties available in this keyword – same as onIterate
  • onIterate : function() {}, (function) properties available in this.data – $element: element bound to plugin, inc: the increment value at this iteration, finished: whether the iteration cycle is finished, settings: the settings, finished: whether the whole cycling from beginning to end including repeats is finished, paused: whether the cycle is paused (paused must be true to use navigation), pausedAt: the increment the cycle is paused at, pausePoint: which pausePoint we are at (from pointsPaused array, pointsPaused: undefined or array of pause points, repeats: how many times to repeat the cycle, timer: the time elapsed from beginning of the cycle, timerArray: an array of times for the frames, container: the jQuery container object which holds all the navigation elements, isNavigated: whether a navigation button (not play/pause) was pressed, toNavigate: the navigation button just pressed, clicked: whether a navigation button (including play/pause) has been clicked
  • onPlay: function() {}, (function) properties available in this keyword – same as onIterate – function fires before anything else in cycle function
  • onPause: function() {}, (function) properties available in this keyword – same as onIterate –
    function fires in the cycle function
  • onNavigate: function() {}, (function) properties available in this keyword – same as onIterate – function fires after navigate buttons are pressed and just before the cycle func is called
  • onRepeat: function() {} (function) properties available in this keyword – same as onIterate – function fires just before the cycle function fires again
  • onPointPauseEnd: function() {}, (function) properties available in this keyword – same as onIterate
  • onIterateEnd : function() {} (function) properties available in this keyword – same as onIterate