Targeting individual pages with custom code by bookmark name (instead of the page index)

Question

Is possible to use bookmarks instead of data.index?

I have menu that should disappear on some pages in long presentation and use page number is not optimal.

Comments

Can you elaborate?

Start from the beginning and explain what you are trying to do.

Thanks!

---

I have a long presentation, something about 30 pages. I have fixed menu on the top. On some pages, it should disappear. I wanna make this disappearing by js function. What opportunities I have to do that?

I already tried call function by "data.index === 4" but it is not comfortable to count pages, much more interesting to call a function on some bookmarks.

---

Thanks! That helps to clarify.

Answer 1

You can modifying the following code as needed and attach it as a .js file using the Resources section of the in5 dialog:

$(document).on('newPage', function(e, data){
    switch($('.page').eq(data.index).attr('data-bookmarks')){
        case 'Table of Contents':
            alert('TOC');
            break;
        case 'Multiple States':
            alert('MSOs');
            break;
        case 'FAQ':
            alert('FAQ');
            break;
        default:
            /*default option here*/
    }
     
});

Note that the data-bookmarks includes all bookmarks for a given page, comma-separated. The above code was tested on the Tour Document that automatically opens after installing or updating in5.

Comments

Thanx! It works

---

It seems I get a problem with commas. I have a page with several bookmarks, and my script doesn't work on that page.

So, I have bookmarks on page data-bookmarks="hide,mission"

"hide" - should hide menu by code below

$(document).on('newPage', function(e, data){
     switch($('.page').eq(data.index).attr('data-bookmarks')){
        case 'hide':
            $('.js-button').fadeOut( "slow" );
        break;
        default:
            $('.js-button').fadeIn( "slow" );
     }
    });

And "mission" is for link to page by menu

function goToBookmark(bname){
           window.top.nav.to($("[data-bookmarks*='" + bname + "']").index()+1);
            }
        $('#mission').click(function(){ goToBookmark('mission'); });
            });

So, linking is working, but hiding is not.

---

Then use

case "hide,mission":

OR use if-then statements instead

e.g.

var bmks = $('.page').eq(data.index).attr('data-bookmarks');
if(bmks.indexOf('hide')>-1){
   //hide action
} else if (bmks.indexOf('mission'){
   //mission action
}

The switch statement is a lot more efficient because it only tests the variable once.

You might be interested in this free email course from us:
https://ajarproductions.com/eureka

It has some jQuery lessons.

---

Thanx for the invitation to mail course.

By the way, it gives me error "Uncaught TypeError: Cannot read property 'indexOf' of undefined "

---

That will occur when a page doesn't have any bookmarks.

Change this line to:

var bmks = $('.page').eq(data.index).attr('data-bookmarks') || '';

So that it defaults to an empty string if the attribute is undefined.

Also, make sure this is all still inside the onNewPage event handler (from the code above).

---

Thanx for answer