Tree/collapsable menu expansion issue

[Migru]

Hi Ruth,

yes in fact, I can reproduce exactly what you´ve described.

Will see, when I can test that using 5-738.
I have to settle something different very urgent by tomorrow.

But promised - Will check it out.

Michael

[aliasim99]

Hello Michael and Ruth,
I've uploaded 5-738 now and it's even worse. but it's good that you might be able to see the problem now. With firefox the first time you load it you will see a blank gap after the submenu(hopefully) , plus it's acting wierd on my localhost, it sticks the submenu to the top left corner to (0,0) cordinates once in a while. Again , The new version is up so please test is asap. This site is live and right now it's holidays but if I get complains about the new version or menu acting wierdly then I'll upload 5-735 again as I had no problems with that at least on my PC with any browser. I just had complains from the client and few users previously. Let me know whenever you have a solution. Thanks
Ali.
PS there is more problems with IE than firefox. Firefox is fine after the initial hickup.

[Migru]

Hi
wouldn´t say it is worse.
tested three browsers: IE 6.01, FF 1.5 and OP 8.51.

All three browsers at first show the menu, it seems in the expected mode.
(Depending on the monitor)
Starting e.g. with 1024x768, it looks "normal", (expected)
Resizing the window to 1280x1024 , the entire submenu stays at its position (in relation to the windows margin) it seems, whereas the rest of the table, as it is centered changes its position. But when "reload", (F5) is pressed or the corresponding browsers menuitem is clicked, the submenu shifts to its (I think so) correct position. There is a gap occuring after the menu (further down) in Opera only, not in FF and not in IE.
Starting in 1280x1024 it is similar. At first, the submenu is placed in a correct way. Resizing the window ends with the same effect as described.
Reloading only is correcting its position.
Had a brief look into the pages code. Is it correct, that in this case, all the milonic files are placed twice ? a) after the body tag and again b) together with the collapse_data.js ?

Michael

[Ruth]

Hi Michael and Aliasim,

I noticed that, too, but then realized that it's not twice. That second code has the

Code: Select all

<!--file names--> 

tags to block them. I think they were there once and it was corrected to the top where they belong but the code was just put in those tags.

Unfortunately, as I said I can't test. However, I have a suggestion.

I realized when thinking what could be tested, that the page uses the opemenusbyurl.js module.

I think that module needs to be removed, then go to the page and open the submenu normally with a click, then resize it while that is open and see if the problem still occurs. If not then we can eliminated the module as the problem and keep testing from there.

Aliasim, would it be possible for you to put up a test page again so you wouldn't be removing, adding and testing on the actual live page? Is there someplace on that site you could do the same page with a different name while we are trying to figure things out?


Ruth

[Migru]

Hi Ruth,

oh sorry for that "twice" - error.

looked for a milonic sample treemenu, is there one?

Michael

[Ruth]

Hi,

Yes, there is a 'sample' but it's really not a sample, it is from the beta when Andy was first working on it. But, it uses the newest files so just ignore the stuff about version and such.

The one that say treemenu is not really what most have been calling the treemenu, though it really is a real tree menu. It's the collapsible menu that opens straight down that most call by that name and that is the one being used on this site where the problem is.

Ruth

[Ruth]

Forgot the link. http://milonic.com/treemenu/

Ruth

[Migru]

Hi

downloaded the page and tested without openmenusbyurl.js module. It is still the same.resizing the window and forcing the menu to redraw, corrects its position only. (by clicking the menu again, or by F5). Did not test any other modifications , so far.

Made an interesting observation. When I started the page using a monitor in vertical position [Pivot](1024x1280), resizing the window didn´t do anything strange, everything worked as expected !! (FF 1.5 and IE) It seems, that the position of the left margin will not change, when I´m using that monitor with this resolution.

The page is built using a table 1008px wide and aligned in the center.
With setting that width and the alignment to left
The original line reads as follows

Code: Select all

<TABLE cellSpacing=0 cellPadding=0 width=1008 align=center bgColor=#ffffff 
border=0>

There please replace the property align=center with

Code: Select all

align=left

subsequently, the table / menu combination will not deviate from their common " table cell / subcell" , if the window is resized. I could not find the correct way to make the submenu change its position, when the main table is shifted towards the center of the monitor or the other way, when the window is resized.

It might be the architecture of the nested tables, responsible for this, as at some instances, the table width is set to 100% and at other instances, the original width is set to 217 pixels (according to the itemwidth in the menu definition file). But pls. I am not 100% certain about this.

Please as a first aid measure try what I have proposed and see, if it works. Before long the centering of the table too should be enabled ... if some more time is spend for this or if someone has the correct solution.
(I think I would do it by modifying the architecture of the nested tables).


Michael

[aliasim99]

Hi,
Ok, I've done a few things, I took out <!-- file names --> which were commented out just to be on the safe side. I've fixed the menu table width to 217 so it's not 100% any more.

I cannot change the align=center to align=left, that is the part of design. It's an apporved design by the client and I can't change that. But, you can download the page and work on it locally. I've put up a sample page with a very very simple table with no nested tables, but it's also aligned to center.
https://www.novospa.ca/test/testpage.htm

The menu still behaves the same. Yes, I did try the align=left and that does fix the problem because when you resize, the menu has no where to go on the left. But I cannot change the approved design. Let me know if I could do anything else.

I'll make a sample page(of this site) in the test folder and post it soon.

Ali.

[Migru]

Hi

ok. will see, what can be done.

Michael

[aliasim99]

Hi,

I've made a page

http://www.novospa.ca/test/novotest.htm

I've done something worng somewhere and it does not pre-load my transparent image initally. It loads the image when the mouse hovers. I'm sure i've done something wrong as it does not do the same thing for the live site. But, this brings up a very interesting point. When you click services and load all the images by hovering then you see that gap between the menu and submenu that we see in Firefox the first time we open the page. So may be we do need an Image -preloader and that will fix atleast the problem with firefox. Now, is there an image pre-loader by milonics that they like to use with their menus ? Let me know if there is one.

For this page I do have align set to left.

thanks.
Ali.

[Migru]

Hi,

tried several modifications, no success !

So, "team members" its your turn.

Michael

PS: It looks only as if "the submenu is moving somewhere", the submenu, once opened, and then after resizing the window, does not move at all at first , that is the problem. The rest of the table moves to the center or to the left, depending on the way, the window is resized. Only after an originated redraw (F5 e.g.), the submenu "follows". I do not know how to settle this with a modified command/property. Particularly as the milonic sample
http://milonic.com/treemenu/collapse/
is different, as it is not placed in a table, which is centered ! And therefore cannot be used as an "example of design".

[Migru]

Hi

found the Fix,

for the testpage it is

Code: Select all

with(new menuname("SubServices")){
style = sub1Style;
screenposition="center";
left="offset=-291";

try to apply it accordingly in your original pages code
[Correct is 291.5 because of (800-217)divided by 2 with
800 representing the table width and 217 the menu width in this case.]

With the original dimensions (1008-217)/2=395

Code: Select all

screenposition="center";
left="offset=-395";

Pls report back, if this does the fix .
Michael

Got the idea from
http://milonic.com/mfa/2005-August/006357.html

[Ruth]

Hi,

I didnt' get a notice of this post. Strange.

Anyway, I'm so glad you found a solution, because I haven't been able to do it, Michael. Thanks so much for all the help, I sure appreciate it. Here and on all the posts!

Aliasim, there is an image preloading module for the menu. It's on the bolt-on modules page, the first one listed.

http://milonic.com/menumodules.php

Ruth

[Migru]

Hi Ruth,

thank you too,

I had benefited so much from your advice too, so it is for me quite normal to give something back.

I found the solution, by studying again the menu properties, (reference guide) finding there the "screenposition" property. But it is not very well explained there.
So I made use of the Search - utility of this site, searching "Screenposition", leading to the source already mentioned. Reading - and the fix was there.

Michael

[aliasim99]

Hi Michael,
Well, the solution does work upto some extent. First, I have to use 355 and not 395 becasue Menu is part of the nested table which is 926 in width. SO that worked fine, but still if I make the window half the original size then it moves to the left. Same thing happens for the testpage, I've uploaded our changes

http://localhost/novospa/test/testpage.htm

Now what that tells is the menu does not dynamically positions it self if the size of the window is changed and the website is centered. Menu works fine if the website is aligned to left. Secondly, when the menu is inside a table cell then is should not move anyways.

I tried one more thing, If I set the subemenu relative to the main menu rater than absolute(default) then it does not move with the resizing of the window. But, then the sub meu appears below the Main menu which is ofcourse wrong it should stay under "Services".

I really appreciate Michael's effort and time. He's a dedicated user and working like it's his own project. Thanks alot Michael.

I think we can fix it in two ways. First if we can somehow make it appear on the right place when we tell it to set the position relative. Second suggestion is relateated to Michael's fix, If the menu can dynamically position itself if the attribute screenposition is set to center.

Thanks again.

[Migru]

Hi
I´m sorry but the link does not work

http://localhost/novospa/test/testpage.htm

Michael

[aliasim99]

Hi,

Sorry, I posted my local computer link, here is the weblink

http://www.novospa.ca/test/testpage.htm

Ali

[Migru]

Hi

it is still the "old" testpage without any modifications !!??

I´ve downloaded that and do some additional testing, first of all, basically it works, but there is another offset, the standard table uses, but not the menu. have to find out. It might be necessary to call a function at that point to compute the (left) offset. That is necessary only, when the width of the window is less than the width of the table ! It also might be, that this additional offset is different with the type of actual browser.


Summary:

The "formula" to compute the offset has to be reconsidered:
a) valid as already noted, when the width of the window is exceeding the width of the table
b) different, when the width of the window is less than the width of the table. This "different" has to be computed by the actual width of the window, the table width and the browser dependent offset, I think.
I will look into some publications to trace that. It will be a constant value I think.


Michael

[aliasim99]

Hi,

Sorry, I've been working with too many things at a time, now I have the correct file uploaded but still the problem is same.

Michael you have hit the nail right on the head. Your solution works as long as the window is bigger than the table and you also have an idea to make a formula to compute the offset once the size is smaller. I appreciate our help and I also think that the team members should also be helping by now.

Thanks again for all your effort. Hopeflly we will have a solution soon.

Ali.