Graphical Menu Editor...

[ywfbi]

Hi Ruth, when you say filters do you mean overfilter? If so that wont be hard to remove from the menu part (in menu_data.js right?).

I havn't even thought about images, I imagine we should be able to incorporate that so long as they are put into the containing directory, otherwise we will have problems with the output file... As to the menu not functioning after putting extra stuff in there- it is rather specific, those values placed into the arrays must be pretty much exact - It could be any of the other extras since they'll all update at once-I'll look at that.
I'd be hesitant about changing onborder size (style will be fine) it will interfear with the menu look. It will probibly move the selected submenu item across, personally I think it wont flow, like setting onBold.
Could you redesign the page for me? That would be a great help. At the moment the biggest problem I feel (apart from edit items) is just the shear usability of the editor. As we add more options into it we are going to reduce the ease of use. Idealiy we should have everything on the one page without scrolling-what do you think about having tabbed windows for the options, we could make it look like a standard windows properties page. Just an idea, could be done with js/css- ATM I dont know how, but how hard can it be
As to the undefined thats just a case of initialising the form properly, if we give those variables values then they will be defined and output properly, alternatly we could just not output anything undefined/null or empty.
BTW _m[0][22] is the layer info for the menu... [HTMLDivElement]
Havn't found the other two

EDIT: Here is a very quick sample of a tabbed type page, Still needs alot of work with styling but should be compatable with most browsers.

[Ruth]

Hi,

Where is the tabbed type page? I'm not finding a link anyplace.

I think not doing output for undefined is best.

As to the onborder stuff, it will depend on a lot of things. The onborder and offborder usually need to be the same size, but not the border which is separate. The real reason I did it that way was to get all the options available to output, even though border doesn't update but having all of them gives a wide range of nice design options.

Usability: I have a question. Is it at all possible to split the two 'editing' areas? I mean the editing/adding/deleting part and the design part?

I'll try a redesign and eliminate the border part I have which will give more room. That's not really usable with the editor and was just for my own 'view' of the border stuff I wanted.

And could you show me the tabbed example so I can see what you mean?

Ruth

[Ruth]

I found a way to set up tabs. It will probably take a day to get this done.

Ruth

[ywfbi]

Sorry forgot to add the link...
[link removed, no longer available]

Shortcut those if you want, they will always point to the latest work.

Yes its very easy to split the editing features, what do you have in mind? I think I see where you're going and yes it would be heaps easier, but then Ive never been known to do things the easy way
Ah yes I see what you mean with the on/off border, I cant see any reason we couldn't implement that.
I think the tabs will solve the useability problems, should simplify things by reducing the number of features avaliable to the user at any point in time. Im gonna leave the editing part for now, I have all but got add main menu items working properly (sometimes a object orientated language can be a real pain!!) , and will concentrate on the other aspects of design for now. Have set tabbed layers to %age for different resolutions, and put them toward the right to allow for vertical menu viewing.
At this stage I havnt added anything to the basic structure except orientation, which took all of 3 mins . My next mission will be implementing all your suggestions you've posted and fixing the bugs.
Minimum size of the 'window' is 600x290px when viewed at 800x600 so it needs to scale down to that without looking shabby (or 760x420 px if only viewed @ 1024x768)... although with a entry page we could run it in a pop-up without explorer/status bar etc to gain a bit of screen room. ATM I expect the tabs will overflow at 800x600, will look into that.

[Ruth]

Hi,

I got your version. I will have something up later tonight. If you don't like it, let me know. I'm just organizing how it seems logical to me. I'm including everything, figuring that I can remove anything that isn't workable, but anything that is will already be there.

Ruth

[ywfbi]

Sounds great Ruth Ive been getting alot further today, got the flu so its natural to spend most of the day in front of the comp... Doing the images part now... links above.

[Ruth]

Hi,

Hope you feel better soon. It must be something going around.

It's going to be tomorrow. I am so tired I'm getting clumsy, making silly mistakes. But, it's going pretty good. I have one question. I take it that testing div is just for now and will be removed? If so, instead of a separate entry page, I was thinking another div could be added "main" which would have directions. What do you think?

I'll get this up tomorrow, it's taking longer than I thought getting it organized. I'm on the last one, so I'll get the image and do that one also.

Ruth

[ywfbi]

Yes that makes sence, either that or a layer which slides in from the side with directions relevant to each tabbed page. The reason for the [link removed, no longer available] is so we can open the builder in a pop-up window which gives the ability to dictate nav/status/tool bars etc, allowing a bit more room (esp for 800x600). But I guess I'll just wait and see how much space is needed before settling on a entry page, it could be as little as a 3 sec splash screen that closes automatically and loads the main page, or even a instant redirect.
Ive changed the testing tab to the output, now it shows the menu_data.js output, it displays on the same page.... much better than a pop-up
Am working on the additions now, and getting all the settings associated with the correct arrays, will take time though. But when thats done changing the look and style will be easy, its done with css.
Heres something I cannot directly change the Milonic arrays and have them update with borderstyle, I used your/kevins code to display them and placed the actual code into the arrays for output. Seems to work fine, and the user would never know any difference so Im gonna go with it,
just like the browse boxes for image input... needed to get just filename from path but you cant place it back in due to security restrictions... ended up hiding them below a text field.

[Ruth]

Hi,

I think I'd better wait until you have finished what you're adding before I do any more on this. Given the way you have the help set up, none of the layout I did is usable. I kind of split the colors into two sections, mouseoff with all the properties for that, and mouseon, then the rest went more or less like what you had for text, etc.

There are some things that do not output correctly in the data file. I'll post them here if you'd like.

Let me know if you still want me to do anything on the layout.

Ruth

[ywfbi]

Hold on a sec, show me what you've done! Im just playing around with that, design is my weak point, I'm hoping you can show me a really novel way of displaying all these options. BTW dont feel restricted by the layout I've done, feel free to totally change the works. If you could post a HTML page with a really usable layout I can put the other stuff in.
Dont worry about the help at all, its just a layer, I could set it to display as a tab like the others in a couple of minutes (gotta love css!), or anywhere else for that matter. And its contents are all in one place so changing them is a breeze. At the moment Im getting all the settings working, but thier locations can be altered with a simple cut'n'paste.
I havnt even looked at the output file, or the fixes you've made to it. All in time, could you post your layout up, and if you want I'd appreciate it if you want to go through the output with a fine tooth comb, you'll notice that the entire output is a basic dump of the array contents. I have no doubt that theres alot of work needed there.

[Ruth]

Hi,

zip with the files.

I will work on the list, though it's mostly having quotes were you shouldn't. Two things that have to do what's up now.

1. You have on the text page, Style and a dropdown for underline etc. plus two check boxes for italic and bold. Italic and bold do not output correctly because they are not linked to fontstyle="italic"; and fontweight="bold"; respectively. Onbold and ontalic work fine with the =1, but the others need their fontweight= and fontstyle= parameters.

2. Nothing seems to be working, keeps saying something about lborderstyle.value. is null or not an object, so it's something I don't have someplace.

Ruth

[ywfbi]

I think you may have downloaded a transitional version... I upload often to serve as a backup.
I remember fixing the Iborderstyle last night. I like the two colours tabs, do you think we should call them onColor/offColor?
Also you've raised a good point... do we need a reset page dialog? If so by placing it on each page should it only reset that page?
That wouldn't be too hard, but its simple to reset everything. Maybee 'main' could have a global reset, and I could create several functions to initilise each page instead of initform(), well initform can call them-will do that later, the functions will change everytime the pages are altered so that will be the last thing to finalise.

It appears I must have done the bold/italics last night too-dont remember doing it specifically was working straight from the js. Images still need work too.
The design area bg color can be placed into the menu_data.js directly (its just a imported js script-should work fine) I'll set that up tonight too.
Just a note:With javascript once you have a error in the code it stops, hence thats why the toggle doesn't work (I assume you mean hor/vert).
I will place a error handler in the code but only after everything is fine, that way it is easier to debugg.
Just out of interest what editor are you using for html/css? Its code is heaps better than dreamweaver 4!

Well Ive got the design area color in place, still gotta test the output in the manu_data.js though, also reworked the help menu and added main.
[link removed, no longer available]

[Ruth]

I got the page from your link and will see if I can do the layout on it.

Just out of interest what editor are you using for html/css? Its code is heaps better than dreamweaver 4!

That would be me I use a very old program for layouts. It doesn't recognize the modern codes [js in the body for instance]. But, it lets me do layout directly on the page [not in the source] and it doesn't put in some strange proprietary codes in the source. So I use it to setup the layout. [AolPress2.0]. The rest is just me editing the html or css. I keep looking for something like it.

There is still a problem with bold and italic. My non technical explanation: Right now you have this in the file

Code: Select all

if (document.form1.checkitalic.checked) _mi[xx][13]='italic'; else _mi[xx][13]='normal';
if (document.form1.checkbold.checked) _mi[xx][14]='bold'; else _mi[xx][14]='normal';

Then farther down for the output you have

Code: Select all

if (_mi[0][13]&&_mi[0][13]=="italic") Lsave.innerHTML+=('italic="' + _mi[0][13] + '";<br>');
	if (_mi[0][14]&&_mi[0][14]=="bold") Lsave.innerHTML+=('bold="' + _mi[0][14] + '";<br>');

OK, the last part should be something like this [it's probably not right, but it should give you the idea

Code: Select all

if (_mi[0][13]&&_mi[0][13]=="italic") Lsave.innerHTML+=('fontstyle="' + _mi[0][13] + '";<br>');
if (_mi[0][14]&&_mi[0][14]=="bold") Lsave.innerHTML+=('fontweight="' + _mi[0][14] + '";<br>');

I'm going to post some off the top of my head ideas.

A start over on main which has an alert "all data will be cleared, do you want to continue or save data first?" and then an option to continue, cancel, save data? Or if that's not possible, have the message say if you want to save data first, cancel and click the Save Data, something on those lines. An output data on main which outputs it all. I liked the pop window better than in the layer, just a personal preference, it is sort of less busy, since it's in its own window away from the other layers [though shorter than 600 would be nice, like around 470, about 40% or so of users still have 800x600 res ] A reset this area defaults in each layer, if there's a way to get it to just reset the things in that layer to their default settings, though actually, since you can just choose another color that's really not necessary in the layers. An alert if they close the program and haven't output anything 'Save your data now, or exit without saving?'

Putting the reset defaults and output on the main is more a space issue than anything else, but it would clear up space so the tabs don't wrap at 800x600. [that's what I am using]

Ruth

[Ruth]

Since you are using the little graphic instead of a form drop down for the colors, there's no reason for the color codes to be visiblbe. If I hide them I can do much more on layout since I can also make their size small. Being hidden doesn't affect the data output. I need to know if you don't want them hidden, because it affects how I set up the layout. I really think they should be hidden since the user isn't doing anything with them.

Ruth

[ywfbi]

I saw you took the hex color textboxes out, I would rather them in cause it gives much greater felexabiliy over setting the colors rather than just the colors given by the pop-up. Personally I like that sort of thing, but then hey it aint for me I guess Go with what you think is best, dont spend any time getting the options working I can probibly get that done myself alot quicker (knowing where everything is in the js).
I use dreamweaver4 mainly cause I can switch to code view so easily and fix all the stupid mistakes it makes
Ahhh, I see what you mean with the italics and bold, they display fine but aren't outputted correctly, I havn't even looked at the output or tested it for that matter. I'll fix the output tonight, wasn't on the list of priorities ATM. Also still gotta find a way around a small problem Im having writing the HTML tags to the bottom of the output for design area. And finish the stuff from my last post.... all in time.
Also since Ive come this far Ive decided to implement a method to actually write the file (maybee from server with asp or php or local activeX) , so we can do without the 'save data' altogeather! But im gonna leave it in the menu untill everythings finished as it makes it easy to check the output.

[Ruth]

I didn't know you could do insert the codes that's why I hid the boxes. I redo it and make them visible.

I should be done tomorrow sometime and will post the new page for you. Right now, I've got to get some sleep. I remember when all nighters were nothing!

Having it output automatically would it still be usable on the desktop?

Ruth

[ywfbi]

made some more changes....
[link removed, no longer available]et up a automatic online and local mode, removed save from tabs, more on images page, fixed a few small bugs, placed resets in pages, still gotta finish the initform() code for that one though.
working on saving now, will work fine with online or local mode - I hope
Think I might have earnt at least a bottle of bourbon or 5 for this one....
Still to go... image checking (also a small bug in display), write to disc, output, initilising, final layout (inc colors tabs), edit contents...........
AND SO ON!!!! The more I do the more I have yet to do, will it ever be classified as finished
Side note, maybee thats why I have never actually finished a project there just always seems to be something else that should be done.

Actually you may be able to help here.... are you on dial-up??
Im now up to ~161Kb in download size to view the page... thats gotta seem really slow on dial-up. Do I need to put a loading layer up first just to distract the user while it loads?? I think I might just put something there anyway... cant hurt I guess.
Edit: Don't worry set up a server with 5KB/s bandwidth, it takes...
20 secs to see milonic menus, and 30 to see full content. Load order is menus, then main js file. My initial attempt at creating a loading layer took the full 30 secs as it required everything to be loaded first (menus and main.js) I'll put in another very small script first to make a loading layer.
Edit2: Well Im happy with that.. what do you think??

[Ruth]

Yes, I'm on dial-up, real inexpensive. It didn't seem to load slow even before the layer, but for some who are anxious that's a nice touch. Maybe put an old knock-knock joke on it to give them something to read? Hmm, but it would have to be short incase it loaded fast. That could be annoying

It looks good. I was just going to upload what I have, but I will add the new stuff first. The only thing, you have it set to not have the layers scroll, I'm at 800x600 and the reset buttons over each other. I'll change it to scroll. As soon as I add the new stuff I'll get it up. I think it came out pretty good. Actually, I think, if everything you have now works, it's 'usable' done. You can always add to it. If I knew how to make things work I'd add them, but whenever I try they don't work.

I'll try to finish the new stuff and get it up tomorrow night.

EDIT: You have to put a note in about removing the design area code that gets written after the drawmenus.

Ruth

[ywfbi]

I already have the design area working... just gotta get the <div ID=....></div> to output to the layer without actually creating a layer there!!! It wont be a problem actually writing it to a file (cause no HTML interpreter to read it). It will save to the menu_data.js file.
As to the scroll layers well 8x6 is tiny!!. The entry page gives another ~100px to play with if required. I could even only activate a pop-up if the res was 8x6-something to consider. I'll change the css now.
The layer won't speed the loading of the page up, just gives something instead of a blank screen. When I tested I limited bandwidth to 5KB/s which is probibly average for most dialup users. I been on cable for a year now and would just die waiting for 30secs for a page. Then again the main.js will be compressed too, that will speed it up a few secs. Can you post what you've done? Im always interested to look at another viewpoint

Edit: Ok so Ive been working on the write stage of this project... didnt realise ActiveX only works on IE. Bummer! What do you this about using it for IE and writing a php script to 'download' for the other browsers?
Im gonna make a start on that anyway, any ideas for other options?

[Ruth]

Yes, I know it saves to the menu_data. I just figured you could put a note to have them remove it from that file. Beginners will not be able to figure out what that is and figure it's supposed to be there.

About 30% of users still have res 800x600, it loads faster for those like me with dialup. Again, I can only give you my point of view on this, others may think differently. I wouldn't like a pop up window with that part in it. Things are busy enough on the computer without having more popups, especially since using the overflow:scroll works fine at 800x600

As to the active x, yes, it's proprietary to IE. The overfilter in the menu is also only for IE, since it codes the IE transitions which are proprietary to that browser.

I don't really know what you are talking about as to the save data stuff. In the first examples you were doing, the output worked in FF. Maybe going back to the more simple output data would be a solution. I actually liked having the output open in a new window away from the editor. Having it in the layers was also OK, though it took up more space.

I'll put up the page when I get the new stuff in. Hopefully some time today.

Ruth