LUCIENNECQ
New Member
I want to make a zoom like PDF with JQuery, but i dont know what am i doing wrong!, The math works with less than 100 pages, but with more pages start behaving extrange, I think it could be something with the decimals!, but i have seen aplications with the same functionality, and work perfect!. What am i doing wrong?The pages in the example are fixed 100*100, in order to be easier.Thanks.This is the Html:\[code\]<input type="button" id="Create" value="http://stackoverflow.com/questions/10696182/Create" /><div style="width: 100px;"> <div id="slider"> </div></div><div id="ViewerContainer"> <div id="Layer"></div>\[/code\]This is the Scripts (JQuery):\[code\]$(function () {var ViewerContainer = $("#ViewerContainer");var OldPercentage = 1;var PaddingDown = 10;var PercentageInput = $("#Percentage");$("#slider").slider({ value: 100, min: 10, max: 200, slide: function (event, ui) { var Percentage = ui.value / 100; PercentageInput.val(Percentage); var RealScrollTop = ViewerContainer.scrollTop() + (ViewerContainer.height() / 2); var RealHeight = 100; var RealWidth = 100; var Top = RealScrollTop / (RealHeight + PaddingDown); var TopPagesCount = Math.floor(Top); RealScrollTop -= TopPagesCount * PaddingDown; RealScrollTop /= OldPercentage; RealScrollTop *= Percentage; RealScrollTop += TopPagesCount * PaddingDown; $(".Page").css({ width: RealWidth * Percentage, height: RealHeight * Percentage }); ViewerContainer.scrollTop(RealScrollTop - (ViewerContainer.height() / 2)); OldPercentage = Percentage; }});$("#Create").click(function () { var Layer = $("#Layer"); for (var i = 0; i < 1000; i++) { var Div = $("<div class='Page'>" + i + "</div>"); Layer.append(Div); }}).click();\[/code\]});And CSS\[code\] <style> #ViewerContainer { width: 100%; height: 500px; overflow: auto; } #Layer { width: 500px; background-color: Gray; margin-left: auto; margin-right: auto; } .Page { background-color: White; margin-bottom: 10px; height: 100px; width: 100px; }</style>\[/code\]