iBooks on iPad - symbol jumping to top on first scene


symbol jump.hype.zip (1.8 MB)
Untitled.ibooks.zip (2.2 MB)

I’ve made a gallery widget which we have used extensively in iBooks without problems. However, in the attached iBooks file, the widget acts strangely. On each slide there are text entry fields which enable users to enter answers while they scroll through the slides. These are grouped as a symbol. On the first slide, only when the widget activates, the symbol jumps to the top of the scene under the image. If you go to the second scene and come back, all is well.

I’ve attached the Hype project this is taken from. I’ve had to remove some images to keep the file size low.

TIA for any ideas what’s going on here.


hmm… no takers eh?

(Loves Hype) #3

I am not taking it as I don’t develop iBooks-Widgets but I looked at your code and my huch would be that it has to todo with the load() method. There is no direct manipulation going on but maybe some of the classes you assign reset the position data. Have you tried excluding class interaction with a empty load method to see if the problem is Hype related or rather coming from CSS? Also you are using the standard CSS position method (top, left) rather then the hardware accelerated CSS translation (see Document-Panel). I guess this is duo to you using jQuery or iBooks? Two hints… hope they help!


thanks for that Max. You were on the right track.

I noticed that the function that puts the dots and arrows on the first scene wasn’t running properly. The arrow was there, but no dots. As soon as I added a class and a CSS top position to the symbol in the load function to force it to stay where I wanted it, all was good.

window.styleDotAndArrows = function() {
	$('.controls').style('top', '367px');

No idea why it was being forced up though as no styling was being applied to anything in the symbol on load so this is a work around not really a solution the problem.

(Jonathan Deutsch) #5

Do you mind sending the working version? I was taking a look and found some oddities in that the issue seemed to stem from this line in load():

$(this).html('<textarea id="textField' + counter + '" class="text-input" tabindex="' + counter + '" autocapitalize="all" oninput="saveText()">');

It seemed to be having issues with the form tag from what I could tell, but without a lot of debugging in that environment I couldn’t really see. So if you got it working I’d be curious about looking at a full diff of what you did!


you’re right. It seems to be an issue with adding a textarea or input into the existing inputs. I can add in other html and even give it the same class, but whenever I add textarea or change it to input, the jump occurs.

The version I ‘fixed’ was a workaround. It didn’t style the dots or arrows although it added the dots correctly, but given that it did allow the form to remain in place, it was good enough for the time being and against the deadline we’re working to. But if I can have both working, that would be ideal.

Seems strange that simply adding input to the inner html of each input would cause the entire symbol to move - and then only on the first scene on load.

(Jonathan Deutsch) #7

I think execution was halting at some point, so styles were not being applied. I tried putting items in a try/catch block, but that did not help… in fact if I added debugging messages they would not even be executed ahead of the line that set the inner HTML, which was quite puzzling. There are a few common causes I ruled out, but without a good debugging environment I came up empty as to the root issue.