SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple drop downs on single page

    I am looking to implement multiple drop downs on a single page. They must all be custom css-based drop downs and I am running into a bit of trouble getting it implemented, specifically getting the drop down to, well drop. I am using the js from the sitepoint book The Javascript Anthology.

    I am going to attach my js and html. If anyone can help point me in the right direction it would be much appreciated.


    --js--
    Code:
    var branch;
    
    function dropdownMenu(navid)
    {
      var isie = typeof document.all != 'undefined'
         && typeof window.opera == 'undefined'
         && navigator.vendor != 'KDE';
    
      if (typeof document.getElementById == 'undefined'
          || (navigator.vendor == 'Apple Computer, Inc.'
          && typeof window.XMLHttpRequest == 'undefined')
          || (isie && typeof document.uniqueID == 'undefined'))
      {
        return;
      }
    
      var rollover = new Image;
      rollover.src = 'right-red.gif';
      rollover = new Image;
      rollover.src = 'down-red.gif';
    
      var tree = document.getElementById(navid);
      if (tree)
      {
        branch = tree;
        var items = tree.getElementsByTagName('li');
        for (var i = 0; i < items.length; i++)
        {
          dropdownTrigger(tree, items[i], navid, isie);
        }
      }
    }
    
    function dropdownTrigger(tree, li, navid, isie)
    {
      var opentime, closetime;
      var a = li.getElementsByTagName('a')[0];
      var menu = li.getElementsByTagName('ul').length > 0
          ? li.getElementsByTagName('ul')[0] : null;
      var horiz = tree.className.indexOf('horizontal') != -1;
      var issub = li.parentNode.id == navid;
    
      if (menu)
      {
        li.className += (li.className == '' ? '' : ' ') + 'hasmenu';
      }
    
      attachEventListener(li, 'mouseover', function(e)
      {
        if (unwantedTextEvent()) { return; }
        clearTimeout(closetime);
        if (branch == li) { branch = null; }
    
        a.className += (a.className == '' ? '' : ' ') + 'rollover';
    
        var target = typeof e.target != 'undefined' ? e.target : window.event.srcElement;
        while (target.nodeName.toUpperCase() != 'LI')
        {
          target = target.parentNode;
        }
        if (target != li) { return; }
    
        if (menu)
        {
          opentime = window.setTimeout(function()
          {
            if (branch)
            {
              clearMenus(branch);
              branch = null;
            }
    
            menu.style.left = horiz
                ? (isie ? li.offsetLeft + 'px' : 'auto')
                : '0';
    
            menu.style.top = horiz && issub
                ? (isie ? a.offsetHeight + 'px' : 'auto')
                : (isie ? li.offsetTop + 'px' : '0');
    
            repositionMenu(menu);
    
            if (typeof document.uniqueID != 'undefined')
            {
              createIframeLayer(menu);
            }
          }, 250);
        }
      }, false);
    
      attachEventListener(li, 'mouseout', function(e)
      {
        if (unwantedTextEvent()) { return; }
    
        var related = typeof e.relatedTarget != 'undefined' ? e.relatedTarget : window.event.toElement;
        if (!li.contains(related))
        {
          clearTimeout(opentime);
          branch = li;
    
          a.className = a.className.replace(/ ?rollover/g, '');
          if (menu)
          {
            closetime = window.setTimeout(function()
            {
              menu.style.left = '-100em';
    
              if (toggleSelects('visible') && tree.contains(related))
              {
                toggleSelects('hidden');
              }
              else
              {
                removeIframeLayer(menu);
              }
    
            }, 600);
          }
        }
      }, false);
    
      if (!isie)
      {
        li.contains = function(node)
        {
          if (node == null) { return false; }
          if (node == this) { return true; }
          else { return this.contains(node.parentNode); }
        };
      }
    }
    
    function clearMenus(root)
    {
      var menus = root.getElementsByTagName('ul');
      for (var i = 0; i < menus.length; i++)
      {
        menus[i].style.left = '-100em';
        removeIframeLayer(menus[i]);
      }
    }
    
    function unwantedTextEvent()
    {
      return (navigator.vendor == 'Apple Computer, Inc.'
          && (event.target == event.relatedTarget.parentNode
          || (event.eventPhase == 3
          && event.target.parentNode == event.relatedTarget)));
    }
    
    function getRoughPosition(ele, dir)
    {
      var pos = dir == 'x' ? ele.offsetLeft : ele.offsetTop;
      var tmp = ele.offsetParent;
      while (tmp != null)
      {
        pos += dir == 'x' ? tmp.offsetLeft : tmp.offsetTop;
        tmp = tmp.offsetParent;
      }
      return pos;
    }
    
    function getViewportSize()
    {
      var size = [0,0];
    
      if (typeof window.innerWidth != 'undefined')
      {
        size = [
            window.innerWidth,
            window.innerHeight
        ];
      }
      else if (typeof document.documentElement != 'undefined'
          && typeof document.documentElement.clientWidth != 'undefined'
          && document.documentElement.clientWidth != 0)
      {
        size = [
            document.documentElement.clientWidth,
            document.documentElement.clientHeight
        ];
      }
      else
      {
        size = [
            document.getElementsByTagName('body')[0].clientWidth,
            document.getElementsByTagName('body')[0].clientHeight
        ];
      }
    
      return size;
    }
    
    function repositionMenu(menu)
    {
      var extent = [
          getRoughPosition(menu, 'x') + menu.offsetWidth + 25,
          getRoughPosition(menu, 'y') + menu.offsetHeight + 25
      ];
      var viewsize = getViewportSize();
    
      if (extent[0] > viewsize[0])
      {
        var offset = menu.offsetWidth
            + menu.parentNode.parentNode.offsetWidth;
        var inset = menu.parentNode.offsetWidth
            - menu.offsetLeft;
    
        menu.style.left = (0 - offset + (inset * 2)) + 'px';
      }
    
      if (extent[1] > viewsize[1])
      {
        var current = parseInt(menu.style.top, 10);
        var difference = extent[1] - viewsize[1];
    
        menu.style.top = (current - difference) + 'px';
      }
    }
    
    function createIframeLayer(menu)
    {
      if (!toggleSelects('hidden'))
      {
        var layer = document.createElement('iframe');
        layer.tabIndex = '-1';
        layer.src = 'javascript:false;';
        menu.parentNode.appendChild(layer);
    
        layer.style.left = menu.offsetLeft + 'px';
        layer.style.top = menu.offsetTop + 'px';
        layer.style.width = menu.offsetWidth + 'px';
        layer.style.height = menu.offsetHeight + 'px';
      }
    }
    
    function removeIframeLayer(menu)
    {
      if (!toggleSelects('visible'))
      {
        var layers = menu.parentNode.getElementsByTagName('iframe');
        while (layers.length > 0)
        {
          layers[0].parentNode.removeChild(layers[0]);
        }
      }
    }
    
    function toggleSelects(vis)
    {
      if (typeof document.uniqueID != 'undefined'
          && typeof document.body.style.scrollbarTrackColor == 'undefined')
      {
        var selects = document.getElementsByTagName('select');
        for (var i = 0; i < selects.length; i++)
        {
          selects[i].style.visibility = vis;
        }
    
        return true;
      }
    
      return false;
    }
    
    function attachEventListener(target, eventType, functionRef, capture)
    {
      if (typeof target.addEventListener != 'undefined')
      {
        target.addEventListener(eventType, functionRef, capture);
      }
      else if (typeof target.attachEvent != 'undefined')
      {
        target.attachEvent('on' + eventType, functionRef);
      }
      else
      {
        eventType = 'on' + eventType;
    
        if (typeof target[eventType] == 'function')
        {
          var oldListener = target[eventType];
    
          target[eventType] = function()
          {
            oldListener();
    
            return functionRef();
          }
        }
        else
        {
          target[eventType] = functionRef;
        }
      }
    
      return true;
    }
    
    function addLoadListener(fn)
    {
      if (typeof window.addEventListener != 'undefined')
      {
        window.addEventListener('load', fn, false);
      }
      else if (typeof document.addEventListener != 'undefined')
      {
        document.addEventListener('load', fn, false);
      }
      else if (typeof window.attachEvent != 'undefined')
      {
        window.attachEvent('onload', fn);
      }
      else
      {
        var oldfn = window.onload;
        if (typeof window.onload != 'function')
        {
          window.onload = fn;
        }
        else
        {
          window.onload = function()
          {
            oldfn();
            fn();
          };
        }
      }
    }
    
    addLoadListener(function() { dropdownMenu('pmNavigation, vesNavigation, dateNavigation, hscNavigation'); });

    --html/css--

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
          <title>EDSS Top Ten Repairs Log</title>
          <style>
    	  html, body { margin: 0px; border: 0px; padding: 0px;  width: 100%; }	
    
    * { font-family: Verdana; font-size: 11px; }
    
    /* for all browsers that understand min-width */
    .width {width:100%; min-width: 600px;}
    
    /* the bodge for IE6 browsers */
    * html .minwidth {border-left:600px solid #fff; position:relative; float:left; z-index:1;}
    * html .container {margin-left:-600px; position:relative; float:left; z-index:2;}
    
    
    
    #header { background-color: #FFF; height: 28px; overflow: hidden; } 
    
    #header * label { font-weight: bold; margin: 0px 4px; overflow: hidden;} 
    
    #header * .select {
    	margin: 4px; 
    	vertical-align: middle; 
    	border: 1px inset; 
    	background-color: #FFF; 
    	height: 16px; 
    	line-height: 16px; 
    	overflow: hidden;
    	}
    
    #header * .arrow {
    	float: right; 
    	width: 14px; 
    	border: 1px outset; 
    	background-color: #b79327; 
    	border-left: 1px solid #765b07; 
    	border-top: 1px solid #765b07; 
    	border-right: 1px solid #f3d989; 
    	border-bottom: 1px solid #f3d989; 
    	height: 14px; 
    	margin-top: 1px; 
    	line-height: 14px; 
    	font-size: 0.9em; 
    	text-align: center; 
    	}
    
    #pmContainer, #vesselContainer, #dateContainer, #hscContainer, #applyContainer { 
    	height: 28px;
    	float: left;
    	overflow: hidden;
    }
    
    #pmContainer {
    	background-color: #FFF;
    	width: 102px;
    	overflow: hidden;
    }
    #pmContainer .select {
    	background-color: #FFFBCA;
    	margin-left: 36px;
    	overflow: hidden;
    }
    
    #pmContainer ul{
     	background-color: #FFFBCA;
    	margin-left: 36px;
    	overflow: hidden;
    	}
    
    #pmContainer label {
    	position: relative;
    	top: -21px;
    	overflow: hidden;
    }
    
    #vesselContainer {
    	background-color: #FFF;
    	overflow: hidden;
    }
    
    #vesselContainer .select {
    	background-color: #FFFBCA;
    	margin-left: 60px;
    	overflow: hidden;
    }
    #vesselContainer label {
    	position: relative;
    	top: -21px;
    	overflow: hidden;
    }
    
    #vesselContainer ul {
    	background-color: #FFFBCA;
    	margin-left: 162px;
    	overflow: hidden;
    }
    
    #dateContainer {
    	width: 240px;
    	overflow: hidden;
    }
    
    #dateContainer .select {
    	background-color: #FFFBCA;
    	margin-left: 90px;
    	overflow: hidden;
    }
    
    #dateContainer label {
    	position: relative;
    	top: -21px;
    	z-index: 5;
    	overflow: hidden;
    }
    
    #hscContainer {
    	background-color: #FFF;
    	overflow: hidden;
    }
    
    #hscContainer .select {
    	background-color: #FFFBCA;
    	margin-right: 88px;
    	overflow: hidden;
    }
    #hscContainer button {
    	width: 75px;
    	margin: 4px;
    	position: absolute;
    	top: 0px;
    	right: 0px;
    	overflow: hidden;
    	}
    
    #applyContainer {
    	background-color: #FFF;
    	width: 83px;
    	overflow: hidden;
    }
    
    #left { 
    	width: 37.5%; 
    	float: left; 
    	}
    
    #right { 
    	width: 61.5%; 
    	float: left; 
    	}
    
    #pmNavigation {
    	height: 16px;
    	vertical-align: middle;
    	line-height: 16px;
    	margin: 5px; 
    	top: 1px;
    	width: 43px;
    	}
    
    #vesNavigation {
    	height: 17px;
    	vertical-align: middle; 
    	line-height: 17px;
    	margin: 5px;
    	top: 1px;
    	height: 80%;
    	overflow: scroll;
    	}
    
    #dateNavigation {
    	
    	}
    	
    #hscNavigation{
    
    	}	
    
    #maincontent{
    	position: relative;
    	background: #fff;
    	clear: both;
    	}
    
    /*dropdown*/
    
    /* structural styles and offsets */
    ul.horizontal, ul.horizontal li, ul.horizontal ul {
    	list-style-type: none;
    	font-size: 1em;
    	margin: 0;
    	padding: 0;
    	}
    
    ul.horizontal {
      position: absolute;
      left: 1px;
      width: 100%;
      cursor: default;
      z-index: 2000;
    }
    
    ul.horizontal li {
      width: auto;
      float: left;
      position: relative;
      cursor: pointer;
      cursor: hand;
      text-align: left;
      left: 1em;
      margin: 0 0 0 -0.1em;
    	}
    
    * html ul.horizontal li {
      margin: 0;
      left: 0;
    }
    
    ul.horizontal ul {
    	z-index: 2020;
    	padding: 0;
    	cursor: default;
    	position: absolute;
    	left: -100em;
    	top: auto;
    	width: 8.2em;
    	margin: 0 0 0 0;
    	padding: 1px 0 0 0;
    	}
    
    ul.horizontal ul li {
    	width: 8.2em;
    	float: left;
    	left: auto;
    	margin: -1px 0 0 0;
    	}
    
    /* design styles */
    ul.horizontal ul {
    	border-width: 1px;
    	border-style: solid;
    	border-color: #ffeca7 #a97741 #a97741 #ffeca7;
    	}
    
    ul.horizontal a, ul.horizontal a:visited {
    	display: block;
    	cursor: pointer;
    	cursor: hand;
    	padding-left: 5px;
    	font: normal bold 1em verdana;
    	color: #000;
    	text-decoration: none;
    	letter-spacing: 1px;
    	height: 16px;
    	}
    
    ul.horizontal a:hover, ul.horizontal a:focus, ul.horizontal a:active{
    	background: #A0C5F1;
    	color: #000;
    	}
    ul.horizontal a, ul.horizontal a:visited {
      display: block;
      cursor: pointer;
      cursor: hand;
      background: #ffc;
      padding: 0 5px 0 5px;
      font: normal normal bold 1em verdana;
      color: #000;
      text-decoration: none;
      letter-spacing: 1px;
    }
    
    ul.horizontal a:hover, ul.horizontal a:focus, ul.horizontal a:active,
    ul.horizontal a.rollover:link, ul.horizontal a.rollover:visited {
      background: #A0C5F1;
      color: #000;
    }
    
    /* browser hacks */
    ul.horizontal a { float: left; }
    @media Screen, Projection { ul.horizontal a { float: none; } }
    ul.horizontal ul a { float: none !important; }
    @media screen, projection {
      * html ul.horizontal li {
        display: inline;
        f\loat: left;
        background: #fff;
      }
    }
    * html ul.horizontal li { position: static; }
    * html ul.horizontal a { position: relative; }
    
    /* iframe layer */
    ul iframe {
      position: absolute;
      z-index: 1010;
      border: none;
    }
    
    /*classes*/
    .innertube{
    	width: 100%;
    	}
    
    .select {
    	border: 1px solid #E1D972;
    	}
    			
    /*html elements*/
    
    		
    	  </style>
          <script type="text/javascript" language="javascript" src="/cms/content/controller/cms/FusionCharts.js"></script>
          <script type="text/javascript" language="javascript" src="/cms/content/controller/cms/updateTopTenRepairs.js"></script>
    	  <script type="text/javascript" language="javascript" src="dropdownMenu.js"></script>
          <script type="text/javascript" language="javascript">
          var ChartId = "chart";
          var ChartData = "/cms/content/controller/cms/Data.xml";
          </script>
    </head>
    <body>
    <div id="topsection" class="width">
    	<div id="wrapper" class="minwidth">
    		<div id="header" class="container">
    			<div id="left">
    				<div id="pmContainer">
    					<div class="select">
    						<ul id="pmNavigation" class="horizontal">
    								<li><a href="#">All</a></li>
    									<ul>
    										<li><a>PM 1</a></li>
    										<li><a>PM 2</a></li>
    										<li><a>PM 3</a></li>
    										<li><a>PM 4</a></li>
    										<li><a>PM 5</a></li>
    									</ul>
    							</ul>		
    						<div class="arrow"></div>
    					</div>
    					<label>PM:</label>
    				</div>
    				<div id="vesselContainer">
    					<div class="select">
    						<!--<ul id="vesNavigation" class="horizontal">
    							<li><a href="#">Fleet</a></li>
    								<ul>
    									<li><a href="#">Class</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Class</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    									<li><a href="#">Ship Designator</a></li>
    								</ul>
    						</ul> -->
    						<div class="arrow"></div>
    					</div>
    					<label>Vessel:</label>
    				</div>
    			</div>
    			<div id="right">
    				<div id="dateContainer">
    					<div class="select">
    						<ul id="dateNavigation" class="horizontal">
    							<li></li>
    						</ul>				
    						<div class="arrow"></div>
    					</div>
    					<label>Date Range:</label>
    				</div>
    				<div id="hscContainer">
    					<div class="select">
    						<ul id="hscNavigation" class="horizontal">
    							<li></li>
    						</ul>
    						<div class="arrow">...</div>
    					</div>
    					<button>Apply</button>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    
    <!-- graph content area -->
    <div id="maincontent">
    	<div class="innertube">
    		<div id="chartWrapper">
    				     		
    		</div>
    	</div>
    </div>
    
    		
    		<a href="#" id="cmslink" target="cmswebinterface"></a>
       </body>
    </html>

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's an enormous wall of code.

    I think you'd be best advised to do a Google search on "suckerfish".

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol sorry you are right. I found a much easier way to get it done. I made it infinately more difficult than i needed to. all i needed to do was create 2 simple function in the header and call it in each ul. i should post the code in case someone else has a question. so here it is.


    Code:
    	function openMenu(id){
    	  	document.getElementById(id).style.display="block";
    		}
    	function closeMenu(id){
    		document.getElementById(id).style.display="none";
    		}
    and the call for a mouse event on a button

    Code:
    div class="arrow" onclick="openMenu('pmInnerNav');" onblur="closeMenu('pmInnerNav');"
    Last edited by funktifyknow; Apr 14, 2007 at 08:00. Reason: need to clarify and spelling errors


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
  •