jquery re-initiating a function after page load

Question

I have a function from Turn4JS which generates a book user inteface on a website. The trouble is that the Javascript/JQuery details accept a book size of width and height in absolute pixels, rather than as a percentage or in any other format.

example:

$( document ).ready(function() {
    $("#guestbook").turn({
        width: 500, /* pixels */
        height: 360,
        autoCenter: true
    });
});

The trouble with this is that the website is mobile compatible (of course) and so the size of the book for a small smartphone device should be 300px width maximum, but obviously on larger screens that's going to look very small.

So, I run a media query on the Javascript to set the width/height values based on the browser size. I set this into a function that is fired on document ready as well as on windows resize and window orientation change

Jquery:

function guestbookSize() {
    if ($(window).width() > 1200) {
        $("#guestbookbook").turn({
            width: 700,
            height: 500
        });
    }
    else if ($(window).width() <= 1200 && $(window).width() > 801) {
        $("#guestbookbook").turn({
            width: 500,
            height: 360
        });
    }
    else if ($(window).width() <= 800 && $(window).width() > 360) {
       /* You get the idea */ 
    }
    else if ($(window).width() <= 360) {
        $("#guestbookbook").turn({
            width: 300,
            height: 360
        });
    }
}

$( document ).ready(function() {
    $(document).ready(guestbookSize);
});
$(window).on("orientationchange",guestbookSize);
$(window).resize(guestbookSize);

I'm pretty sure I'm coding this very poorly, but the document load call works, every time.

The window resize call does not work.

So my problem is this:

How can I re-initialise the options for the .turn function within the guestbookSize function without refreshing the whole page?

---

Notes:

• I am using JQuery 1.11.3
• I have read Refire ready event after AJAX reload which seemed similar but no luck.
• I have explored Turn4JS official documentation which is patchy at best.
• I did have two choices of either editing the Turn4JS jquery files to accept percentages which looked like a horrific job, or simply making the sizing of the given width/height dependant on client screen size/orientation.

---

Errors:

Errors encountered on firebug with re-establishement of turn options:

HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy

..xp("<(?:"+ea+")[\s/>]","i"),ha=/^\s+/,ia=/<(?!area|br|col|embed|hr|img|input|li...

Referencing line 4 of jquery.1.11.3.min.js .

Answer 1

I added event bindings inside the document.ready and removed the duplicates.

Seems to work - tested on on Chrome 48, FF 43, IE9 - they all worked (on Windows)

$(document).ready(function() {
  initBook(300, 400);
  $(window).on("orientationchange", guestbookSize);
  $(window).resize(guestbookSize);
});

function initBook(w, h) {
  $("#flipbook").turn({
    width: w,
    height: h
  });
}

function guestbookSize() {
  if ($(window).width() > 1200) {
    initBook(700, 500);
  } else if ($(window).width() <= 1200 && $(window).width() > 801) {
    initBook(500, 360);
  } else if ($(window).width() <= 800 && $(window).width() > 360) {
    initBook(400, 360);
  } else if ($(window).width() <= 360) {
    initBook(300, 360);
  }
}

/* to see book resize */

#flipbook {
  border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.turnjs.com/lib/turn.min.js"></script>

<h2>
Book
</h2>
<div id="flipbook">
  <div class="hard">Turn.js</div>
  <div class="hard"></div>
  <div>Page 1</div>
  <div>Page 2</div>
  <div>Page 3</div>
  <div>Page 4</div>
  <div class="hard"></div>
  <div class="hard"></div>
</div>
<hr/>