[Challenge] turn.js book

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 2919 Views - Last Post: 12 August 2013 - 09:59 AM

#1 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

[Challenge] turn.js book

Post icon  Posted 07 July 2013 - 01:06 PM

Javascript Challange using the turn.js jQuery plugin.

This challenge will be to create the best looking/working book or magazine with turn.js v.3
because v.4 is not free and we want everyone to have the same chance to enter.

Lets call the last day for entries August 11th, after which voting will begin. This is meant to be fun so have fun with it.

Challenge requirements

  • HTML5, CSS, JavScript/jQuery ONLY
  • Book or Magazine should be 900px wide X 450px high
  • Any images should be stored online (IE. photobucket, imgur...)
  • All code should be posted to thread in spoiler tags for verification of rules along with a link to the hosted book.
  • Finished product must be hosted for all to see on the web

- possible, not limited to, free hosting


Some resources:
turn.js docs
Hosted turn.js
turn.js download

The winner will get a challenge badge for this competition.

Good luck and have fun.

This post has been edited by laytonsdad: 07 July 2013 - 01:07 PM
Reason for edit:: date change


Is This A Good Question/Topic? 3
  • +

Replies To: [Challenge] turn.js book

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: [Challenge] turn.js book

Posted 15 July 2013 - 03:00 PM

So it's been a little over a week and not a peep. Are any of you interested or am I going to be the only one posting an entry?

If you're thinking of entering a book/magazine, please post something to let us know.

Looking forward to some good entries.
Was This Post Helpful? 0
  • +
  • -

#3 MATTtheSEAHAWK  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 137
  • View blog
  • Posts: 782
  • Joined: 11-September 10

Re: [Challenge] turn.js book

Posted 17 July 2013 - 06:08 PM

Here's my small implementation.

I've been trying to get around to this, but I'm not much of a designer.

I mostly just worked on what I could functionally do with it. I had a version where the background was comprised of images, and that worked fine, but I took it back to just div'd up sections.

For work, I was actually working on a project that was looking for something along these lines, so that distracted me from the personal project aspect. I hope to design something soon for this.

EDIT: Wrote a blog post about it here: mattgray.net

This post has been edited by MATTtheSEAHAWK: 19 July 2013 - 07:53 PM

Was This Post Helpful? 1
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: [Challenge] turn.js book

Posted 17 July 2013 - 08:01 PM

I am glad to see I will not be the only entry. That is a great representation of Turn.js's purpose.

I will be uploading my version in a few days. I just need to make a few tweeks and upload it to my site.
Was This Post Helpful? 1
  • +
  • -

#5 MATTtheSEAHAWK  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 137
  • View blog
  • Posts: 782
  • Joined: 11-September 10

Re: [Challenge] turn.js book

Posted 18 July 2013 - 08:30 AM

I updated the link in my post above with a centered book (now with gray cover background!) and page navigation via a textbox. Type in 1, 2, 3, or 4 (the pages that exist) to go to one of those pages.
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: [Challenge] turn.js book

Posted 19 July 2013 - 12:03 PM

Ok, I am posting this so others that don't understand the use of turn can see some of the basics of the plugin.

I am posting this incomplete and will update it in a few days with a slide up box for controls.

For now take a look, you can use the arrow keys (l, r) or the plus and minus on the number pad to move through the pages. You can also click the go to links at the top.


Enjoy.

http://dpwebprogramming.com/dic/turn

Spoiler

:tt2:

This post has been edited by laytonsdad: 24 July 2013 - 05:48 PM
Reason for edit:: Update code

Was This Post Helpful? 3
  • +
  • -

#7 MATTtheSEAHAWK  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 137
  • View blog
  • Posts: 782
  • Joined: 11-September 10

Re: [Challenge] turn.js book

Posted 19 July 2013 - 06:57 PM

Nice job! My favorite parts are your json pages and the one page style you went with.

If anyone uses this in a larger project (like I plan to), JSON could be nice for handling the pages and displaying them. However, editing the HTML and script each time you add a new page could be troublesome, so I suggest something along the lines of handlebars templating. I used it recently in a work project and the each block helpers would be really useful in a situation like this.
Was This Post Helpful? 1
  • +
  • -

#8 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: [Challenge] turn.js book

Posted 19 July 2013 - 07:05 PM

I had it set up so all the pages were created from the .json page but it was having troubles using turn on the dynamicaly created pages and I scrapped it. then I realized you can start with one div cover page and add more with the addPage method. I may still play with this feature with .json so all you have to do is create the one div and it will add the next page when the turned page is "turning" and use that event.

There is a wealth of thing you can do with this plug in and I keep coming up with new ways I want to use it.

MATTtheSEAHAWK said:

each block helpers would be really useful in a situation like this.


Are you talking like this or this?

This post has been edited by laytonsdad: 19 July 2013 - 07:23 PM
Reason for edit:: added question

Was This Post Helpful? 0
  • +
  • -

#9 MATTtheSEAHAWK  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 137
  • View blog
  • Posts: 782
  • Joined: 11-September 10

Re: [Challenge] turn.js book

Posted 19 July 2013 - 07:55 PM

I am talking about the second link that you put.

Also, I was implementing a dynamically generated mobile page earlier this year with some javascript animations (it was swipe.js). I can't remember exactly how I fixed it, but it was either precompiling it, or putting the scripts in a different location in the file.

Also, I put a link to a blog post about this in my original post in this thread.

This post has been edited by MATTtheSEAHAWK: 19 July 2013 - 07:55 PM

Was This Post Helpful? 0
  • +
  • -

#10 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: [Challenge] turn.js book

Posted 21 July 2013 - 10:00 PM

I updated my link with some new key controls and a help menu.

To access the help menu press the h button.

Doing this has made me want to check out the version 4 to check out some of the features you can't use in the free version. I wanted to implement the zoom feature in the docs but it apparently is only available using v.4.

I am looking forward to more entries, I hope you all have not just passed this by, I had a lot of fun with it.
Was This Post Helpful? 0
  • +
  • -

#11 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: [Challenge] turn.js book

Posted 24 July 2013 - 05:50 PM

I Added another feature to mine. I added auto page turns by pressing "p" and stop auto turns by pressing "s".

I hope we will be getting more entries soon. :whistling:
Was This Post Helpful? 0
  • +
  • -

#12 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: [Challenge] turn.js book

Posted 01 August 2013 - 01:32 PM

So the end is a little more than a week away. I would suggest that if you plan to put in an entry now would be the time.

Good luck and have fun.
Was This Post Helpful? 1
  • +
  • -

#13 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3512
  • View blog
  • Posts: 11,994
  • Joined: 12-December 12

Re: [Challenge] turn.js book

Posted 01 August 2013 - 02:03 PM

I'd like to encourage your efforts, and enthusiasm, laytonsdad. It's not always easy to get people involved. I'm not involved with this current challenge - maybe a future one :bigsmile:
Was This Post Helpful? 1
  • +
  • -

#14 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: [Challenge] turn.js book

Posted 01 August 2013 - 02:07 PM

I look forward to your future involvement. I am going to keep going until it catches on. I think it is a fun way to experiment with new plugins and I plan to keep it going until I can't stand it anymore. :notify:
Was This Post Helpful? 0
  • +
  • -

#15 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: [Challenge] turn.js book

Posted 09 August 2013 - 09:50 AM

Two more days left to submit. Please get your entry in by the evening of the 11th as it will be closed after that. I hope to see a flood of entries soon. Get em in!
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2