Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Submenu

  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Submenu

    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 : "progidXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')" }
    }
    );
    else
    return image(src);
    }




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


    Thanks for your help!!
    Attached Thumbnails Attached Thumbnails Submenu-menu.gif  

  • #2
    Regular Coder Rappa's Avatar
    Join Date
    Nov 2005
    Location
    LI
    Posts
    356
    Thanks
    21
    Thanked 9 Times in 9 Posts
    can you please put it in a code block so i can look at it in one easy to use compact section.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    cant be sure without knowing the structure of the menu, but
    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);
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New Coder
    Join Date
    Feb 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Rappa, where do I find the Code Block?

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

    Thanks!

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    add the new line to the copied section of code
    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
    Code:
    <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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    Feb 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    vwphillips, thanks my friend and I will try it to see how it will look.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Oh yes when posting, the code tag are applied by hightlighting the code and depessing the '#' symbol in the formatting row.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •