Forums Archive Index > SmartMenus v4.x General > Opera overwrites images with text; Mozilla positioning error
Date: 3 Mar 2003 6:27 pm
Hi Vasil and everyone,
I am very impressed with SmartMenus 4.7!
I am slowly developing an offline website in which I hope to use some form of DHTML menu system.
For some weeks, I've been playing with the --> http://www.milonic.co.uk/menu/ and it has some nice features.
However, SmartMenus have several advantages, most important: they're half the size! Milonic's have a page-scrolling feature, but I'm not that enthralled with it anyway, and many people are put off by them. It also has a much more native support for IE's FX features, like transparency and shadows, but I suspect Vasil is going to address this eventually.
TWO LINKED PAGES TO DEMONSTRATE MY PROBLEMS
The pages I've prepared for testing are rough, and the text deliberately makes no sense, and the pictures and styles are all quite arbritrary. They're strictly for developing a working code template structure, not content, yet! But I hope they will help illustrate some problems I'm having.
I've created two pages: a --> http://members.iinet.net.au/~bogandhi/pirates_CCS/columbus_milonic_menus_test.html, and a --> http://members.iinet.net.au/~bogandhi/pirates_CCS/columbus_smart_menus_test.html, of more-or-less identical pages.
They are to help demonstrate the problems I'm having, and I thought, might be of interest to others in comparing the two menu systems.
Note, in addition to a strictly token menu with some leftover Mercedes images from Milonic's samples page, there are two little BLUE 'i' buttons (for Information) floating amongst the text body; please click on them to see little popup panels.
Note these panels have both been styled to be exactly 12px from the edges of the browser window, should they be positioned to butt up against them - NOT at the edge itself. (That's one of the problems I'm having ... )
BROWSERS I'm testing with (all in Win XP Pro):
IE 6, Netscape 6 / Mozilla 1.2a, Opera 5.11, 6.05 and 7.0. I've only tested a bit with Netscape 4.08, but things seem acceptable there (all things considered with Nav4, that is).
RESULTS:
Milonic - works pretty accurately in all browsers, except Opera 7.0, where it loses all sense of vertical positioning with the popups. Mousing over the popups in IE causes subtle, but visible and alarming "shudder" of the cursor; on the other hand, mousing over the SmartMenus popups is completely smooth. Milonic's code is still buggy it seems, but note the popups work perfectly in Opera 5 and 6, with no image / text problems.
SmartMenus - works perfectly in IE 6.
Mozilla 1.2a has a slight positioning problem with the popup arrays: it doesn't correctly allow for the absence or presence of a scrollbar, and calculates the popup arrays' positioning as if it was present, when it isn't. Compare the 12px positioning at the bottom of the window with IE. Otherwise, and with the permanent menu, perfect.
Opera 5.11 and 6.05 get horribly confused with inline images in the popup arrays, and writes the text across them, as if the images were somehow 'in the background'! (If requested, I can upload a screen capture of this phenomenon if necessary.)
Without the complications of images, the text is rendered and positioned perfectly in these versions of Opera; but I really want to be able to include images! Otherwise, perfect in all respects (very accurate 12px edge gap in both). Opera 7.0 is perfect (surprisingly).
Quite a damn good result, all things considered!
I realise that these somewhat elaborate popups are pushing a menuing system to its limits, but they work perfectly in almost all respects in all the browsers except those tricky older Opera versions.
I would MUCH prefer to stick with SmartMenus, as at 14.6 kB they are indeed the smallest, fully cross-browser compatible menus out there (as far as I know). Milonic's is 30.8 kB and some of the competition is over 50 kB! (None of these figures include menu data itself, of course).
Please, Vasil, is there any chance of your tweaking the code to fix these small Opera glitches with inline images? And dealing with the subtle Mozilla positioning issue? (Which is usually only detectable at the bottom of the window, as practically all webpages of course have the vertical scrollbar present at the right of the window.)
Phew. Thanks for letting me post such a long entry. I hope I've described my problems clearly.
It's possible the liberties I've taken with styling the popups so precisely and completely (see my s_arrays.js file if you're interested) is to blame for the Opera image problem, but I doubt it. Using your "stock-standard" style code gave the save overwriting-the-image problem in Opera 5 and 6.
I hope this posting, and the two sample pages I refer to above, will be helpful to other enthusiastic SmartMenu users.
All in all, Vasil, you are to be congratulated for one hell of a job of compact coding! I do hope you can go the extra mile and nail these issues.
If Vasil, or anyone else can help with any of this, please feel free to email me directly at columbus(AT)iinet.net.au.
Very best wishes from Fremantle, Western Australia.
Columbus
Date: 3 Mar 2003 6:42 pm
Oops, one thing I forgot to mention:
the popup arrays which are causing the problem in Opera 5.11 and 6.05, that is, overwriting the images with text, cease to cause the problem if they're simply set to "permanent display" (and positioned explicitly somewhere).
It's only when being dynamically written to the screen from a mouseover or onclick event that the overwriting problem appears. I haven't demonstrated this on my two sample pages, but trust me, such is the case. Maybe this is why the permanently displayed menu works fine?
Perhaps this provides a clue as to where Opera is going wrong when displaying the popup array code?
Cheers,
Columbus
Date: 4 Mar 2003 9:51 pm
Hi Columbus! A very unprejudiced review indeed!
The Milonic menu is really one of my most serious competitors. However I think that their script is not optimized well and has some bugs (especially in Opera). Even in IE 6 its performance is not smooth and accurate (you may find this prejudiced, but be sure that I've made more test than everyone of you [for 2 years tests is the main thing I have been doing :)] and I may say that my performance engine is one of the most accurate). I don't want to get in details (we should be loyal :)) - you can test their script for yourselves.
Now to your problems, Columbus. First the "issue" with Mozilla's scrollbars. I used quotes because this is not an issue and is done this way on purpose. I still don't know a way to find out dynamically (as the menu pops) whether any scrollbar (vertical or horizontal) is visible at that time. So I've configured the detection as it is visible (just in case). Think of the following situation: you have the bottom scrollbar visible and your menu pops lower than the scrollbar top. At least the last item (or part of it) of your menu will be hidden beside the scrollbar. So I think it is better to have the possibility for visible bottom scrollbar in mind instead of getting undesired result. Actually the menu is configured the same way in Opera7, too. I can reconfigure this for 5 minutes, but I don't think it's a good idea! If anyone knows a way to determine dynamically whether the scrollbars are visible in Mozilla or Opera 7, please contact me and I will fix this.
About the inline images. This is very strange problem and I may say that a bug in the DHTML rendering engine of Opera 5-6 causes it. By default when the menus are created they are positioned with -1000px and -1000px for left and top (there's no particular reason to choose exactly these values- I just wanted them to be out of the screen). So this bug appears in Opera when the menu left position is <-95px (very strange but my tests showed this).
So you can do the following to cope with the bug in Opera. Open the "s_script.js" and use Replace to replace the following string "[3]')):-1000" (without the double quotes) with this "[3]')):0". This will solve the problem.
I will surely fix this in future releases of the script but for now I don't want to do an update only for this as it is also not very commonly used.
Cheers!
Date: 8 Mar 2003 7:39 pm
Vasil, thanks for your prompt, helpful and detailed response.
You are a genius. I've never had a quicker, more subtle, or more satisfying search-and-replace result in my life before. Better than sex, almost.
Talk about an obscure bug in those Opera versions, eh? Well, you squished that critter, that's for sure.
In short: your patch was 100% successful, and now all of the versions of all of the browsers to which I have access, including the ones I listed above, are displaying the test page perfectly.
All of its required test features are functioning identically and as intended, particularly its complexly-styled popups.
That is no mean feat!
This is the only DHTML script I've actually tried - of many, believe me, including my own - that has truly managed to do this, without compromise and without feature exclusions, and with the long-searched-for Holy Grail of a tiny download size. Milonic's included, sorry to say - although it's getting there.
You are a wizard.
I take your point about the Mozilla and Opera 7 scrollbar issues.
It's quite clear when you say the problem is basically we don't know of Quote:
a way to determine dynamically whether the scrollbars are visible in Mozilla or Opera 7. And that speaks for itself.
I sure can't help you with the window.innerWidth or document.popup.scrollHeight equivalent specific object names, or whatever esoteric screen properties that's called for here.
But maybe an Opera or Mozilla coding guru visiting the Forum someday might? Please, visiting gurus, care to contribute?
In the meantime, your logic behind the way things work now is completely reasonable and it works fine in practice too. I have no further complaint about that at all.
CORRECTED SMARTMENUS TEST PAGE
If anyone's interested in the cross-browser similarity issue, feel free to compare results between your installed browsers at my --> http://members.iinet.net.au/~bogandhi/pirates_CCS/columbus_smart_menus_test.html. Note that almost all font sizes are relative, and will scale if desired. Even that feat is beyond most DHTML menus.
If you do, click on the blue 'i' popup buttons , espcially the third one down the page, in the "Doomsday Predictions Bunk, Ex-Greenpeace Scholar Says" section. I have tried a novelty popup use there - but don't expect too much excitement ...
... but it does make one realise that with active, real-time positioning, a teeny bit of imagination, and this menu, there's not much we can't do now. And all without hi-tech plug-ins, Flash or anything, even in Opera or Netscape 4, yikes. It's amazing.
Don't forget: the text on that page is still largely arbitrary nonsense, it's just there to fill my DIVs!
I will leave this page and the other --> http://members.iinet.net.au/~bogandhi/pirates_CCS/columbus_milonic_menus_test.html (which is a bit different, but still similar enough for a reasonable comparison) up for a couple of weeks at least, to give any other Forum visitors a chance to visit them, should anyone be interested. But they probably won't be there forever.
Note: the SmartMenus page has the patched s_script.js which has the Opera fix, as described by Vasil above.
PAGE-SPECIFIC CONTENT
I want page-specific menu or popup content on demand, and I want to refine a workflow so it's easy to implement in FrontPage. Believe it or not, I actually prefer it to Dreamweaver. So shoot me.
I've already tried implementing a "popup generator" FOR loop at the bottom of my s_arrays.js file, in tandem with popup arrays on the actual page, and it works great. If anyone knows of a more elegant way to achieve this kind of thing, please let me know.
This permits the normal use of a single, site-wide general array file for the common menus, but also page-specific inclusions as desired, and without having to alter the s_arrays.js file once it's made.
This is hardly a finished project, but it already effectively solves the page-specific menu or popup problem for me, although I will refine it further yet.
I've implemented the whole set as simple FrontPage includes, and it's a snap to use. Your menu is highly customisable like that, which is another great feature.
None of this stuff is in use anywhere on my online sites yet, except for the test page, but I am proceeding with offline construction of a whole new site already, and your menu is proving to be simple to work with. I am trying hard not to get carried away with popup-type gimmicks!
Thanks again, Vasil, I hope to put this powerful, and now satisfyingly robust, lean, mean code to work in the weeks and months ahead.
I hope this thing makes you some money someday, you deserve it.
I remain your grateful fan,
Columbus
Date: 11 Mar 2003 10:27 pm
I am really not a genius :) I just like what I am doing and have been doing it for a long time. And I think that time is the most important thing for developing a good product. Thank you for the good words! But please don't even think to compare search-and-replace with sex :)
About the way you generate your page-specific pops- I find it good.
By the way I took a look at some resources and in fact found out a way to get the window's width excluding the scrollbars in Opera7 and Mozilla 1.0+. So soon (probably in a week or so) I will release v4.7.1, which will include these fixes and also the fix with the inline images in Opera5&6. However the "issue" with the scrollbars will remain in all Mozillas<1.0 (I think there should be no [even theoretical] possibility what so ever this to be fixed on those browsers- so the script will behave just like until now in those browsers).
Cheers!