[jQuery] click(function{ problem with Firefox
Hi,
I'm working on a login system in CodeIgniter, where you select your
avatar and enter your password to login.
I've accomplished this by attaching labels containing the avatar to
hidden radio buttons.
If you click on one of the avatars, the following jQuery script, that
I call on document.ready, adds or removes a 'selected' class to the
label, so I can style it.
$(".login_avatar").click(function() {
$(this).children().addClass("selected");
$(this).siblings().children().removeClass("selected");
});
Page source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dagobert - Log in</title>
<link rel="stylesheet" href="http://turnavies.nl/dagobert/css/
reset.css" type="text/css" media="screen" title="no title"
charset="utf-8">
<link rel="stylesheet" href="http://turnavies.nl/dagobert/css/
style.css" type="text/css" media="screen" title="no title"
charset="utf-8">
<script src="http://turnavies.nl/dagobert/js/jquery.js" type="text/
javascript"></script>
<script src="http://turnavies.nl/dagobert/js/docready.js" type="text/
javascript"></script>
</head>
<body>
<div class="page" id="login">
<h1 class="title">Dagobert<span class="subtitle">Shared home
management tool</span></h1>
<form action="http://turnavies.nl/dagobert/user/login" method="post"
name="loginform">
<div id="avatargrid">
<label for="Thomas" class="login_avatar">
<div class="wrapper">
<input type="radio" name="username" value="Thomas" id="Thomas" />
<div class="imgwrapper"><img src="http://turnavies.nl/dagobert/img/
avatars/1261582921059.jpg" alt="Thomas" /></div>
<span class="name">Thomas</span>
</div>
</label>
<label for="William" class="login_avatar">
<div class="wrapper">
<input type="radio" name="username" value="William" id="William" /
>
<div class="imgwrapper">
<img src="http://turnavies.nl/dagobert/img/avatars/
barney_stinson.jpg" alt="William" />
</div>
<span class="name">William</span>
</div>
</label>
</div>
<input type="text" name="" value="Password" id="password-clear" />
<input type="password" name="password" value="" id="password-
password" />
<input type="submit" name="submit" value="Log in" />
<div class="clear"></div>
</div>
</body>
</html>
The script works fine in Chrome and Safari OSX, but fails to work in
Firefox for OSX. I deleted my entire profile, so I can't blame
extensions.
It is live on http://turnavies.nl/dagobert
docready jQuery: http://turnavies.nl/dagobert/js/docready.js
CSS: http://turnavies.nl/dagobert/css/style.css
posted by twitter @ 8:12 AM
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home