Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Turn.js - TypeError: parent.offset(…) is null


Level 1

I am getting the following error when trying to run turn.js on a server. On my local machine via the browser it is working perfectly. My issue is occurring when I am trying to deploy it on a server.

I am using the same basic.js and basic.css code provided in the basic example folder. I have a server path to all the turn.js files in the framework. I only changed the path of the three files in the yepnope section to the server paths. The jquery and modernizr are referenced via the server. I can see that the all the js and css files are loaded in the browser from the server.


TypeError: parent.offset(...) is nulldata.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 Replies