NYCPHP Meetup

[nycphp-talk] HTML/CSS div hide/show form problem

Brian Dailey support at dailytechnology.net
Thu Jan 4 15:53:59 EST 2007


The inverse of this (which I've run into a few times) is that if you 
start out with the layer as "block" and then set it to "none", when the 
user is tabbing down, the cursor will go to these "invisible" fields.

Annoying as heck, it is.

- Brian

Cliff Hirsch wrote:
> Figured this one out, so I’ll pass it along. Apparently it is a well 
> documented FireFox bug. Input elements can lose the cursor when inside a 
> div that is set to display:none, among other conditions. When the div is 
> set to be visible again, the cursor is simply gone – way annoying.
> 
>  
> 
> The workaround I used, which appears to work so far, is to set the focus 
> to some input element outside the div before setting the div display 
> property to none. This appears to “carry” the cursor to the focused 
> element. Then, when I expand the div again, I set the focus to an input 
> element inside the div.
> 
>  
> 
> Cliff
> 
>  
> 
> -----Original Message-----
> *From:* talk-bounces at lists.nyphp.org 
> [mailto:talk-bounces at lists.nyphp.org] *On Behalf Of *Kenneth Downs
> *Sent:* Thursday, January 04, 2007 12:44 PM
> *To:* NYPHP Talk
> *Subject:* Re: [nycphp-talk] HTML/CSS div hide/show form problem
> 
>  
> 
> Cliff,
> 
> Can you simply set the focus of a control when the display is turned off 
> or on?
> 
> 
> 
> Cliff Hirsch wrote:
> 
> Ok, so this isn’t PHP, but it’s what drives us PHP programmers’ crazy 
> right – “quirks” mode, browser incompatibilities, etc. It’s maddening…
> 
>  
> 
> I asked my Boston PHP buddies if they can figure this one out. Let’s see 
> who can provide an answer first: Yankees or Red Sox:
> 
> ------
> 
> I have a form that can be toggled to be visible or hidden using the 
> following statement:
> 
>  
> 
> <div id="inviteform" style="display:none;">
> 
>    the form…..
> 
> </div>
> 
>  
> 
> The form is initially set to be hidden. A simple JavaScript function 
> toggles the div display property to nothing/block or none.
> 
>  
> 
> Problem:
> 
> Without this code, the cursor appears normally in the input elements
> 
> With this code, the cursor disappears in the input elements. It’s 
> awfully annoying to type text in an input element without the visual cue 
> of a cursor.
> 
>  
> 
> This occurs in FireFox, but not IE.
> 
>  
> 
> Does anyone know why the cursor is disappearing? I’m guessing that the 
> input element cursor attribute picks up the none property (as in 
> cascading) when hidden, but does not revert back to visible when the div 
> display element is changed back to ‘’ or block.
> 
>  
> 
> Any ideas regarding a solution?
> 
>  
> 
> Cliff
> 
>  
> 
> 
> 
> ------------------------------------------------------------------------
> 
> 
>  
> 
> _______________________________________________
> 
> New York PHP Community Talk Mailing List
> 
> http://lists.nyphp.org/mailman/listinfo/talk
> 
>  
> 
> NYPHPCon 2006 Presentations Online
> 
> http://www.nyphpcon.com
> 
>  
> 
> Show Your Participation in New York PHP
> 
> http://www.nyphp.org/show_participation.php
> 
>  
> 
> 
> ------------------------------------------------------------------------
> 
> _______________________________________________
> New York PHP Community Talk Mailing List
> http://lists.nyphp.org/mailman/listinfo/talk
> 
> NYPHPCon 2006 Presentations Online
> http://www.nyphpcon.com
> 
> Show Your Participation in New York PHP
> http://www.nyphp.org/show_participation.php



More information about the talk mailing list