We Keep Coding

Toggle and focus element

I would like to hide a div and show it when the use select a drop button (like google showing questions in google search results). After some googling i found a way for this. I had used the below jquery to toggle between two states(show/hide) for a div.
function showDiv(a) {
$("#" + a).toggle("slow");
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Show
<div id="element" class="hidden">
Hidden content
</div>
Now the problem is that it first shows the div. When i click the link it hides. But that's not what i need. I need to hide the div and it should only be shown when i click the link. Also the focus on the div is lost when i toggle between the states which is bad. Can anybody help me correct this. I need to focus the div on show as well as hide.

Try this inside your showDiv(a) function:
$("#"+a).toggle("slow").focus()
If you want to remove focus:
$("#"+a).blur();

click button simulates clicking a dropdown hidden

I do not know if it's possible, but wanted to have a jsp page when loaded uam dropdown does not appear, but when I click a button.
Basically I want a button that makes the select box. that when clicked appear a list "option".
Already experimenting with various js events and jquery but none works. I had a div with style = "display: none;" and within the div I have the select. and wanted to show the option only when you click a button. It is possible ?
Thanks for listening

try this
$(document).ready(function(){
$('.mySelectbox').hide();
$('.myButton').click(function(){
$('.mySelectbox').val(-1); //clear selection of selectbox
$('.mySelectbox').show(); //show make the magic
});
});
this work for you?

JQuery : how to click delete button then click on item to remove

Currently I'm using JQuery to spawn items into a HTML canvas to drag around and create visio style kind of drawings. The problem I'm having trouble figuring out is how to remove these items. Now I know I can use the .remove or the .click but the functionality I want is like this:
I want the user to click on the delete button then click on the item on the canvas they wish to remove that they created earlier. I'm not sure how to track the fact that the delete button has been clicked so when they click on the item they want to remove it can send the .remove to remove it from the canvas.
I have seen lots of examples of a delete button next to a table or element so you can remove it once the button is clicked but I want a global delete button at the button of the screen that can be clicked then the user can click on the item anywhere on the canvas to be removed.
Any help would be greatly appreciated.

Basically you want to set a flag whenever the delete button is highlighted and look at that flag whenever the user clicks the element.
Here I am setting a class on the button. If the button has the specified class then the element should be deleted -
$(document).ready(function() {
$("#delete").click(function() {
$(this).toggleClass("deleting");
});
$("div").click(function() {
if ($("#delete").hasClass("deleting"))
$(this).remove();
});
});
button.deleting {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Text1</div>
<div>Test2</div>
<div>Test3</div>
<button id="delete">Delete</button>

You could assign a class to each of the elements that the user can remove.
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=IMG1&w=100&h=100" class="elements" />
Upon selecting(clicking) on the element remove the active class from all of the existing elements and assign the active class to the current item.
$('.elements').click(function () {
$('.elements.active').removeClass('active');
$(this).addClass('active');
});
Then upon delete button click. Remove the element with the active class.
$('#deleteElement').click(function () {
$('.elements.active').remove();
})
Example here:
http://jsfiddle.net/SeanWessell/4emomnqe/

Hiding then focussing on select element underneath

I have a div which hides a select box. When a user clicks on the div it disappears and shows the select box. Then when the user clicks away from the select i want the div to show again and essentially cover it up.
so, to hide the div I have the following:
onclick="document.getElementById(\'infoi'.$div_i.'\').style.display = \'none\';"
When the user has touched the select and clicks away I have the following which covers the select again:
<select name="g_name" onchange="this.form.submit();" onblur="document.getElementById(\'infoi'.$div_i.'\').style.display = \'block\';" style=width:170px;>
for this to work as i want it to though, the user has to actually click the select, even without selecting anything, for it to gain focus and therefore the onblur will turn the div back on.
So, I try the following to hide the div and set the focus on the select:
onclick="document.getElementById(\'infoi'.$div_i.'\').style.display = \'none\'; document.getElementById(\'g_name\').focus();"
Bit it simply does not work, any ideas?

I have a working example of what I think you are after here http://jsfiddle.net/Znct3/10/
looking at your code you were applying focus to an element with an ID of g_name but your select only has a name of g_name

Creating a checkbox list popup from a select

I'm having a few problems creating a multiple select checkbox list that appears when a user clicks a select field (I use the onfocus event).
As far as showing the list, that's fine, however how can one prevent the actual select field from showing a dropdown using javascript?

Why not! :)
DEMO
$('.sel').focus(function() {
this.blur();
window.focus();
$('.dropdown').fadeToggle(300);
});

Here is the solution I use to customize the appearance of my select and fileupload controls:
give your element (select) opacity:0.1 either by css or jQuery fadeTo() function
wrap your element with a container div and give it position:relative.
add a sibling (drop panel) to the element and give it position:absolute, top:, left:0 and width equal to the width of element.
show the drop panel using jQuery in $(select).click() event.
may seem weird, but works cross browser :)

Haven't tried to suppress the select dropdown, but if all else fails you can just create a custom form element. Such as:
<dl>
<dt>Please select an option</dt> <!-- Text -->
<dd> </dd> <!-- Style as downward arrow -->
</dl>
<input type="hidden" name="custom_select_value" value="selected option" />
Style the DL (or which ever markup you wish) to look like a select element, then use a click handler to bring down your multi-option box. Also populate the hidden input with JS when an option is selected to ensure the data is submitted with the form.

I needed a similar UX, so I created this:
harshniketseta.github.io/popupMultiSelect
Hope this helps you.