A list of the default settings for flexslider

The documentation does not have all of these listed (as far as I can tell) but here they are pulled straight from the code:

//FlexSlider: Default Settings
  $.flexslider.defaults = {
    namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
    animation: "fade",              //String: Select your animation type, "fade" or "slide"
    easing: "swing",                //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
    direction: "horizontal",        //String: Select the sliding direction, "horizontal" or "vertical"
    reverse: false,                 //{NEW} Boolean: Reverse the animation direction
    animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
    smoothHeight: false,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
    startAt: 0,                     //Integer: The slide that the slider should start on. Array notation (0 = first slide)
    slideshow: true,                //Boolean: Animate slider automatically
    slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
    animationSpeed: 600,            //Integer: Set the speed of animations, in milliseconds
    initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
    randomize: false,               //Boolean: Randomize slide order
    fadeFirstSlide: true,           //Boolean: Fade in the first slide when animation type is "fade"
    thumbCaptions: false,           //Boolean: Whether or not to put captions on thumbnails when using the "thumbnails" controlNav.

    // Usability features
    pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
    pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
    pauseInvisible: true,   		//{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage.
    useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
    touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
    video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches

    // Primary Controls
    controlNav: true,               //Boolean: Create navigation for paging control of each slide? Note: Leave true for manualControls usage
    directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
    prevText: "Previous",           //String: Set the text for the "previous" directionNav item
    nextText: "Next",               //String: Set the text for the "next" directionNav item

    // Secondary Navigation
    keyboard: true,                 //Boolean: Allow slider navigating via keyboard left/right keys
    multipleKeyboard: false,        //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
    mousewheel: false,              //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
    pausePlay: false,               //Boolean: Create pause/play dynamic element
    pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
    playText: "Play",               //String: Set the text for the "play" pausePlay item

    // Special properties
    controlsContainer: "",          //{UPDATED} jQuery Object/Selector: Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be $(".flexslider-container"). Property is ignored if given element is not found.
    manualControls: "",             //{UPDATED} jQuery Object/Selector: Declare custom control navigation. Examples would be $(".flex-control-nav li") or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
    customDirectionNav: "",         //{NEW} jQuery Object/Selector: Custom prev / next button. Must be two jQuery elements. In order to make the events work they have to have the classes "prev" and "next" (plus namespace)
    sync: "",                       //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
    asNavFor: "",                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

    // Carousel Options
    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
    itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
    minItems: 1,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
    move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
    allowOneSlide: true,           //{NEW} Boolean: Whether or not to allow a slider comprised of a single slide

    // Callback API
    start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
    before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
    after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
    end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
    added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
    removed: function(){},           //{NEW} Callback: function(slider) - Fires after a slide is removed
    init: function() {}             //{NEW} Callback: function(slider) - Fires after the slider is initially setup
  };
Advertisements

Test if a user has interacted with your page using jquery

Here is some simple jQuery to test if a user has scrolled or clicked on your page.

var userHasInteracted = false;

var updateInteractionValue = function(){
    userHasInteracted = true;
    console.log( userHasInteracted );
  };

$( 'body' ).click( updateInteractionValue );
$( window ).scroll( updateInteractionValue );

console.log( userHasInteracted );

Stop orphans on your website using jQuery

An orphan is a single word at the bottom of a block of text or a title, this interrupts the reader’s eye and diminishes readability.

Example of an orphan

How to solve this on a responsive website website without re writing the copy

I found several JavaScripts that would add a non-breaking space ( ) between the last 2 words. But found there was many instances that this did not work for example if there was only one word or if I had HTML tags inside the paragraph the script was run on the site would brake.

After many Google searchers I came across a jQuery script by Simon Goellner called jquery-unorphanize on Github. This was a well thought out script that dealt with all the issues I was experiencing. Head over to his Github page to find out how to implement it: https://github.com/simeydotme/jquery-unorphanize (the script is well commented if you are interested in seeing exactly how it works).

If you are using bower you can install with $ bower install jquery-unorphanize

Note: while writing this I see that this blog suffers from orphans… an issue has been logged.

Skrollr cutting off the bottom of the page on mobile

Skrollr was preventing me from scrolling all the way down my page on mobile. I had put the id skrollr-body onto my body tag already so that was not the issue.

It turned out the issue was that skrollr was being initiated before two Flexsliders on my page. What I needed to do was to force Skrollr to only initiate after flexslider had set itself up.

I used the jQuery deferred method documented in this post.

Here is my final code. You will want to remove the console log messages once you have it working.

      var myFlexslider = function() {

        var r = $.Deferred();

        $('.venue-promotions-slider').flexslider({
          controlNav: false,
          directionNav: false,
          slideshowSpeed: 4000,
        });

        console.log('Run flexslider');

        // This is my function to show the images only after the slider is initiated. You may not need this.
        $('.venue-promotions-slider-img').show(); 
        console.log('Show promo slider');

        return r;

      };

      var mySkrollr = function() {

        var s = skrollr.init({
          forceHeight: false
        });

        skrollr.menu.init(s, {
            animate: true,
            easing: 'swing',
            duration: function(currentTop, targetTop) {
              return 1000;
            },
        });

        console.log('Initialise Skrollr');

      };

      myFlexslider().done( mySkrollr() );

Calling one jQuery function only after another function has run

Sometimes it may be nessessary to force one jQuery function to run only after another has finished. To do this you need to use the jQuery deferred method.

Here is a simple example of how to do it:

    var functionOne = function() {

      var r = $.Deferred();

      // Do your whiz bang jQuery stuff here
      console.log('Function One');

      return r;

    };

    var functionTwo = function() {

      // Do your whiz bang jQuery stuff here
      console.log('Function Two');

    };

    // Now call the functions one after the other using the done method
    functionOne().done( functionTwo() );

Source: http://stackoverflow.com/questions/12116505/wait-till-a-function-is-finished-until-running-another-function