jquery easeOutBounce function missing in-spite of including jquery file

Question

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.

score 1 · Answer 1 · answered Feb 03 '12 at 17:40

1

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.

answered Feb 03 '12 at 17:40

j08691

204,283
31
260
272

As he already stated, he's using jQuery UI and [it already includes easing](http://jqueryui.com/demos/effect/easing.html) functions. You can see `easeOutBounce` [within jQuery UI here](https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js). – Sparky Feb 03 '12 at 17:45
@Sparky672 - However the documentation for that plugin does not mention jQuery UI at all. I realize that jQuery UI has easing incorporated (now), however based on the age of this plugin I doubt it used it for that, and it instead recommended the other easing plugin. – j08691 Feb 03 '12 at 17:48
It does not mention jQuery UI because jQuery UI probably did not exist (was first released in Sept 2007) when it was written... the plugin is a dinosaur and will likely never work no matter what other things he includes. – Sparky Feb 03 '12 at 17:49
I have tried included Easing plugin, the error is gone but message is still not fading out...I think i got to switch to other plugin!! – Terminal Feb 03 '12 at 17:56

score 0 · Accepted Answer · edited May 23 '17 at 10:34

0

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.

edited May 23 '17 at 10:34

Community

1
1

answered Feb 03 '12 at 17:40

Sparky

98,165
25
199
285

i am afraid u r right. Can u suggest any equivalent of humanmsg? – Terminal Feb 03 '12 at 17:59
@Terminal, I'm really not sure about your requirements or what this plugin was supposed to do. It's just a small amount of code. Go through it line by line, updating it to work with today's version of jQuery. Also see my link above about just using a single easing function without using a plugin... you could easily build the one easing function right into it. – Sparky Feb 03 '12 at 18:10

jquery easeOutBounce function missing in-spite of including jquery file

2 Answers2