We Keep Coding

How can I show a hidden DIV for a selection included with others?

I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}

Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.

How to get the scroll position of an HTML element in a table?

I have a table on my page with hundreds of rows. Each row contains select objects. For example:
<tr>
<td>
<select onchange="changeSkillLevel(this)">
<option value='1'>High</option>
<option value='2'>Medium</option>
<option value='3'>Low</option>
</select>
</td>
</tr>
When the user changes the select option, the page is reloaded via location.href, with querystrings appended for functionality. All that works fine, but if the user was way down at the bottom of the page operating on a select inside the 300th row, after the redirect, they're taken back to the top of the page. After the redirect I want to reset the scroll position to exactly where they were, preferably highlighting the <tr> containing the select object they just modified.
I can't seem to get jquery's scrollTop to return anything but 0:
function changeSkillLevel(obj){
alert($("#" + obj.id).scrollTop())
[...]
}
The alert always returns 0. I don't know if my selector is getting the obj (this) in the correct way and I don't know if I'm using scrollTop() correctly.
If I could capture the scroll position, I figured I could pass it in the qstring/url, then when the page reloads, grab that scroll param and use jquery to forcibly scroll the page back down to where the user was.
1- How can I achieve this?
2- What's the best way to have the jquery selector attach to the "obj" param, which comes from "this" down in the selector object?
Thanks!

Does the size of the content change when you submit the selection?
If not, you could just use the current scroll-position
$(document).scrollTop()
, submit it along with the other data and scroll the document to that position again. Might even be a nicer solution, as the page won't jump when using the original scroll-position.

How can I create this sliding JS motion?

I'm having trouble finding how to create this motion on http://makr.com/ - when you click on a product, the page slides down and more product information appears. The scrollbar also scrolls to where the product/information fits on the whole page. Can someone help me or point me in the right direction?

You can do both using jQuery.
For the opening the product on the way they do: http://api.jquery.com/animate/
For the scrolling you can check this page: http://api.jquery.com/scroll/
The general idea is trigger the scroll method once you click in a product (scrolling to the place you want) and then open the product details by using animate.

Let's say ul.products li.product selector selects every product in the list.
Let's say div.product-detail selector selects the correspondent product detail container
$(".ul.products li.product").click(function() {
$('div.product-detail').slideDown(function() {
$(window).scrollTop($(this).offset().top);
});
});
You may want to select a specific product detail div (the one related with the clicked product) but this code accomplish the purpose.
offset property gives you the top/left coordinates of the product detail div.

use scrollTo() method.
developer.mozilla reference.

How can I prevent the dropdown from opening in a DropDownList?

I have a custom table which I'd like to use as the DropDown portion as a DropDownList.
Ideally, when users click on a DropDownList, it should show the custom table instead of the usual drop down. I thought it'd be easy to prevent the dropdown from opening without disabling the DropDownList control, however that doesn't appear to be the case.
Is there an easy way to prevent a DropDownList from opening without disabling it?
Edit: This has to work for an embedded IE 7 web browser, and e.preventDefault() does not work in that browser version

You can do something like this:
Basically, I have positioned an invisible div over the dropdown to block it, and you can handle the click with the onclick of the masking div.
EDIT: I have updated this http://jsfiddle.net/EdM7B/1/
<div id='mask' onclick='alert("clicked");' style='width:200px; height:20px; position:absolute; background:white;filter:alpha(opacity=0);'></div>
<select id='selectList' show=1 style='width:200px; height:20px;'>
<option>Test</option>
</select>
I had to use a sort of hack because IE doesn't seem to render divs properly that have no background colour set, so it wasn't working correctly. This works in my IE7.
If you want it to work in all browsers you'll need to add chrome/firefox opacity CSS or have some IE only CSS to apply background colour.
I think due to the way it's positioned above, the opacity is actually not working properly because the element is positioned absolutely, either way it seems to work. I originally had it as opacity 1, but that sounds wrong to me as we want it invisible, so I changed it to 0.

It's possible to stop the dropdownlist from showing by using jQuery's event.preventDefault in the mousedown event (demo: http://jsfiddle.net/RCCKj).
Also see this related question: stop chrome to show dropdown list when click a select

Put it inside a div like this:
<div id="dllDiv" style="width:200px;height:200px;">
< asp:DropDownList ID="DropDownList1" runat="server" style="z-index:-1000px;pointer-events:none;">
< /asp:DropDownList>
</div>
You should set the css property pointer-events to none, then you can show your table hidden in a div or loaded it by using ajax, something like this:
(document).ready(function() {
$("#dllDiv").click(function() {
alert('adasd');
});
});

Have you thought about using a mega menu for this, you can put anything you want in the dropped down portion - for example your table

Get the value of a Drop list while hovering the options without clicking with JS

How can I get the value of a Drop list while hovering the options with the mouse without clicking (selecting) using JS or jQuery?
Ex.
List of Stuff
-Dog
-Cat
-Bird
When I move my mouse around the options of the droplist, it will tell me that my item is being highligted.

This isn't possible with standard selects, but if you need the desired effect badly enough you can create your own select components and back them with hidden inputs.