Bookmark shortcuts ⭐
Keyboard shortcuts for bookmarking web pages. A
Webflow clonable by
Stories Without Endings.
Solves the following challenge:
The user have finally found the page s/he is looking for on your website. How can they easily save the link and get back to the page again later? By bookmarking it! So, let's assist the user in the process. It's not possible for security reasons to make a simple button, so
This little project autodetects the user's operating system, and shows the appropriate keyboard shortcut for bookmarking the current page. For mobile phones where the keyboard is not readily available, the instructions are hidden.
How does it work?
Javascript detect the users' operating system. If it's MacOS, the Mac-tip's are shown. If it's Windows, the Windows tip is shows.
If you do not clone the project, but rather want to remake the feature it in your own project, make sure to add the ID's to the win_tip, mac_tip and dynamic_content elements. And make sure to test it on a published link to see it work.
The javascript added to the custom code section (Before </body> tag) is this:
<script defer type = "text/javascript" >
var OSName = "Unknown OS";if (navigator.appVersion.indexOf("Win") != -1) OSName = "Windows";
if (navigator.appVersion.indexOf("Mac") != -1) OSName = "MacOS";if (OSName == "Windows") {
document.getElementById("win_tip").style.display = "block";
} else {
document.getElementById("win_tip").style.display = "none";
};if (OSName == "MacOS") {
document.getElementById("mac_tip").style.display = "block";
} else {
document.getElementById("mac_tip").style.display = "none";
};if (OSName == "Unknown OS") {
document.getElementById("dynamic_content").style.display = "none";
};
</script>
For reference. This is the keyboard short-cuts on both Windows and Mac. They work across all major browsers.