Show drop down menu onmousedown without loosing onclick functionality - javascript

I try to get a drop down menu to work as most drop down menus seem to work, i.e. as soon as the mouse button is pressed on the trigger the drop menu shows up. Seems rather easy with some css and javascript but it turns out to be a bit tricky.
The obvious way would be this:
<script>
function toggle(id) {
var el = document.getElementById(id);
el.style.display = (el.style.display === 'none') ? 'inline-block' : 'none';
}
</script>
<input type="button" value="click me" onmousedown="toggle('menu');"><div id="menu" style="display: none">Menu</div>
Unfortunately this is not exactly it, since now it is no more possible to navigate to the trigger with the tab-key and hit enter to show the menu. Seems that this needs the menu to show with onclick. But adding the toggle function to onclick as well shows the menu at onmousedown and then collapses it when the mouse button is released at onclick. Is there a way to stop onclick from firing when onmousedown was firing before?

Hope this would work fine for your requirement
<script>
var lastEvent = '';
function toggle(id, event) {
event = event || window.event;
if (lastEvent === 'mousedown' && event.type === 'click' && event.detail > 0){
lastEvent = event.type;
return;
}
var el = document.getElementById(id);
el.style.display = (el.style.display === 'none') ? 'inline-block' : 'none';
lastEvent = event.type;
}
</script>
<input type="submit" value="click me" onmousedown="toggle('menu', event);" onclick="toggle('menu', event);">
<div id="menu" style="display: none">Menu</div>
https://jsfiddle.net/safeer/rzg7sahb/18/

try adding onclick event and submit your form using its name
<input type="submit" value="click me" onmousedown="toggle('menu');" onclick="document.getElementById('form_name').submit();" >

whats about this method?
<script>
function toggle(id) {
var el = document.getElementById(id);
el.style.display = (el.style.display == 'none') ? 'inline-block' : 'none';
}
function activate(e){
alert(e.id);
}
</script>
<div id="menuWrapper" onmousedown="toggle('menu');"onmouseup="toggle('menu');">
<div id="mainlink" >Click Here</div>
<div id="menu" onmouseup="activate(this);" style="display: none">Menu</div>
</div>
JS fiddle with div for menu opener

Here is another way that seems to work:
<script>
function toggle(id) {
var el = document.getElementById(id);
el.style.display = (el.style.display === 'none') ? 'inline-block' : 'none';
}
</script>
<input type="submit" value="click me" onmousedown="toggle('menu');" onkeypress="if (event.keyCode === 13) toggle('menu');" onkeyup="if (event.keyCode === 32) toggle('menu');">
<div id="menu" style="display: none">Menu</div>
It emulates the normal key behaviour. Although I am not fully sure that it emulates all of it and in the right way on all operating systems.

Related

How to toggle a div after clicking javascript/html

I'm trying to use a div to show game rules, so when they select the "button" it will reveal the rules, but I can't get it to close by reselecting it. I have tried a few other solutions but they are not quite what I am looking for.
<script type="text/javascript">
function showDiv() {
document.getElementById('howto').style.display = "block";
}
</script>
<input type="button" name="rules" value="How to Play!" onclick="showDiv()" />
<div id="howto" style="display:none;" class="rules" > WELCOME</div>
You could have a toggleDiv rather than showDiv function that checks the display style and sets it to whichever of block or none it is not currently set to. For example:
<script type="text/javascript">
function toggleDiv() {
var div = document.getElementById('howto');
div.style.display = (div.style.display == "block") ? "none" : "block";
}
</script>
<input type="button" name="rules" value="How to Play!" onclick="toggleDiv()" />
<div id="howto" style="display:none;" class="rules" > WELCOME</div>

Replace show hide button with div

Javascript:
<script>
function setVisibility(id) {
if (document.getElementById('bt1').value == 'Hide Layer') {
document.getElementById('bt1').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
} else {
document.getElementById('bt1').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}
</script>
css
div {
display: none;
}
HTML
<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";>
<div id="sub3">Message Box</div>
This code works perfectly .. But when i click on the button it shows the message box along with the button 'Hide Layer' .. i want my message box to replace the button 'hide layer' n display in it's place..
If you want to render message box only.Please refers following steps-
step 1- Add following code into the HTML file
<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";>
<div id="sub3">Message Box</div>
<script>
function setVisibility(id) {
if (document.getElementById('bt1').value == 'Show Layer') {
document.getElementById(id).style.display = 'inline';
//above statement will show message box.
document.getElementById('bt1').style.display = 'none';
//above statement will hide 'Show layer' button.
}
}
</script>
step 2- add following code to the css
div {
display: none;
}
To check example please refer this link-https://jsfiddle.net/yndyn8vj/
You should do something like this.
HTML
<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";>
<div id="sub3" style="display:none">Message Box</div>
CSS - nothing
Javascript
<script>
function setVisibility(id) {
var el = document.getElementById(id);
el.style.display = (el.style.display != 'none' ? 'none' : '');
}
</script>
Hope it helps.
Marco.

"First Click" of Button does not hide div

Below code works, but the onclick only works with the function after the second click of the button. Why and what do I need to do for the button to hide the text area on the first click?
My javascript:
function hideShow() {
var e = document.getElementById('divHR');
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
html
<button id="btnHideShow" onclick="hideShow();">
<img src="Images/arrow1.bmp" alt="Right Arrow icon" style="width:13px;
height:13px; border:0px;" />
Hide or show Human Resources Information
</button>
<div id="divHR" class="showHRInfo">
<h3 id="h3Inline">About Windsurf Human Resource (HR) division </h3>
<p id="pWindSurfHR" > Windsurf values and respects its employees very highly.
Should you have any problem, questions or concerns please
contact our Human Resource division. They are always at your service.
</p>
</div>
it should work,
function hideShow() {
var e = document.getElementById('divHR');
if(e.style.display != 'none')
e.style.display = 'none';
else
e.style.display = 'block';
}
Your div style display property might not set 'block'. If so, thus your code set block your display property.

Javascript Expand and Collapse

I am using javascript drag and drop functionality to expand and collapse my contents.
The following is my code.
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
Click here to toggle visibility of element #foo</div>
<div id="id1" style="display:none;">This is foo</div>
Click here to see wonder</div>
Edit
<div id="id2">This is foo</div>
<div id="id3">Edit</div>
The problem is,when I click the Edit section should display.Now both edit and foo is displaying...
Please let me know the correct code to do this one.
Thanks in advance..

Change class onclick anyplace on document to close a menu?

I use this code which opens and closes a menu. How can I have it close when someone clicks anyplace on the screen?
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
The HTML
<div style="float:left;">
<a href="#" class="button" onclick="javascript:showElement('v-menu')">
<span>Monitoring</span></a>
<ul id="v-menu" class="v-menu" style="display:none;" >
<li>Start</li>
<li>Stop</li>
</div>
You will need to do two things to achieve this:
Bind a click event for the whole document, and hide the menu if it is shown.
document.addEventListener("click", function(event) {
var menu = document.getElementById('v-menu');
if (event.target !== menu && menu.style.display == 'block')
menu.style.display = "none";
});
Stop the click event propagation when the menu is clicked, so the event does not bubble up to the document.
<a href="javascript:void(0)" class="button"
onclick="showElement('v-menu'); event.stopPropagation()">
See this in action: http://jsfiddle.net/william/Pfv8N/.
You can attach an event on document.body and in the handler you can write your code to
hide the menu like this
document.body.addEventListener("click", function(){
//conditions to check if click is not on ur menu
showElement();
}, false);

Categories