Flip Jquery Plugin Not Working

I'm making a website for a project, and I discovered and decided to use the, jquery flip plugin, and it's not working... I did manage to get it working a while ago, but couldn't si

Solution 1:

Include jQuery UI before the Flip plugin. Since the Flip plugin needs jQuery UI to be available it probably fails when it's not.

It's always a good idea to use the demos on the plugin's documentation website as a template. The flip plugin includes the JS files in this order:

<scriptsrc="/lab/flip/js/jquery-ui-1.7.2.custom.min.js"></script><scriptsrc="/lab/flip/js/jquery.flip.min.js"></script>

Also, in your JSFIddle, you have to use absolute URLs for the resources, JSFiddle doesn't magically find jquery/jquery.flip.min.js.

Here is an updated version of your JSFiddle, I grabbed the above files from the plugin's documentation: http://jsfiddle.net/mNQJB/2/

If the above didn't fix your problem, there was an error with your code, one of the .flip calls had an invalid content property:

Uncaught SyntaxError: Unexpected token .

Make sure that your content properties are all on a single line or you have escaped the end-line characters properly.

Update

To escape an end-line character in JS we do this:

var str = "This is a string and \
I want it to use two lines.";

Notice the backslash, it's the standard escaping character. Now if you want to create a new line that will be rendered via HTML then you should use a <br /> tag:

var str = "This is a string and <br />I want it to use two lines.";

Solution 2:

you have an unterminated string constant in this section:

 $("#aimsb").bind("click",function(){
        $("#aims").flip({
            direction: 'bt',
            color: '#39AB3E',
            content: 'The aims of the GSP (Global Student Project) are to give students from all around the world both a culturally and personally enriching experience, as well as equal learning, and subsquently job opportunities
            .'
        });
    });

note the line feed prior to the .'