ArticlesLinksMake a PayPal Contribution to remove Script CopyWrite notices or for Non-Commercial use!
All scripts are licenced:
|
DescriptionAugust 11 2008 - Updated: Totally javascript Book Flip for page turn effects.Sound Manager is the only Flash component courtesy of Scott Schiller (schillmania.com). Ideal for Online story books as a teachers aid or just for fun. Now has the ability to utilize html within each page and still maintain proper layout. Place any html code within the books pages - div id="myBook". Each code block within the myBook div will be treated as a seperate page. Setting are adjustable in the script. Download Zip ExamplesMyer CatalogFun with Borders Gratitude Free LicenceThis Script is wholly developed and owned by CoastWorx.com. Copywrite: http://wwww.coastworx.com/ Licenced under Creative Commons - Non Commercial | Legal Code for Non Commercial use.
- You are free to use this script so long as all copywrite notice/s stays intact in its entirety.
Commercial Licence per Domain:A Commercial Licence has the same conditions as a non-commercial licence with these exceptions:
CommentsVic: Hello Will..Thanks for the great script! I have no problems running the script on my desktop, but it is pretty slow in my iphone. Do you know what is the cause and how to fix it? Thanks alot! Will: @Vic - IE8? Seems like the worst browser ever from developers point of view :(
- Try "Compatability View". Deborah: will, great script. I would like to use this script for a business dirctory. It is possible to place two images on a page, adding a small amount of space in between? basically two business cards Will: @Deborah: Sure is. Fundamentally this is why i developed the script with html/js so full control is given as to what displays on a page as opposed to flash bookflips which mostly rely on full page images with little interaction.
- Simply place your html inside each pages div.
- Thanx for the compliment on the script :) Isabelle: Great script! The only problem I'm having is that I made a pop up and now the two pages don't show exactly in the middle, I mean, when the first page flips over, there's more space to the left. Any suggestions? Isabelle: Me again! I have another problem: I can't see the entire album (except for the last one) on IE explorer. But I can on Firefox and Opera. But I can see the on you have on the site on IE. All I did was substitute the text for my pics and I changed their size. I also removed the text on the pictures. any suggestion on what am I doing wrong?? Isabelle: Problems solved!!!! Jeff: Hey Will, love the script, and had a question on removing the page shading. Earlier posts state adjusting the alpha filter settings in the js, but when I do that, the whole left side (page) goes black. It looks great in everything except IE. Can you shed a little more light on how I can adjust that setting? Here is the line I'm editing:
- original.style.filter ="progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=30, Style=1, StartX=80, FinishX=100, StartY=0, FinishY=0)"; Will: @Jeff, the "original.style.filter..." line is only there for ie6 which doesn't support png transparency. If your not worried about ie6 the comment(//) out the lines //if(document.all){
- //original.style.filter...
- //}else{ and the closing brace} for the if statement. Will: @Jeff-2, if you want to keep the filter modify StartX=80, 80 meaning start the shadow from 80% from left edge and continue to 100%(all the way).
- Its a little tricky to explain: http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx Marko: Hi Will, love the script and thank you a lot for providing, however I'm facing a difficulty regarding Firefox 3 and IE8 where the pages are flipping very slowly.
-
- The issue is not that I have too many pages or additional functions slowing the site down considering I'm having this problem in the demo itself.
-
- Hard for me to understand especially considering that same demo works perfectly fine on your page which I'm viewing with Firefox 3. Will: Hi Marko, agreed. Works fine for me in firefox and ie7, however somewhat slower in IE8.
- If you click compatibility view in ie8 it runs better because its running under ie7 etc the.
- Not sure what can be done for ie8 as the code is already cross browser valid, so i can only guess without completly disecting and testing under ie8 as to wether its ie8's javascript engine or something else. Matthew: Hi there! I just found this, and I'm stoked to see a JavaScript alternative to the Flash page flippers. Great work. Will: Due to IE8's js engine rendering slowly i have started on a newer version - which is still a work in progress - that utilises the css "clip" property to cut down on the number of animations required.
- Ajax calls are used to dynamically load the html content of each page and cut down on the amount of created html element. Iframes could be used but unfortunatly FFox displays a flicker when animating iframes.
- Here's a demo: http://coastworx.com/divs/clip.html Sonya: Hi Will! Thanks for the script. I have a book that's got about 80+ pages, and moves slowly on some browsers. I saw in previous comments that too many pages can be a problem (due to rendering the animation?). Any chance that reducing the sizes of the background image files would help matters? Thanks for any input. Will: Hi Sonya, try it with the background images removed and see how it goes, but yes 80 is really a large load on the browser even without images. The book is best with less than 20 pages.
- Ideally an ajax solution is required for larger books. Mei: Thanks for the greate script, Is there any way to RTL it (paging from right to left for hebrew and arabic)? Will: @Mei,i guess you could setup the script to open at the last page. See previous posts regarding autoFlip(); marry: hi , if i want to link up my page top menu to flip page than how can i give link for e.g.
-
- home page is on my top menu if i have to link without using dropdown to give it href link then how it can possible please replay............ marry: hi,i m using this filp book for dynamic content from mysql so can u give me suggestion how can i give paging in page or how van page height is taken auto so page is go long or no need for paging so please reply me.... Will: http://www.coastworx.com/bookflip.php?autoflip=5 new guy 01: wow will must be hard. ill find this very useful thanks Ivneet Singh: WOW, ITS NICE Kristopher: Hey Will,
-
- Awesome work! How to I link an <a href> to autoflip directly to a certain page within the book. I see the bookflip.php?autoflip=5 link for PHP, but is there a way to do it for basic html links? Will: @Kristopher: <h1><a href="http://google.com" target="blank" onclick="autoFlip(5);return false;">Aye-Aye Captain.</a></h1>
- <input type="button" value="Inputs/buttons are ok too" onclick="autoFlip(5);"> Corey: This is awesome. I'm wondering whether it's possible to tweak this so that when using an HTML link to jump to a page, it can animate to that page instead of just jumping there. Will: @Corey, use doIncrementalAutoFlip = true; Corey: Thanks, Will! Unfortunately, that seems to make the HTML links buggy; you have to click on the link more than once to get to the desired page. Check out the sample I've linked in my name - the only alterations from your demo are the addition of a link to page 10 in two places: one in the text on the book's front page, and one underneath the book. They both behave identically, and the problem persists across all browsers. (I tested in IE8, Firefox 3, Chrome 3, Opera 9 and Safari 4) Confounding! Anonym: In fact, I've discovered that this bug also affects the drop-down page selector; if doIncrementalAutoFlip=true, you have to select the same page several times before it will turn all the way there. For example, if I try to jump right to page 14 with the drop-down, it stops at page 7. I select 14 again, and it stops at 11. Select 14 a third time and I finally get to the page 13-14 spread (though the drop-down reads "13" unless I select 14 one more time). Is anybody else seeing this behavior? Will: Its not a bug as such!
- The script is undermined by the browsers speed capability...what you are seeing is the browsers js-engine failing to keep up with the script.
- FireFox keeps up, but since the inception of IE8, IE fails to keep up with basic page turn animation and in Compatability mode IE7 now has issues keeping up too. Script is fine in IE6; IE7(stand alone) and FireFox. Corey: Thanks, Will. I had tested in every browser and saw the same behavior, but I had them all open at the same time. When I test with one open at a time, Firefox and Opera work much better (but still hang a page short now and then); IE8, Safari and Chrome still hang the same way. Ah well. I don't suppose it could be gotten around with a tweak that would animate directly to the chosen page rather than flipping through all the in-between pages? Will: You mean like the default setup doIncrementalAutoFlip = false is the best i can do.
- For those interested here is barebones example using Ajax and animation is far better(opera is an issue) across browsers.
- Note, for ajax function, some browsers need script to run via a server.
-
- http://coastworx.com/divs2/clip.html Anonym: Awesome. I await the full bells'n'whistles Ajax version both eagerly & patiently. :) You are doing great work providing something I've been looking for for ages. Abitha Banu: hi!Thanks for your Code.Am using big image which size aroung 655kb.Is it possible to put loadng message on each page or loading message untill all pages(42) get downloaded? pls guid me. Swetha: Hi Thanks for your wonderful script....I need one help. I want to start the flip automatically. But i don't how to set this..Please help advance thanks for your help... Jim: Any idea of how to have the pages flip automatically? I would like to have a 5 second delay and then the page flips. Is this possible? Thanks in advance for any help. Brad: Anyway to have a slight curl at top end of the page ? Anonym: "Anyway to have a slight curl at top end of the page ?"
-
- By putting a curl yourself on the corners of your background graphics. Jazzer: I just downloaded this and congrats Will...nice work. No complaints here just wondering how I can pad the text on the pages so they don't run right to the edge or center. Say 10 pixels left and right on each page would work fine. Thanks.
- Jazzer Anonym: Jazzer, just use CSS formatting on the page divs or, if CSS ain't your style, add a table with cell padding inside each div. Pretty easy to Google it if'n you don't know how. The great thing about Will's script is you can do pretty much anything to the page divs that you can do with normal HTML or CSS. Jazzer: I'm fine with html and OK with css but after several hours of attempting to add some padding to each page and searching online for answers I came back here to ask. Anonym: Weird. So adding style="padding-left:10px; padding-right:10px" to the page divs (or a class defined as such) didn't work for you, and neither did adding a table where cellpadding="10"? Dunno what to tell you; works just fine for me, and Will hasn't been commenting here lately. Jazzer: Well then I guess you have nothing more to tell. I "understand how" to write the code but regardless of where it's applied I am not seeing the end result of padding. I am refraining from adding tables. I'll move along now. Will: Jazzer, adding padding to a div is the same as adding padding to any div eg.padding:10px; its up to you however to ensure you page contents stay within the confines of the page width & page height(pWidth, pHeight) settings. I'd recommend a child div and apply the padding to that: <div name="Home" style="background:#055123 url(spongebob300/page0.jpg);color:#ffffff;">
- <div style="padding:10px;" align=center>
- <h1>Are You Ready Kids?</h1>
- </div>
- </div> Michael: Awesome script Will I'm not so hot on the coding side but im trying to get into it. the problem im having is when i add new pages it wont allow me to turn the page when i click on it. i know this is a bsic question but can you help please. thanks Michael: And if it helps in the drop down menu i can see the page 10 but it only goes as far as page 9 and then stops and displays page 9 in the drop down menu :s Will: I can only guess, go back to the original script to eliminate all introduced errors and add you new pages one by one until the problem presents itself. Michael: Thanks im not sure why but i seem to have to add 2 pages as opposed to 1 to make it work. Although I think that make sense in my head all of a sudden. Thanks Josh: Hey, I've been working with this code for a week and i got a book with 35 pages. For some reason it won't display anything past 15 either in the drop box to select a specific page or when you hit next to go past page 15. Any clue why? Will: check your html code for each page for properly closed divs etc..., there is no limitation inbuilt, only browser limitation. 50 of 134 comments (part 1) [ » ] [ * ]
|