A Little Help Required Please :)

**Locky** · 03-18-2007, 07:59 PM

here goes on the following page

http://celebration-disco.co.uk/Dynam...lp/Contact.php

the 2 select menu alternatives (JS based) are fine HOWEVER when the top one of the 2 selects is opened, the select underneath shows throught i dont no wether this is to do with the JS or the CSS, if you understand what i mean and have any advice / able to fix it i will greatly appreciate it ! been stuck on this for a few days.. thakns a lot !

**jscheuer1** · 03-18-2007, 08:19 PM

I'm not sure of your level of ease working with javascript, style and scripting style but, the problem is that both 'selects' (they are really UL elements) are positioned relatively. Ordinarily, this means that whichever one comes later in the markup will always cover the one that comes earlier. This is what is happening. The z-index style property controls this but, if you make the first one:

z-index:1;

it will always cover the second one. This may be all that is required to make this work out but, you will still see the second one under/below the first if the second one is open as, the second one is taller. So in addition to fixing the z-index style, you would probably also want to make the second one 'retract' when the first one is opened, or reverse their order on the page.

**Locky** · 03-18-2007, 09:04 PM

i thought it would be the z-index and i have already gone down that path but it still isnt working i also tryed wrapping the first 1 with a div tag and useing overflow but still no such luck

**jscheuer1** · 03-18-2007, 09:54 PM

This worked out well:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="Css/screen.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-image: url(Images/bg.gif);
}
select {
	display: block;
	margin: 0px 0px 0px; 
	width: 100px
}
select.replaced {
	left: -999em; 
	width: 1px; 
	position: absolute
}
ul.selectReplacement {
	padding-right: 0px; 
	padding-left: 0px; 
	padding-bottom: 0px; 
	width: 100px; 
	padding-top: 0px; 
	position: relative; 
	height: 22px; 
	background-color: #4d4d4d;
}
ul.selectFocused {
background-color: #ffffff;
}
ul.selectReplacement LI {
	padding-right: 12px;
	display: none; 
	padding-left: 2px; 
	font-size: 11px; 
	font-family: verdana, arial, helvetica, sans-serif; 
	background-color: #393939;
	padding-bottom: 1px; 
	margin: 0px; 
	width: 100px; 
	cursor: pointer; 
	color: #989898; 
	line-height: 1.7em; 
	padding-top: 1px; 
	list-style-type: none;
	border: 1px solid #5c5c5c;
}
ul.selectOpen li {
	display: block;  z-index: 100;
}
ul.selectReplacement li.selected {
	display: block; color: #989898;
}
ul.selectOpen li.selected {
	border-top-width: 0px; 
	display: block; 
	border-left-width: 0px;
	background-color: #4d4d4d;
	border-bottom-width: 0px; 
	border-right-width: 0px
}
ul.selectOpen li:hover {
	background-color: #4d4d4d;
	color: #de0091;
}
ul.selectOpen LI.hover {
	background-color: #4D4D4D;
	color: #DE0091;
}
ul.selectOpen LI.selected:hover {
	background-color: #4D4D4D;
	color: #DE0091;
}

.style1 {color: #ffffff}
</style>
<!--[if IE]>
<style type="text/css">
.TextBox {
margin-bottom: 0px;
}
</style>
<![endif]-->
<script type="text/javascript">
    // <![CDATA[
    function selectReplacement(obj) {
      obj.className += ' replaced';
      var ul = document.createElement('ul');
      ul.className = 'selectReplacement';
      ul.style.zIndex=selectReplacement.z--;
      var opts = obj.options;
      var selectedOpt = (!obj.selectedIndex) ? 0 : obj.selectedIndex;
      for (var i=0; i<opts.length; i++) {
        var li = document.createElement('li');
        var txt = document.createTextNode(opts[i].text);
        li.appendChild(txt);
        li.selIndex = i;
        li.selectID = obj.id;
        li.onclick = function() {
          selectMe(this);
        };
        if (i == selectedOpt) {
          li.className = 'selected';
          li.onclick = function() {
            this.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            };
          };
        }
        if (window.attachEvent) {
          li.onmouseover = function() {
            this.className += ' hover';
          };
          li.onmouseout = function() {
            this.className = 
              this.className.replace(new RegExp(" hover\\b"), '');
          };
        }
        ul.appendChild(li);
      }
      obj.onfocus = function() {
        ul.className += ' selectFocused';
      };
      obj.onblur = function() {
        ul.className = 'selectReplacement';
      };
      obj.onchange = function() {
        var idx = this.selectedIndex;
        selectMe(ul.childNodes[idx]);
      };
      obj.onkeypress = obj.onchange;
      obj.parentNode.insertBefore(ul,obj);
    }
    selectReplacement.z=100;
    function selectMe(obj) {
      var lis = obj.parentNode.getElementsByTagName('li');
      for (var i=0; i<lis.length; i++) {
        if (lis[i] != obj) {
          lis[i].className='';
          lis[i].onclick = function() {
            selectMe(this);
          };
       } else {
          setVal(obj.selectID, obj.selIndex);
          obj.className='selected';
          obj.parentNode.className = 
            obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
          obj.onclick = function() {
            obj.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            };
          };
        }
      }
    }
    function setVal(objID,val) {
      var obj = document.getElementById(objID);
      obj.selectedIndex = val;
    }
    function setForm() {
      var s = document.getElementsByTagName('select');
      for (var i=0; i<s.length; i++) {
        selectReplacement(s[i]);
      }
    }
    window.onload = function() {
      (document.all && !window.print) ? null : setForm();
    };
    // ]]>
  </script>
</head>
<body id="view">
<div id="document">
<div class="panel minor">
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td><img src="Logo.gif" alt="Logo" width="350" height="124" /></td>
<td align="center" valign="bottom"><img src="phone.png" alt="Phone Numbers" width="200" height="50" style="padding-bottom: 7px"/></td>
</tr>
</table>
<div class="navbar">
<div style="background-image:url(images/navbar.jpg); cursor: default" class="navnav">
<ul class="style1" id="navlist" style="background-image:url(images/navbar.jpg)">
<li><a href="Home.php">Home</a></li>
<li><a href="About.php">About</a></li>
<li><a href="Contact.php">Contact</a></li>
<li><a href="Services.php">Services</a></li>
<li><a href="Equipment.php">Equipment</a></li>
<li><a href="Terms.php">Terms</a></li>
<li><a href="Gallerys.php">Gallery</a></li>
<li><a href="Links.php">Links</a></li>
</ul>
</div>
</div>
<div class="account" id="div">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="3"></td>
    </tr>
    <tr>
      <td colspan="3"><span class="style1">Contact Information</span></td>
      </tr>
    <tr>
      <td style="width:7%;">Name:</td>
      <td style="width:22%;"><input name="textfield22" type="text" class="TextBox" /></td>
      <td>&nbsp;</td>
      </tr>
    <tr>
      <td>Email:</td>
      <td colspan="2"><input name="textfield222" type="text" class="TextBox" /></td>
    </tr>
    <tr>
      <td>Phone:</td>
      <td colspan="2"><input name="textfield223" type="text" class="TextBox" /></td>
    </tr>
    <tr>
      <td colspan="3"><span class="style1">Event Information </span></td>
      </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2"><select name="Type" size="1" class="Dropdown" id="Type">
<option selected>-Select-</option>
<option>Anniversary</option>
<option>Birthday</option>
<option>Christening</option>
<option>Corporate</option>
<option>Charity</option>
<option>Presentation</option>
<option>Retirement</option>
<option>Theme Night</option>
<option>Wedding</option>
<option>Other..</option>
</select></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2"><select name="Guests" class="Dropdown" id="Guests">
<option selected>-Select-</option>
<option>50 - 100 </option>
<option>100 - 150</option>
<option>150 - 200</option>
<option>200 - 250</option>
<option>250 - 300</option>
<option>300 +</option>
</select>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
    </tr>
  </table>
</div>
</div>
</div>
</body>
</html>

**Locky** · 03-18-2007, 10:16 PM

what did you do to it ? works like a charm thakn you very much appreciate this

i am gona try n work on a lostfocus (like normal select box)

**jscheuer1** · 03-19-2007, 03:48 AM

Believe it or not, I didn't change the css, only cleaned it up so that it was more readable. I did remove one copy of the script, you had two on your demo page. The real changes were these two additions to the script (red):

Code:

    function selectReplacement(obj) {
      obj.className += ' replaced';
      var ul = document.createElement('ul');
      ul.className = 'selectReplacement';
      ul.style.zIndex=selectReplacement.z--;
      var opts = obj.options;
      var selectedOpt = (!obj.selectedIndex) ? 0 : obj.selectedIndex;
      for (var i=0; i<opts.length; i++) {
        var li = document.createElement('li');
        var txt = document.createTextNode(opts[i].text);
        li.appendChild(txt);
        li.selIndex = i;
        li.selectID = obj.id;
        li.onclick = function() {
          selectMe(this);
        };
        if (i == selectedOpt) {
          li.className = 'selected';
          li.onclick = function() {
            this.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            };
          };
        }
        if (window.attachEvent) {
          li.onmouseover = function() {
            this.className += ' hover';
          };
          li.onmouseout = function() {
            this.className = 
              this.className.replace(new RegExp(" hover\\b"), '');
          };
        }
        ul.appendChild(li);
      }
      obj.onfocus = function() {
        ul.className += ' selectFocused';
      };
      obj.onblur = function() {
        ul.className = 'selectReplacement';
      };
      obj.onchange = function() {
        var idx = this.selectedIndex;
        selectMe(ul.childNodes[idx]);
      };
      obj.onkeypress = obj.onchange;
      obj.parentNode.insertBefore(ul,obj);
    }
    selectReplacement.z=100;

That may have been able to have been achieved with css alone, not sure. And, of course, switching the order of the pseudo selects in the markup so that the taller one comes first.

Notes: I also cleaned up the markup a little and the order of the code on the page a lot so that it would validate for the DOCTYPE you are using.

**Locky** · 03-19-2007, 03:49 PM

thanks a lot appreciate this couldnt of done it on my own

1 more question, why does this ({was in the existing code when i found it) not work i gather this should be when focus is lost on the select box to change the class (close the select menu) any ideas / suggestions on this 1, thakns a lot
obj.onblur = function() {
ul.className = 'selectReplacement';

**jscheuer1** · 03-19-2007, 04:39 PM

I'm not exactly sure what you are asking but, in most if not all browsers, a UL element does not have an onblur event. This would make the assignment of one meaningless at best.

If the assignment is to the select, it could work except that the select, having been replaced and either removed or hidden, is never in focus so, can never fire its onblur event.

**Locky** · 03-19-2007, 04:59 PM

so is there no way to put a onblur effect on that script ? if not any other ways i go go around it ?

**jscheuer1** · 03-19-2007, 09:58 PM

OK, well no onblur for the UL but, this code will do a pretty good job of spoofing onblur for the pseudo selects in this script. Replace:

Code:

    window.onload = function() {
      (document.all && !window.print) ? null : setForm();
    };

With:

Code:

function is_or_has_child(pel, cel){
if(!cel)
return false;
var p=cel.parentNode? cel.parentNode : null;
if (pel==cel||p==pel)
return true;
if(p)
while (p=p.parentNode)
if (p==pel)
return true;
return false;
}

function checkfocus(e){
var e=e? e : window.event;
var srcel=e.target? e.target : e.srcElement? e.srcElement : null;
var uls=document.getElementsByTagName('ul');
for (var i_tem = 0; i_tem < uls.length; i_tem++)
if(uls[i_tem].className.indexOf('selectReplacement')>-1&&!is_or_has_child(uls[i_tem], srcel)){
uls[i_tem].className='selectReplacement';
var lis = uls[i_tem].getElementsByTagName('li');
for (var i=0; i<lis.length; i++) {
       if (lis[i].className == 'selected'){
          setVal(lis[i].selectID, lis[i].selIndex);
          lis[i].onclick = function() {
            this.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            };
          };
        }
      }
}
}

    window.onload = function() {
if(!document.getElementsByTagName||(document.all && !window.print)) 
return;
setForm();
document.onclick=checkfocus;
document.onkeydown=function(e){
var e=e? e : window.event;
if(e.keyCode==9)
checkfocus(e);
}
    };

Thread: A Little Help Required Please :)

Thread Tools

Search Thread

A Little Help Required Please :)

Bookmarks

Bookmarks

Posting Permissions