<commit_before># jQuery Flip Plugin

jQuery/jQuery mobile plugin to give Flipboard like effect. Flip effect uses css 3d transform. Currently WebKit browsers (e.g. Chrome, Safari, including iOS mobile safari) or Firefox 11. Other browsers will be fallback to "slide" effect.

## Installation

Copy jquery.mobile.flip.js, jquery.mobile.flip.css and files under images directory to your web page project. Note that css and images must be in the same directory. Then load js and css file into your html file.

    <!-- "images" directory must be copied under css folder -->
    <link rel="stylesheet" href="css/jquery.mobile.flip.css" />
    <script type="text/javascript" src="js/jquery.mobile.flip.js"></script>

## Usage

### Prerequisite
This plugin expects nested div or p or section element structure. Root div, p, section element must be used to initialize plugin.

    <div id="flipRoot">
       <div>
         Flip Content 1
       </div> 
       <p> 
         Flip Content 2
       </p>
       <section>
         Flip Content 3
       </section>
    </div>

### jQuery User
jQuery user can enable plugin by calling jQuery.flip() method.

    $(document).ready(function() {
      $("#flipRoot").flip();
    });

option object can be passed to the flip() method like below.

    $(document).ready(function() {
      $("#flipRoot").flip({
        forwardDir: "ltor",
        height: "340px",
        showpager: true,
        loop: true}));
    });

### jQuery Mobile User
Plugin will be initialized with data-role="flip" element automatically without calling initialization method. 

    <div id="flipRoot" data-role="flip">
       <div>
         Flip Content 1
       </div> 
       <p> 
         Flip Content 2
       </p>
       <section>
         Flip Content 3
       </section>
    </div>

Option can be passed through data-flip- prefix attribute too.

    <div id="flipRoot" data-role="flip"  data-flip-show-pager="true" data-flip-forward-dir="ltor">
       <div>
         Flip Content 1
       </div> 
       <p> 
         Flip Content 2
       </p>
       <section>
         Flip Content 3
       </section>
    </div>

## Option
Following option is supported.

 option name | description | jqm attribute | value
-------------|-------------|---------------|------
effect|Transiton effect|data-flip-effect|'flip' or 'slide'
forwardDir|forward direction|data-flip-forward-dir|'rtol' or 'ltor' or 'ttob' or 'btot'
height|Content height|data-flip-height| height css
keyboardNavigation|enable keyboard navigation|data-flip-keyboard-navigation|true or false
showPager|show pager|data-flip-show-pager|true or false
loop|loop contents|data-flip-loop|true or false

Sample:

    $(document).ready(function() {
      $("#flipRoot").flip({
        forwardDir: 'ltor',
        height: '340px',
        showpager: true,
        loop: true}));
    });
    
    <div id="flipRoot" data-role="flip"  data-flip-show-pager="true" data-flip-forward-dir="ltor">
       <div>
         Flip Content 1
       </div> 
       <p> 
         Flip Content 2
       </p>
       <section>
         Flip Content 3
       </section>
    </div><commit_msg>Changed keyboardNavigation option to keyboardNav Added License section Updated some text<commit_after># jQuery Flip Plugin

jQuery/jQuery mobile plugin to give Flipboard app like effect. Flip effect uses css 3d transform. Flip effect currently works on WebKit browsers (e.g. Chrome, Safari, including iOS mobile safari) or Firefox 11. Other browsers will be fallback to "slide" effect.


## Installation

Copy jquery.mobile.flip.js, jquery.mobile.flip.css and images directory to your web page project. Note that css file and images folder must be in the same directory. 

After copying files to your web project, load js and css file into your html.

    <!-- "images" directory must be copied under css folder -->
    <link rel="stylesheet" href="css/jquery.mobile.flip.css" />
    <script type="text/javascript" src="js/jquery.mobile.flip.js"></script>

## Usage

### Prerequisite
This plugin expects nested div or p or section element structure. Page root div, p, section element must be used to initialize plugin.

    <div id="flipRoot">
       <!-- div element -->
       <div>
         Flip Content 1
       </div> 
       <!-- or p element -->
       <p> 
         Flip Content 2
       </p>
       <!-- or section element -->       
       <section>
         <h3>Flip Content 3</h3>
         <p>You can put any elements under here</p>
       </section>
    </div>

### jQuery User
jQuery user can enable plugin by calling jQuery.flip() method.

    $(document).ready(function() {
      $("#flipRoot").flip();
    });

option object can be passed to the flip() method like below. Available options are described later.

    $(document).ready(function() {
      $("#flipRoot").flip({
        forwardDir: "ltor",
        height: "340px",
        showpager: true,
        loop: true}));
    });

### jQuery Mobile User
Plugin will be initialized with the element which has data-role="flip" attribute without calling initialization method. 

    <div id="flipRoot" data-role="flip">
       <div>
         Flip Content 1
       </div> 
       <p> 
         Flip Content 2
       </p>
       <section>
         Flip Content 3
       </section>
    </div>

Option can be passed through data-flip- prefix attribute too.

    <div id="flipRoot" data-role="flip"  data-flip-show-pager="true" data-flip-forward-dir="ltor">
       <div>
         Flip Content 1
       </div> 
       <p> 
         Flip Content 2
       </p>
       <section>
         Flip Content 3
       </section>
    </div>

## Option
Following option is supported.

 option name | description | jqm attribute | value
-------------|-------------|---------------|------
effect       |Transiton effect|data-flip-effect|'flip' or 'slide'
forwardDir   |forward direction|data-flip-forward-dir|'rtol' or 'ltor' or 'ttob' or 'btot'
height       |Content height|data-flip-height| height css
keyboardNav  |enable keyboard navigation|data-flip-keyboard-nav|true or false
showPager    |show pager|data-flip-show-pager|true or false
loop         |loop contents|data-flip-loop|true or false

Sample:

    $(document).ready(function() {
      $("#flipRoot").flip({
        forwardDir: 'ltor',
        height: '340px',
        showpager: true,
        loop: true}));
    });
    
    <div id="flipRoot" data-role="flip"  data-flip-show-pager="true" data-flip-forward-dir="ltor">
       <div>
         Flip Content 1
       </div> 
       <p> 
         Flip Content 2
       </p>
       <section>
         Flip Content 3
       </section>
    </div>
    

## License

[The MIT License](http://www.opensource.org/licenses/mit-license.php "link to Open Source Initiative")
{'fraction_non_alphanumeric': 0.13112327956193576, 'fraction_numerical': 0.006511765576439248, 'mean_word_length': 2.370573566084788, 'pattern_counts': {'":': 0, '<': 82, '<?xml version=': 0, '>': 82, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6450285', 'n_tokens_mistral': 2081, 'n_tokens_neox': 1921, 'n_words': 658}