HTML5 v2.11 MenuMatic and IE8

[evantro]

Hello

I'm getting crazy updating a website to Contao 2.11
I am using menumatic. I've seem some post about problems, but I didn't find a clue.

Could anyone help me ? Please Help...

I am developping a web site which is by now in XHTML with the 2.10 version (http://www.evizer.com/letl), this version is working, but I need do deliver it in the latest format and compatible with all browsers.

I am using MenuMatic script and a navigation template found there: http://www.selected-items.com/drop-down ... ur-contao/ or there http://de.contaowiki.org/Mootools_Aufkl ... _MenuMatic (I don't understand german)

I have basicaly 2 pages on which I have the menu.
On the first page (root) I have a line of header with some text, in the #main part the menu and a footer
On the second page I have the same menu in the header, an article and a footer.

I have the same code added on the "custom javascript code" zone of both pages

<script type="text/javascript" >
	window.addEvent('domready', function() {
		var myMenu = new MenuMatic({direction:{x:'left'},
onPositionSubMenu_begin:function(classRef){
               //alert(classRef.btn.get("class").indexOf("ref"));//alerts text of the parent button as it begins to show its submenu
if(classRef.btn.get("class").indexOf("ref")!=-1)
    {$$('#subMenusContainer').set('class','mref');
     $$('#subMenusContainer').removeClass('class','mrev mcom');}
if(classRef.btn.get("class").indexOf("out")!=-1)
    {$$('#subMenusContainer').set('class','mcom');
     $$('#subMenusContainer').removeClass('class','mrev mref');}
if(classRef.btn.get("class").indexOf("rev")!=-1)
    {$$('#subMenusContainer').set('class','mrev');
     $$('#subMenusContainer').removeClass('class','mcom mref');}
          }
});
    //element collection and settings
    var opacity = 0.1, toOpacity = 1;

    //set opacity ASAP and events
    $$('#navPicto span').fade('hide');
    $$('#navPicto span').set('opacity',opacity).addEvents({
      mouseenter: function() {
        this.tween('opacity',toOpacity);
      },
      mouseleave: function() {
        this.tween('opacity',opacity);
      }
    });
    //subMenusContainer
    $$('#subMenusContainer').addEvents({
      mouseenter: function() {
        $$('#navPicto .mainMenuParentBtnFocused span').tween('opacity',toOpacity);
      },
     mouseleave: function() {
        $$('#navPicto span').tween('opacity',opacity);
      }
    });

});
</script>

On the first page (root) the menu works perfectly and in any other page it doesn't. It seems that the javascript is not run on Internet Explorer 8 or 7 as I don't see the subMenusContainer div.

what could be the cause of the problem ?
how could I solve it ?

here is a temporary access: http://www.vantroeyen.fr/test2.11/

Thank's a lot for your help

[ramjet]

No idea, I only have IE 7, and your site crashes it!

...i've just put an extension in the repository called [dropdown] which you could try - its for generating menumatic menus.
If you do, remove all your js code, it'll do it for you. (i've never actually seen that code for menumatic before)

I've not tested it on IE beyond IE 7 , but all other browsers seem to like it. (you'd be a test bunny)

[evantro]

Until now it work on IE8 in HTML5 !

Here are a few question about your extension.

Why do you force the
#nav a, #subMenusContainer a {padding: 10px 20px;} and why are you forcing the height ?
Using a CSS with sprites, I need to get the control over these parameters, and as your CSS come after the internal, it overload the definition.
Could it be possible either to set it as parameters in the back-end, or not setting it at all, or include your CSS before the other definitions which would permit to overload it ?

Could it be possible to generate a CSS file which could be cached instead of charging each time the header of page ?

in MenuMatic there is the possibility to use callback functions:

• onHideAllSubMenusNow_begin
  onHideAllSubMenusNow_complete
  onInit_begin
  onInit_complete
  onSubMenuInit_begin(subMenuClass)
  onSubMenuInit_complete(subMenuClass)
  onMatchWidth_begin(subMenuClass)
  onMatchWidth_complete(subMenuClass)
  onHideSubMenu_begin(subMenuClass)
  onHideSubMenu_complete(subMenuClass)
  onHideOtherSubMenus_begin(subMenuClass)
  onHideOtherSubMenus_complete(subMenuClass)
  onHideAllSubMenus_begin(subMenuClass)
  onHideAllSubMenus_complete(subMenuClass)
  onPositionSubMenu_begin(subMenuClass)
  onPositionSubMenu_complete(subMenuClass)
  onShowSubMenu_begin(subMenuClass)
  onShowSubMenu_complete(subMenuClass)

Could it be possible to add a test field in the back-end in order to optionaly add some code; The example given is:

var myMenu = new MenuMatic({  
          onPositionSubMenu_begin:function(classRef){                     
               alert(classRef.btn.get("html"));//alerts text of the parent button as it begins to show its submenu  
          }  
     });

It would be great to have a field in wich you could paste for example:

 onPositionSubMenu_begin:function(classRef){alert(classRef.btn.get("html"));}

and the result you generate would be:

window.addEvent('domready', function() {
	var myMenu = new MenuMatic({id:'nav',subMenusContainerId:'subMenusContainer',duration:600,hideDelay:1000,physics:Fx.Transitions.Pow.easeOut,orientation:'horizontal',direction:{x:'left',y:'down'},tweakInitial:{x:0,y:0},tweakSubsequent:{x:0,y:0},opacity:95,fixHasLayoutBug:true, onPositionSubMenu_begin:function(classRef){alert(classRef.btn.get("html"));}  });
	});

Thank's

Eric

[Medianomaly]

It's possible that the MooTools version that's getting included is a buggy one. The earlier 1.4x versions actually did crash IE, like Ramjet was seeing. And there were various other issues.

What you can try is comment out the MooTools include in the header, and manually add a call to the latest version on Google Code:

https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js

(Note that other things require MooTools More as well, so if you comment this out, be sure to manually include this as well -- you can use the one that ships with Contao).

If that fixes things, you'll know it's just the MooTools version.

[evantro]

I don't understand very well what you say about Mootools, because by now I am calling (and using) the google version and it crash.

But with the extention, and after a day of adaptation, mainly CSS IT WORKS !!

I think some little improvements would be welcome, but sincerly it's a great job that did Murray.

[ramjet]

Could it be possible to add a test field in the back-end in order to optionaly add some code

Yes, good idea

Could it be possible to generate a CSS file which could be cached instead of charging each time the header of page ?

Not sure...
You mean select a folder, [dropdown] writes the css into it, and calls it as an external stylesheet in the head?
I need to think this through, but instinct tells me no...

Why do you force the
#nav a, #subMenusContainer a {padding: 10px 20px;} and why are you forcing the height ?

Padding - mostly because the standard menumatic css does
I need a base to make room for the buttons, calculate css-only and other positioning from (for this and the next version which will allow css styling from the module configuration) Thats also why I only use px as measurements ( as you can't add a px to an em ).
The height isn't forced as such, its a default minimum (36px -16px plus 2 x 10px padding) that you can override via Main Element Height. Is it too big for the submenus?

Could it be possible either to set it as parameters in the back-end, or not setting it at all

Maybe , again I need to think about this as it affects a lot

....include your CSS before the other definitions

I don't think I can (as it stands it is an internal stylesheet, and has precedence over an external one)

Are you sure you can't override these by using more specific selectors (.mod_dropdown.whatever)?

[ramjet]

Eric, what about a textfield to write to the internal style after the css.
So one to write into var myMenu, and one to write into the head <style>.

Would this give the css flexibility you need?

Also is this all working in IE (i've not been able to test beyond 7)???

[ramjet]

Would this do it?
from source....

<script src="system/modules/dropdown/html/js/MenuMatic_0.68.3.js"></script>
<style type="text/css" media="screen">
/* <![CDATA[ */
#nav_74{ display:block; position:absolute; list-style:none; margin:0 0 0 0; z-index:5; text-align:center;  }
#nav_74 a{ height:16px;  margin:0; float:left; overflow:hidden;  white-space:nowrap;}
#nav_74 li{ display:block; list-style:none; position:relative; float:left; height:36px;  }
#nav_74 li.first{ } #nav_74 li{ } 
#nav_74 li a{ text-align:center; }
#subMenusContainer_74 a, #nav_74 li li a{ text-align:left;  white-space:nowrap; }
#nav_74, #nav_74 ul, #nav_74 ol{ line-height:16px;  }
#subMenusContainer_74 ul, #subMenusContainer_74 ol{ line-height:16px;  }
#nav_74 a, #subMenusContainer_74 a{ text-decoration:none; display:block; padding:10px 20px; }
.smOW{ display:none; position:absolute; overflow:hidden; padding:0 2px; margin:0 0 0 -2px; }
#nav_74, #nav_74 ul, #nav_74 ol, #subMenusContainer_74 ul, #subMenusContainer_74 ol{ padding:0; margin:0; list-style:none; }
#nav_74 ol, #nav_74 ul, #subMenusContainer_74 ul, #subMenusContainer_74 ol{ left:0; }
#subMenusContainer_74 li{ list-style:none; }
#subMenusContainer_74{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
#subMenusContainer_74 li a.last{  }
#nav_74 li a.active, #nav_74 li a.headersonly{ cursor:text; }

#nav_74 li li{ float:none; border:0;  margin:0 0 0 0;}
#nav_74 li li a{ position:relative; float:none; margin-bottom:0; width:160px; }
#nav_74 li li.first{ margin-left:0;}
#nav_74 li ul{ position:absolute; margin-left:-1000em; border-radius:0; width:200px; margin-top:36px;  }
#nav_74 li ul ul{ margin: 0 0 0 -1000em; }
#nav_74 li:hover ul ul{ margin-left: -1000em; }
#nav_74 li:hover ul{ margin-left:0; }
#nav_74 li li:hover ul{ margin-left: 200px; margin-top:-36px; }
#nav_74 li ul ul ul{ margin: 0 0 0 -1000em; }
#nav_74 li:hover ul ul ul{ margin-left: -1000em; }
#nav_74 li li li:hover ul{ margin-left: 200px; margin-top:-36px; }
/* ]]> */
</style>

<style type="text/css" media="screen">
/* <![CDATA[ */
#nav_74 li a.mainMenuParentBtn, #nav_74 li a.submenu{ background:url(system/modules/dropdown/html/img/down_over.gif) right center no-repeat;}
#nav_74 li a.mainMenuParentBtnFocused, #nav_74 li a.submenu:hover{ background:url(system/modules/dropdown/html/img/down.gif) right center no-repeat;}
#subMenusContainer_74 li a.subMenuParentBtn, #nav_74 li li a.submenu{ background:url(system/modules/dropdown/html/img/right_over.gif) right center no-repeat;}
#subMenusContainer_74 li a.subMenuParentBtnFocused, #nav_74 li li a.submenu:hover{ background:url(system/modules/dropdown/html/img/right.gif) right center no-repeat;}
/* ]]> */
</style>

<style type="text/css" media="screen">
/* <![CDATA[ */
#nav_74 {background-color:black;}
#nav_74 {font-family:"Henny Penny";}
/* ]]> */
</style>

<script type="text/javascript">
	window.addEvent('domready', function() {
	var myMenu = new MenuMatic({id:'nav_74',subMenusContainerId:'subMenusContainer_74',duration:600,hideDelay:1000,physics:Fx.Transitions.Pow.easeOut,orientation:'horizontal',direction:{x:'right',y:'down'},tweakInitial:{x:0,y:0},tweakSubsequent:{x:0,y:0},opacity:95,onPositionSubMenu_begin:function(classRef){alert(classRef.btn.get("html"));}});
	});
</script>

This part is from the extra css textarea, and is outputted as last internal style...
Did you want that, or outputted as first internal style?

<style type="text/css" media="screen">
/* <![CDATA[ */
#nav_74 {background-color:black;}
#nav_74 {font-family:"Henny Penny";}
/* ]]> */
</style>

Also var myMenu has extra code

[attachment=0:f6t3kz02]extracode.jpg[/attachment:f6t3kz02]


Also, do you know anything about the physics options (eg: Fx.Transitions.Pow.easeOut)?
I was going to make that a select dropdown, but I don't know what the options are.

[evantro]

This could be fine. And yet developed ... ;-) !

I don't know what are all the effects but I suppose that they are Mootools default's.

[ramjet]

I'm a css dunce.
Do you want the extra css first or last in the head?

[evantro]

At the end, better

Thank's

[ramjet]

Ok, try updating - in repository as build 13.