Dynamic double top menu problems in IE

Dynamic double top menu problems in IE

Wednesday 26 April 2006 10:28:44 am - 9 replies

Author Message

Pascal France

Wednesday 26 April 2006 11:28:35 am

Hi,

This due to the rollover mecanism. You can remove this:

{if $background_image}<img id="img-main-{$index}" src={$background_ima
ge|ezroot} alt="{$menu.object.data_map[menu_background_image].content.alternative_text}" />{/if}

in lines 66, 70 an 73 of the extensions/dynamicdoubletopmenu/design/base/templates/menu/dynamic_double_top_rollover.tpl tamplate.

Regards

Pascal

Ce qui embellit le désert c'est qu'il cache un puits... quelque part... (A. de Saint-Exupéry) - http://luxpopuli.fr/eZ-Publish

Vidar Østevik

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

Pascal France

Sunday 30 April 2006 10:06:50 am

Hi Vidar,

With IE 6.0.2800.1106 (and win 2000) I have no error message with my site: www.linuxorable.net/ez_publish

Regards

Pascal

Ce qui embellit le désert c'est qu'il cache un puits... quelque part... (A. de Saint-Exupéry) - http://luxpopuli.fr/eZ-Publish

André R.

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

Vidar Østevik

Sunday 30 April 2006 4:42:12 pm

Hi again!

I have now set up a test site, with a fresh installation of eZ Publish 3.7.5, with the following extensions: FCK editor and dynamic double top menu.

Here is the adress: http://81.166.33.5:89/ezpublish/index.php

You will be able to log in with username: admin, and password: test.

I have tried to access my page with various computers.

My main server running Win2003 and IE 6.0.3790.1830 SP1 are giving me error.
My home computer running XP Home and IE 6.0.2900.2180 SP2 are giving me error.
My laptop running XP PRO and IE 6.0.2900.2180 SP2 are NOT giving me error???
And <i>offcourse</i> Mozilla Firefox are NOT giving me error.

<b>To Pascal: </b>
Accessing your page results in the same errors that exists on my page. IE reports errors in line 121, 127,133, 139, 145 and 303

EDIT: Please be kind to my old server, and do NOT expect great speed on the test site. It is running on an old PII 667 MHz with little memory and no PHP accelrator. This was only set up to serve this test site for a few days.

André R.

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

André R.

Monday 01 May 2006 4:41:51 am

One thing I don't get, is this code:

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

What are you (Alexandre Nion, or others that might code this way / or get the point of that code) comparing $root_node with ?? Wouldn't you always get false or true with this ??

My guess is that this code should look like this:

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

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

André R.

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

Vidar Østevik

Monday 01 May 2006 11:33:58 am

Hi André!

Thank you very much for your effort!
I have now updated the temlate for the menu as you suggested, changing

 for ( i = 0  

to

 for (var i = 0 

and removing

{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 finally replacing

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

with

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

Still I'm getting the same error code.. ("document.getElementById(..) is null or not an object").

But this error don't show up before I move the mouse over the menu.

The test site is still available, and I have turned on debug information.

Regards Vidar

You must be logged in to post messages in this topic!

Powered by eZ Publish™ CMS Open Source Web Content Management. Copyright © 1999-2014 eZ Systems AS (except where otherwise noted). All rights reserved.