search

blasten / turn.js

The page flip effect for HTML5
www.turnjs.com
Other
7.23k stars 2.48k forks source link

show/hide elements w/page turn #48

Open rimareda opened 12 years ago

rimareda commented 12 years ago

hi everyone,

as i've said before, i am a js novice. i'd like to hide an element on my page and show it when the book is opened/page is turned. i've been able to hide and show upon clicking a different element, but just trying to figure out how to tie it to a page turn? can anyone help?

thanks much!

tvanassche commented 12 years ago

You can either use the "turned" or "turning" events, depending on when you want to show or hide the button (see https://github.com/blasten/turn.js/wiki/Reference ).

You might still need to write some manual checks to see if the button needs to be disabled or not.

rimareda commented 12 years ago

what's the syntax for the 'turned' event and its options?

tvanassche commented 12 years ago

Oh, just noticed the examples were removed from the reference.

To bind the "turned" event, use following syntax:

$('#magazine').bind('turned', function (e, p, v) { //do stuff here //e = event //p = (current) page //v = new view });

rimareda commented 12 years ago

sorry to be annoying... basically what i'm trying to do is have an object appear when someone clicks to open the book i.e. with the first page turn. i don't know how to get it so that it only happens with the first page turn and then stays visible. as it is (below), the #ribbon reappears with every page turn. can you help?

$("#magazine").bind("turned", function(event, page, pageObject) { $("#ribbon").show("clip", {}, 1000); });

tvanassche commented 12 years ago

The code example you give will indeed cause the item to reappear on each pageflip. To prevent this, you'll have to check if the element has already been shown or not, and then show it if needed.

There are a couple of ways to do this:

a. Use a global variable in your script that you can use to check if the magazine has been shown or not.

var elementShown = false;

$("#magazine").bind("turned", function(event, page, pageObject) { if(!elementShown) { $("#ribbon").show("clip", {}, 1000); elementShown = true; } });

b. Check if the element is visible before trying to show it

$("#magazine").bind("turned", function(event, page, pageObject) { if($("#ribbon").is(":visible")) { $("#ribbon").show("clip", {}, 1000); } });

There are more ways to do this, but those are basically just rehashes of the above (for example using a cookie or a hiddenfield to store if the element has been shown already, but I wouldn't recommend those).

rimareda commented 12 years ago

thanks for your help with this! the other part that i need to do first though, is show the ribbon once the first page has been turned. i want the user to be able to click/drag the corner to open the book, and THEN have the ribbon appear, and stay visible.

tvanassche commented 12 years ago

I'm not sure I understand your last problem (maybe I'm misunderstanding something). What you're trying to do should be possible to program using the suggestions given above.

If you set the element to invisible (css "display: none;"), and then use the suggestions I gave earlier about storing the element's visibility state in a variable, it should work the way you want. It will only be displayed after the first pageturn and stay visible.

If I remember correctly, the "turned" event is executed after a pageturn has completed, or in other words after a page has completely turned. There is also another event called "end" that is executed after the "turned" event has run. It could be that these events have changed a bit in release 4, but I can't check that yet (still waiting for the "green light" from the administrative department at my dayjob to buy a license for version 4).