CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-plugins
Terminal
Terminal

Reputation: 1999

jquery easeOutBounce function missing in-spite of including jquery file

I have used 3 some jquery related files namely

<script type="text/javascript" src="/blog/jquery/jquery-1.7.1.min.js"></script>
<link type="text/css" href="/blog/css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/blog/jquery/jquery-ui-1.8.17.custom.min.js"></script>

Now i am trying to use Humanmsg jquery plugin. It had 2 jquery files humanmsg.js and jquery.js.
I already have latest version of jquery so I haven't included jquery.js file from plugin. Now i am getting the error in Chrome Uncaught TypeError: Object # has no method 'easeOutBounce' jquery-1.7.1.min.js:4
I have checked this function to be present in jquery-ui-1.8.17.custom.min.js but still the browser is not reading from this file, in-spite showing error for file jquery-1.7.1.min.js. Though the plugin is working when i replace the orignal jquery-1.7.1.min.js with the script file in humanmsg plugin(jquery.js) but rest of functionality of site depends on the orignal script file, so can't replace it.
Any idea(to remove the problem)/practices (to follow when including various script files from 3rd party). PS: humanmsg.js use jQuery instead of $ ( if it is of any use).
All the scripts files are downloaded completely by browser.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <script type="text/javascript" src="/var/www/blog/jquery/jquery-1.7.1.min.js"></script> <!--ORIGNAL-->
    <link type="text/css" href="/var/www/blog/css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="/var/www/blog/jquery/jquery-ui-1.8.17.custom.min.js"></script>

    <!--script type="text/javascript" src="jquery.js"></script-->   <!--Plugin jquery file-->
    <script type="text/javascript" src="humanmsg.js"></script>
    <link href="humanmsg.css" media="screen" type="text/css" rel="stylesheet">
    <title>Humanized Messages - Demo</title>
    <script>
    jQuery(document).ready(function() {
        jQuery('a.showmessage').click(function() {
            humanMsg.displayMsg('<strong>Success:</strong> <span class="indent">You clicked \''+jQuery(this).text()+'\'</span>');
            return false;
        })

        jQuery('a.showmessage:last').click(function() {
            humanMsg.displayMsg('"Your <strong>Earth</strong> will be reduced to a burned-out cinder."');
            return false;
        })
    })
    </script>
</head>

<body>
    <p class="links">
        <a href="#" class="showmessage">Click Me to show message</a>
    </p>
</body>
</html>

EDIT:

I have found Gritter, good alternative for humanmsg and its working fine with latest version of jquery.

Upvotes: 0

Views: 3281

Answers (2)

Sparky
Sparky

Reputation: 98718

Your problem is that the plugin, Humanmsg, is more than 4 years old and you're using jQuery version 1.7.1.

A lot has changed within jQuery since version 1.1. Looking inside Humanmsg, reveals all kinds of superseded methods. Using .bind, for example, where jQuery 1.7 prefers the new .on method.

You'll have to find a more up to date plugin as I would not recommend using jQuery 1.1 with today's browsers.

You could try adding the easing plugin, or just the one easing function, but you still have the much larger issue of your plugin being way out of date.

Upvotes: 0

j08691
j08691

Reputation: 207891

From the documentation for your plugin:

Humane Messages requires the jQuery javascript library. Also recommended, but not required, is the jQuery plugin, Easing; to give just the right bounce to the animations.

The easing plugin they use is at http://gsgd.co.uk/sandbox/jquery/easing/ which I don't see that you've included.

Upvotes: 1

Related Questions