When using both toc and continous scroleld view, the viewer jumps after navigation

[yuvalyellin]

Based on examples, used this code: After selecting a chapter, the correct page is displayed for a milliseconds, then scrolls down to the end of the chapter expected behavior - stay on the first page.

Is there some setting that can fix this?

<script src="../dist/epub.js"></script>

<link rel="stylesheet" type="text/css" href="examples.css">

<script>
	var $viewer = document.getElementById("viewer");
	var $next = document.getElementById("next");
	var $prev = document.getElementById("prev");
	var currentSectionIndex = 9;
	// Load the opf
	var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
	var rendition = book.renderTo("viewer", { flow: "scrolled", manager: "continuous", width: 600, height: 400});
	var displayed = rendition.display(currentSectionIndex);

	book.loaded.navigation.then(function(toc){
		var $select = document.getElementById("toc"),
				docfrag = document.createDocumentFragment();

		toc.forEach(function(chapter) {
			var option = document.createElement("option");
			option.textContent = chapter.label;
			option.ref = chapter.href;

			docfrag.appendChild(option);
		});

		$select.appendChild(docfrag);

		$select.onchange = function(){
				var index = $select.selectedIndex,
						url = $select.options[index].ref;
				rendition.display(url);
				return false;
		};


	});
</script>

`

[christiaan]

If this is a copy paste of the actual code, the problem is here

url = $select.options[index].ref;

It should be

url = $select.options[index].href;

Since NavItem has no property rel the call to rendition.display(undefined) results in jumping to the beginning of the book.

[yuvalyellin]

It's the code from https://github.com/futurepress/epub.js/blob/master/examples/toc.html with line 23 changed ( to use continuous manager) , the ref property is created in line 33:

option.ref = chapter.href;

, and the book jumps to the end of the the (correct) chapter, not to the beginning of the book (it jumps to the start of the chapter, as expected and then after a second or so jumps to the end)

[anhthii]

Is this issue solved? I experienced the same

[badfish]

Two changes fixed this for me:

1. revert commit 915ab2e107f7d95d44a9fbc48b91409c6ac8c3e2 to ContinuousViewManager
2. when calling book.renderTo(), set 'offset' to 10 instead of its default value

[junior-g]

@badfish can you explain the 2nd point because it is showing that renderTo does not have any offset value

[junior-g]

@badfish it worked for me when I set offset to 0

[badfish]

On 6 July 2023 06:04:52 BST, Abis @.***> wrote:

@badfish can you explain the 2nd point because it is showing tht renderTo does not have any offset value

Hello,

I've put some sample code on http://pond-weed.com/tmp/index_html.txt

Note the duplicate calls to rendition.display(cfi) in $select.onchange(). This is to work around the bug: remove the 2nd call to see the problem happening. You'll need to hack it a bit to display your choice of epub; it works ok with some epubs.

Regards, John

[badfish]

On 6 July 2023 09:44:03 BST, Abis @.***> wrote:

@badfish it worked for me when I set offset to 0

I've got a workaround, so I'm not much bothered by it. Thanks.

[shihabdider]

I'm getting a similar error but for me it jumps to the middle of the page. Also when I try to scroll up to the previous chapter it will jump back to the middle of the current chapter. Setting offset = 10 doesn't fix it though offset = 0 does, at the expense of not being able to scroll back up to previous chapter (can scroll down to new chapters though).

@badfish Your sample code seems to be password blocked, could you please post it again?