2

I am trying to implement an almost cross-browser bookmark functionality and found this on SO: How do I add an "Add to Favorites" button or link on my website?

Now, I am using @PHPst's answer..

<script type="text/javascript">
$(function() {
    $("#bookmarkme").click(function() {
        if (window.sidebar) { // Mozilla Firefox Bookmark
            window.sidebar.addPanel(location.href,document.title,"");
        } else if( /*@cc_on!@*/false) { // 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>

it works on a plain webpage.. as demonstrated here: http://jsfiddle.net/GXas4/

but when i use it inside a wordpress template, in chrome i get a js error like this:

Uncaught TypeError: Object #<HTMLDivElement> has no method 'addPanel'

it does not return an error on the console of firefox but does not do anything too.

a lot of posts on SO have questions starting like this ('Uncaught TypeError: Object # has no method') but nothing seems to point me to the right direction.

Has anyone have an idea why this is happening?

Community
  • 1
  • 1
reikyoushin
  • 1,993
  • 2
  • 24
  • 40

3 Answers3

1

It's possible that the WordPress theme you are using has an element with id=sidebar.

Unless a global variable with the same name has been explicitly defined, a global variable will be created for each element that has an id.

So, the first test is unreliable. For example, evaluating window.sidebar on the stackoverflow page will be true even in Chrome, because the website uses an element with such an id.

sabof
  • 8,062
  • 4
  • 28
  • 52
  • yes there is a #sidebar, so how do you think i can circumvent that problem? EDIT: i'll try it on jsfiddle.. – reikyoushin Jul 19 '13 at 13:56
  • actually, you are right.. http://jsfiddle.net/hwZsa/1/ but, how can i edit that code to work on a page with #sidebar? – reikyoushin Jul 19 '13 at 13:58
  • 1
    Change the first test to `(window.sidebar && ! (window.sidebar instanceof Node))` – sabof Jul 19 '13 at 14:00
  • and how do i get the window.sidebar element on the line `window.sidebar.addPanel(location.href,document.title,"");`? – reikyoushin Jul 19 '13 at 14:02
  • You don't need to change anything else. If that line is to be executed, then you probably have the correct sidebar. An id=sidebar won't affect firefox. – sabof Jul 19 '13 at 14:05
  • everything else is working now, except firefox. i think its still because of that problem.. firefox gets #sidebar instead of the real window.sidebar and tries to call addPanel on it.. a.k.a `$('#sidebar').addPanel(location.href,document.title,"");` which is not what i want.. just a guess why it's not working though. – reikyoushin Jul 19 '13 at 14:07
  • If that where to happen, you'd get the same error as before. I couldn't get it to work, and the feature is deprecated. Perhaps it's no longer supposed to work. – sabof Jul 19 '13 at 14:11
  • 1
    found it! check this one out: http://stackoverflow.com/questions/107971/a-firefox-javascript-bookmarking-problem `For Firefox no need to set any JavaScript for the bookmark an page by script, only an anchor tag with title and rel="sidebar" can do this functionality` this works.. now i would just let firefox be handled by it.. and let the script handle all others. Thanks a lot! – reikyoushin Jul 19 '13 at 14:19
0

You should use wp_enqueue_script (Documentation)

Your dependencies may not being called before that script. If you enqueue the script you can make the dependencies load first using

wp_enqueue_script( $handle, $path to file, array( jquery ));`

Since I placed jQuery in the array it will now load jQuery before the script.

Juan Rangel
  • 1,763
  • 1
  • 18
  • 34
  • the only dependency needed on that script is jquery, and it is already loaded (default on wordpress) before i execute that script.. i also have adjusted that code on wordpress to use jQuery() instead of $() to avoid conflicts.. – reikyoushin Jul 19 '13 at 13:48
  • jquery is also working already.. the problem is within the function called by jquery.. it seems jquery has meddled with the window object far above the code and had overriden the window object somewhere.. – reikyoushin Jul 19 '13 at 13:51
0

addPanel was removed from Firefox since v. 23. But you can use markup instead:

<a href="http://stackoverflow.com" title="Stack Overflow" rel="sidebar">Bookmark me</a>
reza.cse08
  • 5,938
  • 48
  • 39