How to call a script with the HTML file

Question 1

This $('#your-flipper-id') simply represents the element to which you want to apply the flipper plugin. In this case it's searching for an element with the ID your-flipper-id. You can change that to be whatever you want.

I would suggest you put that code in a JS file that is called at the end of your HTML body.

You should have something like this:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- YOUR HTML HERE -->
    <script type="application/javascript" src="js/jquery.min.js"></script>
    <script type="application/javascript" src="js/flipper.min.js"></script>
    <script type="application/javascript" src="js/main.js"></script>
</body>
</html>

In this case you load jQuery first, then your plugin and then your own javascript. Inside your own javascript file you would place that code. It should look something like this:

$(function() {
    $('#your-flipper-id').flipper({
        "width" : 500,<span class="Apple-tab-span" style="white-space:pre"> </span>// The       total width of the widget.

        "height" : 250,<span class="Apple-tab-span" style="white-space:pre"> </span>// The total height of the widget.
    });
});

This will execute your code when the page is ready.

Question 2

there are two steps.
First you have to add this into your <head> file

<script src="pathofyourplugin.js"></script>

and then you have to call:

<script type="text/javascript">

$('.Apple-tab-span').flipper({
"width" : 500,
"height" : 250
});

</script>

Question 3

if your element class name is ".Apple-tab-span" then you have to call the function like this below.

<script type="text/javascript">

$('.Apple-tab-span').flipper({
    "width" : 500,
    "height" : 250
});

</script>

Question 4

 $('#foo').Flipper();

where foo is the id of html element on which you want to put flip animation.

From flipper jQuery page https://github.com/dclowd9901/jquery.Flipper

HTML code

<div id="twitter"></div>

and javascript

var twitterBoard = $('#twitter').Flipper({
            dimensions : [22, 12],
            text : '',
            fontSize: 24,
            skipAnimationThreshold : 3,
            lineDelay: 1000,
            textOffset : {
                v : 3
            }
        });

Question 5

METHOD 1 : You can call this function after defining your element :

<div id="flip-content"> 
    //Your content
</div> 
<script>
$('#flip-content').flipper();
</script>

METHOD 2 : you can call it in the header section :

$(document).ready(function(){
  $('#flip-content').flipper();
});

But i suggest you to use METHOD 1.

Question 6

I think you should go with first  basic Java script tutorials and then you should learn about jquery plugin 

http://www.w3schools.com/js/DEFAULT.asp

http://www.w3schools.com/jquery/default.asp


and you have to give 'your-flipper-id' as id of HTML element. 

<div id='your-flipper-id'>
// your html element

</div>

$('#your-flipper-id').flipper()  where it will try to find an element on page by this id :'#your-flipper-id'

Question 7

$('#your-flipper-id') refers to an element on the page with that id. For example,

<div id="your-flipper-id"></div>

To call the flipper function, use

$(window).load(function() {
 $('#your-flipper-id').flipper({
  "width" : 500,
  "height" : 250
 });
});

Question 8

First you need to include the jQuery file because this plugin required this and the author provide plugin file below the jQuery file like this:

<script src="jquery cdn url here"></script>
<script src="author plugin file here"></script>

Then you need to put this code before the end body tag like this.

<script>
//to ensure that page has been loaded fully
$(document).ready(function(){
    $('#your-flipper-id').flipper(); 
});
</script

And yes, you have to define the id for the element where you want the flipper effect. also if css file is provided by the author put that below to your main css file in the document.