0

I am using the tunr.js Jquery plug-in to create a book in a Web Site I am doing. It is working fine, but the problem is with his dimensions. I can only change them in this part of the code:

$(document).ready(function(){
    $("#flipbook").turn({
        width: 1150,
        height: 805,
        autoCenter: true
});
});
</script>

But it is not letting me change the dimensions in pixels or % and I don´t know how to make it responsive. The url of the page in case you want to see it working is http://hdeprada.com/webs/Libros/index2.html

The problem I have is that I want it to resize to the entire screen in every device, so the book can be read. Anybody that can explain me what to do?

Thank you very much in advance!

Hector de Prada
  • 33
  • 1
  • 7
  • The page you are sharing is not responsive (as you say). You can call this JS code you have shared on window resize with jQuery with different heights and widths for different window sizes – Ashwani Goyal Jun 05 '15 at 12:41

1 Answers1

0

Use height() and width() like

$(document).ready(function(){
    $("#flipbook").turn({
        width: $(window).width(),
        height: $(window).height(),
        autoCenter: true
});
});

$(window).width() and $(window).height() will get the viewport dimensions

AmmarCSE
  • 30,079
  • 5
  • 45
  • 53
  • That gets the dimensions perfectly. However I have tried the web site in my android device and the script is not working anymore; the pictures just appear one bellow the other. And in the computer it just takes all the screen, I would like to set the dimension to an 80% or something like that but it does not do it when I do it whit the css styles. – Hector de Prada Jun 05 '15 at 16:02
  • @HectordePrada, why not multiply by .8 like `$(window).width()*0.8`? – AmmarCSE Jun 05 '15 at 16:08
  • Yeah that works perfectly. Thank you, I didn’t know that. However, the problem now is that the height does not keep the proportion with the width. Do you know what can I do? – Hector de Prada Jun 05 '15 at 16:20
  • multiply the height by .8 too? `$(window).height()*0.8` – AmmarCSE Jun 05 '15 at 16:22
  • I tried that but it does not work either because the image gets cut. I think this is because the book is taller than wither, and it is taller than the width. I would like the height to be automatic so it resizes to be right in proportion with the width. Is that possible? – Hector de Prada Jun 05 '15 at 16:26
  • @HectordePrada, its hard to help without a concrete example. Can you put up a fiddle? – AmmarCSE Jun 05 '15 at 16:28
  • Not sure what is a fiddle. But if you enter in the site you can check it out. The script is the only thing in the page. http://hdeprada.com/webs/Libros/index2.html – Hector de Prada Jun 05 '15 at 16:32
  • @HectordePrada, try `$(window).height()*0.69` – AmmarCSE Jun 05 '15 at 16:35
  • I have tried everything until $(window).height()*0.85 worked in my screen. However, I tried in a smaller one and it is too tall. I think the only way to do it is to associate the height to the width so it resizes itself depending on the width. But I have no clue on how to do it. I have tried height:auto, but it is obiously not working – Hector de Prada Jun 05 '15 at 16:46
  • @HectordePrada, dont know if these would help http://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio or http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/ – AmmarCSE Jun 05 '15 at 17:01
  • Can´t solve it with that neither. I just can´t get the height to change with the width in the script, so it is always in the wrong proportions. It does not look like it is working like an image. Thank you anyway! – Hector de Prada Jun 05 '15 at 18:07