From much research, I have found nothing that supports the idea that Safari even supports this feature. From how much API there is for Safari, I can't believe that they wouldn't allow this to be embedded with their browser.
If anyone has any ideas of how this can be achieved without using some horrible plugin that doesn't actually work, it would be greatly appreciated.
So far, I have taken care of the main browsers by using this:
$("#bookmark").click(function() {
var url = this.href;
var title = this.title;
if($.browser.mozilla) {
window.sidebar.addPanel(title, url,"");
} else if($.browser.msie || $.browser.webkit) {
window.external.AddFavorite(url, title);
if($.browser.safari) {
alert("Balls");
}
} else if($.browser.opera ) {
$(this).attr("href", url);
$(this).attr("title", title);
$(this).attr("rel", "sidebar");
$(this).click();
} else {
//alert("Please press CTRL+D and click the link to bookmark it in your browser.");
}
return false;
});
Unfortunately Safari does not allow you to add a bookmark through javascript (along with IE6/IE8) and possibly a few others. It's some sort of attempt at fighting off spam/unwanted websites adding bookmarks to your browser onload.
Try a script like this, it's pretty much all you can do...
$("a.bookmark").click(function(e) {
if ($.browser.opera == false) {
e.preventDefault();
var url = this.href;
var title = this.title;
if ($.browser.mozilla == true) {
window.sidebar.addPanel(title, url, '');
return false;
} else if($.browser.msie == true) {
window.external.AddFavorite( url, title);
return false;
} else {
alert('Please use CTRL + D to bookmark this website.');
}
}
});
Info from Apple forums (https://discussions.apple.com/thread/1364657?start=0&tstart=0)
Related
I'm building a website using Drupal. On the header of each page I want to have a single image (custom designed by me) which would act as a custom "Add to Favorites" button. Clicking on the image should add the website's URL to the user browser's favorites (bookmarks). This should work for all browsers, IE7+, FF, Opera, Chrome.
I wasn't able to find much information for this online. I suppose that javascript should do the job but I don't have much experience in Javascript :) so I need your help!
jQuery Version
$(function() {
$('#bookmarkme').click(function() {
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 if (window.opera && window.print) { // Opera Hotlist
this.title = document.title;
return true;
} else { // webkit - safari/chrome
alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>
This code is the corrected version of iambriansreed's answer:
<script type="text/javascript">
$(function() {
$("#bookmarkme").click(function() {
// Mozilla Firefox Bookmark
if ('sidebar' in window && 'addPanel' in window.sidebar) {
window.sidebar.addPanel(location.href,document.title,"");
} else if( /*#cc_on!#*/false) { // 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.');
}
});
});
</script>
I have faced some problems with rel="sidebar". when I add it in link tag bookmarking will work on FF but stop working in other browser. so I fix that by adding rel="sidebar" dynamic by code:
jQuery('.bookmarkMeLink').click(function() {
if (window.sidebar && window.sidebar.addPanel) {
// Mozilla Firefox Bookmark
window.sidebar.addPanel(document.title,window.location.href,'');
}
else if(window.sidebar && jQuery.browser.mozilla){
//for other version of FF add rel="sidebar" to link like this:
//<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>
jQuery(this).attr('rel', 'sidebar');
}
else if(window.external && ('AddFavorite' in window.external)) {
// IE Favorite
window.external.AddFavorite(location.href,document.title);
} else if(window.opera && window.print) {
// Opera Hotlist
this.title=document.title;
return true;
} else {
// webkit - safari/chrome
alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
}
});
if (window.sidebar) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(document.title,location.href,"");
It adds the bookmark but in the sidebar.
Credit to #Gert Grenander , #Alaa.Kh , and Ross Shanon
Trying to make some order:
it all works - all but the firefox bookmarking function.
for some reason the 'window.sidebar.addPanel' is not a function for the debugger, though it is working fine.
The problem is that it takes its values from the calling <a ..> tag: title as the bookmark name and href as the bookmark address.
so this is my code:
javascript:
$("#bookmarkme").click(function () {
var url = 'http://' + location.host; // i'm in a sub-page and bookmarking the home page
var name = "Snir's Homepage";
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1){ //chrome
alert("In order to bookmark go to the homepage and press "
+ (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ?
'Command/Cmd' : 'CTRL') + "+D.")
}
else if (window.sidebar) { // Mozilla Firefox Bookmark
//important for firefox to add bookmarks - remember to check out the checkbox on the popup
$(this).attr('rel', 'sidebar');
//set the appropriate attributes
$(this).attr('href', url);
$(this).attr('title', name);
//add bookmark:
// window.sidebar.addPanel(name, url, '');
// window.sidebar.addPanel(url, name, '');
window.sidebar.addPanel('', '', '');
}
else if (window.external) { // IE Favorite
window.external.addFavorite(url, name);
}
return;
});
html:
<a id="bookmarkme" href="#" title="bookmark this page">Bookmark This Page</a>
In internet explorer there is a different between 'addFavorite':
..
and 'AddFavorite': <span onclick="window.external.AddFavorite(location.href, document.title);">..</span>.
example here: http://www.yourhtmlsource.com/javascript/addtofavorites.html
Important, in chrome we can't add bookmarks using js (aspnet-i):
http://www.codeproject.com/Questions/452899/How-to-add-bookmark-in-Google-Chrome-Opera-and-Saf
I am trying the below code to bookmark page in Safari. But not working
$("#Bookmark").click(function (e) {
e.preventDefault();
var bookmarkUrl = this.href;
var bookmarkTitle = this.title;
if (window.sidebar) { // For Mozilla Firefox Bookmark
window.sidebar.addPanel(bookmarkTitle, bookmarkUrl, "");
} else if (window.external || document.all) { // For IE Favorite
window.external.AddFavorite(bookmarkUrl, bookmarkTitle);
} else if (window.opera) { // For Opera Browsers
$("a.jQueryBookmark").attr("href", bookmarkUrl);
$("a.jQueryBookmark").attr("title", bookmarkTitle);
$("a.jQueryBookmark").attr("rel", "sidebar");
} else { // for other browsers which does not support
alert('Your browser does not support this bookmark action');
return false;
}
});
You cannot force the user to add a website to his bookmarks in safari.
The solution would be to inform the user about the shortkey to add to bookmark : https://stackoverflow.com/a/10033250/2219239
I have the following bookmark Javascript.
function bookmark(title, url) {
if(document.all) { // ie
window.external.AddFavorite(url, title);
}
else if(window.sidebar) { // firefox
window.sidebar.addPanel(title, url, "");
}
else if(window.opera && window.print) { // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click(); // this.title=document.title;
}
}
AND HTML
<a href="javascript:bookmark('title of the page', 'http://www.domain.com');" class="bookmark" >
And the problem is that is working only in Internet Explorer. Is not working in firefox, opera, chrome. Also i heard that firefox have deprecated the function window.sidebar.addPanel, is there any way to fix all of this? PLEASE NO JQUERY.
Here's how to use the answer from How do I add an "Add to Favorites" button or link on my website? without the jQuery event binding.
function bookmark(title, href) {
if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(title,href,'');
} else if(window.external && ('AddFavorite' in window.external)) { // IE Favorite
window.external.AddFavorite(href,title);
} else if(window.opera && window.print) { // Opera Hotlist
this.title=title;
return true;
} else { // webkit - safari/chrome
alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
}
}
There are some problem with the above solution.
window.sidebar.addPanel("", "","");
The above code may not work in all Mozilla Firefox versions.
So I wrote the bookmaking code as below.
It will work fine in all browsers except webkit - safari/chrome.
Add "a" tag as shown below
<a id="BookmarkMe" href="">Bookmark</a>
And used below Jquery
$(function () {
$('#BookmarkMe').click(function (e) {
var bTitle = document.title, bUrl = window.location.href;
if ($.browser.mozilla || $.browser.opera) { // Mozilla Firefox or Opera
if (window.sidebar.addPanel) {
e.preventDefault();
window.sidebar.addPanel(bTitle, bUrl, "");
}
else {
$('#BookmarkMe').attr("href", bUrl);
$('#BookmarkMe').attr("title", bTitle);
$('#BookmarkMe').attr("rel", "sidebar");
}
} else if ($.browser.msie) { // IE Favorite
e.preventDefault();
window.external.AddFavorite(bUrl, bTitle);
} else { // webkit - safari/chrome
e.preventDefault();
alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
}
});
});
I need to solve a problem on an old system we still use. I am busy converting a new system to jquery but these nuggets from the old system sometimes pop up.
The code below works great in Firefox but doesn't work at all in Chrome or IE.
I have added a console.log("test") and this runs in Firefox but not in Chrome or IE.
Please let me know what's the best way to do this in vanilla javascript so it's cross browser friendly. Thanks
Code
function showlaptop(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'block';
console.log("test");
}
}
function hidelaptop(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'none';
}
else
{
document.getElementById(theTable).style.display = 'none';
}
}
This should work in all browsers...
function showlaptop(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = '';
console.log("test");
}
}
function hidelaptop(theTable)
{
if (document.getElementById(theTable).style.display == '')
{
document.getElementById(theTable).style.display = 'none';
}
else
{
document.getElementById(theTable).style.display = 'none';
}
}
that is, replace 'block' with ''
You do not need the second else BTW...
UPDATE:
As mentioned by Rob in the comments. The default display value for everything is not 'block', although, some browsers allow it, but those that follow the standards will not render the page accordingly...
Is there a way to save the current page as a bookmark (through jQuery or otherwise) when a specific button is clicked?
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("a.jQueryBookmark").click(function(e){
e.preventDefault(); // this will prevent the anchor tag from going the user off to the link
var bookmarkUrl = this.href;
var bookmarkTitle = this.title;
if (window.sidebar) { // For Mozilla Firefox Bookmark
window.sidebar.addPanel(bookmarkTitle, bookmarkUrl,"");
} else if( window.external || document.all) { // For IE Favorite
window.external.AddFavorite( bookmarkUrl, bookmarkTitle);
} else if(window.opera) { // For Opera Browsers
$("a.jQueryBookmark").attr("href",bookmarkUrl);
$("a.jQueryBookmark").attr("title",bookmarkTitle);
$("a.jQueryBookmark").attr("rel","sidebar");
} else { // for other browsers which does not support
alert('Your browser does not support this bookmark action');
return false;
}
});
});
</script>
This Code is taken from Developersnippets!
/e:
Chrome does not support such actions, since the security level could be broken.
Since Chrome does not support such action, a solution could be to check first if the browser in use it's Chrome and if so to alert the user that the bookmark function is not supported. Then for other cases the script provided on DevelopersSnippets works fine.
Example:
$("a.bookmark").click(function(e){
e.preventDefault(); // this will prevent the anchor tag from going the user off to the link
var bookmarkUrl = this.href;
var bookmarkTitle = this.title;
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
alert("This function is not available in Google Chrome. Click the star symbol at the end of the address-bar or hit Ctrl-D (Command+D for Macs) to create a bookmark.");
}else if (window.sidebar) { // For Mozilla Firefox Bookmark
window.sidebar.addPanel(bookmarkTitle, bookmarkUrl,"");
} else if( window.external || document.all) { // For IE Favorite
window.external.AddFavorite( bookmarkUrl, bookmarkTitle);
} else if(window.opera) { // For Opera Browsers
$("a.bookmark").attr("href",bookmarkUrl);
$("a.bookmark").attr("title",bookmarkTitle);
$("a.bookmark").attr("rel","sidebar");
} else { // for other browsers which does not support
alert('Your browser does not support this bookmark action');
return false;
}
});
Try this:
if (window.sidebar) // firefox
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else if(document.all)// ie
window.external.AddFavorite(url, title);
}
I think jquery Bookmark plugin is what you are looking for . jBrowserBookmark allows you to add functionality to a site which allows a page to be added to the browsers boookmark list. This feature is supported by Internet Explorer, Firefox, Opera and Konqueror browsers.You can get it here