Jquery Focusing on div to apply CSS style

Question

I have various styles, such as:

.line{}

And:

.line:focus{}

Each have their own unique look.

What I want to do is have jquery focus on a div with the .line class and thus change it's style to line:focus. However, when using $('.line').focus();, the style does not change, and I'm reasonably sure the div with .line class is not focused on.

Any ideas/suggestions? Thanks in advance :).

If you're going to use JS to apply the styles, you'd be better off not using the pseudoclass and applying the style directyl — JohnP
– JohnP, Commented Jan 2, 2012 at 15:49
I would, however I cannot use rgba() and animate to that style. I was hoping to use css transitions. — Delicious Mangos
– Delicious Mangos, Commented Jan 2, 2012 at 15:51
No, I meant apply the style directly. .line_focus would contain all the styles you need. Just apply the class when you want to focus on it — JohnP
– JohnP, Commented Jan 2, 2012 at 16:00
@JohnP, yes, but I'm using rgba(); in my background:; css styles and using jQuery to switch/animate between styles will not work when using rgba();. Hence my wanting to use :focus so that css would do the transition animation. — Delicious Mangos
– Delicious Mangos, Commented Jan 2, 2012 at 16:04
hmm, I'm not too good with the CSS stuff. Since you're getting similar answers below, maybe it would help if you setup a demo on jsfiddle and added it to the question. — JohnP
– JohnP, Commented Jan 2, 2012 at 16:06

Joe · Accepted Answer · 2012-01-02 16:07:55Z

1

jQuery's focus would work, demo

Edit:

Without a focus-able element, I would use toggleClass demo2

edited Jan 2, 2012 at 16:07

answered Jan 2, 2012 at 15:52

Joe

82.9k18 gold badges130 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Delicious Mangos Over a year ago

I'm trying to focus on a div, not an input. It works fine for inputs. I'm guessing it's not possible to focus on a div?

Delicious Mangos Over a year ago

That would be good, however I cannot have users editing the content of the div.

Joe Over a year ago

I think toggleClass might work out a lot better, but you could also do jsfiddle.net/GvxgP/3 to prevent the editing. That's more of a hack then a solution though.

Delicious Mangos Over a year ago

Thanks again Joe but I have tried toggleClass and it doesn't work in this particular setup either.

Rodik · Accepted Answer · 2012-01-02 15:58:48Z

0

$(".").focus() only works on certain elements. DIV isn't a supported element to be focused.

You can try to recreate focus using .click

 $("div").click(function(){
   $(this).toggleClass('focused');
   if ($(this).hasClass('focused')){
      // do something
   }else{
      // do something else
   }
});

edited Jan 2, 2012 at 15:58

answered Jan 2, 2012 at 15:54

Rodik

4,10228 silver badges49 bronze badges

4 Comments

Delicious Mangos Over a year ago

Thanks. Would there be any other possible solutions to this?

Delicious Mangos Over a year ago

I meant, are there any other options aside :focus or perhaps instead of using a div? (Though I really would like to use a div)

Delicious Mangos Over a year ago

I cannot use toggleClass or add/removeClass as it doesn't allow for css3 transitions, and if I use jQuery UI to animate the transition, it does not let me use rgba() in my css styles.

Rodik Over a year ago

The class toggling here is only to differ from "focused" state or "unfocused" state. to add css3 transitions, add them in the // do something part

JohnP · Accepted Answer · 2012-01-02 16:01:10Z

0

div elements don't support a focus state that I'm aware of, so you'll have to manually change the divs style anytime one of its inputs is focused (and of course change it back when the input is blurred).

$("div.line input").focus(function() {
    $(this).closest(".line").addClass("line-focus");
}).blur(function() {
    $(this).closest(".line").removeClass("line-focus");
});

And of course change

.line:focus {  }

to

.line-focus {  }

edited Jan 2, 2012 at 16:01

JohnP

50k13 gold badges112 silver badges142 bronze badges

answered Jan 2, 2012 at 15:51

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

7 Comments

Delicious Mangos Over a year ago

Thanks Adam, however I cannot use CSS3 transitions using that method, and jQuery UI to animate the switching class does not allow for backgrounds using rgba();

Adam Rackis Over a year ago

@Delicious - who said anything about CSS3 transitions? Maybe I don't understand. The jQuery above will do what your original code was trying to do: change the style of a div when an input therein is focused.

JohnP Over a year ago

@DeliciousMangos this is exactly what I was talking about. When you want to focus on the div., just use .addClass()

Delicious Mangos Over a year ago

@Adam yes, but it will not allow me to transition between styles containing rgba(); in the background property.

Delicious Mangos Over a year ago

JohnP, Adam, I cannot use addClass, removeClass, nor toggleClass because it does not allow the css style I have to animate/transition.

|

WayHunter · Accepted Answer · 2012-01-02 16:02:21Z

0

$('input').focus(function() {
     $(this).css('background','green'); 
});

See example

answered Jan 2, 2012 at 16:02

WayHunter

1,2454 gold badges14 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery Focusing on div to apply CSS style

4 Answers 4

4 Comments

4 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

4 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related