ryanseg Posted August 24, 2012 Share Posted August 24, 2012 (edited) Hello, I am trying to build a website, and never really done it before.It is a html5 website as it must work on mobile devices and uses the turn.js script.The website works like a book so you turn each page. The turn.js website has some examples of how the script can work and they have table on contents where you can click the title and it takes you to the desired section of the book.I have noticed that the url changes with each page change. My website works differently, I have each image load behind the other as you turn the page so the url does not change. Could someone please point me in the correct direction so that I can have the url change and how I can have the spot hyperlinks in the turn.js script as currently I can only make an entire page a hyper link.I would like to input a table of contents as there will be over 90 pages.Kind RegardsRyan Below is the current code for the website. <!doctype html><html><head><title> Lara Property Services </title><link type="text/css" rel="stylesheet" href="css/jquery.ui.css"></link><link type="text/css" rel="stylesheet" href="css/default.css"></link><link rel="icon" type="image/png" href="favicon.png" /><script type="text/javascript" src="jquery-1.7.1.min.js"></script><script type="text/javascript" src="lib/turn.min.js"></script> <style type="text/css">body{background:#ffffff;background-image: url(pages/pippy-oak_11.png);}#magazine{width:1152px; /*1152px*/height:752px; /*752px*/margin-left:160px;margin-right:160px;}#magazine .turn-page{background-color:#000000;background-size:100% 100%; }</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><script type="text/javascript">$(window).ready(function() { $('#magazine').turn({ display: 'double', acceleration: true, gradients: !$.isTouch, elevation:50, when: { turned: function(e, page) { /*console.log('Current view: ', $(this).turn('view'));*/ } } });}); $(window).bind('keydown', function(e){ if (e.keyCode==37) $('#magazine').turn('previous'); else if (e.keyCode==39) $('#magazine').turn('next'); });</script><div id="magazine" class="centerStart"><div class="hard" style="background-image:url(pages/Cover.jpg);"></div> <div class="hard" style="background-image:url(pages/01.png);"></div><div style="background-image:url(pages/02.png);"></div><div style="background-image:url(pages/03.png);"></div><div style="background-image:url(pages/05.jpg);"></div><div style="background-image:url(pages/06.jpg);"></div> <div style="background-image:url(pages/7.jpg);"></div><div style="background-image:url(pages/8.jpg);"></div><div style="background-image:url(pages/9.jpg);"></div><div style="background-image:url(pages/oldpage1.png);"></div> <div style="background-image:url(pages/11.jpg);"></div><div style="background-image:url(pages/12.jpg);"></div> <a href="mailto:xxxxxxxxxx@hotmail.com"><img src="pages/contact_us1.gif" alt="Contact Us" width="780" height="315" align="right"></a></div></body></html> Edited August 24, 2012 by ryanseg Link to comment Share on other sites More sharing options...
niche Posted August 26, 2012 Share Posted August 26, 2012 You should probably start here if you haven't already: http://www.turnjs.com/get Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now