javascript - Flip JQuery plugin not working - Stack Overflow

admin管理员组

文章数量:1425893

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 since. Bear in mind I have not yet made the grafic part of the website yet, so what's there is just for show.

Here's the source code for the website.

No errors, just not working (fliping said boxes). As I said, it worked before, but when I added those other boxes, it stopped 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 since. Bear in mind I have not yet made the grafic part of the website yet, so what's there is just for show.

Here's the source code for the website.

No errors, just not working (fliping said boxes). As I said, it worked before, but when I added those other boxes, it stopped working.

• javascript
• jquery
• plugins
• flip

Share Improve this question Follow edited Feb 13, 2012 at 21:52 HolyThunder asked Feb 13, 2012 at 21:14 HolyThunderHolyThunder 46311 gold badge66 silver badges1818 bronze badges 2

• "It's not working" isn't very descriptive. Are you getting any errors? Did you check the console? – Colin Brock Commented Feb 13, 2012 at 21:17
• In what way is it not working? You should try to provide a fiddle (jsfiddle) instead of a pastebin to make it easier for people to help you. Also, in your code, you include the flip plugin js file twice - try removing one of those and see if it helps. – kitti Commented Feb 13, 2012 at 21:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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:

    <script src="/lab/flip/js/jquery-ui-1.7.2.custom.min.js"></script>
    <script src="/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/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.";

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 .'

本文标签： javascriptFlip JQuery plugin not workingStack Overflow