SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 52
  1. #26
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You wouldn't need any javascript there, since clicking a submenu item will load another page.

    There are 3 ways to do this:

    1) Use PHP to write the correct image. For every submenu item:

    PHP Code:
    <?php
    if ($current_page == "FAQ")
        echo 
    "<img class=\"MenuItem\" id=\"qa01\" name=\"qa01\" src=\"http://www.westeros.org/Citadel/Graphics/menu_qa01b.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"FAQ\" title=\"FAQ\" />";
    else
        echo 
    "<a href=\"http://www.westeros.org/Citadel/FAQ/\" onmouseover=\"changeImages('qa01','qa01b')\" onmouseout=\"changeImages('qa01','qa01a')\"><img class=\"MenuItem\" id=\"qa01\" name=\"qa01\" src=\"http://www.westeros.org/Citadel/Graphics/menu_qa01a.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"FAQ\" title=\"FAQ\" /></a>";
    ?>
    Copy/paste to every page.

    2) You can also do it with javascript, though it would be a bit slower (since it's client-side), wouldn't take effect until the page completely loads, and would still require some PHP.

    First, id all the submenu anchors with the same name as the folder they correspond to. For ex:

    Code:
    <a id="FAQ" href="http://www.westeros.org/Citadel/FAQ/" onmouseover="changeImages('qa01','qa01b')" onmouseout="changeImages('qa01','qa01a')"><img class="MenuItem" id="qa01" name="qa01" src="http://www.westeros.org/Citadel/Graphics/menu_qa01a.gif" width="99" height="40" border="0" alt="FAQ" title="FAQ" /></a>
    PHP Code:
    window.onload = function() {
    <?php
        
    echo "var submenuItemId = '$submenu_item_id';";
        echo 
    "var submenuId = '$submenu_id';";
    ?>
        ...
        var item = document.getElementById(submenuItemId);
        var img = item.getElementsByTagName('img')[0];
        img.src = img.src.substr(0, img.src.length - 5) + 'b.gif';
        item.parentNode.replaceChild(img, item);
        ToggleSub(submenuId);
    }
    3) And finally, you can just use HTML with no javascript and no PHP. But that would mean you'd have to edit every HTML page. For example, for the FAQ page, instead of an anchor with a nested img, you'd have:

    HTML Code:
    <img class="MenuItem" id="qa01" name="qa01" src="http://www.westeros.org/Citadel/Graphics/menu_qa01b.gif" width="99" height="40" border="0" alt="FAQ" title="FAQ" />

  2. #27
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The idea is just to have the right menu and submenu items selected on initial load of the page, to indicate which section of the site the visitor is within. So when you load up http://www.westeros.org/Citadel/FAQ/, the main menu should have the 'Q & A' button selected, and the submenu should have the 'FAQ' button selected. Given that scenario, can it not be handled in the same fashion as the loading of the correct submenu?

    If not, looking at the three options, 3) is out since the menu and submenu are includes, so I can't differentiate between the sections. 2) could work, but looks a little complex, so 1) is probably the best choice. I'll try that out and see how it works.

  3. #28
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The PHP solution worked almost perfectly. It would have been nice if the javascript could be adjusted to take into account that once I actually click a new item on the submenu, the initially selected one should switch back to the 'a' image. Other than that, brilliant.

    http://www.westeros.org/Citadel/FAQ/ shows it in action.

    The main menu is trickier. The selected item on the main menu doesn't stay selected if I mouse over another item on the main menu, and if I use another class for the current item to change the pointer, it won't change back to a hand even when another item is selected. Could this be fixed with some more conditions in the javascript? This is the PHP I use for the main menu:

    Code:
    <?php
    
    echo "<div id=\"MenuMain\">\n";
    if ($WhichMenuItem == "QA")
        echo "<span class=\"MenuItemCurrent\" onclick=\"menuClick('main01','QA');\" onmouseover=\"menuMouseover('main01','main01b');\" onmouseout=\"menuMouseout('main01','main01a');\"><img class=\"MenuItem\" id=\"main01\" name=\"main01\" src=\"http://www.westeros.org/Citadel/Graphics/menu_main01b.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"Q &amp; A\" title=\"Q &amp; A\" /></span>\n";
    else
        echo "<span class=\"MenuItem\" onclick=\"menuClick('main01','QA');\" onmouseover=\"menuMouseover('main01','main01b');\" onmouseout=\"menuMouseout('main01','main01a');\"><img class=\"MenuItem\" id=\"main01\" name=\"main01\" src=\"http://www.westeros.org/Citadel/Graphics/menu_main01a.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"Q &amp; A\" title=\"Q &amp; A\" /></span>\n";
    if ($WhichMenuItem == "Theme")
        echo "<span class=\"MenuItemCurrent\" onclick=\"menuClick('main02','Theme');\" onmouseover=\"menuMouseover('main02','main02b');\" onmouseout=\"menuMouseout('main02','main02a');\"><img class=\"MenuItem\" id=\"main02\" name=\"main02\" src=\"http://www.westeros.org/Citadel/Graphics/menu_main02b.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"Theme\" title=\"Theme\" /></span>\n";
    else
        echo "<span class=\"MenuItem\" onclick=\"menuClick('main02','Theme');\" onmouseover=\"menuMouseover('main02','main02b');\" onmouseout=\"menuMouseout('main02','main02a');\"><img class=\"MenuItem\" id=\"main02\" name=\"main02\" src=\"http://www.westeros.org/Citadel/Graphics/menu_main02a.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"Theme\" title=\"Theme\" /></span>\n";
    if ($WhichMenuItem == "Story")
        echo "<span class=\"MenuItemCurrent\" onclick=\"menuClick('main03','Story');\" onmouseover=\"menuMouseover('main03','main03b');\" onmouseout=\"menuMouseout('main03','main03a');\"><img class=\"MenuItem\" id=\"main03\" name=\"main03\" src=\"http://www.westeros.org/Citadel/Graphics/menu_main03b.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"Story\" title=\"Story\" /></span>\n";
    else
        echo "<span class=\"MenuItem\" onclick=\"menuClick('main03','Story');\" onmouseover=\"menuMouseover('main03','main03b');\" onmouseout=\"menuMouseout('main03','main03a');\"><img class=\"MenuItem\" id=\"main03\" name=\"main03\" src=\"http://www.westeros.org/Citadel/Graphics/menu_main03a.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"Story\" title=\"Story\" /></span>\n";
    if ($WhichMenuItem == "Miscellany")
        echo "<span class=\"MenuItemCurrent\" onclick=\"menuClick('main04','Miscellany');\" onmouseover=\"menuMouseover('main04','main04b');\" onmouseout=\"menuMouseout('main04','main04a');\"><img class=\"MenuItem\" id=\"main04\" name=\"main04\" src=\"http://www.westeros.org/Citadel/Graphics/menu_main04b.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"Miscellany\" title=\"Miscellany\" /></span>\n";
    else
        echo "<span class=\"MenuItem\" onclick=\"menuClick('main04','Miscellany');\" onmouseover=\"menuMouseover('main04','main04b');\" onmouseout=\"menuMouseout('main04','main04a');\"><img class=\"MenuItem\" id=\"main04\" name=\"main04\" src=\"http://www.westeros.org/Citadel/Graphics/menu_main04a.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"Miscellany\" title=\"Miscellany\" /></span>\n";
    echo "</div>\n";
    
    ?>
    I was also pondering if it wouldn't be possible to also load up the right submenu on an interior page through PHP? But maybe there's no way of doing that and still allowing the menuClick() function to switch between submenus? Unless the PHP could be used to change display : none to display : block, without interfering with the mouseover? An equivalent, of sort to

    Code:
    document.getElementById('Menu'+Menu[i]).style.display = 'none';
    Last edited by Linda A; Apr 29, 2005 at 06:54.

  4. #29
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would have been nice if the javascript could be adjusted to take into account that once I actually click a new item on the submenu, the initially selected one should switch back to the 'a' image.
    I thought that when you clicked on a submenu item, you'd go to a new page, which would make it pointless to change an image on the old page.

    If you aren't loading a new page and you want to replicate the main menu's behavior, you'd have to do something similar to what we did to the main menu: create three new functions that do the same thing as menuClick, menuMouseout, and menuMouseover, except they depend on another variable, say currentSubmenuItemId instead of currentMenuItemId. Then make the submenu items use those functions in the same way as the main menu, and at the beginning use PHP (PHP writing JS) to set the currentSubmenuItemId var.

    The main menu is trickier. The selected item on the main menu doesn't stay selected if I mouse over another item on the main menu, and if I use another class for the current item to change the pointer, it won't change back to a hand even when another item is selected. Could this be fixed with some more conditions in the javascript?
    This currentMenuItemId var needs to correspond to the id of the menu item.

    Code:
    var currentMenuItemId = 'VolumeI';
    should be

    Code:
    var currentMenuItemId = 'main01';
    I was also pondering if it wouldn't be possible to also load up the right submenu on an interior page through PHP? But maybe there's no way of doing that and still allowing the menuClick() function to switch between submenus? Unless the PHP could be used to change display : none to display : block, without interfering with the mouseover?
    Yeah you can do that. Wouldn't require any Javascript at all. You can either write write a style attribute or a class attribute and use CSS:

    HTML Code:
    <div id="MenuVolumeI" style="display: none;">
    or

    HTML Code:
    <div id="MenuVolume1" class="CurrentSubmenu">
    For the latter option, you'd also have to add classes to the rest of the submenu divs and change the stylesheet to use classes instead of ids for the submenus.

  5. #30
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought that when you clicked on a submenu item, you'd go to a new page, which would make it pointless to change an image on the old page.
    Correct. Its just that the loading is slow enough that two selected images sit there for quite a while before the new page is loaded. But I think I'll leave that as it is, since it would be too much added for too small a result.

    This currentMenuItemId var needs to correspond to the id of the menu item.
    Ah, okay, fixed that. You wouldn't happen to know of a way to setup an array that determines that Volume I = main01 and so on? That would only require four items in that array, rather than a full one for each folder. I tried this but it clearly wasn't correct PHP:

    Code:
    $MenuItemID = Array ( 
    '$MenuItem==VolumeI' => main01,
    '$MenuItem==VolumeII' => main02,
    '$MenuItem==VolumeIII' => main03,
    '$MenuItem==VolumeIV' => main04
    );
    I take it that toggling the cursor from plain to link would take adding an ID to the spans on the main menu and calling that somehow in the ToggleSub() and CollapseAll() functions?

    Yeah you can do that. Wouldn't require any Javascript at all. You can either write write a style attribute or a class attribute and use CSS:
    Works fine for the submenu (loads much faster, and even solves the issue with two items being selected at the same time, since the new one isn't selected until the new page is loaded), but of course (since I got rid of the javascript that PHP was printing onto each page) the main menu reverts to losing the selected item as soon as another is moused over. Can I specify the currentMenuItemId var somewhere else, like in the main javascript file, or would that conflict with the one that is there already?

  6. #31
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, okay, fixed that. You wouldn't happen to know of a way to setup an array that determines that Volume I = main01 and so on? That would only require four items in that array, rather than a full one for each folder. I tried this but it clearly wasn't correct PHP:

    Code:
    $MenuItemID = Array ( 
    '$MenuItem==VolumeI' => main01,
    '$MenuItem==VolumeII' => main02,
    '$MenuItem==VolumeIII' => main03,
    '$MenuItem==VolumeIV' => main04
    );
    I take it that toggling the cursor from plain to link would take adding an ID to the spans on the main menu and calling that somehow in the ToggleSub() and CollapseAll() functions?
    If I recall my PHP correctly, that should be:

    PHP Code:
    $MenuItemID = array (
        
    "VolumeI" => "main01",
        
    "VolumeII" => "main02",
        
    "VolumeIII" => "main03",
        
    "VolumeIV" => "main04"
    ); 
    And you'd set the currentMenuItemId var like this:

    PHP Code:
    echo "var currentMenuItemId = '{$MenuItemID[$menu_item]}';"
    Alternatively, you could just rename all the main01 to VolumeI, etc.

    BTW, all strings in PHP should be surrounded with quotes. PHP has a feature that automatically converts unquoted strings to quoted strings, but you shouldn't rely on it.

    Works fine for the submenu (loads much faster, and even solves the issue with two items being selected at the same time, since the new one isn't selected until the new page is loaded), but of course (since I got rid of the javascript that PHP was printing onto each page) the main menu reverts to losing the selected item as soon as another is moused over. Can I specify the currentMenuItemId var somewhere else, like in the main javascript file, or would that conflict with the one that is there already?
    Er, I meant you wouldn't need any javascript to initially load and display the submenu. You'd still need javascript for the main menu and the changing of submenus.

    You can specify the currentMenuItemId var anywhere, but if it's specified elsewhere later on, it'll be overwritten.

  7. #32
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrm, that array doesn't seem to have worked. I can check the PHP forum about that, though. I'll fix the quotes, too, thanks.

    Er, I meant you wouldn't need any javascript to initially load and display the submenu. You'd still need javascript for the main menu and the changing of submenus.
    Right, I understand that. What I was looking for was some way of using only the main .js file that I include on each page (Citadel-Menu.js) and avoiding having to have PHP print this on each page:

    Code:
    <?php 
    
    echo "<script language='javascript' >\n";
    echo "var currentMenuItemId = '$WhichMenuItemID';\n"; 
    echo "oldWindowOnload = window.onload;\n";
    echo "window.onload = function() {\n";
    echo "if (oldWindowOnload)\n";
    echo "oldWindowOnload();\n";
    echo "ToggleSub('$WhichSubMenu');\n"; 
    echo "}\n";
    echo "</script>\n";
    
    ?>
    So, PHP for the initial loading, as you say, and then the javascript in the .js file to handle mouseovers and menu toggling. But since the currentMenuItemId has to come from PHP, it looks like it has to go on the page itself. So, right now, I am including just this:

    Code:
    <?php 
    
    echo "<script language='javascript' >\n";
    echo "var currentMenuItemId = '$WhichMenuItemID';\n"; 
    echo "</script>\n";
    
    ?>
    I guess that's an okay solution, though, since it doesn't add that much more to each page.

    Now I'll see if I can tackle the cursor myself.

  8. #33
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess that might have been a bit ambitious. Seems I don't quite understand how the various IDs work after all.

    I removed the span tags around the images on the main menu, so that I could use the id=main## to change the cursor (if I kept the spans, I'd need yet another ID for those, since they can't be reused. Each item on the new main menu then looked like this:

    Code:
    if ($WhichMenuItem == "VolumeI")
        echo "<img class=\"MenuItem\" id=\"main01\" name=\"main01\" style=\"cursor:default\" onclick=\"menuClick('main01','VolumeI');\" onmouseover=\"menuMouseover('main01','main01b');\" onmouseout=\"menuMouseout('main01','main01a');\" src=\"http://www.westeros.org/Citadel/Graphics/menu_main01b.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"Volume I - Questions &amp; Answers\" title=\"Volume I - Questions &amp; Answers\" />\n";
    else
        echo "<img class=\"MenuItem\" id=\"main01\" name=\"main01\" onclick=\"menuClick('main01','VolumeI');\" onmouseover=\"menuMouseover('main01','main01b');\" onmouseout=\"menuMouseout('main01','main01a');\" src=\"http://www.westeros.org/Citadel/Graphics/menu_main01a.gif\" width=\"99\" height=\"40\" border=\"0\" alt=\"Volume I - Questions &amp; Answers\" title=\"Volume I - Questions &amp; Answers\" />\n";
    I also added this to the CSS:

    Code:
    IMG.MenuItem {
    	cursor : pointer;
    	display : block;
    }
    Finally, I adjust the js:

    Code:
    function CollapseAll() {
    for (i=0; i<=Menu.length-1; i++) {
    		document.getElementById('Menu'+Menu[i]).style.display = 'none';
    		document.getElementById(thisId).style.cursor = 'pointer';
    }
    }
    
    function ToggleSub(MenuId) {
    x = 'Menu'+MenuId;
    CollapseAll();
    		document.getElementById(x).style.display = 'block';
    		document.getElementById(thisId).style.cursor = 'default';
    The PHP and the CSS work fine, as the initial load-up is correct. But I clearly don't have the JS right as a) the cursors stay as initially loaded for each item and b) if I click another item, the initially selected item stays selected until I mouseover it.

    a) I presume depends on an error in my additions to the js, and b) seems to have something to do with switching the menuClick() from the span to the img. I can't quite figure out what, though.

  9. #34
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I take it that toggling the cursor from plain to link would take adding an ID to the spans on the main menu and calling that somehow in the ToggleSub() and CollapseAll() functions?
    I don't understand what you mean by this. Cursors?

    So, PHP for the initial loading, as you say, and then the javascript in the .js file to handle mouseovers and menu toggling. But since the currentMenuItemId has to come from PHP, it looks like it has to go on the page itself. So, right now, I am including just this:
    Yeah, that would work. var currentMenuItemId = '<?php echo $WhichMenuItemID; ?>'; should work too.

  10. #35
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand what you mean by this. Cursors?
    Sorry, should have been clearer about that. I was trying to make sure that you get a link-type cursor (cursor:pointer) when you mouseover the unselected items on the main menu, and a regular arrow-cursor (cursor:default) on the selected item. I've tried to get this to work, but as I describe in my previous post, with some complications on the javascript side.

    Yeah, that would work. var currentMenuItemId = '<?php echo $WhichMenuItemID; ?>'; should work too.
    Right, but it would still have to go on each page, so they're about equal. :)

  11. #36
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function CollapseAll() {
    for (i=0; i<=Menu.length-1; i++) {
    		document.getElementById('Menu'+Menu[i]).style.display = 'none';
    		document.getElementById(thisId).style.cursor = 'pointer';
    }
    }
    
    function ToggleSub(MenuId) {
    x = 'Menu'+MenuId;
    CollapseAll();
    		document.getElementById(x).style.display = 'block';
    		document.getElementById(thisId).style.cursor = 'default';
    Menu and thisId needs to be defined globally, passed into the function as parameters, or defined in the function. Is Menu supposed to be the array of main menu items, and is thisId supposed to be the id attribute of element referred to by "this"? If so, it would have to be:

    Code:
    function CollapseAll() {
    	var menu = document.getElementById('MainMenu').getElementByTagName('img');
    	for (var i = 0; i < menu.length; i++) {
    		menu[i].style.display = 'none';
    	}
    	this.style.cursor = 'pointer';
    }
    
    function ToggleSub(menuId) {
    	document.getElementById(menuId).style.display = 'block';
    	this.style.cursor = 'default';
    }
    Also, you should never use a variable without declaring it (var blah. It works if you omit the var statement, but it declares the variable globally, which means every function can use it, and if some of those functions use that variable but assume that the variable won't affect anything other function and/or global code, it will lead to errors - and hard to debug errors too.

  12. #37
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Linda A
    Sorry, should have been clearer about that. I was trying to make sure that you get a link-type cursor (cursorointer) when you mouseover the unselected items on the main menu, and a regular arrow-cursor (cursor:default) on the selected item. I've tried to get this to work, but as I describe in my previous post, with some complications on the javascript side.



    Right, but it would still have to go on each page, so they're about equal.
    The easiest way to do make two different class (as in class attribute, not OOP class), say MenuItem and CurrentMenuItem, and add some CSS:

    Code:
    .MenuItem, .CurrentMenuItem {
    	/* old style for .MenuItem goes here */
    }
    
    .MenuItem {
    	cursor: pointer;
    }
    
    .CurrentMenuItem {
    	cursor: default;
    }
    No JS required.

  13. #38
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Menu and thisId needs to be defined globally, passed into the function as parameters, or defined in the function. Is Menu supposed to be the array of main menu items, and is thisId supposed to be the id attribute of element referred to by "this"?
    I don't quite follow this. I didn't write CollapseAll and ToggleSub myself, so I am not entirely sure how they work, but all I added now was

    Code:
    document.getElementById(thisId).style.cursor = 'pointer';
    and

    Code:
    document.getElementById(thisId).style.cursor = 'default';
    Menu was always in there, handled by this array:

    Code:
    var Menu = new Array("VolumeI","VolumeII","VolumeIII","VolumeIV");
    By the look of it, Menu is used to handle which submenu to toggle to (since those IDs are named Menu+MenuId). 'thisId' I used because I thought that'd yield main01, main02, etc from looking at menuClick().

    I tried the changes you suggested, but the same errors remained on the main menu, and the selected submenu didn't display properly.

    Also, you should never use a variable without declaring it
    Oh, okay. Which is the undeclared variable?

  14. #39
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Maian
    The easiest way to do make two different class (as in class attribute, not OOP class), say MenuItem and CurrentMenuItem, and add some CSS:

    No JS required.
    That was what I did first. But how can I get that to change when someone toggles between the items on the main menu? It would work fine for the initial loading, but not when someone flips between menus (since changes on the main menu would occur without a reload of the page).

    Edited to add: See for example how it acts currently. I set the main menu item that is active as the page loads to cursor:default, but then that sticks even as you click other items on the main menu.

    I wonder, btw, why it is that ToggleSub breaks if I move this

    [code]
    onclick="menuClick('main03','VolumeIII');" onmouseover="menuMouseover('main03','main03b');" onmouseout="menuMouseout('main03','main03a');"
    [/codd]

    from the <span> to the <img>. I can't see anything in the js that refers to the <span>.

  15. #40
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Menu was always in there, handled by this array:
    Oh. In any case, I don't think you should modify ToggleSub. Modify menuClick instead:

    Code:
    function menuClick(thisId, menuId) {
    	//make sure previous current menu is set to its old image
    	var currentMenuItem = document.getElementById(currentMenuItemId);
    	currentMenuItem.className = 'MenuItem';
    	document.getElementById(thisId).className = 'CurrentMenuItem';
    	currentMenuItemId = thisId;
    	if (currentMenuItem)
    		currentMenuItem.parentNode.onmouseout();
    	ToggleSub(menuId);
    }
    Use the CSS I mentioned previously. Don't change ToggleSub (revert it to the working version).

    Oh, okay. Which is the undeclared variable?
    i

  16. #41
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wonder, btw, why it is that ToggleSub breaks if I move this

    [code]
    onclick="menuClick('main03','VolumeIII');" onmouseover="menuMouseover('main03','main03b');" onmouseout="menuMouseout('main03','main03a');"
    [/codd]

    from the <span> to the <img>. I can't see anything in the js that refers to the <span>.
    That's because in menuClick, I use parentNode to get from the img element to the span element (which is the parent element of the img element). You'd have to remove .parentNode if you want to move it to the img element.

  17. #42
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    currentMenuItem.className = 'MenuItem';
    document.getElementById(thisId).className = 'CurrentMenuItem';
    This doesn't seem to work. I added the CSS you suggested, and changed the js, but the initially selected item gets a link-cursor, and even when I click to switch to another, the newly selected still gets a link-cursor.

    Wouldn't it be easier to control this if I use PHP to add style:"cursorointer" to the initially selected item, and then change this style to cursor:default with menuClick?

    The <span>, btw, doesn't have an ID currently, the ID is on the <img>. So if an ID is needed, I can either remove the span (and move the functions to the img), or add an ID. The former would take up less space, I guess.

    Edited to add: I switched everything over to the <img> tag instead, and now it seems that everything is working as it should. Thank you so much.

  18. #43
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh darn, these last changes that I've made seems to have broken the main menu on the initial page: http://www.westeros.org/Citadel/

    Any idea what's gone wrong there since it isn't bringing up any of the submenus when you click on the main menu?

  19. #44
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You aren't initializing currentMenuItem. Since you need PHP to initialize it, it has to be on the main page, not in the JS file.

  20. #45
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean this or something else? The main page worked fine before with this in the .js, since it doesn't need a specific variable to start from.

    Code:
    var currentMenuItemId;
    Edited to add:

    Tried adding

    Code:
    <script language='javascript' >
    var currentMenuItemId;
    </script>
    to the main page, but that didn't do it.

  21. #46
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I remove the code added yesterday

    Code:
    currentMenuItem.className = 'MainMenuItem';
    document.getElementById(thisId).className = 'CurrentMainMenuItem';
    it works on the main page once again. Of course, that's needed for the interior pages ... but perhaps there needs to be a check there of some sort?

    I imagine the problem is that this code assumes that there is a currently active menu item to start with, but on the main page there isn't.

  22. #47
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, ignore my previous post. I wasn't thinkin straight That part is fine as it is.

    Try this:

    Code:
    function menuClick(thisId, menuId) {
    	//make sure previous current menu is set to its old image
    	var currentMenuItem = document.getElementById(currentMenuItemId);
    	document.getElementById(thisId).className = 'CurrentMenuItem';
    	currentMenuItemId = thisId;
    	if (currentMenuItem) {
    		currentMenuItem.className = 'MenuItem';
    		currentMenuItem.parentNode.onmouseout();
    	}
    	ToggleSub(menuId);
    }

  23. #48
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whew, thank you, that did the trick.

    Now I just need to see if I can figure out why its so slow in IE, and why the toggling doesn't work in Opera (it toggles a menu on, but not off, instead just layering them). Someone seemed to think that was an Opera bug, however.

    Thanks again for all the help.

  24. #49
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or rather ... that almost did the trick. I need to learn to keep quiet long enough.

    The toggling works perfectly, but once an item on the main menu has been clicked, it keeps getting the default arrow-cursor, even when another item is turned into the active item. This happens on both the main page and the interior pages.

  25. #50
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change 'MenuItem' to 'MainMenuItem'.

    Also, get rid of the x in ToggleSub (or put a 'var' before it):

    Code:
    function ToggleSub(MenuId) {
    	CollapseAll();
    	document.getElementById('Menu'+MenuId).style.display = 'block';
    }


Bookmarks

Posting Permissions

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