Opera Bug?

Form values gone when set to display: none;

[Birdman]

Hello,

I'm working on a JavaScript HTML editor for users to style their postings. It uses two frames: the top frame is the editor and the bottom is the viewer.

So, in order to fit all the options neatly in the top frame, I am using DHTML to show/hide certain parts of the form at different times. You start with just one dropdown to select a type of element(paragraph, heading, etc.). Then, you get all the style options(margin, font, border, background, etc.). And finally, you can click a button to choose your colors(font,bg,border).

That's where the problem is. In opera, once the main chunk of the form(style options) is set to display: none;, all the values in that section are lost to the script.

The only solution I can think of is to add a hidden field for each field that is in the middle section and make sure they are outside of the sections that show/hide. What a hack though :(

Anyony have any other ideas? Thanks!

[Rambo Tribble]

I'd try visibility:hidden instead of display:none. Although different browsers seem to handle it differently, as near as I can tell from the spec, display:none essentially removes the element from the document in its entirety.

[DrDoc]

Rambo Tribble is right on the spot. Opera is handling it correctly. As far as the browser is concerned, the elements do not exist.

[BlobFisk]

visibility:hidden will still take up space, even if it is not visible though - so watch for that if space is at a premium.

[Birdman]

Rambo, thanks for the reply. I had thought of that too after posting but the only problem I have with using visibility is that the space is still reserved whether it's hidden or visible. I really wanted it to be scrollbar free. It works in Firefox and IE6. I suppose a scrollbar isn't too bad.

Thanks Blobfisk/DrDoc, as well

[DrDoc]

Or, since I assume you use JavaScript to toggle the visibility, why not also toggle positioning? Toggle between these two:

visibility: hidden;
position: absolute;

and

visibility: visible;
position: relative;

With the top and left values set to zero it makes wonders ;)

[Birdman]

Thanks DrDoc! That is a very sensible solution. Unfortunately I can't get it to work :( The colors section never appears. It just goes blank. In fact, I remember struggling with this before and I tried negative margins(w/ abs position) to no avail.

Birdman

[DrDoc]

Blank, but takes up space?

[Birdman]

It's hard to say if it's taking up space because it's in a fixed height frame and there is no scrollbar. When I click the button to swap the dropdowns/colors, the dropdowns disappear(good) and the colors never appear(bad).

On top of that, it now breaks the HTML of the page. Somehow it add broken tags at the end of the file(outside the js)

Like this:
</form>
</body>
</html>iv>

</form>
</body>
</html>br />

Removing the closing slashes on my input tags and break tags solves that. I'm using XHTML 1.0 trans doctype. If I put my original toggle/display coding back in, it doesn't choke on the closing slashes. Weird!

[Birdman]

For the record, I found a way around the problem. I set the display back to "block" on the upper section while the script reads the form fields. The problem only occurred when setting the colors so I put a if() at the top and bottom of the write() function.

if(getObj("coloring").style.display == "block") getObj("tools").style.display = "block";
...read all fields now...
if(getObj("coloring").style.display == "block") getObj("tools").style.display = "none";

It seems to work well but have yet to test in other browsers. Thanks again for all the good suggestions.

Birdman