|
|
Great idea Steve, dynamic is the easiest way to go. Unfortunatly the code doesn't work. I went ahead and fixed it, removed the unused alertText variable, and put back in the check for IE. And finally, although it is allowable, you should not neglect to end all of your lines with a semi-colon.
// Hide all select boxes   Â
function hideSelect()
{
    if (document.all) // Only do this for IE
    {
        for (formIdx=0; formIdx<document.forms.length; formIdx++)
        {
            var theForm = document.forms[formIdx];
            for(elementIdx=0; elementIdx<theForm.elements.length; elementIdx++)
            {
                window.status += theForm[elementIdx].type;
                if(theForm[elementIdx].type == "select-one")
                {    theForm[elementIdx].style.visibility = "hidden";    }
            }
        }
    }
}
// Unhide all select boxes
function unhideSelect()
{
    if (document.all) // Only do this for IE
    {
        for (formIdx=0; formIdx<document.forms.length; formIdx++)
        {
            var theForm = document.forms[formIdx];
            for(elementIdx=0; elementIdx<theForm.elements.length; elementIdx++)
            {
                if(theForm[elementIdx].type == "select-one")
                {    theForm[elementIdx].style.visibility = "visible";    }
            }
        }
    }
}
|
|
|
|
I am also researching this problem myself. I have resorted to the same idea of hiding dropdowns on a page. I have tried digging into the milonic code to figure out how they do it. So far, have not found evidence that they are using the iframe solution. Still picking it apart, but if anyone has found how, let us in on the secret.
|
|
|
|
|
|
|
|
Thanks for the help guys. Since you were all so gracious with advise I thought I'd post my solution for any newcomers. Works like a charm and if you size the iframe correctly it doesn't seem like anything is happening to the user. Just covers the part where menus overlap. Hiding the select menu would work but I didn't want it to seem like anything was broken to the user. I used the document.all check to restrict it to IE since Netscape doesn't like this code.
Javascript:
function coverSelectVisible() {
if (document.all) {document.getElementById('coverSelect').style.visibility="visible";}
}
function coverSelectHidden() {
if (document.all) {document.getElementById('coverSelect').style.visibility="hidden";}
}
Page Code:
<iframe id="coverSelect" width="400" height="30" frameborder="0" scrolling="no" style="top:188px;left:150px;position:absolute;visibility:hidden;"><img src="/002redesign/images/spacer.gif" width="1" height="1" border="0" /></iframe>
|
|
|
|
I'm also having problems with select boxes on my page. I tried using the IFRAME method as described in earlier posts, but with no success.
The web page I am working on is basically a spreadsheet (with the header row and left-most column locked). The table is created with XML data binding. One of the columns in the spreadsheet contains select boxes. Works great, except for when I scroll down or right, then the select boxes float over the header row and the locked column.
Sorry for the long section of code (I cut out as much as I could). Any help would be appreciated!
JEH
<html>
<head>
<style type = "text/css">
<!--
div#tbl-container {
height: 200px;
width: 98%;
overflow: auto;
}
thead th, thead th.locked {
position: relative;
}
thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2);
z-index: 20;
}
thead th.locked {
color: #000000;
z-index: 30;
}
td.locked{
left: expression(document.getElementById("tbl-container").scrollLeft);
background-color: #fffafa;
position: relative;
z-index: 10;
}
th.locked{
left: expression(document.getElementById("tbl-container").scrollLeft);
position: relative;
z-index: 10;
}
thead th {
border-bottom: 1px solid black;
}
-->
</style>
<script type = "text/javascript">
function lockCol(tblID)
{
var table = document.getElementById(tblID);
var cTR = table.getElementsByTagName('TR');
for (i = 0; i < cTR.length; i++)
{
var tr = cTR.item(i);
tr.cells[0].className = 'locked';
}
}
</script>
</HEAD>
<body onLoad = "lockCol('tbl')">
<xml id = "xmlDSO">
<root>
<data b3 = "TEST ACCOUNT ONE" c9 = "John Doe" d9 = "$1,000" e3 = "$1,705,000" f6 = "Option 1" f9 = "On hold." g3 = "Next step with more text" />
<data b3 = "CRATE AND BARREL" c9 = "John Doe" d9 = "$2,200" e3 = "$250,100" f6 = "Option 2" f9 = "Have one-on-one." g3 = "More comments." />
<data b3 = "SIMPSONS" c9 = "John Doe" d9 = "$10,400" e3 = "$1,000,400" f6 = "Option 3" f9 = "Set up meeting with manager." g3 = "G3 test area." />
<data b3 = "FAMILY GUY" c9 = "John Doe" d9 = "$3,600" e3 = "$50,200" f6 = "Option 4" f9 = "Go to conference" g3 = "Have meeting with crew" />
<data b3 = "KING OF THE HILL" c9 = "John Doe" d9 = "$10,700" e3 = "$343,700" f6 = "Option 4" f9 = "Have one-on-one" g3 = "Order jerseys" />
<data b3 = "RESCUE 911" c9 = "John Doe" d9 = "$10,500" e3 = "$500,500" f6 = "Option 1" f9 = "Start schedule next week" g3 = "Sing a song" />
<data b3 = "SOUTH PARK" c9 = "John Doe" d9 = "$10,500" e3 = "$654,400" f6 = "Option 2" f9 = "Discuss with DM" g3 = "Play a game" />
<data b3 = "FUTURAMA" c9 = "John Doe" d9 = "$10,800" e3 = "$6,800" f6 = "Option 3" f9 = "Drop account" g3 = "Eat at a drive in" />
</root>
</xml>
<div id = "tbl-container">
<table id = "tbl" datasrc = "#xmlDSO" border = "1" bordercolorlight = "#000000">
<thead>
<tr bgcolor = "#cccccc">
<th style = "width: 170px">Account</th>
<th style = "width: 153px">Rep Name</th>
<th style = "width: 63px">Period Revenue</th>
<th style = "width: 63px">Annual Revenue</th>
<th style = "width: 153px">Product/Class</th>
<th style = "width: 263px">Status</th>
<th style = "width: 263px">Next Step</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type = "text" style = "text-align: left" size = "28" span datafld = "b3"></span></td>
<td><input type = "text" style = "text-align: left" size = "28" span datafld = "c9"></span></td>
<td><input type = "text" style = "text-align: right" size = "10" span datafld = "d9"></span></td>
<td><input type = "text" style = "text-align: right" size = "10" span datafld = "e3"></span></td>
<td><select datasrc = "#xmlDSO" datafld = "f6">
<option value = "Option 1">Option 1</option>
<option value = "Option 2">Option 2</option>
<option value = "Option 3">Option 3</option>
<option value = "Option 4">Option 4</option>
<option value = ""></option></select></td>
<td><textarea style = "overflow: hidden" cols = "50" rows = "1" datafld = "f9">
<Added>
<td><textarea style = "overflow: hidden" cols = "50" rows = "1" datafld = "g3"></textarea></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
|
|
|
I got it to work fine in firefox, mozilla, netscape, IE, Opera, and an old firebird browser. I did not get it to work in Hot Java, but then again, does anything work in Hot Java?
Code below (you must include the background-color css property on the frame, or it will not show correctly)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Page title</title>
<script>
function openPop(){
document.getElementById("popDiv").style.display=""
}
function closePop(){
document.getElementById("popDiv").style.display="none";
}
</script></head><body>
<div width="80%" border=1 id="popDiv" bgcolor="#000099" style="text-align:right;display:none;position:absolute;top:65;left:100;width:80%;background-color:000099;height:50%;"><button onclick="closePop();"><font family="courier"><b>x</b></font></button>
<iframe bgcolor="ffffff" id="popFrame" style="background-color:ffffff;width:100%;height:100%;" frameborder=0 scrolling=yes marginwidth=0 src="popup.html" marginheight=0 ></iframe></div>
<input type="button" onclick="openPop();" value="open"> <input type="button" onclick="closePop();" value="close">
<center>
<br><br><br><br>
<select>
<option>This</option>
<option>is</option>
<option>a</option>
<option>Select</option>
<option>List</option>
</select>
</center>
</body>
</html>
|
|
|
|
|
|
|
|
|
|
|
|
Below is a link to a useful menu designer inspired by the IFrame method described on this thread.
http://www.geocities.com/luvinspoon2001/Easiest.zip
Frank
<Added>
Note: The Iframe method is used only in the menu code used for the web page that will use the menu. The menu designer does not use IFrames to create menus.
|
|
|
|
Hi, Kristen--
Is there any way to apply the script to multiple selects in the same form, BESIDES applying it to the whole form? Frankly, watching the whole form wink in and out of existence as one goes down the menu is greatly distracting...It would be less so if just the selects disappeared.
I know diddly about javascript: can that be set up as a class, rather than as an identifier?
Many thanks,
Stephen
|
|
|
|
Well, once again Microsoft has reminded me why I hate programming for the client. How long has this bug been around?
!!!*#%*#&@#!!!
<Added>
So the way to do this (hack) gracefully is to create in iFrame with the exact dimensions and position of your menu. The idea being that you're not going to put it on top of the selects, but rather underneath your menu and therefore covering your problem selects without you having to modify a bunch of legacy code as in my case.
So, let's say you have a pulldown:
<div id="myPulldown">
-your dynamic(?) content here-
</div>
Write yourself an iFrame.
<iframe id="iFrameIEHack" src="blank.html" scrolling="No" frameborder="0"></iframe>
Now re-size and position that iFrame. For you kids playing along at home, that's:
<script language = "javascript 1.2">
function iFrameMojo(){
myIFrame = document.getElementById('iFrameIEHack');
myMenuDiv = document.getElementById('portalDropDown');
myIFrame.style.width = myMenuDiv.offsetWidth;
myIFrame.style.height = myMenuDiv.offsetHeight;
myIFrame.style.top= myMenuDiv.top;
myIFrame.style.left= myMenuDiv.left;
}
iFrameMojo();
</script>
<soapbox>
Note that using document.getElementById() instead of document.all makes this script work on all W3C compliant broswers and *not* just Micro$oft browsers. You should all commit this to memory and write your pages accordingly.
</soapbox>
Set the iFrame's z-index to be larger than that of your <select>, but lower than that of your menu. When you show your menu, show your iframe. When you hide your menu, hide your iframe. Viola'.
Better yet, you can create and manipulate this whole iframe mess
only for IE users by testing for document.all, which is IE-only (non-standards-compliant) functionality.
|
|
|
|
Thanks a lot Kaitain, i'm wondering if you can tell me how to use your code for hiding Selects in a page that uses frames, it's posible to make a reference to the selects in every page that is displaying in the same frame that the submenus?.
|
|
|
|
Code error:
document.getElementById ('portalDropDown')
should read
document.getElementById ('myPulldown').
A case of "real" code intruding on "example" code...
|
|
|
|
Hi guys,
I've been working on the stuff and I think I find an interesting solution.
I havn't read throught all the replies, but it seems the matter is still open, so I decided to share this with you.
The basic idea is to hide the select with display="none" but, and that's the good news, "freeze" the select area with a "filter" - which is a specific of the IE (from 5.5 i believe): for other browser the problem doesn't exist - so we don't loose the view of the select underneath.
This is the (very simple!) code
<script>
function showMenu(value){
if(document.all)
if(document.all.selectMenuOuter)
if(document.all.selectMenuOuter.filters){
if(value){
document.all.selectMenuOuter.filters["revealTrans"].apply();
document.all.selectMenuInner.style.display = "none";
document.all.dropDownMenu.style.display = "block";
}else{
document.all.dropDownMenu.style.display = "none";
document.all.selectMenuInner.style.display = "block";
}
}
}
</script>
<div id="selectMenuOuter" style="filter:revealTrans; height=50; width=100;">
<select id="selectMenuInner">
<option>select menu</option>
<option>select menu</option>
<option>select menu</option>
</select>
</div>
<br>
<br>
<a href="javascript:showMenu(true)">show menu</a>
<a href="javascript:showMenu(false)">hide menu</a>
<div id="dropDownMenu" style="DISPLAY:none;BACKGROUND-COLOR: pink; LEFT: 10pt; POSITION: absolute; TOP: 1pt ">
Menu<br>
Menu<br>
Menu<br>
</div>
Important points to keep in mind:
1) for the selectMenuOuter (the shell) you need to define the filter and the size. If the latter is not specified, the filter dosn't work.
2) Better put some control to be sure that the javascript will not crash with different browsers (or to have the select hide completly).
3) the "selectMenuInner" can be another <div> which can host all the select that you need.
4) the "apply()" method freezes the content to give time to change the look before calling the "play()" method to apply the transaction. For the purpose of this job, we don't need to apply this second method, unless you want to...
Ok, I hope things are quite understanable and that you enjoy the script. But, moreover I hopt this could help you a bit.
Lorenzo
|
|
|
|
Another solution is to enclose the object(s) you want to hide in a DIV tag, and then render the DIV tag visible/invisible in the same way you would a SELECT box. This allows you to create a "tabbed" effect, showing and hiding as many SELECTs as you wish, without worrying about unwanted SELECT objects peaking out.
-Josh
|
|
|
This 45 message thread spans 3 pages: < < 1 [2] 3 > > |
|
|
|
|
|
Kaitain
