SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Drop-up menu?

  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop-up menu?

    My programmer and I are working on modding a phpBB theme, and we're trying to hide a bunch of the normal links that appear below an avatar (location, total posts, PM, add to buddylist, etc...) and have them appear when a "View more info" button is clicked on below the avatar.

    The sample code I'm trying to mod just to see how we can apply it to our forum is from Squidfingers:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>Expanding Menu</title>
    
    <style type="text/css">
    
    body {
    background-color: #faf7ec;
    margin: 0;
    padding: 50px 0 0 150px;
    }
    
    ul#menu {
    width: 100px;
    list-style-type: none;
    border-top: solid 1px #b9a894;
    margin: 0;
    padding: 0;
    }
    
    ul#menu ol {
    display: none;
    text-align: right;
    list-style-type: none;
    margin: 0;
    padding: 5px;
    }
    
    ul#menu li, 
    ul#menu a {
    font-family: verdana, sans-serif;
    font-size: 11px;
    color: #785a3c;
    }
    
    ul#menu li {
    border-bottom: solid 1px #b9a894;
    line-height: 15px;
    }
    
    ul#menu ol li {
    border-bottom: none;
    }
    
    ul#menu ol li:before {
    content: "- ";
    }
    
    ul#menu a {
    text-decoration: none;
    outline: none;
    }
    
    ul#menu a:hover {
    color: #539dbc;
    }
    
    ul#menu a.active {
    color: #be5028;
    }
    
    </style>
    
    <script type="text/javascript">
    
    // ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
    // 
    // Coded by Travis Beckham
    // http://www.squidfingers.com | http://www.podlob.com
    // If want to use this code, feel free to do so, but please leave this message intact.
    //
    // ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
    // --- version date: 06/02/03 ---------------------------------------------------------
    
    // ||||||||||||||||||||||||||||||||||||||||||||||||||
    // Node Functions
    
    if(!window.Node){
    	var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
    }
    function checkNode(node, filter){
    	return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
    }
    function getChildren(node, filter){
    	var result = new Array();
    	var children = node.childNodes;
    	for(var i = 0; i < children.length; i++){
    		if(checkNode(children[i], filter)) result[result.length] = children[i];
    	}
    	return result;
    }
    function getChildrenByElement(node){
    	return getChildren(node, "ELEMENT_NODE");
    }
    function getFirstChild(node, filter){
    	var child;
    	var children = node.childNodes;
    	for(var i = 0; i < children.length; i++){
    		child = children[i];
    		if(checkNode(child, filter)) return child;
    	}
    	return null;
    }
    function getFirstChildByText(node){
    	return getFirstChild(node, "TEXT_NODE");
    }
    function getNextSibling(node, filter){
    	for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
    		if(checkNode(sibling, filter)) return sibling;
    	}
    	return null;
    }
    function getNextSiblingByElement(node){
    	return getNextSibling(node, "ELEMENT_NODE");
    }
    
    // ||||||||||||||||||||||||||||||||||||||||||||||||||
    // Menu Functions & Properties
    
    var activeMenu = null;
    
    function showMenu(){
    	if(activeMenu){
    		activeMenu.className = "";
    		getNextSiblingByElement(activeMenu).style.display = "none";
    	}
    	if(this == activeMenu){
    		activeMenu = null;
    	}else{
    		this.className = "active";
    		getNextSiblingByElement(this).style.display = "block";
    		activeMenu = this;
    	}
    	return false;
    }
    function initMenu(){
    	var menus, menu, text, a, i;
    	menus = getChildrenByElement(document.getElementById("menu"));
    	for(i = 0; i < menus.length; i++){
    		menu = menus[i];
    		text = getFirstChildByText(menu);
    		a = document.createElement("a");
    		menu.replaceChild(a, text);
    		a.appendChild(text);
    		a.href = "#";
    		a.onclick = showMenu;
    		a.onfocus = function(){this.blur()};
    	}
    }
    
    // ||||||||||||||||||||||||||||||||||||||||||||||||||
    
    if(document.createElement) window.onload = initMenu;
    
    </script>
    
    </head>
    <body>
    
    <ul id="menu">
    	<li>Menu Item 1
    		<ol>
    			<li><a href="#">Sub Item 1.1</a></li>
    			<li><a href="#">Sub Item 1.2</a></li>
    			<li><a href="#">Sub Item 1.3</a></li>
    		</ol>
    	</li>
    
    	<li>Menu Item 2
    		<ol>
    			<li><a href="#">Sub Item 1.1</a></li>
    			<li><a href="#">Sub Item 1.2</a></li>
    			<li><a href="#">Sub Item 1.3</a></li>
    		</ol>
    	</li>
    	<li>Menu Item 3
    		<ol>
    
    			<li><a href="#">Sub Item 3.1</a></li>
    			<li><a href="#">Sub Item 3.2</a></li>
    			<li><a href="#">Sub Item 3.3</a></li>
    		</ol>
    	</li>
    	<li>Menu Item 4
    		<ol>
    			<li><a href="#">Sub Item 4.1</a></li>
    
    			<li><a href="#">Sub Item 4.2</a></li>
    			<li><a href="#">Sub Item 4.3</a></li>
    		</ol>
    	</li>
    	<li>Menu Item 5
    		<ol>
    			<li><a href="#">Sub Item 5.1</a></li>
    			<li><a href="#">Sub Item 5.2</a></li>
    
    			<li><a href="#">Sub Item 5.3</a></li>
    		</ol>
    	</li>
    </ul>
    
    </body>
    </html>
    But, as opposed to having the hidden links appear below the "View more info" button when clicked upon (like the links do when you click on "Menu Item 1" in the sample code above), we'd like the links to appear above that button and in between it and the avatar; kind of like what happens when you click on a user name on
    Yayhooray

    It looks like it's possible but we're having lots of trouble getting it to work. We're trying to get the entire site done by tonight so any and every bit of advice is greatly appreciated.

  2. #2
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *bump*

    Any javascript masters out there that might be able to help?

  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We've abbandoned the idea of using a "drop-up menu". We just want to make a drop down-menu that has a button that upon being clicked drops down their total post number, location, private message, etc... So we just have to place the phpBB tags into that drop-down menu. Our problem comes in applying that javascript to every single post's profile. Anyone have any idea how we can apply this code to work for every post in phpBB?


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
  •