bigramx
Новичок
Не правильно работает меню в IE.
Всем доброго времени суток! Прошу подсказать почему не работает выпадающее меню в IE (в файр-фокс всё ок!).
В firefox всё отлично, открываю IE, всё работает, но возникает непонятный глюк. Как видно в функции showActionLayer стоит alert() на наведение мыши на цифру два. Наводим на цифру три, появляется меню для третьего пункта, но стоит перевести мышь чуть левее, на поле, помеченное красным, как вдруг опять появляется алерт, хотя мы не на втором поле, а на третьем. Очень прошу помощи, уже сломал голову в чём причина... (((
Вот весь архив с рисунками для экспериментов:
http://www.in-tim.ru/menu.rar
Всем доброго времени суток! Прошу подсказать почему не работает выпадающее меню в IE (в файр-фокс всё ок!).
PHP:
<html>
<style>
body { margin: 0px; padding: 0px; }
img { border: 0px; }
div.avatar_n_comms { border: 1px solid #e0d0c5; background: #f9f7f3; padding: 10px 10px; margin-bottom: 10px; text-align: left; }
div.avatar_n_comms div.user_avatar_icons { position: relative; margin-bottom: 3px; }
div.avatar_n_comms div.user_avatar_icons div.icon { border-width: 2px 2px 2px 0px; border-style: solid; border-color: #e0d0c5; padding: 3px; background: #ffffff; }
div.avatar_n_comms div.user_avatar_icons div.icon_on { border-width: 2px 2px 2px 0px; border-style: solid; border-color: #e0d0c5; padding: 3px; background: #ffffff; }
div.avatar_n_comms div.user_avatar_icons div.flyout { position: absolute; display: none; white-space: nowrap; background: #ffffff; border-width: 2px 0px 2px 2px; border-style: solid; border-color: #e0d0c5; }
div.avatar_n_comms div.user_avatar_icons div.flyout tr { height: 26px; }
div.avatar_n_comms div.user_avatar_icons div.flyout td.flyout_icon { padding: 3px; text-align: left; }
div.avatar_n_comms div.user_avatar_icons div.flyout td.flyout_title { padding: 5px 3px; white-space: nowrap; }
</style>
<script src='jquery.js' type='text/javascript'></script>
<script>
var menu = {
nLookedUserId: 0,
srcTimer: null,
sCurrentItemId: null,
toggleActionLayer: function ( sId, sAction ) {
if( sAction=="show" ) {
if( this.srcTimer ) {
clearTimeout(this.srcTimer);
this.srcTimer = null;
}
if( this.sCurrentItemId!=null ) {
this.hideActionLayer(this.sCurrentItemId);
}
this.sCurrentItemId = sId;
menu.showActionLayer(sId);
} else {
this.srcTimer = setTimeout( function(){ menu.hideActionLayer(sId); }, 200 );
}
},
showActionLayer: function( sLayerId ) {
if( $("#"+sLayerId+"_icon").length>0 && $("#"+sLayerId+"_flyout").length>0 ) {
if(sLayerId=="avatar_icons_contacts") {
alert("asd");
}
$("#"+sLayerId+"_flyout").css("display","block");
$("#"+sLayerId+"_icon").removeClass().addClass("icon_on");
var nIconLeft = $("#"+sLayerId+"_icon").position().left;
var nIconTop = $("#"+sLayerId+"_icon").position().top;
var nFlyoutWidth = $("#"+sLayerId+"_flyout").outerWidth();
var nMainDivLeft = ( $("#main").position().left>0 ? ($("#main").position().left+1) : 0 );
$("#"+sLayerId+"_flyout").css("top",0);
$("#"+sLayerId+"_flyout").css("left",-(nFlyoutWidth+nMainDivLeft));
$("#"+sLayerId+"_flyout").css("white-space","nowrap");
}
},
hideActionLayer: function( sLayerId ) {
if( $("#"+sLayerId+"_icon").length>0 && $("#"+sLayerId+"_flyout").length>0 ) {
$("#"+sLayerId+"_flyout").css("top",-1000);
$("#"+sLayerId+"_flyout").css("left",-1000);
$("#"+sLayerId+"_flyout").css("display","none");
$("#"+sLayerId+"_icon").removeClass().addClass("icon");
}
}
}
</script>
<body>
<div id="main">
<div class='avatar_n_comms'><table cellspacing='0' cellpadding='0' border='0'>
<tr>
<td valign="top"><img src="avatar.jpg" /></td>
<td valign="top">
<div class='user_avatar_icons' onMouseOver="menu.toggleActionLayer('avatar_icons_status','show');" onMouseOut="menu.toggleActionLayer('avatar_icons_status','hide');">
<div class="icon" id="avatar_icons_status_icon"><img src="blah-blah-blah-1.jpg" /></div>
<div class="flyout" id="avatar_icons_status_flyout"><table cellspacing="0" cellpadding="0" border="0">
<tr><td class="flyout_icon"><img src='blah-blah-blah-1.jpg' /></a></td><td class="flyout_title"><a href="">Ссылка 1</a></td></tr>
</table></div>
</div>
<div class='user_avatar_icons' onMouseOver="menu.toggleActionLayer('avatar_icons_contacts','show');" onMouseOut="menu.toggleActionLayer('avatar_icons_contacts','hide');">
<div class="icon" id="avatar_icons_contacts_icon"><img src="blah-blah-blah-2.jpg" /></div>
<div class="flyout" id="avatar_icons_contacts_flyout"><table cellspacing="0" cellpadding="0" border="0">
<tr><td class="flyout_icon"><img src='blah-blah-blah-1.jpg' /></td><td class="flyout_title"><a href="">Ссылка 1</a></td></tr>
<tr><td class="flyout_icon"><img src='blah-blah-blah-2.jpg' /></td><td class="flyout_title"><a href="">Ссылка 2</a></td></tr>
<tr><td class="flyout_icon"><img src='blah-blah-blah-3.jpg' /></td><td class="flyout_title"><a href="">Ссылка 3</a></td></tr>
</table></div>
</div>
<div class='user_avatar_icons' onMouseOver="menu.toggleActionLayer('avatar_icons_media','show');" onMouseOut="menu.toggleActionLayer('avatar_icons_media','hide');">
<div class="icon" id="avatar_icons_media_icon"><img src="blah-blah-blah-3.jpg" /></div>
<div class="flyout" id="avatar_icons_media_flyout"><table cellspacing="0" cellpadding="0" border="0">
<tr><td class="flyout_icon"><img src='blah-blah-blah-1.jpg' /></a></td><td class='flyout_title'><a href="">Ссылка 1</a></td></tr>
<tr><td class="flyout_icon"><img src='blah-blah-blah-2.jpg' /></a></td><td class='flyout_title'><a href="">Ссылка 2</a></td></tr>
</table></div>
</div>
</td>
</tr>
</table></div>
</div>
</body>
</html>Вот весь архив с рисунками для экспериментов:
http://www.in-tim.ru/menu.rar
