JQuery .center is not a function

Question

I am working on JQuery. I am getting this error. I ma trying to find out the root cause but i am not able to find it. If any one can help me out that would be really great.

JS ERROR:

Uncaught TypeError: $(...).center is not a function
at HTMLDivElement.<anonymous> (myjs:879)
at HTMLDivElement.opt.complete (jquery-1.8.3.js:9154)
at fire (jquery-1.8.3.js:974)
at Object.add [as done] (jquery-1.8.3.js:1020)
at Animation (jquery-1.8.3.js:8719)
at HTMLDivElement.doAnimation (jquery-1.8.3.js:9034)
at Function.dequeue (jquery-1.8.3.js:1895)
at HTMLDivElement.<anonymous> (jquery-1.8.3.js:1938)
at Function.each (jquery-1.8.3.js:611)
at init.each (jquery-1.8.3.js:241)

My Script:

function centerdiv() {
    $('#id').show(0, function () {
         $('#id1').css('z-index','5');
        $('body').css('overflow', 'hidden');
        $('.class').center();
    });
}

All JQuery functions are working and i am not sure why it is stating .center as not a function.

There's even such function like `.center()` at jQuery? I only knew about `.position()` from jQuery UI script. It's your own written function? — Jakub Chlebowicz, Mar 28 '17 at 23:16
Yes there is a function called .center in JQuery @JakubChlebowicz — step, Mar 28 '17 at 23:22
I could not even find it at jQuery API. :/ It could be there as long as you add it by yourself to `jQuery.fn` prototype — Jakub Chlebowicz, Mar 28 '17 at 23:25
@step The docs for jQuery and jQueryUI do not mention this `.center` function at all, and google isn't finding it either. This points to it being a local function you've defined somewhere. Look for library files that are included in the other JSP files but not in this one. It is probably defined somewhere that you are not currently loading in this page. — Dan Lowe, Mar 28 '17 at 23:26
Did you happen to take the `center` function from [this StackOverflow answer](http://stackoverflow.com/a/210733/1138058)? — Roberto Linares, Mar 28 '17 at 23:49
@RobertoLinares Probably not the original poster, but the people who worked on the code before him. — Ringo, Mar 29 '17 at 00:50

score 2 · Answer 1 · edited May 23 '17 at 11:54

Your error is telling you that there is no $.center(). But, you can make one!

Here's an example by from this answer by Tony L.

jQuery.fn.center = function(parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "absolute",
        "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
        "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
return this;
}

$("div.target:nth-child(1)").center(true); // Center relitive to parent
$("div.target:nth-child(2)").center(false); // Center relitive to window

div.container{
    width:200px;
    height:200px;
    border:1px solid #555;
    position:relative;
    top:10px;
    left:10px;
}

div.target{
    width:60px;
    height:60px;
    color:white;
    background:rgba(30,30,30,.7);
    border-radius: 10px;
    text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="target">1<br>parent</div>
    <div class="target">2<br>window</div>
</div>

It's nice you provided this answer, but do you really want two versions of **$.center()** floating around in one codebase? Seems like potential for great confusion in the future, especially if the two versions don't do exactly the same thing. — Ringo, Mar 29 '17 at 00:00
@Ringo what two `$.center()` methods? jQuery doesn't come with a native method. — Aaron N. Brock, Mar 29 '17 at 00:09
If you read the OP's replies to my answer below, you can see that there's a good chance that someone has already added a $.center() to that codebase. — Ringo, Mar 29 '17 at 00:43

score 0 · Answer 2 · edited May 23 '17 at 12:10

0

The error means $.center() is not a jQuery method you can use. Instead of trying to call a method that doesn't exist, you have to change the CSS to center something. For example:

Centering a div vertically & horizontally using jQuery

You can create your own center method, but you cannot just call $.center() because it doesn't exist.

edited May 23 '17 at 12:10

Community

1
1

answered Mar 28 '17 at 23:17

Ringo

5,097
3
31
46

Thanks for the reply. But in the other jsp's i am using the same function to center. So i believ $.center() exists. – step Mar 28 '17 at 23:21
1

You need to try to find the method .center() in your codebase. Search through all your javascript files for ``function center`` (or just ``center``). It's quite possible you're using two different versions of jQuery -- and that $.center() is a custom function added to one version and not to the other. – Ringo Mar 28 '17 at 23:25
Or it's possible that the other JSPs are including javascript libraries that your new JSP isn't. Make sure you're including the library that contains the definition of $.center() – Ringo Mar 28 '17 at 23:31

JQuery .center is not a function

2 Answers2