Graphical Menu Editor...

[Andy]

Just one thing to remember.

It might be an idea to ensure that new menu/style properties can be added easily. They are being added all the time, although not as much these days. So it would be great if you can perhaps use XML for setting up the properties.

That way we don't have to recompile when we release a new version that has any changes to the menu data structure.

Cheers
Andy

[Andy]

Also, I think it would be great if we can have 2 or 3 different property views for building menus.

Something like:
1. Basic.
2. Advanced.
3. Everything.

Basic will just give you text, url, and basic colors for setting up a text based menu.

Advanced will be the same as basic but with extra properties for declaring images and other tuff

Everything will allow you to use ALL of the menu properties.

There are way too many properties to be able to view them all at any one time so by simplifying it with a basic set of properties would be just great for the noobs.

Cheers
Andy

[code-frog]

What about grouping similar properties into categories?

- Font (Size, Color, Weight)
- Image (Subimage, imageon, imageover...)
- Lines (Borders, Etc)...
- Effects
- Orientation

You get the idea.

Some time down the road it would be cool to build in all your examples into an example browser. Where a user could view them all, select the one they like and immediately start using it.

- Rex

[ywfbi]

Hi folks, I wrote this
[link removed, no longer available]
just out of shear bordom.
Basically it takes a menu_data.js file and lets you change and preview color, font settings etc, etc, and then outputs a new menu_data file for you to copy and save. Basically its HTML/javascript based, has a few bugs and does need finetuning, (not to mention to scope for additions to the basic HTML page). Have a look, if its any use to ya let me know. Ive got to the stage where Im spending too much time on these projects and have decided to shift my resources to something more productive for me!

[Ruth]

Hi,

I like that. It doesn't update to the new code, is it supposed to update so you see changes or just output the new code for you? It doesn't do that either. But, I do like the idea. Very easy to use. I think most everyone is away right now, but will take a look when they are back.

Ruth

[ywfbi]

Hi Ruth, youre right, it doesn't update the menu_data.js file directly. Would have to do some activeX to get that done, or possibly flash.

What it does do is display the changes on the menu it has loaded from the menu_data.js file supplied (which is basically standard), so you can see the effect it will have on the same page your editing with. (Is it not doing that on your end?) .
You can use your 'own' menu data file by putting it in that folder, and then try changing the menu and see the results as soon as you've changed any field in the form.

There are some issues particalary with firefox and borders also followscroll, menu alignment on all browsers. Although most of these should be able to be resolved by mapping to the correct array objects.
After clicking 'save current data' the menu_data window is created entirely from the _m and _mi array contents, so it will contain any changes you've entered, the output is pretty close to the actual file I used. The intention here is that you can copy and paste into a new file to save the changes, although automating this would be good IMO.

While writing the menu_data output function (savedata) I noticed several small mistakes where some things could have been done a better way. Also there is no reason why it couldn't be made to actually create or alter menu contents directly, or even create a menu from scratch. It works by reading and writing directly to the _m and _mi arrays, so all that you'd have to do is create a new form for the input, and create a function to write to the arrays the new menus (see wrtmenuitem func.), then call updateMenu();

One question though, what is _m[x][21,22,23]? These are the only things I couldn't figure out. Is _m[x][22] the menustyle?

Edit: BTW heres the link to source files, save you searching through the temp internet files....
[link removed, no longer available]

[Ruth]

Hi,

I don't know anything about doing javascript or programming, but I think the numbers are the reference numbers for different properties.

headerbgcolor 21
subimagepadding 22
subimageposition 23

There are links below my name for properties in the menu, the menu properties and item properties have property ref numbers with them.

As to the tool, it doesn't do anything on web site page, nor when I try it on my desktop. It will put the color numbers into the little select box, but it doesn't output the new numbers when you click the Save Current Data, either. I have IE5.5 Win98.

[As a side issue, because I can't figure out what's doing it, I have zonealarm set to require I click yes to access the internet. Normally when I'm working on a page it never activates zonealarm but when I open the page from your zipfile in IE it tries to access the internet. The info I get from zonealarm is that the destination is 127.0.0.1, something to do with IANA. LOOPBACK, whatever that is. Do you know what's doing that and can I change it?]

Ruth

[ywfbi]

headerbgcolor 21
subimagepadding 22
subimageposition 23

Hi again Ruth, hope everythings well your way,
those are _mi[x][xx] values, ie menu item properties, I got those, its just the 3 _m[x][21,22,23] - menu properties values I couldn't figure out

As to the tool, it doesn't do anything on web site page, nor when I try it on my desktop. It will put the color numbers into the little select box, but it doesn't output the new numbers when you click the Save Current Data, either. I have IE5.5 Win98.

Not sure why it doesn't work on IE5.5, probibly the js Ive used is wrong somewhere, are you getting scripting errors? Also are the popup windows being blocked? I only have IE6, FF 1.0.6 and Opera 8.02 for testing so I may have used code that doesn't work on IE5.5

The info I get from zonealarm is that the destination is 127.0.0.1, something to do with IANA. LOOPBACK, whatever that is. Do you know what's doing that and can I change it?

127.0.0.1 or loopback is your own computer, I think all traffic from your browser goes through the firewall, so its just asking for permission to access a local file. IANA is the 'Internet Asigned Numbers Authority', probibly just in reference to the IP 127.0.0.1, IANA would asign that to loopback, ie looping back to itself. Not sure why its asking though, maybee because of the embedded scripts.

[Ruth]

Hi,

Those 3 menu properties don't seem to be listed so I'd have no idea what they are. Perhaps they are some property that is not configurable so they are not listed in the property reference?

I just tried it in FF1.0.2 and it works just fine. I did open the js console and get one warning, not error.

Code: Select all

Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead

It refers to this line div1.innerHTML = msg; from the top part

Code: Select all

<!--
msg = ("Use you own menu_data.js file to see your setup.");
document.write('<br><br><br><div align="center" ID="div1"></div>');
div1.innerHTML = msg;
var TCP = new TColorPicker();

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr);
}

Thanks for the information on the loopback. I've just never had IE request access to the web when working on a page on the desktop unless I had a href web address to an image or something.

I'm playing with the editor. I have to say I like it

Ruth

[ywfbi]

OK, I just cant leave it alone... adding menu item editing to the mix..., havnt done the save to array function yet, a work in progress.
[link removed, no longer available]

Zipped files....
[link removed, no longer available]

[Ruth]

That's terrific. And I know what you mean by 'can't leave it alone' I can't do programming, but I'm constantly [at the loss of doing something I should like clean house, paint...] making new menus designed in the weirdest layouts, mixing and matching treemenus and mouseovers, horizontal tabbed treemenus....

Ruth

[Ruth]

Hi,

Taking into account that I don't know any javascript or programming, I was messing around trying to see if I could make it work in IE5.5. Since it wasn't changing the menu, I looked for something to do with applying the change and saw the function updateMenu() and right below that I saw if statement

Code: Select all

function updateMenu()
{
if (ie55) chk_ins_font();

I figured, 'take that out, [since I can put it back with the undo in my editor ] and see what happens'. With that out of there, the menu updates in IE5.5 Of course I notice the chk_ins_font appears later, even though it doesn't have if (ie55) in front of it, so I don't know what happens with that.

I have no clue on outputting the saved data. I can't find anything in there that has anything to do with IE.... so it still doesn't output the data, but it's neat for seeing how the menu looks.

I also saw this line

Code: Select all

if (_m[0][6]) newdoc.write('style="menuStyle";<br>'); // I cant figure out how to output this style object!!

There is a function called changeMenuProperty that Kevin wrote which has a demo While trying it out it was discovered that it will not change the menuStyle. In response, Andy posted a demo to change the menuStyle and if you view source toward the bottom you'll see some functions, and I guess that is included. I don't understand any of it.

Sorry for such a long post.

Ruth

[ywfbi]

.....I saw if statement

Code: Select all

if (ie55) chk_ins_font();

With that out of there, the menu updates in IE5.5

Ahh, interesting. That is in there to prevent other browsers going through the 'check installed fonts' function

Code: Select all

for (var loop=1; loop<dlgHelper.fonts.count+1; loop++) allFonts[loop-1] = dlgHelper.fonts(loop);

should only work in IE5.5+, or was it 6.0??? Thats more than likely the problem. The whole thing could be done without anyway. I'll remove it now, try the link above when you get time. It is only there to help with font selection, but are is 2 backups!

.....I have no clue on outputting the saved data. I can't find anything in there that has anything to do with IE.... so it still doesn't output the data, but it's neat for seeing how the menu looks.

Is your browser blocking pop-ups? Thats the only thing I can think of....but I'll have another look

.....
I also saw this line

Code: Select all

if (_m[0][6]) newdoc.write('style="menuStyle";<br>'); // I cant figure out how to output this style object!!

Andy posted a demo to change the menuStyle and if you view source toward the bottom you'll see some functions, and I guess that is included

Thanks Ruth, I'll take a look at that. As you can see I cheated there, rather than writing the actual style name I set it to menustyle.
The wierd thing is that I cant output the borderstyle either, untill I've apply it manually at '_mi[x][64]', probibly a javascript lesson is due.
At the moment Im working on rewriting _m arrays for the edit menu items function, got my hands full there, but getting the menustyle right will mean custom styles will be recoginised!

[Ruth]

Hi,

Is your browser blocking pop-ups?

No, nothing blocked.

I just tested the new one. I can now see the changes for all the things now, but if I output the menu_data.js file it will only change the things from the right side, excluding borderstyle, but nothing from the left that has to do with the color things.

Ruth

[Ruth]

Hi again,

I meant to say something about border. There seems to be something that maybe could be called default fall back or something, sorry I don't know technical terms.

Offborder and Onborder are properties that when set put a border around each item. However, though I cannot find a property ref code for border, you do not have to set either off or on border, you can just set borderwidth=; borderstyle= ; and bordercolor=; which will place a border just around the menu, not around each item as the other two. Don't know if that gives you some helpful information or not.

Ruth

[ywfbi]

I found border color, _mi[x][63], you're right, maybee I should add another set of selectboxes for the menu border.

on/off border a.f.a.i.k. is the only way to create a mouseover border effect for the menuitems, something I had an interest in doing.
Ive set them using on/off border alone, _mi[x][9,25] seems to work fine since you put the style in there as well.

can just set borderwidth=; borderstyle= ; and bordercolor=;

{edited due to being totally incorrect} To use those I'd have to reload the menu_data.js file, meaning loosing the changes... however refs are...
borderwidth = 65, borderstyle = 64, bordercolor = 63.. not sure if they're on the site or not, but not hard to figure out Of the three only borderstyle is needed, as it contains the other 2 anyway.
Anyway borders should be working now, some stuff on right still needs finishing, but in the course of time! Also menu item editing is comming along very well, only final stages of that to go!

[Ruth]

Hi,

I wondered how it's going? Are you still playing around with this. I have been using the styling part, I really like that. I have created a page that I can pick the 'design' area bgcolor and then use your editor to see different things on the menu.

I added a couple of things to the file and wanted to let you know about that, in case you wanted to do something with them, and I also added an item to the menu itself. It is a function to change the orientation from horizontal to vertical, that way you can see the design in both orientations. Kevin wrote that function for the IE Filters Demo.

1. separatorsize and separator color. It won't update on the menu, but it does output to the file. I think it may be something like the border around the menu.

2. the fontstyle and fontweight for the off mouse position. You have the onbold and onitalic, but for the off position it uses the fontstyle and fontweight.

Code: Select all

if (_mi[0][13]&&_mi[0][13]!="normal") newdoc.write('fontstyle="' + _mi[0][13] + '";<br>');
	if (_mi[0][14]&&_mi[0][14]!="normal") newdoc.write('fontweight="' + _mi[0][14] + '";<br>');

With this it allows you to set styles different for the mouse on and mouse off position if you want.

3. textdecoration, which allows setting the textdecoration in the mouse off position.

Also, I noted that you have an option on there for menualign. Just so you know, menualign will only work if the menu is set at 100%, not at pixel width.

Finally, I have a function that will put a border around the menu. I use it outside your editor because I would have no clue how to include it, or even if that's possible. Kevin wrote it for me. I thought I'd post it here in case it would help you in any way.

Code: Select all

function mm_changeBorderStyle(menuName, width, style, color) 
{ 
  menuObj = gmobj("menu" + getMenuByName(menuName)); 

  menuObj.style.borderTopWidth = width; 
  menuObj.style.borderRightWidth = width; 
  menuObj.style.borderBottomWidth = width; 
  menuObj.style.borderLeftWidth = width; 

  menuObj.style.borderTopStyle = style; 
  menuObj.style.borderRightStyle = style; 
  menuObj.style.borderBottomStyle = style; 
  menuObj.style.borderLeftStyle = style; 

  menuObj.style.borderTopColor = color; 
  menuObj.style.borderRightColor = color; 
  menuObj.style.borderBottomColor = color; 
  menuObj.style.borderLeftColor = color; 
} 
</script>

With some help, I split it and fixed it so I could apply size, color and style separately and be able to see different things.

Anyway, I figured I'd give you the info I had, and a link to the page I made for me to use your editor. I use it on my desktop, but uploaded it so you could see the border part I'm using. There is a lot of other stuff there that really isn't for your editor, just how I wanted to set things up for my playing around with the menu designs. My Page

Ruth

[ywfbi]

Hi Ruth, I like what you've done, the Horiztonal/Vert was something I was gonna add later. Im sure you can see how things can be added to the basic structure, something thats important I think. As to your writing outside my thingy do worry at all, I can put most of that in the main function. (Probibly except the background, unless we add code to the milonic sources)
At the moment Im thinking the imporntant part is getting the edit items working properly. Do you think you could get Kevin to work on that??

I havnt had time over the last week or so and have found rewriting the _m and _mi arrays the hardest part to do so far. So far that online version used a second array _tma which is given the basic menu structure, this enables the edit boxes to function. However this leaves absolutly no support for multiple styles as only the basic menu items and structure are written then the output simply copies all data from _mi[1].
What I'd prefer to do is get the following functions to directly alter the 2 standard arrays....
addMMI(), delMMI(), addSMI(), delSMI().

For example..... say we add a Main Menu item after the second item......

Firstly the _mi array will need to be shifted, eg if we add after the second item then _mi will need to be shifted up one from _mi[2] until the end. So _mi[2] becomes _mi[3] - _mi[3] becomes _mi[4] and so on.

Then the new data goes into _mi[2]. At this stage I propose we copy data from _mi[1][5-99] into _mi[2][5-99].

Next _m needs to be rewritten, we need to shift this also to place the new menu into _m[3]. So _m[3] becomes _m[4] etc etc.
Now _m[0][0][x] needs to be written, then _m[y][0][z] needs to be indexed/written.


Now the order of the above operations will be critical, I had big problems and have kinda put it aside as I was spending sooo much time going round in circles. It would be nice to have a fresh perspective. [link removed, no longer available] feel free to add the missing functions '*******'.
Also Ruth, if you want to redesign the HTML page more into the 'Milonic' line of things (like with how you did the border color) or add things you think should be in there please feel free. Even if you just make a unfunctional page I can put the code in to make it work. Although at this point in time I would rather get the editing parts working since that represents the biggest hurdle, and the most critical functions of the project. Any comments from Andy? Is he interested in the project?

[Ruth]

Hi,

I had a bit of trouble, mostly organizational, as to what to put in the page. For example, image can be set in the style, but I felt that most would not be using the same image in every item, so I left it out, I did that with a few things which seemed to be more logically placed in the item rather than the style.

Rather than try and organize the page layout, I just put the things below all that was already there. You'll see all I included.

As far as I can tell, trying each thing, they all output, but not all will update, and some that do update then prevent the menu from functioning, i.e. dropping the submenu, that is especially true of bgimages, separatorimages, subimages. It will output it all, and once reset defaults and reset page are used everything is fine.

I tried something with the border, I removed what was there and instead I placed [in the new section] an item border and item onborder that uses a text box where you write in the code i.e. 1px solid #ff0000. It doesn't use the little color picker but doing it that way you can set the offborder and onborder to different styles, and even sizes if you want. You can also set the border, which I did use the little color picker for, unfortunately, it doesn't update, but it does output. So, you will get borderwidth, borderstyle, bordercolor and also onborder="code";offborder="code"; if you've set them all.

So, here's the NEW PAGE and here is a zip of all the files.

I'm sorry I can't help on the other part. I have no knowledge of js. What I did here was just try following what you had written for items. I made some 'corrections' in the bottom part that is the output, like removing the quotes from the one that writes out the style=menuStyle, since that is not supposed to have quotes.

If there's anything else I can do, let me know. If I could get the border part to work, I'd be better able to design the page.

Ah, one thing I meant to mention. For some reason when you output to the data file, it is outputting the filters in both the style section and the menu section. I think just in the style section would be best. And, if they are a real problem in trying to set them up, how about setting up a fixed one, and then after they output the menu_data they could go to the IE Filters Demo and test to see what they wanted and just copy and paste that into the new menu_data file they just made? That way the filters code would be in the menu_data.js file and they would know where to paste whatever they chose? Or maybe a fixed one could be set up and a 'check' box to not put the code in the file if they didn't want it?

Just thoughts off the top of my head. I'm emailing Kevin, but he is out of town, as is Andy. I'm sure they will get back to you when they return.

Ruth

[Ruth]

I forgot two things.

1. Is there a way to get those items that are undefined to output as, for example, pagebgcolor=""; instead of undefined or not output at all?

and now I can't remember the other thing. geesh...

EDIT: Got it. Those 3 items you asked about you can't figure out, they are not configurable.

Ruth