How to show a javascript confirmation box on “WordPress menu” before leaving the website

1 Views

I wants to show a javascript message box when a user clicks on a “FORUM” link on WordPress menu.

The message box should show a message like “You are leaving this website…” and once the user confirms the message box, it should open an external link in a new tab.

Read More

I had tried this, but it will fire the message box, when ever I leave the website or reload the page. I just wants this message box on a single WordPress menu item.

I saw some tutorials to do this, but not able to do it on WordPress menu.

WordPress does not recognize javascript:void(0) or any other javascript function on URL part.

Any ideas??

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. Do you have jQuery loaded?
    Where is the forum link?
    Where’s the code?

    <a href="http://www.yourforum.com" onclick="return confirm('Are you sure you want to leave?');" />

  2. Set the link location to something like this:

    javascript: if (confirm('Are you sure you want to leave?')) {window.open('http://www.yourforum.com','_blank');}

    which should generate html like:

    <a href="javascript: if (confirm('Are you sure you want to leave?')) {window.open('http://www.yourforum.com','_blank');}">Link</a>

    I tested this in JS fiddle, seems to work, so you should be able to put this as the link location in your database.

    Edit:

    // for a new tab
window.open(url,'_blank');
// for a redirect in same window
window.location=url;

  3. If you can add any javascript to your page, anywhere, you can do the following (Needs jQuery, but you said you have that loaded):

    $("a[href='http://example.com/forum']").click(function() {
    alert("Good bye!");
    return true;
});

  4. Finally I got it working. I’m explaining it step by step, so someone with similar issue can solve this:

    1. Put # in your wordpress menu url in which you want the JavaScript
      Function.
    2. Track this menu url (li ID) link from source code. in my case li id
      is menu-item-88. (this id is auto generated by wordpress and
      always unique)
    3. Place the following code before the end of head tag (open header.php
      find </head>) of current theme.
    4. Don’t forget to change the menu-id menu-item-88 to yours.

    <script type="text/javascript">

    jQuery.noConflict();
jQuery(document).ready(function(){
var menuID = jQuery('#menu-item-82');

findA = menuID.find('a');

findA.click(function(event){
if(confirm("YOU ARE LEAVING THE WEBSITE" + 'n' + "" + 'n' + "You are about to leaving the website to go to the external forum" + 'n' + "" + 'n' + "The FORUM will open in a new tab")) 
{
window.open('http://www.yourforum.com/','_blank'); //This will open the website in a new tab
}

});
});
</script>

    This requires jQuery. So if jQuery is not loaded, add the following line also to your head.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    This will prompt you that, you are leaving the website. If you clicks OK, it will open the given link in a new tab.

    Ok. Thats all.. This will do the magic.