In the interest of teaching a man to fish:
1. Install firebug from www.getfirebug.com
2. Turn it on by right clicking the small grey icon in the lower right
corner - status bar.
3. Download this and include it in your scripts:
http://jqueryjs.googlecode.com/svn/trunk/plugins/debug/
4. Switch to the console tab, which is where you will see debugging
output and use the jquery code below.
You can use console.log(any element or selector) (console.log($
('input')) for example) to see exactly what a selector is doing, but
debug() makes it easier. Just insert it anywhere in your chains.
What you're going to find is that jquery is picking up the file field
correctly. In firefox, though, the focus event does not get triggered
until you focus the browse button or click on the label. The text
field doesn't trigger it which I find very odd, but at least now you
can see what you're dealing with.
$(document).ready(function(){
$("ul.form").find(":input").debug()
.focus
(
function()
{
$(this).parents('li').debug().addClass('odd');
}
)
.blur
(
function()
{
$(this).parents('li').removeClass('odd');
}
);
});
On May 25, 9:31 pm, fambizzari <[EMAIL PROTECTED]> wrote:
> Unfortunately, whilst i still don't understand how to use firefbug, i
> can say for sure that none of the 3 ideas (i.e. input,
> [EMAIL PROTECTED] or .pickme) work when it comes to the type="file"
> input.
>
> As mentioned before, when i remove type="file" from the input, then
> the code works fine and the page validates 100 % as strict xhtml.
>
> This is the exact html:
>
> <ul class="form">
> <li>
> <label for="title_new">Title</label>
> <div class="input">
> <input name="title_new" id="title_new"/>
> </div>
> </li>
> <li>
> <label for="message_new">Message</label>
> <div class="input">
> <textarea name="message_new"
> id="message_new"></textarea>
> </div>
> </li>
> <li>
> <label for="attachment_new">Attachment</label>
> <div class="input">
> <input type="file" name="attachment_new"
> id="attachment_new"/>
> </div>
> </li>
> </ul>
>
> And this is the exact script:
>
> $(function()
> {
> $("ul.form").find("input,select,textarea,option")
> .focus
> (
> function()
> {
> $(this).parents('li').addClass('odd');
> }
> )
> .blur
> (
> function()
> {
> $(this).parents('li').removeClass('odd');
> }
> );
>
> });
>
> And i'm using FireFox 2.0.0.3 on a Windows XP....
>
> UPDATE: Having typed in the last line regarding my system, i thought
> to try this out on other browsers:
>
> - IE7 - works perfectly fine
> - Opera 9.1 & 9.21 - works perfectly fine
> - Netscape - it doesn't work as described above
> - Firefox 2.0.0.3 - it doesn't work as described above
>
> Any ideas?
