PDA

View Full Version : Kay sucks at jQuery


kay
25-03-2011, 01:19 PM
Yes, it's true, and all my jQuery gotos in the office have disappeared off to other employment.

Here's my problem:
http://test.starfishpond.com/

These select boxes are:
a) styled to within an inch of their lives using a "custom select" jQuery script
b) using a "compact labels" jQuery script to overlay real labels over the select

The problem is that activating the dropdown requires two clicks, which is confusing as hell.

Seeing as I suck, I was wondering if anyone else had any ideas on how to get these two scripts working together nicely without:
a) losing the styling
b) writing something custom (see thread title)
c) replacing my lovely real labels with default options

Anyone?

alflow
25-03-2011, 01:33 PM
Besides a.s.a.p. when do you need this solved by?

Cheers
Alfred Low

kay
25-03-2011, 01:35 PM
Besides a.s.a.p. when do you need this solved by?

LOL site goes to final testing on Monday arvo for launch event Thursday morning...

scross
25-03-2011, 01:38 PM
do you have to use jquery?

Or can you get rid of the overlay?

kay
25-03-2011, 01:39 PM
Would prefer to keep it in jQuery rather than another library because there's other stuff on the site also using it... of course, if it's a non-library dependent solution, that's ok. And the overlay... yeah that's how the design was approved. I'd like to keep it that way if possible... if not then I'll just add the label as the first item in the dropdown.

scross
25-03-2011, 01:56 PM
the latter option seems like a good one - can you make the "label" a different color if it's the first item in the drop down list?

kay
25-03-2011, 01:58 PM
the latter option seems like a good one - can you make the "label" a different color if it's the first item in the drop down list?

Well, that's what I'll do if I can't find another solution... the thing with the overlay is that I'd like to keep the good semantic labels in there if poss... esp seeing as it's a govt educational site.

alflow
25-03-2011, 02:23 PM
The timeframe is too tight for me. Sorry and good luck.

Cheers
Alfred Low

temp
25-03-2011, 02:36 PM
I don't think you can programatically pop open a select menu.

this is a bit of a hack, but you could copy the label text into the first menu option like this:
http://dl.dropbox.com/u/182350/speak/tmp/labels.html

at least then you get to use proper labels?

there seems to be a css issue with the height of the select elements here too. ie. they're not as tall as the background, so I have to click on the top half to open the menu.

HTH.. I'll be listening to the new mogwai album and avoiding real work for another 1.5 hours if you want a hand :)

kay
25-03-2011, 02:54 PM
this is a bit of a hack, but you could copy the label text into the first menu option like this:
http://dl.dropbox.com/u/182350/speak/tmp/labels.html


Hacks are fine, and Satan's trousers, you're a genius! I owe you a beer :)

there seems to be a css issue with the height of the select elements here too. ie. they're not as tall as the background, so I have to click on the top half to open the menu.

Hmmm really? Is this in Safari? Seems ok in Chrome, the 'Fox and IE8 on Windows...

temp
25-03-2011, 03:16 PM
w00t free beer!

Here's the size issue in safari.. the blue bit is clickable:
http://dl.dropbox.com/u/182350/speak/tmp/select.png

kay
25-03-2011, 05:51 PM
w00t free beer!

Here's the size issue in safari.. the blue bit is clickable:
http://dl.dropbox.com/u/182350/speak/tmp/select.png

Ah, I see... that should be trivial to fix.

Cheers again, enjoy your Mogwai :)

nebbian
25-03-2011, 08:08 PM
Are you trying to achieve something like this?

http://www.zensoft.com.au/tmp/kay/test.starfishpond.com.htm

(no hang on don't use that, it doesn't save the value properly).

nebbian
26-03-2011, 12:14 AM
This is how I'd do it (not using jquery at all, just use css and javascript):

http://www.zensoft.com.au/tmp/ben/test.starfishpond.com.htm

Note that I set things up to make the option bold if it's selected, this is just a css thing that's there if you want it. I thought it looked cool :)

kay
26-03-2011, 04:28 PM
cheer nebbian, that works too... we're already using jquery elsewhere in the site tho so there's no real harm in keeping using it.

i reckon there must be almost as many potential javascript solutions to any given problem as there are javascript developers :)