Turn.js - TypeError:parent.offset(...)为null

时间:2015-09-04 04:29:05

标签: javascript jquery css html5

尝试在服务器上运行turn.js时出现以下错误。在我的本地机器上通过浏览器它完美地工作。当我尝试在服务器上部署它时,我的问题就出现了。

我使用的是基本示例文件夹中提供的相同basic.js和basic.css代码。我有一个服务器路径到框架中的所有turn.js文件。我只将yepnope部分中的三个文件的路径更改为服务器路径。 jquery和modernizr通过服务器引用。我可以看到所有的js和css文件都是从服务器加载到浏览器中的。

错误:

TypeError: parent.offset(...) is null
data.fwrapper = $('<div/>', divAtt(parent.offset().top, parent.offset().left)).

HTML CODE:

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>

<meta name="viewport" content="width = 500, user-scalable = no" />
</head>
<body>

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
            <div> Turn.js </div>
                    <div> Page 1 </div>
                    <div> Page 2 </div>
        </div>
    </div>
</div>

<script type="text/javascript">

function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({
            // Width

            width:922,

            // Height

            height:600,

            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true

    });
}

// Load the HTML4 version if there's not CSS transform

yepnope({
    test : Modernizr.csstransforms,
    yep: ['/apps/chacha/components/content/flipbook/clientlibs/js/turn.js'],
    nope: ['/apps/chacha/components/content/flipbook/clientlibs/js/turn.html4.min.js'],
    both: ['/apps/chacha/components/content/flipbook/clientlibs/css/basic.css'],
    complete: loadApp
});

</script>

</body>
</html>

0 个答案:

没有答案