Uncaught TypeError: Object #<HTMLElement> has no method 'webkitEnterFullScreen'
I'm trying to use the html5 fullscreen api in a popup window, but I keep getting this error:

    Uncaught TypeError: Object #<HTMLElement> has no method 'webkitEnterFullScreen' 

and here is my html :

    <html lang="en"><head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Negar - one</title>
            <script type="text/javascript" src="/Negar/js/jquery-1.7.2.min.js"></script>
            <script type="text/javascript" src="/Negar/js/viewer.js"></script>
            <style type="text/css">
    		#main-content{height: 100%; width: 100%; position: absolute;
    			-webkit-transition: -webkit-transform 1s ease-in;
    			   -moz-transition: -moz-transform 1s ease-in;
    				-ms-transition: -ms-transform 1s ease-in;
    					transition: transform 1s ease-in;
    			}
    		</style>
        </head><link rel="stylesheet" type="text/css" href="data:text/css,">
    
        <body>
            <section id="main-content">   some code here   </section>
        
    </body></html>

and this is my function : 

    $("#main-content").get(0).webkitEnterFullScreen();
Uncaught TypeError: Object #<HTMLElement> has no method 'webkitEnterFullScreen'
===

I'm trying to use the html5 fullscreen api in a popup window, but I keep getting this error:

    Uncaught TypeError: Object #<HTMLElement> has no method 'webkitEnterFullScreen' 

and here is my html :

    <html lang="en"><head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Negar - one</title>
            <script type="text/javascript" src="/Negar/js/jquery-1.7.2.min.js"></script>
            <script type="text/javascript" src="/Negar/js/viewer.js"></script>
            <style type="text/css">
    		#main-content{height: 100%; width: 100%; position: absolute;
    			-webkit-transition: -webkit-transform 1s ease-in;
    			   -moz-transition: -moz-transform 1s ease-in;
    				-ms-transition: -ms-transform 1s ease-in;
    					transition: transform 1s ease-in;
    			}
    		</style>
        </head><link rel="stylesheet" type="text/css" href="data:text/css,">
    
        <body>
            <section id="main-content">   some code here   </section>
        
    </body></html>

and this is my function : 

    $("#main-content").get(0).webkitEnterFullScreen();