6 replies [Last post]
Shneed
Shneed's picture
Offline
newbie
Last seen: 9 years 33 weeks ago
Timezone: GMT-4
Joined: 2011-06-17
Posts: 4
Points: 5

Hi everyone,

I created a sprite navigation with 2 states, regular and :active. It's working beautifully on all iPhones, BlackBerries and iPads, but for some reason, the active state isn't showing on the Droid -- or it's showing too quickly for the user to notice it, since his finger is over it.

Does anyone know a way to elongate the :active state in CSS, either with CSS or JavaScript/jQuery?

Thanks!
Shneed

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 33 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Wouldn't you rather the link

Wouldn't you rather the link just work if they clicked on it?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Shneed
Shneed's picture
Offline
newbie
Last seen: 9 years 33 weeks ago
Timezone: GMT-4
Joined: 2011-06-17
Posts: 4
Points: 5

I don't make the rules. The

I don't make the rules. The requirement is for the selected state to show. Any suggestions for how to make that happen, anyone?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I should imagine the active

I should imagine the active state is the activate state it's only meant to trigger for the time it takes the action to process and that can and will be scant miliseconds, I doubt you can directly manipulate it with JS but perhaps you can it would never occur to me to need to try.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Shneed
Shneed's picture
Offline
newbie
Last seen: 9 years 33 weeks ago
Timezone: GMT-4
Joined: 2011-06-17
Posts: 4
Points: 5

Thanks, Hugo. I appreciate

Thanks, Hugo. I appreciate the reply.

Shneed
Shneed's picture
Offline
newbie
Last seen: 9 years 33 weeks ago
Timezone: GMT-4
Joined: 2011-06-17
Posts: 4
Points: 5

One Possible Solution (I used it)

Hi all,

Just in case anyone is looking for an answer to this, what I ended up doing was creating two style sheets.

The Droid stylesheet used ":hover" for the mousedown state in the image sprite.
The Else stylesheet used ":active" for the mousedown state in the image sprite.

Then I used this JavaScript to call the appropriate device-specific sheet:

if (navigator.userAgent.match(/Android/i)) {
document.write('link rel tag, complete with open and close bracket, to stylesheet 1')
}
else {
document.write('link rel tag, complete with open and close bracket, to stylesheet 2')
}

It worked like a charm.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 33 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Why not use one stylesheet

Why not use one stylesheet and give both :hover, :active and :focus the same style?

#some-id a:focus, #some-id a:hover, #some-id a:active { background-color: #f00; }

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph