Using jquery with OO Javascript

Question

I'm trying to çreate a jquery popup script OO style. I'm doing this because I would like to expand this code with more jquery/javascript without losing oversight. The errors I'm receiving are Object #<HTMLDivElement> has no method 'centerPopup' and Resource interpreted as Script but transferred with MIME type text/x-c: I'm new to OO javascript, but have quite the experience in OO PHP

function popup(){

    var popupStatus = 0;

    $(document).ready(function () {
        $("#button").click(function()
        {
            this.centerPopup();
            this.loadPopup();
        });

        $("#backgroundPopup").click(function()
        {
            this.disablePopup();
        });

        $(document).keypress(function(e)
        {
            if(e.keyCode==27 && popupStatus==1)
            {
                this.disablePopup();
            }
        });

    });

      this.loadPopup = function (){
        if(this.popupStatus==0)
        {
            $("#backgroundPopup").css(
            {
                "opacity": "0.7"
            });
            $("#backgroundPopup").fadeIn("slow");
            $("#popupContact").fadeIn("slow");

        this.popupStatus = 1;
        }
    }

    this.disablePopup = function (){
        if(this.popupStatus==1)
        {
            $("#backgroundPopup").fadeOut("slow");
            $("#popupContact").fadeOut("slow");
            this.popupStatus = 0;
        }
    }

    this.centerPopup = function (){
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var popupHeight = $("#popupContact").height();
        var popupWidth = $("#popupContact").width();

        $("#popupContact").css(
        {
            "position": "absolute",
            "top": windowHeight/2-popupHeight/2,
            "left": windowWidth/2-popupWidth/2
        });

        $("#backgroundPopup").css(
        {
            "height": windowHeight
        });
    }
}

var popup = new popup()

<!DOCTYPE HTML>

<html>
<head>
<link rel="stylesheet" href="css/popup.css" type="text/css" media="screen" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/popup2.js" type="text/javascript"></script>
</head>
<body>

    <center>
        <div id="button"><input type="submit" value="Popup!" /></div>
    </center>

    <div id="popupContact">
        <a id="popupContactClose">x</a>
    </div>

    <div id="backgroundPopup"></div>

</body>
</html>

possible duplicate of Overwritten "this" variable problem or how to call a member function? — Felix Kling
– Felix Kling, Commented Apr 7, 2013 at 17:40
This question is similar to: What is the simplest & shortest way to access outer this from inside callback in javascript?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Aug 3, 2024 at 16:08

Zeta · Accepted Answer · 2013-04-07 19:30:58Z

2

 $("#button").click(function()
        {
            this.centerPopup();
            this.loadPopup();
        });

this isn't what you actually think. It's not the instance of popup, but the DOM element (#button). You can fix this by saving a reference on your instance at the beginning of your class:

function popup(){
    var self = this;
    this.popupStatus = 0; // you should use `this` here

    $(document).ready(function () {
        $("#button").click(function()
        {
            self.centerPopup();
            self.loadPopup();
        });
/* ... snip ... */

answered Apr 7, 2013 at 19:30

Zeta

106k13 gold badges205 silver badges249 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using jquery with OO Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related