Siemka mam nietypowy problem. Tworzę menu popup jednak jest w nim 1 problem. Kiedy stworzę div np usermenu i tworzę w niej np linki w formie listy. Teraz pozostaje mój problem. Chcę aby podczas klikania w div usermenu, który się pojawia nie chował się on tak jak to robi teraz... Pewnie chodzi o drobiazg w kodzie ale js to dla mnie jeszcze czarna magia. Zapodaje kod jeżeli ktoś się podejmie to dzięki wielkie
kod do ujawniania menu
var PopupMenu = Class.create();
PopupMenu.prototype = {
initialize: function(id, options)
{
document.currentMenu = "";
if(!$(id))
{
return false;
}
this.id = id;
var element = $(id);
var popupMenu = element.id+"_popup";
if(!$(popupMenu))
{
return false;
}
this.menu = $(popupMenu);
this.menu.style.display = "none";
element.onclick = this.openMenu.bindAsEventListener(this);
},
openMenu: function(e)
{
Event.stop(e);
if(document.currentMenu && document.currentMenu == this.id)
{
this.closeMenu();
return false;
}
else if(document.currentMenu != "")
{
this.closeMenu();
}
offsetTop = offsetLeft = 0;
var element = $(this.id);
do
{
offsetTop += element.offsetTop || 0;
offsetLeft += element.offsetLeft || 0;
element = element.offsetParent;
if(element)
{
if(Element.getStyle(element, 'position') == 'relative' || Element.getStyle(element, 'position') == 'absolute') break;
}
} while(element);
offsetTopReal = offsetTop;
offsetLeftReal = offsetLeft;
if(element) // will be true if we broke off the last loop
{
// calculate the true top/left position relative to page borders (this is used for checking whether the popup menu will be displayed within the page)
do
{
offsetTopReal += element.offsetTop || 0;
offsetLeftReal += element.offsetLeft || 0;
} while(element = element.offsetParent);
}
element = $(this.id);
element.blur();
this.menu.style.position = "absolute";
this.menu.style.zIndex = 100;
this.menu.style.top = (offsetTop+element.offsetHeight-1)+"px";
// Bad browser detection - yes, only choice - yes.
if(MyBB.browser == "opera" || MyBB.browser == "safari")
{
this.menu.style.top = (parseInt(this.menu.style.top)-2)+"px";
}
this.menu.style.left = offsetLeft+"px";
this.menu.style.visibility = 'hidden';
this.menu.style.display = 'block';
if(this.menu.style.width)
{
menuWidth = parseInt(this.menu.style.width);
}
else
{
menuWidth = this.menu.offsetWidth;
}
pageSize = DomLib.getPageSize();
if(offsetLeftReal+menuWidth >= pageSize[0])
{
this.menu.style.left = (offsetLeft-menuWidth+element.offsetWidth)+"px";
}
this.menu.style.display = 'block';
this.menu.style.visibility = 'visible';
fadeInElement(this.menu.id, 0, 0.3, 1);
document.currentMenu = element.id;
//Event.observe(document, 'click', this.closeMenu.bindAsEventListener(this));
document.onclick = this.closeMenu.bindAsEventListener(this);
if(this.openFunc)
this.openFunc();
},
closeMenu: function()
{
if(document.currentMenu && !document.lockMenu)
{
menu = document.currentMenu;
menu = $(menu+"_popup");
fadeOutElement(document.currentMenu+"_popup", 1, 0.4, 0, function(){
menu.style.display = "none";
});
document.currentMenu = "";
document.onclick = function() { };
if(this.closeFunc)
this.closeFunc();
}
}
};
function fadeInElement(elemId, alpha, rate, targetAlpha, completeFunc)
{
if((alpha += rate) > targetAlpha) alpha = targetAlpha;
setOpacity(document.getElementById(elemId), alpha);
if(alpha < targetAlpha)
setTimeout(function(){fadeInElement(elemId, alpha, rate, targetAlpha, completeFunc);}, 125);
else if(completeFunc)
completeFunc();
}
function fadeOutElement(elemId, alpha, rate, targetAlpha, completeFunc)
{
if((alpha -= rate) < targetAlpha) alpha = targetAlpha;
setOpacity(document.getElementById(elemId), alpha);
if(alpha > targetAlpha)
setTimeout(function(){fadeOutElement(elemId, alpha, rate, targetAlpha, completeFunc);}, 125);
else if(completeFunc)
completeFunc();
}
// this function copied and modified from effects.js
function setOpacity(element, value)
{
if (value == 1)
{
element.style.opacity = (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 0.999999 : null;
if(/MSIE/.test(navigator.userAgent))
element.style.filter = element.style.filter.replace(/alpha\([^\)]*\)/gi,'');
}
else
{
if(value < 0.00001) value = 0;
element.style.opacity = value;
if(/MSIE/.test(navigator.userAgent))
element.style.filter = element.style.filter.replace(/alpha\([^\)]*\)/gi,'') +"alpha(opacity="+value*100+")";
}
}
kod do ujawniania menu
<a id="usermenu" href="#"><></a>
<div id="usermenu_popup" class="popup_menu" style="display: none;">
<a href="#">Lubie placki</a>
<br>
</div>
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
new PopupMenu("usermenu");
}
// -->
</script>