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
Related
I'm handling the paste events for a contenteditable to clean all HTML markers before paste. All Works fine in Firefox and Chrome. But when I test my code in IE11, the event object passed is not a ClipboardEvent but a DragEvent.
Is there something wrong with my code?
If I add the listener as the code bellow, should I get the clipboard event. Why I'm getting drag?
editable.addEventListener('paste', pasteHandler, false);
http://jsfiddle.net/vepo/4t2ofv8n/
To test the example above, I'm copy a text from Chrome and paste into IE. But I you copy any text from IE will get the same error.
EDIT
$(document).ready(function(){
var editable = document.getElementById('editable-div');
var pasteHandler = function(e){
if(e.clipboardData && e.clipboardData.getData) {
var pastedText = "";
if (window.clipboardData && window.clipboardData.getData) { // IE
pastedText = window.clipboardData.getData('Text');
} else if (e.clipboardData && e.clipboardData.getData) {
pastedText = e.clipboardData.getData('text/plain');
}
alert(pastedText);
}
else{
alert('Not paste object!');
}
};
editable.addEventListener('paste', pasteHandler, false);
});
here I handle the IE Version and the other browsers as well.
JSFiddle
e.clipboardData was always null for me on IE, so I came up with this:
var pastedText = '';
if (typeof e.clipboardData === 'undefined')
pastedText = window.clipboardData.getData('Text')
else
pastedText = e.clipboardData.getData('text/plain')
e.originalEvent.clipboardData.getData('text/plain') works for safari, chrome, firefox and safari and chrome on an Ipad.
window.clipboardData.getData('text') works for Internet Explorer and Edge.
Note: e.originalEvent.clipboardData.getData('text') works for desktop browsers but not for mobile browsers.
So in the end I used this
var clipText;
if (e.originalEvent.clipboardData !== undefined){
clipText = e.originalEvent.clipboardData.getData('text/plain')
} else {
clipText = window.clipboardData.getData('text')
}
$("element").on('paste', function (e)
{
if (window.clipboardData)
{
pastedText = window.clipboardData.getData('Text')
}
else if (e.clipboardData || e.originalEvent.clipboardData != undefined)
{
pastedText = e.originalEvent.clipboardData.getData('text/plain')
}
}
});
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.');
}
});
});
Okay here is the full source code of the script I'm playing with:
var isOpera = !!window.opera || navigator.userAgent.indexOf('Opera') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome; // Chrome 1+
var isIE = /*#cc_on!#*/false; // At least IE6
if (isFirefox) {
// do FireFox stuff here
} else if (isChrome) {
// do Chrome stuff here
} else if (isSafari) {
// do Safari stuff here
} else if (isOpera) {
// do Opera stuff here
} else if (isIE) {
// do IE stuff here
} else {
// other browser
}
Then under each if/else statement, I need to somehow "run":
<script type="text/javascript" src="./include/js/newupdates.js"></script>
<div id="auto"></div>
Or something similar depending on browser. I looked at Modernizer and it confused the heck out of me. The above example works and successfully detects all the browsers I need it to, I just don't know how to have the script execute certain HTML/JS code INSIDE the if/else statement...
Now that the actual problem has been clarified, I will submit a completely different answer.
First off, browser detection is generally a poor way to solve browser compatibility issues. It is much better to use feature detection where you detect whether a specific feature is present and working or not. Feature detection is even reliable when the user agent has been spoofed and it's a lot more forward compatible when browser's implement new features than browser agent detection is.
If you are going to stick with your current method, then you can wrap your script (starting after the variable definitions) in a function, include that function in your preloaded javascript and then call the function when desired.
Here's one way to do it:
// include this JS with your other JS or in your <head> section of your HTML document
var isOpera = !!window.opera || navigator.userAgent.indexOf('Opera') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome; // Chrome 1+
var isIE = /*#cc_on!#*/false; // At least IE6
function doStuffBasedOnBrowserType() {
if (isFirefox) {
// do FireFox stuff here
} else if (isChrome) {
// do Chrome stuff here
} else if (isSafari) {
// do Safari stuff here
} else if (isOpera) {
// do Opera stuff here
} else if (isIE) {
// do IE stuff here
} else {
// other browser
}
}
Then, in your other code:
<script>
doStuffBasedOnBrowserType();
</script>
<div id="auto"></div>
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)