Add Bookmark to a page


(ism) #1

Hi friends. I want to add a bookmark. On forums I see some javascript examples but I cant understand coding. If you have any example, could you share it with me?

Here I add an example hype file. I want this;
I open website, I want to add second page to my favorites, when I visit my home page, I want to see that my favorited pages listed on homepage. When I click that favorited page, I will go that page.

Anyone can help me? Please…
Thanks so much…

bookmark.hype.zip (56.0 KB)

P.S I HAVE $5 ON MY FIVERR ACCOUNT, IF YOU SEND ME A WORKING HYPE DOCUMENT, I CAN GIVE IT TO YOU. Because I really need this file…


(Jonathan Deutsch) #2

Hype documents have the same URL for each scene by default. From what you’re describing, first it sounds like you want to have each scene have a different URL. This can be accomplished via the steps in this post:

(see the first “Linking to a Scene using an URL” section)

Then secondarily, you would want some sort of button that guides the user into adding a browser bookmark. As far as I can tell there’s not a good cross-browser way to do this (especially for Safari/Chrome), but the top Stack Overflow post shows that you could add this code to an On Mouse Click handler set to Run JavaScript:

    if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
      window.sidebar.addPanel(document.title, window.location.href, '');
    } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite
      window.external.AddFavorite(location.href, document.title);
    } else { // webkit - safari/chrome
      alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
    }

(I haven’t tried this code myself)

P.S. in looking at your document, you will need to change the jump to scene actions on the first scene to go to the appropriate scene; right now they just are set to “First scene”


(ism) #4

Thanks for your reply but I want to add favorites page.
I dont want to add bookmark to chrome or safari…
Like in a pdf file, I want to add one page to bookmarks, then when I press that link, will go to that my favorite page…


(Jonathan Deutsch) #5

So you mean entirely internal to the Hype document, you want the user to have the ability to mark one scene as a “favorite” and then always go to that?

I assume it needs to persist across reloads?

I’d probably use local storage. If you had a “add favorite” button on a scene, you could set it via an action that runs this javascript:

window.localStorage.setItem('myFavorite', hypeDocument.currentSceneName());

And then on your first scene if you wanted to have a button to go to it, it would be something like:

var sceneName = window.localStorage.getItem('myFavorite');
if(sceneName != null) {
    hypeDocument.showSceneNamed(sceneName);
} else {
    // handle no scene found...
}

(ism) #6

This works well, but can we transform this into a FAVORITES LIST. I mean, not 1 item, but for example 5 items.
I want to show them on a page like homepage. when user clicks an favorited item, it will go to that scene…
Thanks…


(Jonathan Deutsch) #7

Well, it is definitely possible as the example shows, but a matter of coding :slight_smile:. There’s a lot of questions on what you would want as an implementation (like does the list have a fixed/max size, would you want them to remove items, how to present this, etc.)… so I think even if someone else wants to write up the code (and take your bounty!) you’ll need a bit more design specificity on what you’d like to see.


(Mark Hunte) #8

Thought I would put @jonathan 's example in to your example. ( no need for a bounty for this. )

This should get you started.
The code does not do the remove and the design and layout is just an example also.
You can factor in your own, the code shows enough to figure that out as well as how to remove etc.

We use three functions.

On Scene load uses two of them - first scene only.

1, just inits click actions for any bookmarks.

see this thread on how that works

When one is clicked we use it’s data attribute to know which scene to go to and go there.

2, populates a List from localStorage if it exists.
Creates new li item,
Gives it a class, id and data attribute and the item to the list in the innerHTML of a rect on the scene.


When a add bookmark button is click a function name addBookmark()

runs.

this adds the scene name to the localStorage.

The storage items are stored in an JSON array.

bookmark_mhv1.hype.zip (83.4 KB)


(ism) #9

Thank you so much. If you have fiverr account, could you send me a private message here. I want to give some gift to you. I need fiverr, because now, I have balance only on it :slight_smile:


(Mark Hunte) #10

Use the forum, learn and give back… that will be enough… :wink: