Spiffy web tricks

Madpoet

So, I landed a job as a web programmer, and I rock the SQL/MVC, but am fairly green when it comes to Javascript/CSS. I like teaching myself, but I'm not finding tutorials that cover the stuff I'm trying to do, and I don't even know the terms half the time.
Vague question: What is a good place to read up on current web technology and trends? I feel like I know the languages, but I don't know what people are doing with them.
Specific question(s): My current page has a box for a product number. What I want to happen is the user clicks the text input box and an overlay box comes up (like the new login on these forums) with a dropdown containing a list of product categories. The user picks a category, and another dropdown appears/populates with the products from that category. When a product is selected from that dropdown, the product number of the selected product populates the initial textbox.
What is the overlay called, and what is used to create them? Are they supported in most browsers? Is it worth using AJAX to filter a list of under 2000 items, or should I just send the whole thing to the page and do it in Javascript?
Don't need any code, just help defining my goal - google is useless if you don't know what to call things. 8(

wmelon

as a UX developer, I'd recommend looking into something called an autocomplete script. what you've described will probably be rather difficult to use. With an autocomplete script, all the user will have to do is start typing whatever they're looking for and it will generate a box similar to what you're describing with matching entries in whatever your data store is.

for example, on http://www.lexmed.com/doctors/default.aspx, I used one of these for the Last Name field. It uses ajax calls to talk to a webservice that I created to search my database of doctors.

There are all sorts of free scripts to handle this functionality. jQuery UI has one built into their framework for example.

Disrupter

Auto complete is nice if the user has some idea of what they are looking for. Sometimes you need a more specific list of items for them. It depends on the situation. You can have the autocomplete, with a little search button that brings up a modal window with the dropdown categories in it. That way, if the user isnt finding anything via autocomplete they have another route to take.

wmelon

I'd probably suggest having that on a separate page, like an "advanced" search page. And just doing it in the body of the page rather than trying to make it work in a modal dialog, unless the number of categories is pretty small. Ebay motors has about the maximum amount as I've been able to stand in a modal dialog.

Disrupter

Yeah I assumed a relatively small amount of categories with only a couple levels.

Also, if you have a good grasp of programming in general, id recommend looking into jquery to handle a lot of your javascript. Not that you NEED a good grasp of programming at all, in fact quite the opposite. But if you dont have a good grasp it would be better to learn javascript itself before learning jquery since jquery is just a javascript wrapper. And you should know what the javascript behind the jquery is likely doing.

Madpoet

K, so what I want to do is called a modal dialog. That helps.
The application is pretty well a web based invoice creator. I don't want them to have to pop over to another page every time they want to look up a part.
It's only maybe 5-6 categories. A second layer of sorting would be useful, but the supply dept didn't give me that data, when they do it shouldn't be too much trouble to add another dropdown.

I seem to have something wrong on my modal dialog though. My CSS looks like:

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     background-color:Black;
     opacity: .4;
     filter: alpha(opacity=40);
}

#picker 
{
    position:absolute;
    top:25%;
    left:25%;
    width:25%;
    height:25%;
    z-index: 1000;
    margin:auto;
    background-color:White;
    opacity: 1;
    filter: alpha(opacity=100);    
}

I have two nested divs, ids overlay and picker. Overlay displays correctly, but picker displays with a transparent background, and the text is faded out. I looked at it in firebug, and the opacity is inheriting correctly. So, I assume I'm using something incorrectly. I have tried examining other people's code, but I don't see what I'm doing different.

edit: Here's what I get:


edit2: I fixed this by un-nesting the divs and toggling the visibility on both. Doesn't answer me why the nested div would behave the way that it did.

JacksWastedLife

Opacity is applied to the #overlay and all its children. You can Nev have a descendant be more opaque than its ancestors. The opacity: 1 om the #picker only sets it to the Max that it has inherited

Delzhand

What you're probably running into there is that your modal box is positioned absolutely. Relative and Absolute elements are positioned rel/abs to their parent item. And absolutely positioned elements are taken "out of the flow". So your modal box exists, to the other content, as about one pixel tall, which is why your bounding div doesn't enclose it.

Try this:

#overlay:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

This is a way to pull that enclosing div around the bottom of your modal box. Now, this may or may not be something you want to solve for a modal, but you'll run into it all the time with non-overlay elements, so it's good to know.