100% width and height of booklet

Hi,

Version 1.1.2 is now fully responsive.

Thanks!

Thanks!

It looks like the combination of the booklet being responsive and inserting a width and height for display ratio/proportion is not working correctly.
See the item at: https://www.kenmerkonline.nl/lespakket/slager-de-klas.
When clicking a modal panel with 100% height and width is being opened, but the booklet height is higher than the modal panel (popup)…

Could you let me know what’s going wrong? Thanks.

Hi,

The actual size of your images is 724×1024 pixels. Have you tried inputting that into the booklet properties?

Thanks!

Yeah i already tried that one. They are now 724x1024px. on a wide screen they are cropped of at the bottom. It looks like they don’t scale down or something?

Could it be because i’m loading it inside an iframe? Do you have experience with this?

I’m also getting an error (Uncaught TypeError: undefined is not a function ) in the following code. Looks like the element “.wp-booklet-popup-trigger a” does not exist?

/*—– Set up popups —–*/

booklet.find(“.wp-booklet-popup-trigger a”).wpcolorbox({
rel:”wp-booklet-popup-5360b09f018a9″,
maxWidth:”100%”,
width:”100%”,
scalePhotos:true
});

Hi,

1. Yes, the booklet appears cropped because #cboxContent has a fixed height. The booklet loads correctly at https://www.kenmerkonline.nl/lesmateriaal/docentenhandleiding-slager-in-de-klas?width=&height=

2. The Javascript error will be corrected on the next version.

Thanks!

Hi Binary,

First thanks for the support and your quick replies.

In response to your last reply I checked what you were saying but I don’t think your plugin is calculating the correct height here. I adjusted the styling of all surrounding elements of the booklet. On widescreen monitors all containing elements have, for example a height of 680px even your “.wp-booklet-container-default” div has these dimensions of 680px but the “.wp-booklet-default” div which contains the calculated width and height for the booklet has a height of 780px. This is the reason why the pages are not totally visible within the iframe.

How is the height calculated? It looks like it just isn’t right.
Check the url again at: https://www.kenmerkonline.nl/lespakket/slager-de-klas

Thanks.

Frank

Ps. When do you think you will upload a new version again?

I just noticed that the height of my page doesn’t even matter for the calculated height. The height is always 760.2209px if the width of the screen is 1075px.

This doesn’t seem to be right?

Shouldn’t you check in each situation if the width of the container or the height of the container is leading for the calculation? For example if the height of the container is the limiting factor than you should calculate the width by using the height as a starting point.
If the width of the container is the limiting factor than you should calculate the height by using the width as a starting point, right?

I hope this will help you in coming up with a solution for this problem, Thanks.

Hi,

The booklet resizes based on the width of the container, not its height. The ability to resize according to the height of the container will be added to the next version.

Thanks!

Hi Binary,

Thanks again for the fast reply.
When do you think the new version will be releases?
I need this functionality for my client at short notice.
Is it possible you let me know what piece of code needs to be adjusted and how? Or point me in the right direction so i can fix this as soon as possible?

Thank you very much!

Frank

Hi,

The code that handles responsiveness is located at/wp-content/plugins/wp-booklet/includes/booklet/booklet.php lines 140-144. This block is automatically called on browser resize.

Line 140: Gets the width of the content area.
Line 142: Change the width of booklet (excluding arrows and thumbnails)
Line 143: Change the height of booklet (excluding arrows and thumbnails)
Line 144: Change the width of the thumbnails

Since the plugin uses jQuery Booklet, you may also refer to https://builtbywill.com/code/booklet/documentation for more info.

I plan to release an update not later than the end of this month.

Thanks!

I changed the responsive code to this to make it work:

/*----- Make booklet responsive -----*/

		resizeBooklet();
		jQuery(window).resize(resizeBooklet);
		function resizeBooklet() {

			jQuery(booklet).each( function(i,v) {
				var allowedWidth = jQuery(v).parent().parent().width();
				var allowedHeight = null;

				//if (jQuery(v).parent().find(".wp-booklet-thumbs-default") ) {
				<?php if ( $properties['wp-booklet-thumbnails'] == 'true' ) { ?>
					//thumbsHeight = 124 + 40;
					thumbsHeight = bookletThumbsContainer.height() + 60; // 60 = 2x10 padding + 2x20 margin
					console.log ("thumbsHeight: " + thumbsHeight);
					var allowedHeight = (jQuery(v).parent().parent().height() - thumbsHeight);
				<?php } else { ?>
					var allowedHeight = jQuery(v).parent().parent().height();
					console.log ("else")
				<?php } ?>

				var wRatio = (allowedWidth - bookletSide * 2) / (pageWidth * 2);
				var hRatio = allowedHeight / pageHeight;

			    resizeRatio = Math.min(wRatio, hRatio);
			    newHeight = pageHeight * resizeRatio;
			    newWidth = pageWidth * resizeRatio;

				jQuery(v).wpbooklet("option","width",(newWidth * 2));
				jQuery(v).wpbooklet("option","height",newHeight);
				jQuery(v).parent().find(".wp-booklet-thumbs-default").width( allowedWidth - bookletSide * 2 );

			});
		}

Hey guys.
Hoping that by jumping on the tail of another thread, I will get someone to see this.

I tried using the above info and i am still having a hard time making this plugin do what I want it to do.

I am trying to make it viewable on a smartphone. Here is what it looks like currently:
https://www.currentcreation.com/?p=1907

I was hoping that I could simply remove the code for the carousel on the bottom and it would dynamically enlarge the book to fill the space, however that didn’t work.

Changing the admin area that says not to show the carousel works for removing the carousel, but still the book remains small and in its little space. As if the carousel area is still being kept open.

I want that book to take up the area where the book and carousel are so that it will be large enough to be viewable and flippable, but then click to enlarge the images in the popup to really be able to read the pages.

For some reason, no matter what I tweak, the main book still remains small. I have tried playing with the css, and the page that the booklet is displayed on. I tried tossing the page into another HTML page/iframe. Nothing is working for me.

The arrows are staying at a good size, but the book just won’t stay big on the little screen.

Any ideas?