Develop Reference

Paste event listener on Internet Explorer getting wrong arguments

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')
}
}
});

Add to favorites/Bookmars: Update [duplicate]

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

Bookmark Javascript not jquery for website

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.');
}
});
});

Add to favourites/bookmarks bar in Safari (CMD +D)

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)

Bookmark on click using jQuery

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