Dynamic double top menu problems in IE

Wednesday 26 April 2006 10:28:44 am

Hi!
I am looking around for a better menu instead for the built in menues in eZ.
But I have a problem with Dynamic double top menu.
I have installed it like the readme file describes, but when I'm accessing the page, I get a red cross (image cannot be shown) on the left side of the menu name (like "products").
But when accessing the page in Firefox, everything works fine.

Any suggestions?

Regards
Vidar

Sunday 30 April 2006 8:15:46 am

Hi Pascal!

Thank you very much for your reply!
Removing the suggested lines fixed my problem!
But, as always, fixing one problem leads to another... But this problem seems to be common with all menus installed that uses javascript (Dynamic double and suckerfish).
When loading the page in IE, I'm getting an error on the page (displayed down in the left corner of IE), with the following error report:

 Line: 123
Error: document.getElementById(...) are null or not an object
Code: 0 

Does anybody know the solution on this problem?

Regards

Vidar

Sunday 30 April 2006 2:19:08 pm

Do you have a url to this test site??
Cause it seems to be a JavaScript issue.
Errors like that with document.getElementById normally hints that the html element the code is trying to get to, either is not there or not loaded into the browser DOM yet.
It could also be that the template code is outputting something wrong to the javascript code on your particular setup.

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Monday 01 May 2006 3:28:20 am

When I load the page I get a warning, but only in Firefox.
To get that out of the way, change both occurrences of:

for ( i = 0;

to:

for (var i = 0;

When letting the mouse move over the menu, I get errors in all browsers that I have.
Opera 9beta, Firefox 1.5.0.2 and Ie 6.
You just have to open the JavaScript consol to see them.

The reason is that JavaScript is calling for

document.getElementById('img-main-{$index}'))

where {$index} is a number from 0 and up, representing your menu element number.

If I read this thread correctly, you where having some errors with some images that where not included right??
You changed the code, but forgot to look for any other code that depended on it.
Look for

{if ne($excluded_node.object.data_map[menu_background_image_rollover].content.original[full_path]) }onmouseover="(document.getElementById('img-main-{$menu.index}')).src = {$menu.object.data_map[menu_background_image_rollover].content.original[full_path]|ezroot('single')};" onmouseout="(document.getElementById('img-main-{$menu.index}')).src = {$menu.object.data_map[menu_background_image].content.original[full_path]|ezroot('single')};"{/if}

And remove it!

This is something that could be improved in this extension, I will look into it if no one does it before me, after my exam period.

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Monday 01 May 2006 5:04:26 am

Since I had nothing better to-do today, here is the code without the background images.
Background images can still be set, thru CSS.
*New ini parameter, called RootNodeLevel.
It's for those of us who have a different depth of our root folder..
*script now uses ldelim / rdelim instead of literal, makes the script more readable

{def $root_node=ezini('DynamicDoubleTopRollover','RootNode','menu.ini')}
{if or(eq($root_node, 0),eq($root_node, ''))}
	{set $root_node=2}
{/if}

{def $root_node_level=ezini('DynamicDoubleTopRollover','RootNodeLevel','menu.ini')}
{if or(eq($root_node_level, 0),eq($root_node_level, ''))}
	{set $root_node_level=1}
{/if}


{def $selected_menu=null}
{def $menu_items=fetch( content, list, hash( parent_node_id, $root_node,sort_by, $root_node.sort_array ) )}
{undef $root_node}

{def $excluded_nodes=ezini('Excluded','Node','menu.ini')}

{* Exclusion of nodes in menu *}
{if $excluded_nodes|count()}
	{def $included=array()}
	{def $excluded=array()}
	{foreach $menu_items as $menu_item}
		{if $excluded_nodes|contains( $menu_item.node_id )}
			{set $excluded=$excluded|append($menu_item)}
		{else}
			{set $included=$included|append($menu_item)}
		{/if}
	{/foreach}
	{set $menu_items=$included}
	{undef $included}
	{* End of exclusion *}
	
		<div id="topmenu">
		    <div id="topmenu-design" >
				<div id="menuborder" onmouseover="holdReset();" onmouseout="delayReset();">
				    <h3 class="hide">{"Top menu"|i18n("design/base")}</h3>
						{foreach $excluded as $excluded_node}
	           				<li {eq( $module_result.path[$root_node_level].node_id, $excluded_node.node_id )|choose( '', 'class="selected"' )}><div class="spacing">
	           				<a href={$excluded_node.url_alias|ezurl}>{$excluded_node.object.name}</a></div></li>
						{/foreach}
		    	</div>
			</div>
		</div>
		<div class="break"></div>
{/if}

	<div id="topmenu">
	    <div id="topmenu-design" >
			<div id="menuborder" onmouseover="holdReset();" onmouseout="delayReset();">
			    <h3 class="hide">{"Top menu"|i18n("design/base")}</h3>
	    		{foreach $menu_items as $index => $menu}
					    <ul>
					    {if and( is_set( $menu.object.data_map[menu_label].data_text ),ne( $menu.object.data_map[menu_label].data_text ) )}
					    	{def $label=$menu.object.data_map[menu_label].data_text|wash}
					    {else}
					    	{def $label=$menu.object.name}
					    {/if}
					    

					    
	        			{if eq( $menu.object.content_class.identifier, "link" )}
	            			<li {eq( $module_result.path[$root_node_level].node_id, $menu.node_id )|choose( '', 'class="selected"' )} id="main-{$index}" onmouseover="switchMenues({$index});" ><div class="spacing">
	                	    	<a href="{$menu.data_map.location.content}">{$label}</a></div></li>
	        			{else}
	            			{if eq( sum( $index, 1 ), $menuitems|count )}
	            				<li class="last {eq( $module_result.path[$root_node_level].node_id, $menu.node_id )|choose( '', 'selected' )}" id="main-{$index}" onmouseover="switchMenues({$index});">
	            					<div class="spacing"><a href={$menu.url_alias|ezurl}>{$label}</a></div></li>
	            			{else}
	            				<li {eq( $module_result.path[$root_node_level].node_id, $menu.node_id )|choose( '', 'class="selected"' )} id="main-{$index}" onmouseover="switchMenues({$index});"><div class="spacing">
	                    		    <a href={$menu.url_alias|ezurl}>{$label}</a></div></li>
	            			{/if}
	        			{/if}
	        			{undef $label}
	        			{if eq( $module_result.path[$root_node_level].node_id, $menu.node_id )}
	        				{set $selected_menu=$index}
	        			{/if}
	      				</ul>
				{/foreach}
	    	</div>
		</div>
	</div>
	<div class="break"></div>
	{foreach $menu_items as $index => $menu}
		<div id="subitem-{$index}">        
			<div id="submenu"> 
				<div id="submenu-design" onmouseover="holdReset();" onmouseout="delayReset();">
					<h3 class="hide">{"Sub menu"|i18n("design/base")}</h3>
					<ul id="sub-{$index}" >
						{foreach fetch( content, list, hash( parent_node_id, $menu.node_id, sort_by, $menu.sort_array ) ) as $submenu_index => $submenu}
			            	{if eq( $submenu.object.content_class.identifier, "link" )}
								<li {$submenu_index|eq( 0 )|choose( '', 'class="first"' )}><div class="spacing"><a href={$submenu.data_map.location.content}>{$submenu.object.name}</a></div></li>
	        				{else}
								<li {$submenu_index|eq( 0 )|choose( '', 'class="first"' )}><div class="spacing"><a href={$submenu.url_alias|ezurl}>{$submenu.name}</a></div></li>
	        				{/if}
						{/foreach}
				    </ul>
			    	<div class="break"></div>
				</div>
			</div>
		</div>
	{/foreach}
    <div class="break"></div>

<hr class="hide" />
{def $delay=ezini('DynamicDoubleTopRollover','Delay','menu.ini')}
<script type="text/javascript">
<!--
	/* MAINMENU SUBMENU HOVER */
	var tabHighlightClass = 'selected';
	var delayMs = {if eq($delay)}2000{else}{$delay}{/if};
	
	/* General settings */
	var currentMainTab = 'main-{$selected_menu|wash}';
	var currentSubMenu = 'sub-0';
	var triggerCount = 0;
	var hoverCheck = false;
	
	/* Main script */
	function holdReset(){ldelim}
	    hoverCheck = true;
	{rdelim}
	
	function delayReset(){ldelim}
	    hoverCheck = false;
	    if (triggerCount <= 10) {ldelim} triggerCount++; setTimeout('tryReset()',delayMs); {rdelim}
	{rdelim}
	
	function tryReset()	{ldelim}
	    triggerCount--;
	    if (triggerCount == 0 && !hoverCheck) switchMenues(currentSelected);
	{rdelim}
	
	function switchMenues(menuNumber){
	    for (var i = 0; i < {$menu_items|count()}; i++ ) {ldelim}document.getElementById('main-'+i).className=''; {rdelim}
	    if(menuNumber!=null) document.getElementById('main-'+menuNumber).className = tabHighlightClass;
	   	for (var i = 0; i < {$menu_items|count()} ; i++ ) {ldelim}document.getElementById('subitem-'+i).style.display='none'; {rdelim}
	   	if(menuNumber!=null) document.getElementById('subitem-'+menuNumber).style.display = 'block';
	{rdelim}
	var currentSelected = {$selected_menu};
	switchMenues(currentSelected);
	-->
</script>
{undef $selected_menu $delay}

I have not tested this, so might contain new errors!

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom