Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Need help with jQuery

Posted on 2016-09-14
14
Medium Priority
?
127 Views
Last Modified: 2016-09-21
Hi,
I need to add a url to user's borwser's favorites when an icon image is clicked on the page.   I used this script then nothing happened when I clicked on the image. Thank you.  
I was using FF version 48  script from here, https://www.thewebflash.com/how-to-add-a-cross-browser-add-to-favorites-bookmark-button-to-your-website/

jQuery(function($) {
  $('#image-id').click(function(e) {
    var bookmarkURL = window.location.href;
    var bookmarkTitle = document.title;

    if ('addToHomescreen' in window && addToHomescreen.isCompatible) {
      // Mobile browsers
      addToHomescreen({ autostart: false, startDelay: 0 }).show(true);
    } else if (window.sidebar && window.sidebar.addPanel) {
      // Firefox version < 23
      window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
    } else if ((window.sidebar && /Firefox/i.test(navigator.userAgent)) || (window.opera && window.print)) {
      // Firefox 23+ and Opera version < 15
      $(this).attr({
        href: bookmarkURL,
        title: bookmarkTitle,
        rel: 'sidebar'
      }).off(e);
      return true;
    } else if (window.external && ('AddFavorite' in window.external)) {
      // IE Favorites
      window.external.AddFavorite(bookmarkURL, bookmarkTitle);
    } else {
      // Other browsers (mainly WebKit & Blink - Safari, Chrome, Opera 15+)
      alert('Press ' + (/Mac/i.test(navigator.userAgent) ? 'Cmd' : 'Ctrl') + '+D to bookmark this page.');
    }

    return false;
  });
});

Open in new window

0
Comment
Question by:lapucca
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
14 Comments
 
LVL 10

Expert Comment

by:Michael Vasilevsky
ID: 41799009
You getting an error in the console?

You referencing jQuery?
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41799070
Is image-id the actual id of the image? Can you post the HTML for the image?
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41799303
I used this script then nothing happened when I clicked on the image
What where you expecting to happen?
Look at the code that pertains to FireFox
    } else if ((window.sidebar && /Firefox/i.test(navigator.userAgent)) || (window.opera && window.print)) {
      // Firefox 23+ and Opera version < 15
      $(this).attr({
        href: bookmarkURL,
        title: bookmarkTitle,
        rel: 'sidebar'
      }).off(e);
      return true;

Open in new window

What is that doing? It is adding an HREF, TITLE and REL attribute to the image that was clicked - if you look in the console you will see that it is in fact doing exactly that.

I come back to my opening question - what were you expecting it to do?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41799305
You might want to take a read of this article
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Bookmarks
0
 

Author Comment

by:lapucca
ID: 41802092
Hi,
I'm using Visual Studio 2013 asp.net.  Thi.s jQuery code script is embedded in a subpage of asp.net
Should I try putting it in the master page in the <head> section?

I didn't get any error.  Nothing happened when I clicked on the image icon.  

What I need is for the  code to add a url address to user's bookmarks (or favorites) when the image icon is clicked.  

Yes, I have reference to jQuery library.
0
 

Author Comment

by:lapucca
ID: 41802226
Or, is it not working because I'm using an image instead of an anchor tag?  If I use an anchor tag, is there an image attribute that I can use for it?
Thank you,
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41802246
Did you read the information on the link I posted?
I asked some questions in my previous post about your expectations of the code - if you look at the code it does not do what you think.

When you click the image - right click it and then Inspect Element - check to see weather the href / title and rel attributes have been changed - if they have the code is working as expected.

All this does is change the attributes of a link and then removes the event handler on the link
$(this).attr({
        href: bookmarkURL,
        title: bookmarkTitle,
        rel: 'sidebar'
      }).off(e)

Open in new window

I know what you are expecting but I don't think you are going to find a comprehensive solution - the code above does not appear to address your problem.
0
 

Author Comment

by:lapucca
ID: 41807781
well, it turned out that this is working in IE but not in my FF browser.
Please see the attached pop up dialog screen shot.  This is the same dialog you would get if you click on the Demo button on the site where I got the code, https://www.thewebflash.com/how-to-add-a-cross-browser-add-to-favorites-bookmark-button-to-your-website/ 

The problem now is how to get it to work in FF.  Nothing happens in FF when I click on the image.
AddFav.jpg
0
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41808112
The code from the sample link works in FF

<!doctype html>
<html>
<style>
#bookmark-this {
  padding: 5px 10px;
  font-size: 12px;
  background: #f0ad4e;
  color: #fff;
  border: 1px solid #eea236;
  border-radius: 4px;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

#bookmark-this:hover {
  background: #ec971f;
  border: 1px solid #d58512;
  text-decoration: none;
}

#bookmark-this:active {
  border: 1px solid #d58512;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
  background: #ec971f;
}
</style>
<body>
<a id="bookmark-this" href="#" title="Bookmark This Page">Bookmark This Page</a>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
jQuery(function($) {
  $('#bookmark-this').click(function(e) {
    var bookmarkURL = window.location.href;
    var bookmarkTitle = document.title;

    if ('addToHomescreen' in window && addToHomescreen.isCompatible) {
      // Mobile browsers
      addToHomescreen({ autostart: false, startDelay: 0 }).show(true);
    } else if (window.sidebar && window.sidebar.addPanel) {
      // Firefox version < 23
      window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
    } else if ((window.sidebar && /Firefox/i.test(navigator.userAgent)) || (window.opera && window.print)) {
      // Firefox 23+ and Opera version < 15
    console.log('testing');
      $(this).attr({
        href: bookmarkURL,
        title: bookmarkTitle,
        rel: 'sidebar'
      }).off(e);
      return true;
    } else if (window.external && ('AddFavorite' in window.external)) {
      // IE Favorites
      window.external.AddFavorite(bookmarkURL, bookmarkTitle);
    } else {
      // Other browsers (mainly WebKit & Blink - Safari, Chrome, Opera 15+)
      alert('Press ' + (/Mac/i.test(navigator.userAgent) ? 'Cmd' : 'Ctrl') + '+D to bookmark this page.');
    }

    return false;
  });
});
</script>
</html>
</body>

Open in new window

Working sample here
0
 

Author Comment

by:lapucca
ID: 41809087
Yes, you're right.  I used a different PC and it's working in FF.  Is it some setting that I need to configure in FF?  Thank you.
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41809203
Unfortunately I cannot answer that.
0
 

Author Closing Comment

by:lapucca
ID: 41809219
Thank you.
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41809247
You are welcome.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question