?

Log in

I'll kick this off with my latest accomplishment - an epic challenge… - Love Your Code [entries|archive|friends|userinfo]
Love Your Code

[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

[Jun. 29th, 2006|11:27 am]
Love Your Code

webdev_love

[lady_icedragon]
[Tags|, ]

I'll kick this off with my latest accomplishment - an epic challenge spanning no less than three hours, and resulting in a masterpiece (in my opinion anyway :p)

I'm working on a moderately small project, but quite fiddly in parts. The contents of one particular drop down menu is populated using a complex two-table SQL query (how I managed that is another post, I think). Anyway, I was having the daily talk and update with my boss yesterday, and he decides that if a user knows the id number of an entry in this dropdown menu, they should be able to input it and have the menu skip to it.

Now, this is no mean task, since items in a menu are identified (and selected!) by an index number - a number which bears absolutely no resemblance to the id number we're looking for. I learnt a good deal about how a <select> breaks down in terms of the DOM, and how javascript is able to handle it.


I built this thing very slowly from the ground up, getting very basic functionality first, then making it a little more complex, then adding in real values, building some more etc. Took time, considering I had to learn the whole thing first.

Anyway, when a button is pressed a javascript function is called. The ID we're searching for is stored as a variable, as is a link to the menu in question. I've used a while loop to go through an array of all the options in the list, and checks the value attribute of each option to see if they match the ID number. When found, it makes that position the new selected option and breaks the loop. If it completes the loop without finding it, an alert() is displayed.

Probably doesn't make much sense, but made me chuffed when I got it working :D

What's really geeky is that I really wanted to be able to use predicate logic (a la Prolog) to do it - it would have been so much quicker :)
linkReply

Comments:
[User Picture]From: rotring
2006-06-29 03:32 pm (UTC)
That could well be a rule of thumb: in this community, talk about code with no code (or at least, no code blocks). ;)

In what regards your experience, it has the sound of accomplishment coming out of every pore. :)

Just beware to test that in the most broad range of browsers—every thing that has a "client-side" component is prone to incompatibilities, specially when it has the word "JavaScript" in it. I analysed a public sector site a couple of days ago, and, in Opera, there was this one <select> that didn't work (because they are&mdash believe it or not—populating the options and defininf the default one with JavaScript).

:*
(Reply) (Thread)
[User Picture]From: lady_icedragon
2006-06-29 03:44 pm (UTC)
I quite agree. I generally try to avoid using javascript if there's another option, but in this case there isn't.

On the up-side, this part of the site is used by the company's employees (of which there are few), and has to be extremely user-friendly - it's not a geek website. So I'll be surprised if it's used in anything other than IE (bah, humbug), and it'll work with FF and IE at the very least.
(Reply) (Parent) (Thread)
[User Picture]From: mentalward
2006-06-29 04:39 pm (UTC)
I don't know.. I was struggling to create a drop-down dynamic menu for a project I am working on. I originally planned to use JS to do the menu, but I eventually modified a CSS driven drop-down menu that has a drop down and sub-drop down menu without JS.

Even though it is frowned on to use JS I still think it's valid, because the W3C still only has about 10% of the users having JS disabled. (http://www.w3schools.com/browsers/browsers_stats.asp)
(Reply) (Parent) (Thread)