We Keep Coding

Show and Hide overlay using jquery

I am using JQuery for showing and hiding my overlay and it works just great. Now I also wanted to add some animations, hence I went ahead and check out the jq docs and got some nifty animations which can be applied to the show and hide functions directly.
What though I am looking for is on clicking, the overlay should appear to come up from the from the div which I clicked on, and on closing the overlay, it should hide by minimizing into the div which was used to open it.
Thanks
Fiddle URL if you can show it here

Check this fiddle: http://jsfiddle.net/HfKTA/1/ - Guess this is what you are looking for.
Updated fiddle with multiple triggers: http://jsfiddle.net/HfKTA/2/

How to scroll an HTML select box to an option without directly selecting that option?

My issue is that when the page is refreshed, I want the 'select' to be scrolled all the way to the top. However, if the user has scrolled the select box down to view the options (without necessarily even clicking on any of them) prior to the refresh, the 'select' box doesn't return to the top.
I've seen answers where people say to simply use selectedIndex to select the first option in the list, and thus it will automatically scroll to the top, but this is NOT an option. When the page is refreshed, nothing must be selected and thus, the only code I have at the moment is:
document.form1.componentselect.selectedIndex = -1;
Which is effective at clearing out any selections in the 'componentselect', but does not reset the scroll position.
FYI, I am using straight HTML and JS, no JQuery or anything like that. Thanks.

All you need to do is first select the top item (as you said you don't want to do), but then set it to -1!
document.form1.foo.selectedIndex=0;
document.form1.foo.selectedIndex=-1;
While I was looking at this, I also figured out how to have it remember what was selected, in case that becomes an issue:
http://jsfiddle.net/ryleyb/qPJ4S/

I think it's impossible to change the scroll position in traditional selects (select from the tag, no box generated by javascript plugins) because this box is controlled directly by the user's browser and theme, without direct interference by javascript.
I believe the only way to "reset" the display is to force the user to click on the field again, hiding and redisplaying the select tag. But you will need to click to open the box again and it hinders more than helps the user.

disabling background of document when certain div opens

,
HI,
I need some ones help with this, thank you in advance.
In my site i have that when the user clicks on a input box then a new div opens up on top of the input box in that exact place.
Now i need to add that when that div opens i need the background of the hole screen to become black with some opacity, i think it is called overlay.
some thing like i want you can find here:
http://www.omnipotent.net/jquery.sparkline/
if you hover with the mouse over the div on the side that says "come work at splunk".
How can i do something like that with jquery or any thing else.
Thank you very much

You want to use the jQuery UI Dialog Modal.
Edit: jQuery's Dialog method will give you a similar effect but is usually used for onclick events rather than mouseover/mouseout. Have a look at the javascript code on the page you linked (around line 356) and you'll see:
$('#splunkjobs').mouseenter(function() {
// make element absolute, positioned over the top of the float and resize
$('<div id="shade"></div>').
appendTo('body').
css('height', $(document).height()).
animate({opacity: 0.6});
This essentially creates a that covers the page and then fades it in.
I still think using a Dialog for your button is preferred (and much simpler).

this is caled 'modal', you can use jquery:
http://jqueryui.com/demos/dialog/#modal
http://www.queness.com/resources/html/modal/jquery-modal-window.html
http://dev.iceburg.net/jquery/jqModal/#examples
or if you still need more:
http://coderplus.com/2009/11/jquery-modal-boxes-to-improve-your-ui/

Highlighting active panel in CSS without JavaScript

I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.

It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.

What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.

How do I create a "sticky" dropdown menu in pure CSS?

Effect I'm trying to achieve:
In Twitter's new redesign, they implemented a "sticky" dropdown menu for the account settings area.
Basically, when you click on your username in the black global nav bar at the top, a menu is toggled open and stays open until you click on one of the links or on your username name again to toggle it closed.
I'd like to achieve the exact same effect of a sticky menu with just CSS and HTML. I'm okay with using CSS3 features, but if this can be achieved without relying on CSS3, that's even better.
What I've tried so far
I can create the basic navigation menu with dropdown working with pure CSS and HTML, but only using the :hover pseudoclass. I tried out the :active pseudoclass, but unfortunately it doesn't "stick" and stay open.
Is this "sticky" dropdown effect even possible without relying on javascript? If it is not possible without relying on javascript, how should I handle this so it degrades gracefully?

I'm going off memory here as I cannot access Twitter from work. If I recall correctly, the same script is used on the main page to login. It creates a little popup type window that stays there even after moving the mouse.
If that's what you're talking about you can't achieve that with just CSS; it's a styling language, not a scripting language. The :hover/:active pseudo-class styles will all un-apply themselves as soon as that event stops.
The alternative with Javascript involved would be to make the button a link that leads you to an actual page. Then bind it's onclick to popup an absolutely positioned div that's hidden by default (return false within the onclick to prevent following the link). This div isn't hidden until whatever condition you want to hide it with, and it starts off hidden, so if they don't have Javascript they won't know what they're missing.

Use the pseudo class :focus instead of :active. You might also need to use tabindex="" in your HTML to make an element accept focus.
However, iOS touchscreens don't seem to recognize tabindex="".

It's possible to achieve with help of CSS use label in combination with input[type="checkbox"] and :checked pseudoselector to store state
See example at https://developer.mozilla.org/en/CSS/%3achecked