วันอังคารที่ 26 เมษายน พ.ศ. 2559
Auto scrolling pdf viewer
เราพบว่าไฟล์ pdf เวลานำมาแสดง ถ้าไฟล์เป็นหน้าที่ยาวเกินหนึ่งหน้า เวลาออกหน้าจอข้อมูลองมันจะถูกแสดงออกมาไม่ครบแล้วผู้ที่มองเห็นผ่านหน้าจอคงไม่สามารถกดปุ่ม scroll เพื่อดูเนื้อหาที่เหลือเองได้ เราค้นพบแนวทางแก้ไขคือใช้ auto scroll โดยใช้ jquery วิธีการใช้งาน ดังนี้1. ดาวน์โหลด jquery มาไว้ในโฟลเดอร์เดียวกับไฟล์ที่เราจะเรียกใช้
2. ตัวอย่างโค้ดใช้งานเป็น ดังนี้
<!DOCTYPE html> <html lang="en"> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "jquery-2.2.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#reset").click(function(){ $("#iframeContainer").animate({scrollTop: 0}, 1); }); $("#auto").click(function(){ var position= 100; for (var i = 0 ; i < 60; i++) { $("#iframeContainer").animate({scrollTop: (position*(i+1))}, 10000); } }); }); </script> </head> <body> <p><button id="reset">reset</button></p> <button id="auto">auto</button> <div id="iframeContainer" style="width: 800px; height: 600px; overflow: auto;"> <iframe width="1040" height="6000" src="HCI-05.pdf" scrolling="no"> </iframe> //You have to know exact width and height of PDF file </div> </body> </html>
==
สมัครสมาชิก:
ส่งความคิดเห็น
(
Atom
)
ไม่มีความคิดเห็น :
แสดงความคิดเห็น