...

View Full Version : Submenu



GreatIdeas
02-27-2007, 10:10 PM
Hi there,

I would like to adjust the submenu because it is going off the page. Please see my coding below and also my attached image for example:





var menuWidth = 160;

//function menuInit() {
var topMenu = [];
var unitNum;
for (unitNum = 0; unitNum < menuTree.length && menuTree[unitNum].label != unitName; unitNum++);
if (unitNum == menuTree.length)
topMenu.add(topMenuItem('Unit', 0, menu(menuTree)));
else {
topMenu.add(topMenuItem(unitName, 0, menu(menuTree)));
topMenu.add(topMenuItem(chapterName, menuWidth, menu(menuTree, unitNum)));

if (lessonName) {
var chapterNum;
for (chapterNum = 0; chapterNum < menuTree[unitNum].menu.length && menuTree[unitNum].menu[chapterNum].label != chapterName; chapterNum++);
topMenu.add(topMenuItem(lessonName, menuWidth * 2, menu(menuTree, unitNum, chapterNum)));
}
}

addContent(_('breadcrumb'), topMenu);
//}

function menu(menuTree, submenu) {

if (submenu != undefined && typeof(submenu) == 'number') {
for (var i = 1; i < arguments.length; i++) {
menuTree = menuTree[arguments[i]].menu;
if (!menuTree)
return false;
}
submenu = false;
}

var menuElement = element('div', { className : 'menu hidden' });

if (submenu)
addContent(menuElement,
element('span', { className : 'menutop' },
transparentImage('ui-images/menu-left-top.png', 5, 5),
image('ui-images/menu-bg.gif', { className : 'menuend', height : 4 } ),
transparentImage('ui-images/menu-right-top.png', 5, 5)));
var childCountForOffset = 0;
if(arguments.length == 2) {
childCountForOffset = menuTree.length;
}
for (var i = 0; i < menuTree.length; i++) {
var item = menuItem(menuTree[i],childCountForOffset);
if (i == 0)
item.firstChild.style.borderTop = 'none';
if (i == menuTree.length - 1)
item.firstChild.style.borderBottom = 'none';

addContent(menuElement, item);
}

addContent(menuElement,
element('span', { className : 'menubottom' },
transparentImage('ui-images/menu-left-bottom.png', 5, 5),
image('ui-images/menu-bg.gif', { className : 'menuend' } ),
transparentImage('ui-images/menu-right-bottom.png', 5, 5)));

return menuElement;
}

function menuItem(item, childCountForOffset) {
var label = link(item.link, item.label,
{ className : 'menulabel',
onmouseover : function() {
this.addClass('menuhover');
},
onmouseout : function() {
this.removeClass('menuhover');
}
} );
var block = element('div', label);
if(childCountForOffset > 0) {
childCountForOffset = 50;
}
if (item.menu) {
var arrow = foldArrow({ className : 'rightfoldarrow' });
addContent(label, arrow);
var submenu = menu(item.menu, true);
addContent(block,
[ submenu,
{ arrow : arrow,
submenu : submenu,
widthSet : false,
onmouseover : function(e) {
if (!e) e = event;
if (e.fromElement && isSelfOrDescendent(e.fromElement, this))
return;
this.arrow.setState(1);
if(childCountForOffset > 0) {
alert(this.offsetTop);
}
this.submenu.style.top = Number(this.offsetTop - childCountForOffset) + 'px';
this.submenu.style.left = this.offsetWidth + 'px';
this.submenu.show();
if (!this.widthSet) {
var w = this.submenu.offsetWidth + 10;
this.submenu.firstChild.firstChild.nextSibling.style.width = w + 'px';
this.submenu.lastChild.firstChild.nextSibling.style.width = w + 'px';
this.widthSet = true;
}
},
onmouseout : function(e) {
if (!e) e = event;
if (e.toElement && isSelfOrDescendent(e.toElement, this))
return;
this.arrow.setState(0);
this.submenu.hide();
}
}
]);
}

return block;
}

function topMenuItem(label, x, submenu) {
var arrow = foldArrow({ className : 'leftfoldarrow' });
var e = element('span',
{ className : 'topmenulabel menulabel' },
arrow,
' ' + label,
submenu,
{ submenu : submenu,
arrow : arrow,
widthSet : false,
onmouseover : function(e) {
if (!e) e = event;
if (e.fromElement && isSelfOrDescendent(e.fromElement, this))
return;
if(!(submenu == false)) {
this.submenu.style.left = '0px';
this.submenu.style.top = this.offsetHeight + 'px';
this.submenu.style.left = this.offsetLeft + 'px';
this.submenu.show();
if (!this.widthSet) {
var w = this.submenu.offsetWidth + 10;
this.submenu.lastChild.firstChild.nextSibling.style.width = w + 'px';
this.widthSet = true;
}
}
this.arrow.setState(1);
},
onmouseout : function(e) {
if (!e) e = event;
if (e.toElement && isSelfOrDescendent(e.toElement, this))
return;
this.arrow.setState(0);
if(!(submenu == false)) {
this.submenu.hide();
}
}
}
);
return e;
}

function isSelfOrDescendent(testElement, refElement) {
for (;testElement; testElement = testElement.parentNode)
if (testElement == refElement)
return true;
return false;
}

function foldArrow() {
return multiStateImage('ui-images/menu-arrow-right.png', 'ui-images/menu-arrow-down.png',
{ align : 'absmiddle', width : 10, height : 10 },
remainingArgs(arguments, 0));
}

function transparentImage(src, w, h) {
if (isIE6 && src.toLowerCase().indexOf('.png') != -1)
return image('blank.gif',
{ width : w,
height : h,
style : { filter : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')" }
}
);
else
return image(src);
}




-----------------------------------------------------------------------


Thanks for your help!!

Rappa
02-27-2007, 10:15 PM
can you please put it in a code block so i can look at it in one easy to use compact section.

vwphillips
02-27-2007, 10:33 PM
cant be sure without knowing the structure of the menu, but


....
if(!(submenu == false)) {
this.submenu.style.left = '0px';
this.submenu.style.top = this.offsetHeight + 'px';
this.submenu.style.left = this.offsetLeft + 'px';
zxcAdjustTop(this.submenu);
this.submenu.show();
if (!this.widthSet) {
....
<script language="JavaScript" type="text/javascript">
<!--

function zxcAdjustTop(zxcobj){
while (parseInt(zxcobj.style.top)+zxcobj.offsetHeight>zxcWWHS()[0]+zxcWWHS()[1]){
zxcobj.style.top=(parseInt(zxcobj.style.top)-1)+'px';
}
}


function zxcWWHS(){
if (window.innerHeight){ return [window.innerHeight-20,window.pageYOffset]; }
else if (document.documentElement.clientHeight){ return [document.documentElement.clientHeight,document.documentElement.scrollTop]; }
return [document.body.clientHeight,document.body.scrollTop];
}




//-->
</script>

GreatIdeas
02-28-2007, 12:26 AM
Rappa, where do I find the Code Block?

vwphillips, where would I put your code in with my existing coding below?

Thanks!

vwphillips
02-28-2007, 12:31 AM
add the new line to the copied section of code


....
if(!(submenu == false)) {
this.submenu.style.left = '0px';
this.submenu.style.top = this.offsetHeight + 'px';
this.submenu.style.left = this.offsetLeft + 'px';
zxcAdjustTop(this.submenu);// <<<< New Line
this.submenu.show();
if (!this.widthSet) {
....



add this to the header section of the document


<script language="JavaScript" type="text/javascript">
<!--

function zxcAdjustTop(zxcobj){
while (parseInt(zxcobj.style.top)+zxcobj.offsetHeight>zxcWWHS()[0]+zxcWWHS()[1]){
zxcobj.style.top=(parseInt(zxcobj.style.top)-1)+'px';
}
}


function zxcWWHS(){
if (window.innerHeight){ return [window.innerHeight-20,window.pageYOffset]; }
else if (document.documentElement.clientHeight){ return [document.documentElement.clientHeight,document.documentElement.scrollTop]; }
return [document.body.clientHeight,document.body.scrollTop];
}




//-->
</script>

Duplicating your requirements on different forums wastes the time of those who can reply

GreatIdeas
02-28-2007, 12:35 AM
vwphillips, thanks my friend and I will try it to see how it will look.

vwphillips
02-28-2007, 04:01 AM
Oh yes when posting, the code tag are applied by hightlighting the code and depessing the '#' symbol in the formatting row.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum