JavaScript and client side scripting.
Moderator: General Moderators
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Thu Feb 15, 2007 6:05 pm
I am trying to use jquery to give internet explorer the :focus ability on text inputs... so I'm using this:
Code: Select all
$(function(){
$(".text").focus(function(){
$(this).addClass('text_focus');
}).blur(function(){
$(this).removeClass('text_focus');
});
});
Code: Select all
.text_focus
{
background-image: none;
background-color: white;
color: inherit;
border: 1px solid #84C342;
}
and I wrap it in <![If IE]--> but for some reason this doesn't work. If I put an alert('FOOEY!'); within the function, it alerts when I focus on the input, but it WILL NOT add the class... why?
nickvd
DevNet Resident
Posts: 1027 Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:
Post
by nickvd » Thu Feb 15, 2007 6:58 pm
Does it work without the CC?
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Thu Feb 15, 2007 7:00 pm
what is "the CC"?
nickvd
DevNet Resident
Posts: 1027 Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:
Post
by nickvd » Thu Feb 15, 2007 7:08 pm
Heh, sorry, CC = Conditional Comment (the <![If IE]-->)
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Thu Feb 15, 2007 7:10 pm
No
nickvd
DevNet Resident
Posts: 1027 Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:
Post
by nickvd » Thu Feb 15, 2007 7:15 pm
What version of IE did you test it with?
Last edited by
nickvd on Thu Feb 15, 2007 7:31 pm, edited 1 time in total.
nickvd
DevNet Resident
Posts: 1027 Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:
Post
by nickvd » Thu Feb 15, 2007 7:31 pm
I just tried the following code on Firefox, IE7 and IE6, and all three worked perfectly.
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, http://www.pspad.com">
<title>junk</title>
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script>
<!--[If IE]>
<script type="text/javascript">
$(function(){
$(".text").focus(function(){
$(this).addClass('text_focus');
}).blur(function(){
$(this).removeClass('text_focus');
});
});
</script>
<![endif]-->
<style type="text/css">
input:focus, .text_focus
{
background-image: none;
background-color: white;
color: inherit;
border: 1px solid #84C342;
}
</style>
</head>
<body>
<input type="text" class="text" value="textbox"/><br/>
<input type="text" class="text" value="textbox"/><br/>
<input type="text" class="text" value="textbox"/><br/>
<input type="text" class="text" value="textbox"/><br/>
<input type="text" class="text" value="textbox"/><br/>
<input type="text" class="text" value="textbox"/><br/>
<input type="text" class="text" value="textbox"/><br/>
<input type="text" class="text" value="textbox"/><br/>
</body>
</html>
However, I would use a different method (that jquery provides) to tune it to ie.
Code: Select all
$(function(){
if ($.browser.msie) {
$(".text").focus(function(){
$(this).addClass('text_focus');
}).blur(function(){
$(this).removeClass('text_focus');
});
}
});
Kieran Huggins
DevNet Master
Posts: 3635 Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:
Post
by Kieran Huggins » Fri Feb 16, 2007 1:30 am
I don't think class names like underscores... try using camel case instead: "textFocus"