stack (zindex?) a custom form element behind a select box

here is my custom element code also can be seen at englishtrunkshowco.com/test6.htm

<div id="Layer1" style="position:absolute; left:541px; top:137px; width:55px; height:64px; z-index:1"><img id="Image" src="blank.gif"></div>
<style type="text/css">
 
body{
       margin-left:0;
       margin-right:0;
       margin-top:0;
       margin-bottom:0;
       padding-left:0;
       padding-right:0;
       padding-top:0;
       padding-bottom:0;
       background:white;}
 
/* Displays Menu Links */
#menu{position:relative;
                   left:25px;
       top:100px;
                   width:200px;
                   background:white;}
/* Loads First Image At Page Load, and Positions Flipped Images */
#theimage{position:relative;
                         top:25px;
                         left:300px;}
 
 
.menu{font-family: times new roman;
                   font-size: 12pt;}
.menu a:link {color: blue;
       text-decoration: none;}
.menu a:visited {color: blue;
      text-decoration: none;}
.menu a:hover {color: green;
            text-decoration: underline;
            background-color: ;}
.menu a:active {color: orange;
             text-decoration: none;}
</style>
<div id="menu">
 
<ul>
<li><a href="linkone.html"
       class="menu" onMouseOver="document.getElementById('Image').src='images/mom0010q.jpg';"
       onMouseOut="document.getElementById('Image').src='blank.gif';" >Link One</a></li>
<li><a href="linktwo.html"
       class="menu" onMouseOver="document.getElementById('Image').src='images/mom0312q.jpg';"
       onMouseOut="document.getElementById('Image').src='blank.gif';" >Link Two</a></li>
</ul>
</div>

here is my select box code can be seen at englishsomething.com/category.cfm/categoryoid=5


<div id="Layer1" style="position:absolute; left:544px; top:206; width:124px; height:148px; z-index:1">
              <cfif isDefined("url.categoryoid")>
                <!--- categoy list --->
            <div style="position: absolute; left: 30px; top: 233px; width: 0px; height:0px; padding:0px;">
              <form name="selectForm" action="#cgi.script_name#" method="get">
                <table border="0" cellpadding="0" cellspacing="0" bgcolor="black" width="230">
                  <tr>
                    <td><table border="0" cellpadding="0" cellspacing="1" width="100%">
                        <tr bgcolor="#request.category.color#">
                          <td><font face="Arial,geneva,helvetica,sans-serif"><b>&nbsp; more
                                #request.category.displayname#</b></font></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <table border="0" cellpadding="0" cellspacing="1" width="230">
                        <tr bgcolor="#request.category.color#">
                          <td align="center" height="115">
                            <select name="productoid" size="6" class="label" onChange="submit()" style="font-family:arial,geneva,helvetica,sans-serif;font-size:70%;width:230px;">
                              <cfloop query="request.category.productList">
                                <cfif mid(barcode1,1,1) neq "2">
                                  <option value="#productoid#"style="color:red;"  >#name#</option>
                                  <cfelseif mid(barcode1,1,4) eq "2222">
                                            <option value="#productoid#"style="color:green;">#name#</option>
                                <cfelse>
                                                  <option value="#productoid#" >#name#</option>
                                </cfif>
                              </cfloop>
                            </select>
                            <input type="hidden" name="categoryoid" value="#url.categoryoid#">
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </form>
            </div>
            <br />
          </cfif>
         
            </div>

If you put thw select on top of th ecustome element not of the effects are going to work becaus the mouse can only interact with the top element on the stack.  As for the sizing use css to give the same dimenisions and some of the time the browser and setting s the user has set will make them the same size.

Cd&

then can i put the custom element on top of the seelct and just hide the text?

i am having trouble making the text line up, can you please show me :)

-rob

line up and be the same size

id also like to get rid of the links, how can i do that but keep the functionality?

thanks experts!

summarY:

i cant get spacing between the text the same as on the category page, see how it is bigger spacing on this page. i am still confused on what i need to specify on z valus and how i can get rid of links

this page is englishtrunkshowco.com/test6.htm

here is my latest and greatest test page..you can see the problem...the text in custom element does not match up to select box

You can't put the custom element on top of a select because it has a z-index of infinity.  If there is so much of the select behaviour that you don't want; why use it at all?  All you are doing is tying up the page in knots and creating accessibility issues.  

Just use a custom control, and when yu are ready to submit, just populate hidden form fields to give the server side script what it needs to process.  Having been down this road I can already tell you that every porblem you solve will create new problems and every hac and work around will just make the page less reliable and more difficult to maintain.

As for sizing and possitioning you are not ever going to get it exact cro-ss-browser, and when you throw in user prefrence settings you will be luck to render the way it is supposted  to 60% of the time.

Cd&

ok.

well how can i make this custom box look good and get rid of the bullets. i want it to be scrollable. look at this page, you can actually see that the custom element works behind the select , however the custom element does not look very nice . i would get rid of select if i can make the custom look like it.

http://englishtrunkshowco.com/test7.cfm

You can try something like this if you just need to have the look and feel of a select:


<html>
<head>
<style>
   .selectBOX {border:3px ridge #dddddd;height:75;width:160;overflow:auto;
               border-right:3px double #bbbbbb; border-bottom:3px double #bbbbbb;}
   
   .hiliteON {color:white;background-color:navy;font-family:arial;font-size:10pt;}
   .hiliteOFF {color:black;background-color:white;font-family:arial;font-size:10pt}
</style>
<script type="text/javascript">
<!--
   var lastone=false;
   function chgcls(EL)
   {
      if (lastone)
      {
         lastone.className="hiliteOFF";
      }
      lastone=EL;
      lastone.className="hiliteON"
   }
//-->
</script>
</head>
<body>
<h1> Fake Form Elements </h1>
<div class="selectBOX">
   <table border="0" cellspacing="0" cellpadding="0">
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Alberta</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Ontario</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Yukon in the far north</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Quebec</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Newfoundland</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">all fake 1</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">all fake 2</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">all fake 3</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">all fake 4</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">all fake 5</td></tr>
   </table>
</div>
</body>
</html>

        Even though the fake select is not a functional form element, we
        could still capture the cell value with the onClick event and use
        it for processing. The best way we put the link as the title
        attribute of the cell an then it can be refrence through the node
        object of the cell, and fire with Javascript.

        The mouseove would the same as it is now except it would be on the cell.  

Let me know itf yu want to try it like that and I wil set up more complete
code.  This is just some old code i had on my HD that I tweak a little.


Cd&

your second code has no mouseover effect?

thanks cd& looks like alot of work on your part!! THANKS FOR DIGGING FOR YOUR OLD CODE

WOW, cool , the first code works just like i want...i will now try and change to exactly what i want because i need an onclick event as you can see at

http://englishtrunkshowco.com/category.cfm/categoryoid=1


but i think it wont be too hard because my selevt form doesnt have an onclick right now but a onchange event currently as you can see

<form name="selectForm" action="#cgi.script_name#" method="get">

 <select name="productoid" size="6" class="label" onChange="submit()" style="font-family:arial,geneva,helvetica,sans-serif;font-size:70%;width:230px;">
                           

could you go into more detail on how i can execute the onchange to start working?


one other 1, will this be compatible with other broswers besides IE?

im using coboals code, but i will loook at yours for the submit form hint..

i have a q, im getting an error on my site now as i try and port the code over

here it is

Invalid token &apos;{&apos; found on line 409 at column 10.  
<p>The CFML compiler was processing:<ul><li>The body of a cfoutput tag beginning on line 24, column 18.<li>The body of a cfoutput tag beginning on line 24, column 18.<li>The body of a cfoutput tag beginning on line 24, column 18.</ul>  
 
The error occurred in D:\Inetpub\englishtrunkshowco\extensions\customtags\wrapper.cfm: line 409
 
407 :
408 : /* Loads First Image At Page Load, and Positions Flipped Images */
409 : #theimage{position:relative;
410 :                  top:25px;
411 :                  left:300px;}

 

ignore that error fixed it .. genreated beause im using a cfm page

i am getting this erro r though if you can help L::)))

Invalid CFML construct found on line 448 at column 173.  
ColdFusion was looking at the following text:<p>\"</p><p>The CFML compiler was processing:<ul><li>An expression that began on line 448, column 166.<br>Your expression might be missing an ending "#" (it might look like #expr ).<li>The body of a cfoutput tag beginning on line 24, column 18.<li>The body of a cfoutput tag beginning on line 24, column 18.<li>The body of a cfoutput tag beginning on line 24, column 18.<li>The body of a cfoutput tag beginning on line 24, column 18.</ul>  
 
The error occurred in D:\Inetpub\englishtrunkshowco\extensions\customtags\wrapper.cfm: line 448
 
446 :               <cfif isDefined("url.categoryoid")>
447 :                 <!--- categoy list --->
448 :             <div id="menu" style="position: absolute; left: 30px; top: 233px; width: 0px; height:0px;  padding:0px; overflow:hidden;overflow-y:auto;border:1px solid #000000">
449 :               <form name="selectForm" action="#cgi.script_name#" method="get">
450 :                 <table border="0" cellpadding="0" cellspacing="0" bgcolor="black" width="230">

 

ignore..i found a missing # again..

next problem the custom select is not showing up////see at englishtrunkshowco.com/category.cfm/categoryoid=1

heres my new code

<div id="Layerold" style="position:absolute; left:544px; top:206; width:124px; height:148px; z-index:1">
              <cfif isDefined("url.categoryoid")>
                <!--- categoy list --->
            <div id="menu" style="position: absolute; left: 30px; top: 233px; width: 0px; height:0px;  padding:0px; overflow:hidden;overflow-y:auto;border:1px solid 000000">
              <form name="selectForm" action="#cgi.script_name#" method="get">
                <table border="0" cellpadding="0" cellspacing="0" bgcolor="black" width="230">
                  <tr>
                    <td><table border="0" cellpadding="0" cellspacing="1" width="100%">
                        <tr bgcolor="#request.category.color#">
                          <td><font face="Arial,geneva,helvetica,sans-serif"><b>&nbsp; more
                                #request.category.displayname#</b></font></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <table border="0" cellpadding="0" cellspacing="1" width="230">
                        <tr bgcolor="#request.category.color#">
                          <td align="center" height="115">
                            <ul class="items">
                                          <cfloop query="request.category.productList">
                                <cfif mid(barcode1,1,1) neq "2">
                                <li style="color:red;font-family:arial,geneva,helvetica,sans-serif;font-size:70%;width:230px;"><a href="linkone.html"
       class="menu"    onMouseOver="document.getElementById('Image').src='images/#image#';"
       onMouseOut="document.getElementById('Image').src='blank.gif';" >#name#</a></li>  
                                           <cfelseif mid(barcode1,1,4) eq "2222">
                                             <li style="color:green;font-family:arial,geneva,helvetica,sans-serif;font-size:70%;width:230px;"><a href="linkone.html"
       class="menu"    onMouseOver="document.getElementById('Image').src='images/#image#';"
       onMouseOut="document.getElementById('Image').src='blank.gif';" >#name#</a></li>
                                <cfelse>
                                                   <li style="font-family:arial,geneva,helvetica,sans-serif;font-size:70%;width:230px;"><a href="linkone.html"
       class="menu"    onMouseOver="document.getElementById('Image').src='images/#image#';"
       onMouseOut="document.getElementById('Image').src='blank.gif';" >#name#</a></li>
                                </cfif>
                              </cfloop></ul>
                            </select>
                            <input type="hidden" name="categoryoid" value="#url.categoryoid#">
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </form>
            </div>
            <br />
          </cfif>
         
            </div>

I have used in both Mozilla an IE, son't know a bout additional browsers because I have never had to support Opera or Safari.

as for implementing an on change; that gets run off the the onclick of the option:

<tr><td class="hiliteOFF"  title="linkone.htm"
         onClick="chgcls(this); dosubmit(this.title,this.childeNode[0].innerHTML);"><span
         style="display:none">29.95</span>all fake 2</td></tr>
Te apsn with the option value stays hidden, but the value gets passed to the submit return along with the link that is stored in the title attribute.

Cd&

i used the code in a test and it worked at test10.cfm but then i put it in my main site and thecustom box is not showing up??

Well I don't know Cold Fusion, but is sound like the styles are missing on invalid.  A bad style entry can mess up hte whole stylesheet.

Cd&

what do you mean by on invalid?

the styles worked in test10.cfm thats what is a litle weird

An incorrect entry; especially a syntax error.  When you were looking at it in test, was it coming froma server os some kind of preview mode in CF?

Cd&

last questions...home stretch. thanks guys..( BTW IT IS NOW FULLY FUNCTIONAL AND IM JUST CHANING HOW THE TEXT WORKS...THANKS!!)

1) how can i set the text not to look like a link and make the text black
2) how can i set the background to white

for instance i want it to look like it used to

here is how it used to look (check it out)

englishtrunkshowco.com/oldcategory.cfm/categoryoid=12

sorry one more

3) need a black line at the bottom of the new custom select box - notice you have to scroll to get to it instead of it persisting as a bottom while text values scroll

How come I got all the points in this question? A mistake I guess finnstone.

Batalf

yes i thought i split the points 400 to 100 in his favor, ill do a mod

Did I just receive all the points again?

:-)

yes..sorry i didnt end up using any of his code and had thought it was his when it was yours that was helpful

OK, Thanks, but I think Cd& deserves alot of points for assisting you as well.

Batalf

No its fine the way it is. After all the teapots I am going to go have a cupa tea...

Cd&

#A lot of laughing#

ENJOY the tea") thanks for the help.  i  opened a new question that i could really use help with in the css category, my new select box does not seem to have a bottom part like the old one did.