PDA

View Full Version : Somebody Please Treat This Mutated Menu!!

ASAAKI
07-15-2002, 08:28 PM
I have no idea what's wrong with this demented menu, i made it on IE5.5...
here's the script. i've tried changing the styles and stuff, it only makes the menu go more nuts than it is already!:mad: somebody please help. why doesn't it stay still?
and why is the document.onmousedown.pageMouseDown 'not implemented'?

<style>
a{text-decoration:none}

.menuLayer{
color:brown; border:2px solid;
background-color: orange;
border-color:gold darkorange darkorange gold;
position:absolute;
}

.menuItemout{
color:brown;
padding:5px 7px 5px 7px;
margin:5px 7px 5px 7px;
font-family:verdana;
font-size:12;
cursor:default;
margin: 1px;
}

.menuItemactive{
color:brown;
border:1px solid;
border-color:darkorange gold gold darkorange;
padding:5px 7px 5px 7px;
margin:5px 7px 5px 7px;
font-family:verdana;
font-size:12;
cursor:default;
background-color:darkorange;
margin: 1px;
}

.menuItemhover{

color:brown;
border:1px solid;
border-color:gold darkorange darkorange gold;
padding:5px 7px 5px 7px;
margin:5px 7px 5px 7px;
font-family:verdana;
font-size:12;
cursor:default;
margin: 1px;
}

.menuchilditemout{
color:brown;
background-color:transparent;
font-family:verdana;
font-size:12;
cursor:default;
padding: 3px 1em;
display:block;
}

.menuchilditemhover{
color:brown;
background-color:darkorange;
font-family:verdana;
font-size:12;
cursor:default;
padding: 3px 1em;
display:block;
}

.menusep{
border:1px solid;
border-color:darkorange gold gold darkorange;
font-size:1;
height:1;
width:100%;
position:relative;
}

</style>

<script>
var activeButton = null;

//document.onmousedown=pageMouseDown(event);

function pageMouseDown(event){
if(activeButton==null){
var el=document.getElementsByTagName('A');
for(var i=0;i<el.length;i++){
el[i].className="menuItemout";
}
}
else{
var el2=document.getElementsByTagName('DIV');
for(var j=0;j<el2.length;j++){
if(el2[j].className=="menuLayer" && el2[j].id!="menubar")
el2[j].style.visibility="hidden";}
var el3=document.getElementsByTagName('A');
for(var k=0;k<el3.length;k++){
if(el3[k].className.substring(0,8)=="menuItem")
el3[k].className="menuItemout";}
}
activeButton=null;
}

function replaceClassName(el,name){
var button=document.getElementById(el);
el.className=name;
}

function resetButton(button){
button.menu.style.visibility="hidden";
button.className="menuItemout";
activeButton = null;
}

function buttonClick(menuId){
var button=event.srcElement;
button.blur();
if (button.menu==null){button.menu=document.getElementById(menuId);}
if (activeButton==null){
depressButton(button);
activeButton=button;
}
else if (activeButton != null && activeButton!=button){
resetButton(activeButton);
depressButton(button);
activeButton=button;
}
else if(activeButton!=null && activeButton==button){
resetButton(activeButton);
activeButton=null;
replaceClassName(button,'menuItemhover');
}
else{
activeButton=null;
return false;
}
}

function depressButton(button){
var x,y;
x = getPageOffsetLeft(button);
y = getPageOffsetTop(button) + button.offsetHeight;
x += button.offsetParent.clientLeft;
y += button.offsetParent.clientTop;
button.menu.style.top=y;
button.menu.style.left=x;
button.className="menuItemactive";
button.menu.style.visibility="visible";
}

function buttonOver(menuId){
var button=event.srcElement;
if(activeButton!=null && activeButton==button){
null;
}
else if(activeButton==null){
var el=document.getElementsByTagName('A');
for(var i=0;i<el.length;i++){
el[i].className="menuItemout";
button.className="menuItemhover";
}
}
else{
buttonClick(menuId);
}
}

function buttonOut(menuId){
var button=event.srcElement;
if(activeButton==null)
button.className="menuItemout";
}

function getPageOffsetLeft(el) {
var x;
x = el.offsetLeft;
if (el.offsetParent != null)
x += getPageOffsetLeft(el.offsetParent);
return x;
}

function getPageOffsetTop(el) {
var y;
y = el.offsetTop;
if (el.offsetParent != null)
y += getPageOffsetTop(el.offsetParent);
return y;
}

</script>

<body>

<div id="menubar" class="menuLayer" style="width:100%;position:absolute; top:0;left:5;height:28">
<a id="menubtnedit" href="#" class="menuItemout"
onclick="buttonClick('menuedit')"
onmouseover="buttonOver('menuedit')"
onmouseout="buttonOut('menuedit')"
>Edit</a>
</div>

<div id="menuedit" class="menuLayer" style="width:18%;visibility:hidden">
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'">Script...</a>
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'"style="display:block">Style Sheet...</a>
<div class="menusep">&nbsp</div>
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'">Select All</a>
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'">Copy</a>
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'"style="display:block">Paste</a>
<div class="menusep">&nbsp</div>
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'">Preferences</a>
</div>

</body>
sciguyryan
08-18-2003, 04:24 PM
hi,



at this point in time i have tried the code in 4 diffreent html editors; HandyHTML, Coffeecup HTML Editor, 1stPage 2000, and
HTML-Kit and i have altered the code and, can as yet find no solution....
i'll look into it for you though...
ASAAKI
08-30-2003, 03:18 PM
wow! i posted this last year! didn't know i'd actually get a reply.:eek:
Anyway, it's quite old, i did figure out afterwards what was wrong. It was just that the style of 'menu out' had no border, while 'itemover' did. I should have put a border of the same thickness on itemout as well, but just of the same color.
liorean
08-30-2003, 03:23 PM
Wow - that's far between posting and first reply....
ASAAKI
08-31-2003, 10:01 AM
hehe... just goes to show that you should never give up waiting for a reply...