Solved

Who can provide me an example of a dynamical menu ?

Posted on 2002-05-27
34
236 Views
Last Modified: 2013-12-18
hello all top-experts,

I need information of how to make a dynamical menu.
I've x items, when I click on one of the items, I want to see a dropdown menu with y possible choices.
I know that there's one example in Iris sandbox, but I'm looking to another one, may be one in javascript or so ?

If I've a good answer, you can get more points.
Thanks,
Magnex
0
Comment
Question by:magnex
  • 15
  • 13
  • 4
  • +1
34 Comments
 
LVL 10

Expert Comment

by:zvonko
ID: 7037100
For web (browser client)?
Which Domino version?
What are the items and from where are they fetched?

What else does dynamicaly change in this menue?

Can you drow a menu structure here please...



0
 

Author Comment

by:magnex
ID: 7037122
it's for the browser IE5 or above
i've R5.0.10
If it's possible, I want that my menu is base from a view.
In the view, my first column (maybe categorized) is the main menu, and the second colums are all the possible items from that menu
eg
Main1
.......SubMain1.1
.......SUbMain1.2
.......SubMain1.3
Main2
.......SubMAin2.1
.......SUbMain2.2
.......SubMain2.3

The page will look
Main1 - Main2
when I click Main1, I want to see below Main1 a dropdown menu with the three SubMain Items (1.1 1.2 1.3)

0
 
LVL 10

Expert Comment

by:zvonko
ID: 7037161
This concept you ask for I use now for years. I named it: NaviItems

It is founded from times where no Outline elements where there in Domino. So I created own outlines based on NaviItems view.
I had a form to create NaviItemDoc and displayed this documents in the NaviItems view. This view was my navigator for selecting actions, for example display other views in main frame.

On a NaviItemDoc there where several fields:
1.) ItemPosition; to control item position in the menu.
2.) ItemTitle; for the Item heading
3.) ItemLink; for the action to link to
4.) ItemReaders; a Readers field to hide some items from general users.
5.) AdminReader; a fix field to allow Administrator to be always readers.

Additionally I used sometime a field for the link destination if I had several frames.

It is absolutely enough to have s single ItemTitle and use the prefixed category in the ItemTitle separated by an back slash to let the view generate the category for you.

If this concept is interesting for you I can present it in more details.

So long,
zvonko


0
 

Author Comment

by:magnex
ID: 7037581
this is what I'm looking for.
Can you send me an example or give me more details about it.

Thanks in advance,
Magnex
0
 
LVL 10

Expert Comment

by:zvonko
ID: 7037748
Send me an email to: paunoski@freenet.de

I will try to prepare an example this week.
Next week I am on vacations, sailing.

So long,
zvonko

0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7038432
Sounds like something I'd do too, congrats zvonko :-)
0
 

Author Comment

by:magnex
ID: 7038500
Zvonko,

I've send you an email.

Thanks,
Magnex
0
 

Author Comment

by:magnex
ID: 7046342
Zvonko,

I've already increase the points with 50 points.
So, you will receive more if you send me your example.
Dont fortget me ;-)
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7046359
If you don't get an answer from zvonko today and you want an answer quick, let me know and I'll try to work out an example for you, since zvonko is on vacation starting this evening :-)
0
 
LVL 10

Expert Comment

by:zvonko
ID: 7046735
JM, Magnex,

I sent to you both my example.

In a week or so I am back.

So long,
zvonko

0
 
LVL 3

Expert Comment

by:ruff_ryder
ID: 7048779
magnex could you send me that example as well. I've been looking for something like this for a while now.
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7050454
Post your email address here or mail me at jean-marie.geeraerts@philips.com and I'll be glad to send you the example zvonko sent us.
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7050503
Mail with attachment of the sample has been sent.
Just let us know if you need any assistance with it.
Regards,
JM
0
 
LVL 3

Expert Comment

by:ruff_ryder
ID: 7050516
ok will do, just received it and will have a look tomorrow at work. Thanks again!
0
 

Author Comment

by:magnex
ID: 7050642
zvonko, Jerrith,

This example is not really what I'm looking for.
This is almost just the same like an outline.
What I meanes was, that you have horizontal five tabs.
When you click on one of the tab you see a kind ob pop-up window (below the tab) with the choices.
If you hover the tab with the mouse the popup window is automtically showing with the names of the choices.
A dynamic menu system like in flash.
Here's the link to the example in the Sandbax http://www-10.lotus.com/ldd/sandbox.nsf/ByApplicationNameNJ/2a3a68a850a91ac388256ab10074628f?OpenDocument
I want have the same, but I prefer in Javascript and that the users, by adding a document automatically add and item in the dynamic list.

I hope that I'm no a little bit more clear
PS The name are listed horizontal and not vertical
Choice1  Choice2  ............

More points will follow if Ive the right solution
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7050658
Just for clarification :
The five tabs are fixed, only the menu items per main menu are dynamic?
What action should be taken when you click on a menu item, should the referenced document be opened or should any action be possible?

If you only intend to create a menu system to view documents from the menu list, that should be fairly easy for me to create you a working sample. If it's the latter, where you need to define the specific actions, I'd first have to look into zvonko's code, but I should manage to provide you with a possible solution.

If you're interested Ruff_rider, I can send you a sample db too.

But before I start, I'd like a bit more info, thanks.
0
 

Author Comment

by:magnex
ID: 7050674
Yes, the Main Menu items are fixed.
The menu items for each Main Menu item are dynamic.
If you click on one of the menu items just a link must be generated.
 
Par example.
The user wants to add a new template named Excel Template.
So, he creates a new document.
The first field is the Main Menu item >> Templates
The second field is the menu item from tempalte >> Excel Template
If he clicks on Excel Template, the excel template must be opened in the same frame or in a new frame

Do you have now enough information ?
Thanks for the help
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:magnex
ID: 7050692
zvonko, Jerrith,

This example is not really what I'm looking for.
This is almost just the same like an outline.
What I meanes was, that you have horizontal five tabs.
When you click on one of the tab you see a kind ob pop-up window (below the tab) with the choices.
If you hover the tab with the mouse the popup window is automtically showing with the names of the choices.
A dynamic menu system like in flash.
Here's the link to the example in the Sandbax http://www-10.lotus.com/ldd/sandbox.nsf/ByApplicationNameNJ/2a3a68a850a91ac388256ab10074628f?OpenDocument
I want have the same, but I prefer in Javascript and that the users, by adding a document automatically add and item in the dynamic list.

I hope that I'm no a little bit more clear
PS The name are listed horizontal and not vertical
Choice1  Choice2  ............

More points will follow if Ive the right solution
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7050707
Okay, should be simple enough.
Give me some time to work out a working sample database for you. I'll get back to you later today...
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7051054
Sorry, didn't have time to finish your sample database today, so I'll get back to you tomorrow.
A hint: I've put the menu in a subform to put on every form so it is always available.
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7053326
Okay, I've just sent you a sample database with a few documents and the design elements to create a dynamic menu.

A short description of how I did it:

1) Created a subform with some computed fields to represent the menu. The fields are computed using a DbLookup formula, to get the documents per category and then converting this list to HTML-code to get a list of links to the different documents.

2) Created a stylesheet to make it possible to define styles for menu title and menu items. The styles are also used to make the menu items invisible, unless the title is hovered.

3) On the subform there are javascript functions to show the menu items for the menu item that is being hovered.

Detailed description of the design is as follows:

Subform MenuBar
----------------------------------------------------------
Field : Menu1
Type : text, computed for display
Formula :
DbName:=@Subset(@DbName;-1);
choices:=@DbLookup( "":"NoCache" ; "":""; "Menu Structure"; "Documentation"; 2);
"[<DIV CLASS=\"MenuTitle\"  onMouseOver=\"showMenu(\'Documentation\');\">Documentation</DIV><DIV ID=\"Documentation\" CLASS=\"MenuItems\">]" +
@If(@IsError(choices);
     "No documents available";
     "[" +
     @Implode("<a href=\"/" + @ReplaceSubstring(DbName + "/Menu/" + choices + "\">"; " ":"\\"; "+":"/") + choices + "</A>"; "<BR>") + "</DIV>"
     + "]")

Similar fields for other menu categories can be created by replacing "Documentation" with the wanted category.

JS Header
// setStyleById: given an element id, style property and value, apply the style.
// args:
//  i - element id
//  p - property
//  v - value
//
function setStyleById(i, p, v) {
     var n = document.getElementById(i);
     n.style[p] = v;
}

// hide all menu items except menuItem
function showMenu(menuItem)
     {
     // Hide menu items
     setStyleById('Documentation', 'visibility', 'hidden');
     setStyleById('Examples', 'visibility', 'hidden');
     setStyleById('SourceCodes', 'visibility', 'hidden');
     setStyleById('Templates', 'visibility', 'hidden');
     setStyleById('Other', 'visibility', 'hidden');
     // Set vertical position of the menubox, so it appears 5 pixels below the mouse cursor
     setStyleById(menuItem, 'top', '30px');
     // Show selected menu item
     setStyleById(menuItem, 'visibility', 'visible');
     }

Stylesheet elements needed to display menus:
----------------------------------------------------------
.MenuTitle{
     background-color : #EEEEDC;
     border-style : solid;
     border-width : 1px;
     padding : 5px;
     font-family : Arial, sans-serif;
     font-weight : Bold;
     cursor : Hand;
     width : 100%;
     height : 30px;
}

.MenuItems {
     background-color : #E5E5E5;
     border-style : solid;
     border-width : 1px;
     padding : 5px;
     font-family : Arial, sans-serif;
     width : 100%;
     visibility : hidden;
     position : absolute;
     top : 0px;
     z-index : 4;
}


View : Menu Structure
----------------------------------------------------------
This view is used to get the documents per category for the computed fields on the MenuBar subform.
The view is sorted, categorized on categories and sorted on document title.

View : Menu
----------------------------------------------------------
An alphabetical list of all documents by title.
This view is used to create the URL-reference to the documents from the menu. To make this work as it should all document titles must be unique, otherwise the first document with the same title in the view will be shown.

I hope this explains the design and you will be able to use it, if not, let me know where you get stuck.

Regards,
JM
0
 

Author Comment

by:magnex
ID: 7053416
Thanks for the example.
Everything works fine.
This is what I want.
Thanks for your time, the points follow friday(because, I can then increase the points to 200, all what I've then and you will receive an A grade).
Two short additional questions,
1. Is it posible to change the main menu items like Documentation, Example in pictures ?
2. Is it also possible to have in your list of menu items a horizontal line between each item.

Thanks for your time and your help.
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7053492
Yes, that can be done.
The formula to compute the HTML would have to be changed so that in stead of a text between DIV tags an image is used as menu item and the <BR> (=line break) to seperate entries would be replaced with a <HR> (=horizontal rule).

Let me work out the formula with pictures (takes a bit of effort) and get back to you in a few minutes.
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7053508
DbName:=@Subset(@DbName;-1);
choices:=@DbLookup( "":"NoCache" ; "":""; "Menu Structure"; "Documentation"; 2);
"[<DIV CLASS=\"MenuTitle\"><IMG SRC=\"/" + DbName + "/Documentation\" onMouseOver=\"showMenu(\'Documentation\');\"></DIV><DIV ID=\"Documentation\"
CLASS=\"MenuItems\">]" +
@If(@IsError(choices);
    "No documents available";
    "[" +
    @Implode("<a href=\"/" + @ReplaceSubstring(DbName + "/Menu/" + choices + "\">"; " ":"\\"; "+":"/")
+ choices + "</A>"; "<HR>") + "</DIV>"
    + "]")

The image needs to be inserted in the database as an image resource and then assign the alias "Documentation" to the image file or use the name of the graphic behind SRC= in the IMG tag.

A little more info:
The HTML-code to display an image is :
<IMG SRC="sourcepathOfImage">
I compute the source path as the path of the database with the name of the image attached to it. (don't forget the '/' to the name of the file from the database path).
As said, you can either use an alias to refer to the image or use the image file name.

Regards,
JM
0
 

Author Comment

by:magnex
ID: 7053529
Thanks for the fast answer and your time
You'll receive the points friday
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7053532
You're welcome. Thanks in advance :-)
0
 

Author Comment

by:magnex
ID: 7077702
Jerrith,

I've already increase the points.
But one extra question, is it also possible that we can give in URL links, in place of Uploading a file ?
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7077735
Do you intend to directly link to that URL from the menu?
0
 

Author Comment

by:magnex
ID: 7077744
yes, to another database or to another view in this or another database.
And what must I add to my href to say that I want to open the url in a new window or a popup window
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7077844
Okay, to make the menu so that it directly links to an attachment or a provided link, you could add a computed text field to the menu item form that computes the URL to be used in the menu.
To open in a new window construct your link as follows:

<A HREF="/addres.to.go.to" TARGET="_blank">Link text</A>

The target= defines where the link is to be opened. This can have the following values:
_self : in the current window/frame
_top : in the top frame of the current window
_blank : in a new window
NameOfFrame : in the frame called "NameOfFrame" in the current frameset.

Is this clear enough or do you want me to work out the formula for the computed URL field?
0
 

Author Comment

by:magnex
ID: 7097948
Jerrith,
I'm still not oout of my problem.
This is the reason why I've increase the points again.
Again two questions.
1. My previous problem is not solved, I've added a text field(named URL) in my menu where I can wright my URL instead of using my attachment.
But it will not open my url.
The form properties are so that he opens automatically the first attachment.
so, I change the computed text in your menu item form
@If(!@Attachments; @URLOpen("http://www.notes.net"); "");
But it desn't work :-(
2. THe menu system works, but I've only one remark, when I mouse over an item, I see the submenu items, that's oke, but I want that it disappear if I don't mouse over anymore over one of the items.
Now, the subitems stays visible.

Thanks for your time and your help
0
 
LVL 8

Accepted Solution

by:
Jean Marie Geeraerts earned 250 total points
ID: 7098069
I've just looked into the sample database I created earlier for you and made the following modifications:

First to solve your first problem:
1) Added on the form "Menu Item" a text-field, called 'LinkTo' where an URL link can be entered.
2) In the view "Menu Structure" added a third column with the following formula:
   @if(Linkto="";
      @ReplaceSubstring("/" + @Subset(@DbName;-1) + "/Menu/" + @Text(@DocumentUniqueID) + "?OpenDocument"; " ":"\\"; "+":"/");
      Linkto)
3) Updated the formula's to display the menu items in the "MenuBar" subform as follows :
choices:=@DbLookup( "":"NoCache" ; "":""; "Menu Structure"; "Documentation"; 2);
urls:=@DbLookup( "":"NoCache" ; "":""; "Menu Structure"; "Documentation"; 3);
"[<DIV CLASS=\"MenuTitle\"  onMouseOver=\"showMenu(\'Documentation\');\">Documentation</DIV><DIV ID=\"Documentation\" CLASS=\"MenuItems\">]" +
@If(@IsError(choices);
     "No documents available";
     "[" +
     @Implode("<a href=\"" + urls + "\">" + choices + "</A>"; "<BR>") + "</DIV>"
     + "]")

The result of these changes is that if you entered an URL in the menu item document, this URL will be opened directly from the menu. If you didn't enter a URL, the document will be opened.

For your second problem:
I've tried to add a onMouseOut event to the menu item, but I found this not to work as I'd like it to, the menu items would disappear to easily, if you didn't move your mouse right.
So I've thought of the following alternative:
On the document form include an onClick event with the following JavaScript-code:
hideMenus();

In the JS Header of the MenuBar subform include the function hideMenus to hide all menus:
function hideMenus()
     {
     setStyleById('Documentation', 'visibility', 'hidden');
     setStyleById('Examples', 'visibility', 'hidden');
     setStyleById('SourceCodes', 'visibility', 'hidden');
     setStyleById('Templates', 'visibility', 'hidden');
     setStyleById('Other', 'visibility', 'hidden');
     }

This way if you click on the form outside the menu, the menu will close.

I've lost your email address, so I can't send you the updated sample database. If you like me to send it to you, drop me a line at my email address: jean-marie.geeraerts@philips.com

Regards,
JM
0
 

Author Comment

by:magnex
ID: 7098458
Thank you for the help and the time.
Last little question, for a web-experts like you, it will be no problem.
One of my subitems is a link to a form in a new window,but know I want to close that window, if I use window.close(), he ask me a verification, how can I close the window, without that question ?????????
If I open a new window with the command window.open(...) and use then the command window.close(), I've no problem.
But because we use a href command I've this problem.
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 7098641
To solve this problem, you'd have to change the popup-menu so that there are no <A HREF=..."> tags created, but a JavaScript function is called to open the url.

To this function, you would pass two parameters : the url to open and the target the url should be opened in.

This function could look something like this :
function openURL(url, target)
   {
   if (target=='_blank')
      {
      window.open(url, "", "");
      }
   else
      {
      location.href=url;
      }
   }
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I thought it will be a good idea to make a post as it will help in case someone else faces these issues. I trust this gives an idea how each entry in Notes.ini can mean a lot for the Domino Server to be functioning properly. This article discusses t…
  In today’s Arena we can’t imagine our lives without Internet as we are highly used to of it. If we consider our life style just for only 2 min we found that face to face communication is swapped by e-communication.  Every Where from Works place to…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now