Opening A Link

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:12

Opening A Link

Poster: darkcircuituk
Dated: Tuesday August 31 2004 - 11:30:08 BST

Moderator Addition: This thread is very much related to this one. If you're interested in dynamic context menus, you might want to read both threads. --Kevin
<hr>
I am using the Context Right Click Menu, and I wish to make it so that when someone right clicks on a hyperlink on the page, the options in the right click menu change so that "Open" and "Open in a New Window" appear on the menu (just like the standard microsoft menu). But when the user right clicks on a blank part of the page the "Open" and "Open in a New Window", options don't appear. Finally, if it is possible, how would I go about implementing this?

Thanks for any help you can give.

Dave :?:

Poster: Andy
Dated: Wednesday September 1 2004 - 16:22:47 BST

Hi,

What you need to do is change the global contextMenu variable to represent the contect menu you want to open.

If you are using an image, try this:

<img onmouseover="contextMenu='otherContextMenu';" onmouseout="contextMenu='contextMenu';" src=image.gif>

What this does is change the contextMenu variable so that onMouseOver it sets it, then if a right click event occurs, the ''otherContextMenu'' will open but on mouse out, the variable will have been switched back to 'contextMenu'

Hope this helps
Andy

Poster: kevin3442
Dated: Wednesday September 1 2004 - 21:59:38 BST

Just to add...

the "otherContextMenu" Andy mentioned would, of course, be the one containing menu items to "Open" or "Open in a new window". Those items would also have to be altered dynamically (probably in the same onMouseOver and onMouseOut handlers) to reflect the url to be opened, based on the link that the pointer is over.

Cheers,

Kevin

Poster: Andy
Dated: Friday September 3 2004 - 19:50:32 BST

Thanks for that Kevin,

Just looked at what I wrote and it doesn't make lot of sense does it

-- Andy

confusion`

Poster: darkcircuituk
Dated: Monday September 6 2004 - 14:49:28 BST

Wouldn't I be editing the menu_data.js file for creating a different menu? I understand your solution so far as mouseover and mouseout, but how do I go about calling the correct menu? I have the standard menu_data.js file, do I need to just create another menu_data.js file with a different name and then place the dynamic menu in there? Then call this other menu using moveover?

could you give me an example?

Poster: darkcircuituk
Dated: Tuesday September 7 2004 - 10:57:44 BST

Could you give me an example of how you would get the menu to change for the below code.

For this example you can assume I have already created another menu_data.js file with a different name (as well as keeping the standard one), which includes the "open" and "open in a new window" links.

Code:

<html> 

<head> 
  <title>Implementation - Common Services Framework</title> 
  <link rel="stylesheet" type="text/css" href="../../../../css/intranet.css"> 
  <script type="text/javascript" src="../../../../js/right_click_menu/milonic_src.js"></script>    
<script   type="text/javascript"> 
<!-- 
  _d.write("<script language=JavaScript src=../../../../js/right_click_menu/mmenudom.js><\/script>"); 
--> 
</script> 
<script type="text/javascript" src="../../../../js/right_click_menu/menu_data.js"></script> 
</head> 

<body> 

<div align="center"> 
  <center> 
  <table border="0" cellpadding="0" cellspacing="0" width="100%" height="98%"> 
    <tr><td width="100%" height="100%"> 
      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> 
        <tr><td class="page-body" width="100%" height="100%"> 
          <table cellpadding="3" cellspacing="0" width="100%" height="100%"> 
            <tr><td class="bodyheader" height="24"> 
              <p align="right"> 
              <!--The following section makes use of the JScript Last Updated code and displays it in a friendly way--> 
              <SCRIPT LANGUAGE="JavaScript"> 
                <!-- Begin 
                var days = new Array(8); 
                days[1] = "Sunday"; 
                days[2] = "Monday"; 
                days[3] = "Tuesday"; 
                days[4] = "Wednesday"; 
                days[5] = "Thursday"; 
                days[6] = "Friday"; 
                days[7] = "Saturday"; 
                var months = new Array(13); 
                months[1] = "January"; 
                months[2] = "February"; 
                months[3] = "March"; 
                months[4] = "April"; 
                months[5] = "May"; 
                months[6] = "June"; 
                months[7] = "July"; 
                months[8] = "August"; 
                months[9] = "September"; 
                months[10] = "October"; 
                months[11] = "November"; 
                months[12] = "December"; 
                var dateObj = new Date(document.lastModified) 
                var wday = days[dateObj.getDay() + 1] 
                var lmonth = months[dateObj.getMonth() + 1] 
                var date = dateObj.getDate() 
                var fyear = dateObj.getYear() 
                if (fyear < 2000) 
                fyear = fyear + 1900 
                document.write("Last Updated: " + wday + " " + date + " " + lmonth + ", " + fyear + "  ") 
                // End --> 
              </SCRIPT> 
              </p></td> 
            <!--Title and info section--> 
            <tr><td width="100%" height="25%" valign="top"> 
              <table cellpadding="15" width="100%" height="100%"> 
                <tr><td class="body" width="100%" height="100%" valign="top"> 
                  <h1 align="center"><u>Implementation - Common Services 
                  Framework</u></h1> 
                  <h4>Information</h4> 
                  <ul style="list-style-image: url('../../../../images/2_1163.png')"> 
                    <li>&nbsp; 
                    </li> 
                  </ul>&nbsp;</td> 
                </tr> 
              </table></td> 
            </tr> 
            <!--END Title and info section--> 
            
            <!--Main section--> 
            <tr><td width="100%" height="67%" valign="top"> 
              <div align="center"> 
              <table border="0" cellpadding="3" cellspacing="0" width="100%" height="100%"> 
                <!--Title Section--> 
                <tr width="100%" height="7%"><td width="100%" colspan="3"> 
                  <div align="center"> 
                  <table border="0" cellpadding="3" cellspacing="0" width="100%" height="100%"> 
                    <tr><td width="100%" height="100%"> 
                      <p align="center"><u>Select a Implementation Artifact from this diagram or from the RUP menu on the left</u></td> 
                    </tr> 
                  </table> 
                  </div></td> 
                </tr> 
                <!--END Title Section--> 
                
                <!--1st row--> 
                <tr width="100%" height="31%"> 
                  <td width="33%"> 
                    <div align="center"> 
                    <table border="0" cellpadding="3" cellspacing="0" width="100%" height="100%"> 
                      <tr><td width="100%" height="75%" align="center" valign="bottom"></td></tr> 
                      <tr><td width="100%" height="25%" align="center"></td></tr> 
                    </table> 
                    </div> 
                  </td> 
                  <td width="34%"> 
                    <div align="center"> 
                    <table border="0" cellpadding="3" cellspacing="0" width="100%" height="100%"> 
                      <tr><td width="100%" height="75%" align="center" valign="bottom"><a href="http://itsdv3/nightly/index.jsp"><img border="0" src="../../../images/ar_build.gif" width="53" height="40"></a></td></tr> 
                      <tr><td width="100%" height="25%" align="center"><a href="http://itsdv3/nightly/index.jsp">Build Team Environment</a></td></tr> 
                    </table> 
                    </div> 
                  </td> 
                  <td width="33%"> 
                    <div align="center"> 
                    <table border="0" cellpadding="3" cellspacing="0" width="100%" height="100%"> 
                      <tr><td width="100%" height="75%" align="center" valign="bottom"></td></tr> 
                      <tr><td width="100%" height="25%" align="center"></td></tr> 
                    </table> 
                    </div> 
                  </td> 
                </tr> 
                <!--END 1st row--> 
                
                <!--2nd row--> 
                <tr width="100%" height="31%"> 
                  <td width="33%"> 
                    <div align="center"> 
                    <table border="0" cellpadding="3" cellspacing="0" width="100%" height="100%"> 
                      <tr><td width="100%" height="75%" align="center" valign="bottom"></td></tr> 
                      <tr><td width="100%" height="25%" align="center"></td></tr> 
                    </table> 
                    </div> 
                  </td> 
                  <td width="34%"> 
                    <div align="center"> 
                    <table border="0" cellpadding="3" cellspacing="0" width="100%" height="100%"> 
                      <tr><td width="100%" height="75%" align="center" valign="bottom"></td></tr> 
                      <tr><td width="100%" height="25%" align="center"></td></tr> 
                    </table> 
                    </div> 
                  </td> 
                  <td width="33%"> 
                    <div align="center"> 
                    <table border="0" cellpadding="3" cellspacing="0" width="100%" height="100%"> 
                      <tr><td width="100%" height="75%" align="center" valign="bottom"></td></tr> 
                      <tr><td width="100%" height="25%" align="center"></td></tr> 
                    </table> 
                    </div> 
                  </td> 
                </tr> 
                <!--END 2nd row--> 
                
                <!--3rd row--> 
                <tr width="100%" height="31%"> 
                  <td width="33%"> 
                    <div align="center"> 
                    <table border="0" cellpadding="3" cellspacing="0" width="100%" height="100%"> 
                      <tr><td width="100%" height="75%" align="center" valign="bottom"></td></tr> 
                      <tr><td width="100%" height="25%" align="center"></td></tr> 
                    </table> 
                    </div> 
                  </td> 
                  <td width="34%"> 
                    <div align="center"> 
                    <table border="0" cellpadding="3" cellspacing="0" width="100%" height="100%"> 
                      <tr><td width="100%" height="55%" align="center" valign="bottom"></td></tr> 
                      <tr><td width="100%" height="45%" align="center"></td></tr> 
                    </table> 
                    </div> 
                  </td> 
                  <td width="33%"> 
                    <div align="center"> 
                    <table border="0" cellpadding="3" cellspacing="0" width="100%" height="100%"> 
                      <tr><td width="100%" height="75%" align="center" valign="bottom"></td></tr> 
                      <tr><td width="100%" height="25%" align="center"></td></tr> 
                    </table> 
                    </div> 
                  </td> 
                </tr> 
                <!--END 3rd row--> 
              </table> 
              </center> 
              </div></td> 
            </tr> 
            <!--END Main section--> 
            <!--Footer--> 
            <tr><td width="100%" height="4%" valign="top"> 
              <div align="center"> 
              <table border="0" cellpadding="15" cellspacing="0" width="100%"> 
                <tr><td width="100%"> 
                  <p align="center"> </td> 
                </tr> 
              </table> 
              </div></td> 
            </tr> 
            <!--END Footer--> 
          </table></td> 
        </tr> 
      </table></td> 
    </tr> 
  </table> 
</div> 

</body> 

</html> 

If you manage to help me, you are the cleverest guys alive and I will have your kids!!!!!!

Thank you very much in advance,

Dave

Poster: kevin3442
Dated: Tuesday September 7 2004 - 18:30:53 BST

Hi Dave,

darkcircuituk wrote:

I have the standard menu_data.js file, do I need to just create another menu_data.js file with a different name and then place the dynamic menu in there? Then call this other menu using moveover?

No. One menu_data.js file will suffice.

Any milonic menu can act as a context menu. What makes a menu a context menu is simply that the menu's name is assigned to a global variable called contextMenu. The contextMenu variable is defined in contextmenu.js, and is initially set to a value of "contextMenu", which, in the downloadable example, is the name of a menu defined in menu_data.js, along with all of the other menus. So, unless you change the value of the contextMenu variable, the menu that appears when you rght click will be the one named "contextMenu". Making different menus appear is therefore a matter of defining the various menus that will serve as context menus, then changing the value of the contextMenu variable to the name of the menu you want to display, according to the events that you have in mind.

Take the following two menus, defined in menu_data.js:

Code:

with(milonic=new menuname("contextMenu")){
top="offset=2"
style = contextStyle;
margin=3
aI("text=Milonic Home Page;url=/;image=home.gif");
aI("text=Print;url=javascript:window.print();separatorsize=1;image=print.gif");
aI("text=Back;url=javascript:history.go(-1);image=back.gif");
aI("text=Forward;url=javascript:history.go(1);image=forward.gif");
aI("text=Refresh;url=javascript:history.go(0);image=browser.gif");
aI("text=View Page Source;url=javascript:Vsrc();separatorsize=1;");
aI("text=Menu Samples;showmenu=Context Milonic DHTML menu samples;");
aI("text=Disable This Menu;url=`javascript:var contextDisabled=true;closeAllMenus();`");
}

with(milonic=new menuname("contextLink")){
top="offset=2"
style = contextStyle;
margin=3
aI("text=Open;onfunction=mm_setUrlToOpen();");
aI("text=Open in a New Window;target='new';separatorsize=1;onfunction=mm_setUrlToOpen();");
aI("text=Milonic Home Page;url=/;image=home.gif;");
aI("text=Print;url=javascript:window.print();separatorsize=1;image=print.gif");
aI("text=Back;url=javascript:history.go(-1);image=back.gif");
aI("text=Forward;url=javascript:history.go(1);image=forward.gif");
aI("text=Refresh;url=javascript:history.go(0);image=browser.gif");
aI("text=View Page Source;url=javascript:Vsrc();separatorsize=1;");
aI("text=Menu Samples;showmenu=Context Milonic DHTML menu samples;");
aI("text=Disable This Menu;url=`javascript:var contextDisabled=true;closeAllMenus();`");
}

The first menu is the standard "contextMenu" used in sample27. The menu named "contextMenu" will be used when the pointer is not on a link. The menu named "contextLink" will be used when the pointer is on a link. The "contextLink" menu is a copy of the first, with two more menu items added to the top: "Open" and "Open in a New Window". The aI() defnitions of the two additional items are general, and are meant to serve for any link.

Now we need two more things: First, as Andy mentioned earlier in this thread, we need mouseover event handlers to switch between the two context menus depending on whether the pointer is on a link or not. Second, we need a function that will change the actual url for the "Open" and "Open in a New Window" menu items based on the link that the menu was opened from; we can use the contextObject that Andy mentioned in the other thread you started on this topic. These thing can be accomplished by the followig steps:

(1) Insert the following code at the top of your menu_data.js file:

Code:

var contextMenus = new Array();
contextMenus[true] = "contextLink";
contextMenus[false] = contextMenu;
contextState = false;

function mm_toggleContextMenu()
{
  contextState = !contextState;
  contextMenu = contextMenus[contextState];
}

function mm_setUrlToOpen()
{
  _mi[_itemRef][2] = contextObject.href;
  itemOff(_itemRef);
  itemOn(_itemRef);
}

Note that for this code to work, I will assume that your second context menu -- the one that appears when the pointer is on a link -- is named "contextLink".

(2) Make sure that you load contextmenu.js into the page before menu_data.js (this is opposite of the way the downloadable sample shows, but to help automate some of this process, contextmenu.js should be loaded before menu_data.js).

(3) On any link, set onmouseover and onmouseout as follows:

Code:

<a href="http://www.google.com/" onmouseover="javascript:mm_toggleContextMenu()" onmouseout="javascript:mm_toggleContextMenu()">Google</a>

Of course, you'd set the href and link text as befits your goal, but onmouseover and onmouseout should both be set as shown in the example above.

This approach works, is fairly automated, and requires a minimum of coding. Describing how and why it works would take a few more paragraphs, so I'll skip that for now. If you're interested in the "how and why" part (or if anyone else is), we can do that later, after you get it working.

Cheers,

Kevin

EDIT: You can see a working example of the above here.

You are the best

Poster: darkcircuituk
Dated: Thursday September 9 2004 - 10:06:28 BST

I am sorry but you are soooooo the daddy, that solution worked brilliantly, I am really impressed with milonic's forums!!! I really didn't expect a solution, thank you so much Kevin!!!!

Dave

Slight problem

Poster: darkcircuituk
Dated: Thursday September 9 2004 - 13:53:43 BST

Your solution works great other than a slight niggley problem.

The onfunction command that you provided calls the function when the mouse goes over the particular option on the menu. This means that rather than actually clicking on the option to take u to the page u require, all you have to do is bring ur mouse over the option. I wish it to be so that you have to click the option you want and then it will bring up the page.

I have declared the function that you provided to collect the address of the hyperlink you right clicked on (I declared it slightly differently):

Code:

function mm_setUrlToOpen() 
{ 
  item_url = contextObject.parentElement;
}

that worked perfectly 8

and so I decided to code another 2 functions that would actually open the page in the required ways (open in current window, and open in new window). This again works fine, the real problem I have is that I can think of no way of calling these functions. I have tried using the 'url=' command before and after the onfunction command to no avail. I wanted to check that it would work without the onfunction command so I tried removing that and it called the function perfectly. What I need to know is how to call the function when it is clicked on as well as calling the current 'onfunction' function that is called when the mouse is passed over the option.

Thank you for any help you can offer

Dave

Ignore me!!

Poster: darkcircuituk
Dated: Thursday September 9 2004 - 13:57:31 BST

Really sorry, managed to solve it myself, it did work using 'url='. Don't know why I thought it didn't, thank you so much for all your help.

Dave

Re: Slight problem

Poster: kevin3442
Dated: Thursday September 9 2004 - 21:04:18 BST

Hi Dave,

darkcircuituk wrote:

I am sorry but you are soooooo the daddy...

Thanks... I think.

darkcircuituk wrote:

... that solution worked brilliantly, I am really impressed with milonic's forums!!! I really didn't expect a solution, thank you so much Kevin!!!!

You're welcome. Thanks for the nice comment about the forums.

darkcircuituk wrote:

Your solution works great other than a slight niggley problem.

I don't mean to seem picky, but I don't want othe people who might come across this thread to get the wrong impression, so I'm going to slightly disagree with your next comments.

darkcircuituk wrote:

The onfunction command that you provided calls the function when the mouse goes over the particular option on the menu. This means that rather than actually clicking on the option to take u to the page u require, all you have to do is bring ur mouse over the option.

That's not the case at all. Is it possible that you might have assumed that was the case based on the name of the function? In any case... it's true that, in the "Open" and "Open in a New Window" items, the onfunction property calls mm_setUrlToOpen(). But that function does not change the page. Instead, the function as I originally wrote it...

Code:

function mm_setUrlToOpen() 
{ 
  _mi[_itemRef][2] = contextObject.href; 
  itemOff(_itemRef); 
  itemOn(_itemRef); 
}

sets the url property of the currently "moused over" menu item (the one the pointer is pointing at). That's why the aI() definitions of the "Open" and "Open in a New Window" items do not have a url= property... they don't need one beause their url is set dynamically, when the user mouses over the item. All mm_setUrlToOpen() does is change the url property of the menu item so that it is the same as the href attribute of the link that you right-clicked on to open the menu. This is preparatory to when the item might eventually be clicked. In other words, mm_setUrlToOpen() makes the url of the menu item ready when you mouse over it, just in case the item is subsequently clicked. This sequence of events seemed logical to me, because you can't click an item until you mouse over it. If you do eventually click the "Open" item or "Open in a New Window" item, the standard menu code handles the click, and you will then be taken to the appropriate new page (in the same window or different window, depending on which item you clicked). But the page does not change until you actually click one of the two menu items (or left click on the link itself, of course).

darkcircuituk wrote:

I wish it to be so that you have to click the option you want and then it will bring up the page.

Just to be clear in what Im trying to point out... this is, in fact, exactly what happens the way I wrote it. You have to click the menu item for any action to be taken. If you like, you can view a working example that uses the same code I posted earlier in the thread.

darkcircuituk wrote:

I have declared the function that you provided to collect the address of the hyperlink you right clicked on (I declared it slightly differently):

Code:

function mm_setUrlToOpen() 
{ 
  item_url = contextObject.parentElement;
}

that worked perfectly 8

and so I decided to code another 2 functions that would actually open the page in the required ways (open in current window, and open in new window).

I imagine that you'll use the window.open() method to open a new window with the href you got from the contextObject. And you'll probably have another funciton that simply changes the current page's location.href to the new one. But that seems like a lot of extra work to me; two additional functions to do what it was already designed to do?

darkcircuituk wrote:

This again works fine, the real problem I have is that I can think of no way of calling these functions. I have tried using the 'url=' command before and after the onfunction command to no avail. I wanted to check that it would work without the onfunction command so I tried removing that and it called the function perfectly. What I need to know is how to call the function when it is clicked on as well as calling the current 'onfunction' function that is called when the mouse is passed over the option.

If you're doing it the way I imagine, then you'll need to define a url property in the "Open" and "Open in a New Window" items; something like url=javascript:yourFunction(item_url) which should work assuming that your item_url variable is global. Note that if you are using the window.open() method to open a new window, then you will not need target='new'; in the aI() definition for the "Open in a New Window" item the way I had it in my approach.

Cheers,

Kevin

Poster: Andy
Dated: Thursday September 9 2004 - 21:47:40 BST

http://support.milonic.com/demos/dynamic_context/

Heh, nice one Kevin, when did you do that :?:

-- Andy

Poster: kevin3442
Dated: Thursday September 9 2004 - 23:49:23 BST

Andy wrote:

http://support.milonic.com/demos/dynamic_context/

Heh, nice one Kevin, when did you do that :?:

-- Andy

Thanks Andy. Did it a couple days ago. Posted the example today, in case interested parties wanted to see it working. Your contextObject addition to contextmenu.js was a very nice touch... simplified the code required for this little project quite a bit. I'm sure it'll come in handy in many other contexts too

Cheers,

Kevin

Poster: gxgolfer
Dated: Saturday June 25 2005 - 21:50:16 BST

This talks about opening a predefined link. Is there a way I can open a link where I don't know the syntax. Basically, if its a forum and continuous message threads come up, I am trying to find a way to open it in a new windows as an option.

Poster: Ruth
Dated: Sunday June 26 2005 - 2:57:46 BST

I'm not sure what you mean, a link is a link, it's defined or it wouldn't work as a link.

Is it that you want the Milonic context menu to be integrated directly into your forum? So that when you click on a forum link it has the option of the Milonic context right click menu and the extra dynamic function to allow opening in a new window option?

Ruth

Poster: gxgolfer
Dated: Sunday June 26 2005 - 19:14:11 BST

Yes,

It is currently integrated into my forums but, I would like the ability to scroll over a link and open it in a new window. I can't define the link like in the example cause it is always changing.

Poster: Ruth
Dated: Sunday June 26 2005 - 19:59:37 BST

Hi,

I have posted a request for someone to look at this and see if it is possible. The person is often not available for periods when out of town so I do not know when a response is likely. I don't know anything about things such as forums, like the phpbb, and just how you would apply the context module and then the dynamic context function to links such as appear in forums. Somehow I think it would have to be applied inside your forum, perhaps using the php coding to call it when you mouseover any links. But, it really is beyond my level of knowledge.

Ruth

Poster: gxgolfer
Dated: Sunday June 26 2005 - 20:13:09 BST

Thanks for the help!

Found it

Poster: gxgolfer
Dated: Friday July 1 2005 - 3:44:39 BST

I had to reread the thread about 10 times and realized the code and menu referrals where there.

Thanks again for the help.

Poster: gxgolfer
Dated: Saturday July 2 2005 - 2:47:37 BST

Sorry for the multiple post but, I ran into a weird problem with the AI open code. In IE, it only opens one window. When I try to open another window, it doesn't open another widow but instead refreshes the window that was just opened from the root page. In Firefox, it will open multiple tabs without any issues...

Thanks in advance!

Poster: Andy
Dated: Monday July 4 2005 - 9:29:06 BST

I guess you are using target=_new;? If so, try using target=_blank; instead

Hope this helps,
Andy

Poster: Andy
Dated: Monday July 4 2005 - 9:58:46 BST

Adding target=_blank; instead of target=_new; will fix this.

Hmmm, I just had a feeling of deja-vu

Cheers,
Andy