When I try to click on the bookmark button, the add to bookmark JavaScript does not load properly

I've been troubleshooting why my add to bookmark javascript isn't functioning when clicked. It seems like the issue may be related to the divs being positioned absolutely, as it works fine when I remove all the divs and just keep the link. Below are snippets of my CSS, HTML, and JavaScript code.

html {
   width:100%; 
   height:100%; 
}

body {
    background: #403F3D url(images/background.png) top center fixed;
    margin:0;
    padding:0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:#444;
    font-size:12px;
    line-height:1.9em;
    text-align: center;
}

* {
    margin:0;
    padding:0;
}

#container {
    position:absolute;
    top: -10px;
    left: 50%;
    margin-left: -447.5px;
    text-align:left;
}

#bookmark {
    position:absolute;
    left:222px;
    top:343px;
    width:282px;
    height:46px;
}

<div id="container"> 
<div id="bookmark">
<a href="javascript:bookmarksite('WoW Mania - World of Warcraft Gameplay Guide', 'http://www.wowmania.net')">
<img src="images/bookmark.png"  class="domroll images/active-bookmark.png"></a>
</div> 
</div>

function bookmarksite(title,url){
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);
}
javascripthtmlcss

Answer №1

Are you currently using Firefox as your browser? I noticed that the link works perfectly in my version of Firefox (V14.01), but seems to have some issues on Internet Explorer. It's no secret that IE can be a bit troublesome when it comes to JavaScript.

Upon checking the developer tools on IE (simply press F12), I encountered the following error:

SCRIPT438: Object doesn't support property or method 'addPanel' 
bookmark.js, line 10 character 2

This error seems to originate from this specific line of your code:

window.sidebar.addPanel(title, url, "");

Based on this, it appears to be a compatibility issue related to browsers. I suggest taking a look at the following resource for further clarification:

Add to browser favorites/bookmarks from JavaScript but for all browsers (mine doesn't work in Chrome)?

The solution may seem a bit convoluted, but rest assured, the answer lies within.

Answer №2

Here is a script that I have customized from its original version. It functions well in Internet Explorer, Firefox, and Opera, but prompts the user in Chrome and Safari. Unfortunately, Webkit browsers do not support it.

MyBookmarkFunction = function () {
    var isIEmac = false; /*@cc_on @if(@_jscript&&!(@_win32||@_win16)&& 
    (@_jscript_version<5.5)) isIEmac=true; @end @*/
    var isMSIE = (-[1,]) ? altIeCheck() : true; //made some changes to ensure compatibility with IE10
    var cjTitle = document.title;
    var cjHref = location.href;

    function hotKeys() {
        var ua = navigator.userAgent.toLowerCase();
        var str = '';
        var isWebkit = (ua.indexOf('webkit') != - 1);
        var isMac = (ua.indexOf('mac') != - 1);
        var isIe = (ua.indexOf('msie') != - 1);

        if (ua.indexOf('konqueror') != - 1) {
            str = 'CTRL + B'; // Konqueror
        } else if (window.home || isWebkit || isIEmac || isMac) {
            str = (isMac ? 'Command/Cmd' : 'CTRL') + ' + D'; // Netscape, Safari, iCab, IE5/Mac
        } else if (isIe){
            str = ('CTRL + D');
        }
        return ((str) ? 'Press ' + str + ' to bookmark this page.' : str);
    }

    function altIeCheck(){
        return (navigator.userAgent.toLowerCase().indexOf('msie') != - 1);
    }

    function isIE8() {
        var rv = -1;
        if (navigator.appName == 'Microsoft Internet Explorer') {
            var ua = navigator.userAgent;
            var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
            if (re.exec(ua) != null) {
                rv = parseFloat(RegExp.$1);
            }
        }
        if (rv > - 1) {
            if (rv >= 8.0) {
                return true;
            }
        }
        return false;
    }

    function addBookmark(a) {
        try {
            if (typeof a == "object" && a.tagName.toLowerCase() == "a") {
                a.style.cursor = 'pointer';
                if ((typeof window.sidebar == "object") && (typeof window.sidebar.addPanel == "function")) {
                    window.sidebar.addPanel(cjTitle, cjHref, ""); // Gecko
                    return false;   
                } else if (isMSIE && typeof window.external == "object") {
                    if (isIE8()) {
                        window.external.AddToFavoritesBar(cjHref, cjTitle); // IE 8                    
                    } else {
                        window.external.AddFavorite(cjHref, cjTitle); // IE <=7
                    }
                    return false;
                } else if (window.opera) {
                    a.href = cjHref;
                    a.title = cjTitle;
                    a.rel = 'sidebar'; // Opera 7+
                    return true;
                } else {
                    alert(hotKeys());
                }
            } else {
                throw "Error occurred.\r\nNote, only A tagname is allowed!";
            }
        } catch (err) {
            alert(err);
        }

    }

    return {
        addBookmark : addBookmark
    }
}();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to extract information from a JSON array based on its length and content

Here is an example of some data: { "_id": ObjectId("528ae48e31bac2f78431d0ca"), "altitude": "110", "description": [ { "id": "2", "des": "test" } ], "id": "1", "latitude": "24.9528802429251", ...

javascriptarraysjsonnode.jsapache-poi

Node.js: A Guide to Prepending a Line to a File Using the 'fs' Module

Currently, I am attempting to insert a new line at the beginning of an existing text file using node.js. Here is the code snippet I am working with: var fs = require('fs'); fs.appendFile('test.txt', 'X Y', function (e ...

javascriptnode.jssavetext-filesedit

Having trouble resolving errors in Visual Studio Code after failing to properly close a parent function? Learn how to fix this issue

Here we have the code starting with the construct function followed by the parents function public construct() //child { super.construct; } protected construct() //parent { } The issue arises where I am not receiving an er ...

javascripttypescriptvisual-studio-codeerror-handling

Removing Specific Items from a List in React: A Step-by-Step Guide

I have developed a basic ToDo List App. The functionality to display tasks from the input form is working correctly, but I am facing issues with deleting tasks when the Delete button is clicked. export class TaskList extends Component { constructor(pr ...

javascriptreactjs

Error: The API call response could not be shown on the webpage

Upon exploring the React App.js page, I discovered that I am making calls to a Django Rest API and receiving an array as a response. Within this array, there are nested components that should be listed in my code. However, when attempting to display multi ...

javascriptarraysreactjsdjango-rest-framework

Is there a way to create a JavaScript-driven search filter that updates automatically?

My website showcases a lineup of League of Legends champion icons, with one example shown below: <div class = "champion"> <p>Aatrox <img class = "face_left" src = "images/small/Aatrox.png"> <div class = "name" onmouseover="if(cha ...

javascriptjqueryhtmlcss

Angular 2 failing to show "mandatory" dialogue on the form

I am new to Angular 2 and have created a form using Angular 2 and bootstrap. When I click on the text field and then move the mouse elsewhere, the box turns red, which is working correctly. However, when I click on the submit button with an empty form, it ...

htmlangularjstypescript

Tips for identifying when the value of a div changes using Selenium

Currently, I am using selenium to gather data from a website. The structure consists of a parent div with 30 children divs. Periodically, one value is updated and stored in the first child while the last child is removed, maintaining a history of the las ...

pythonjavahtmlseleniumdom

What is the proper way to transmit the csrf_token securely?

Hello there! I need assistance with sending the csrf_token to the POST function for a logged-in user. I am facing an error during user registration which says: "Forbidden (CSRF token missing.): /data/task." You can find the link to the library below, whe ...

javascriptdjango

I am looking to optimize my WordPress posts to load in increments as the user scrolls down the page, similar to how Facebook does

I am looking to implement a feature on my WordPress post where the content loads a few at a time as the user scrolls, similar to Facebook. Specifically, I would like my webpage to automatically load 10 posts and then continue loading 10 more as the user re ...

phpjavascriptjquerywordpress

.Certain IDs on a website may not respond to clicks due to various reasons

I have created a JavaScript file to automatically click a button on a website using a Chrome extension. When testing the code using Chrome Script snippet, I noticed that it worked for some IDs but not for others. Can someone please help me with this issue? ...

javascriptjqueryclick

The array is not preserved by Mongoose once the .map(...) loop has ended

I'm encountering an issue where every time the Node.js quits the loop of .map(...), my Post.attachments array reverts back to the state of []. I'm curious as to why this behavior occurs. Below is the code snippet: req.files.map(async (file) => ...

javascriptnode.jsmongodbmongoose

What are the steps for testing React components when they are wrapped by ThemeProvider/withStyle?

Is there a way to properly test a component that is wrapped with withStyle, as it seems the theme object does not pass through the component. Any suggestions on best practices for achieving this? I am considering using createShallow() and dive() methods t ...

javascriptreactjsjestjsmaterial-uienzyme

Using jQuery Grep to refine a JSON nested array

My goal is to extract the first level array from JSON data based on specific criteria in the second level of the array. I am utilizing jQuery grep to pinpoint elements within an array and filter them based on department and job title. In my scenario, I am ...

javascriptjquerygrep

Issue with video not displaying using Bootstrap 4 iframe syntax

I am facing an issue on my Drupal site that utilizes a bootstrap 4 theme. Specifically, I am trying to embed a video within a bootstrap card using the following code: <div class="card"> <div class="embed-responsive embed-respo ...

htmltwitter-bootstrapiframebootstrap-4

I'm curious if there is an eslint rule specifically designed to identify and flag any unnecessary spaces between a block comment and the function or

Can anyone help me find a solution to prevent the following issue: /** * This is a comment */ function foo() { ... } I need it to be corrected and formatted like this: /** * This is a comment */ function foo() { ... } ...

javascripttypescripteslint

ng-init assign value to a new object

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl2" ng-init="person = new Person('Al ...

javascripthtmlangularjs

Show the filename in the file upload field on Bootstrap 4

Utilizing Bootstrap 4 for my webpage, I have encountered an issue with the file upload option. When users select a file, the name of the file is not being displayed as it normally would in regular HTML. Can you please review my code and the accompanying sc ...

htmlcssbootstrap-4

Forwarding to a specific webpage

`<!DOCTYPE html> <html class="no-js"> ... </body> </html> I'm in the process of developing a website where users can enroll in programs by clicking on an ...

csshttp-redirectwebhtml

Determining if an event is already associated with a marker in Google Maps API v3

I've set up a marker with a click event listener attached to it. However, I want to check if the click event has already been added to the marker, and if not, add the click event listener. // Add click event listener if it doesn't already exist ...

javascriptgoogle-mapsgoogle-maps-api-3