I need to hide the div with id = SDWN when the user clicks any other place in the document.
<div id="SDWN" onclick="OKIJUYG()">
<img src="../img/lupa.png" ID="ILDSIB" onclick="OKIJUYGA()" >
</div>
<div id="ATSIMD">
<div class="arrow-up" id="SHS">
</div>
<div id="Vsauceisgenius" tabindex="-1" >
<img src="../img/x.png" id="CTSO" href="#">
<input type="text" placeholder="People" id="IMOHD">
<input type="submit" value="Search" id="DPMM">
<P></P>
<input type="text" placeholder="Hashtags" id="IMOHDS">
<input type="submit" value="Search" id="DPMMM">
</div>
</div>
You can use event.target to check if the element was clicked, and if it was not, then hide it:
$(document).click(function(event) {
if (event.target !== $("#ATSIMD") && event.target !== $("#SHS") {
$("#ATSIMD").hide();
}
});
Use $(document).click() to hide div on click anywhere. Then add click binding to your div and use event.stopPropagation() to stop event bubbling.
$(document).click(function(){
$("#SDWN").hide();
});
/* Clicks within the dropdown won't make
it past the dropdown itself */
$("#SDWN").click(function(e){
e.stopPropagation();
});
"Other Place" I think is any other item other than #SDWN, try this code:
if (document.body.addEventListener){
document.body.addEventListener('click', function(e){
if(e.target == document.getElementById("SDWN")) return;
document.getElementById("SDWN").style.display = "none";
});
} else if (document.body.attachEvent){
document.body.attachEvent('onclick', function(e){
if(e.target == document.getElementById("SDWN")) return;
document.getElementById("SDWN").style.display = "none";
});
}
Try yourself:
https://jsfiddle.net/Frogmouth/pyptkzms/
This solution not need jQuery.
But I don't like this solution, meybe you can find an other one.
Related
How do i know if my element is visible or not using javascript. I'm using $('#element').hide();, $('#element').show(); to hidden or shown an element. How can i check if the element is shown? The element is in the modal. I tried to change the element which is not in the modal and it worked, but when i put the element inside the modal it's not working..
I tried using this code but it's not working.
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" oninput="total();"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<script>
if ($('.me').is(':visible')) {
mt = m / 100 * 50 + 50;
}
</script>
"none" == document.getElementById("element").style.display //Check for hide
"block" == document.getElementById("element").style.display //Check for show
you can use like also
if ($('#element').css('display') == 'none') {
alert('element is hidden');
}
Checks for display:[none|block], ignores visible:[true|false]
$('#element').is(":visible");
It seems your selector is wrong.
Example of $("[element]").is(":visible") below: (for refrence)
$("#show").on("click", function() {
$("#text").show();
})
$("#hide").on("click", function() {
$("#text").hide();
})
$("#getStatus").on("click", function() {
alert($("#text").is(":visible"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Hello</div>
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="getStatus">Get Status</button>
$('.me') is a class selector which will return array of elements where elements have class me.
So you need to target the specific div either by using this or by using index as there can be many elements with same class name.
$('.me').is(':visible') this will check the first element and return result according to first element's visibility.
You can try
$(".me").eq(1).is(':visible') //Here 1 is index of div which can vary
OR
$(this).is(':visible')
I have next html:
<a href="https://google.com" >
<div id="first"></div>
<div id="second"></div>
</a>
Currently when I click to div #first it takes me to https://google.com.I don't want it. I want to not have effect anchor on div #first, so when I click on div #first nothing is happen.
And I cannot handle anchor, let say that I can add javascript just for div #first.
EDIT
I forgot to tell that my div contain form with attached event submit:
<script>
function submitForm(_this){
//do Ajax call
return false;
}
</script>
<a href="https://google.com" >
<div id="first"></div>
<form method="post" onsubmit="return submitForm(this)">
<input id="email" name="Email" type="text">
<input id="submit" name="submit" value="Register" type="submit">
<form>
<div id="second"></div>
</a>
So if I add this:
<script>
jQuery("#first").on("click", function (e) { e.preventDefault(); });
</script>
Then my form doesn't work.
EDIT
So if add e.stopPropagation() on input submit click, like this
<script>
jQuery("#submit").on("click", function (e) { e.stopPropagation(); });
jQuery("#first").on("click", function (e) { e.preventDefault(); });
</script>
It will work fine, but e.stopPropagation(); doesn't work on fine in Safari. In Safari when I click on input submit it still leads me to the anchor link.
cancel the click with preventDefault
$("#firs").on("click", function (e) { e.preventDefault(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://example.com" >
<div id="firs">X</div>
<div id="second">Y</div>
</a>
Either dont't put the div in the anchor, or use the following:
document.getElementById('firs').addEventListener('click', function(event) {
event.preventDefault();
});
I think that this might help (your id says firs but sake of spelling I'll put first)
$("#first *").attr("disabled", "disabled").off('click');
use the following
event.preventDefault()
I have a simple dropdown that opens up a search field when you click it. Even though I have the text field of this search set to autofocus, it's not working for all browsers.
What method of Javascript/jQuery would I use to check if the containing UL css display is set to block, so that I can force the focus to be on the field using .focus().
HTML:
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>
EDIT: There is no css change event so you'll have to approach the problem in 1 of 2 ways.
check the dom element in set intervals to see if its css has changed
trigger an event when the css of the dom element is changed by user interaction/your code.
the first way will look something like this:
var element = $(".dropdown-menu");
function checkForChanges()
{
if (element.css('display') == 'block')
{
// do your .focus() stuff here
}
setTimeout(checkForChanges, 500); // does this every half second.
}
or the second way:
$('.toggle').on('click', function() {
$('.dropdown-menu').toggle();
$('.dropdown-menu').trigger('change');
});
$('.dropdown-menu').on('change', function(){
if($(this).css(.css('display') == 'block')
{
// do your .focus() stuff here
}
});
You can check the display value of the ul using pure JavaScript with this:
JS:
var display = document.getElementById('dropdown-menu')[0].style.display;
if (display === 'block') {
//do what you want.
}
Or using jQuery:
if ($('.dropdown-menu').css('display') === 'block') {
//do what you want.
}
It looks like you are using bootstrap to create the dropdown. If that is the case you can use the "shown" event. However you need to attach the event on a container element.
Html
<div class="quickSearchContainer">
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>
</div>
Javascript
$('#quickSearchContainer').on('show.bs.dropdown', function () {
$('#inputSearch').focus();
});
I want to thank everyone for their input, but the working solution that I found was to modify the bootstrap JS to allow for an autofocus on toggleClass of the OPEN for the dropdowns. Everyone gets kudos!
[FYI: i am not allowed to change how it was marked up. div will be clicked.. not a button or anchor]
i have a menu(that should pass on accessibility standards) that will open its submenu when clicked.
this is the onclick function, and i need to do the same function when pressing enter key,
// parent menu (this will repeat)
<div onclick="javascript:ToggleMenu('Calendar');" class="menu-item" style="cursor: hand;" tabindex="2">
<p>Calendar</p>
</div>
//submenu (this will repeat)
<div id="Calendar" class="menu-subitem" style="display: none;" tabindex="2">
<a onclick="Audit(this)" tabindex="2" href="Calendar/CalendarAssignment.aspx" id="TM_C1">Calendar Assignment</a>
<a onclick="Audit(this)" tabindex="2" href="Calendar/ShiftAssignment.aspx" id="TM_C2">Shift Assignment</a>
</div>
thanks!
i tried my best to be clear whew!
Here's the accessible solution while keeping a div:
<div id="foo" role="button" tabindex="0">Toggle menu</div>
<script>
$('#foo').click(function() {
ToggleMenu('<%# Container.DataItem.FuncID %>');
}).keydown(function(e) {
if (e.which === 32 || e.which === 13) {
this.click();
}
});
</script>
But honestly you should just use a button:
<button id="foo">Toggle menu</button>
<script>
$('#foo').click(function() {
ToggleMenu('<%# Container.DataItem.FuncID %>');
});
</script>
This will do it when they hit the enter key anywhere on the page
<div onclick="javascript:ToggleMenu('<%# Container.DataItem.FuncID %>');">
<script>
document.addEventListener("keypress", function (evt)
{
if (evt.keyCode === 13) {
//they pressed enter
//now get the divevent
var div = document.querySelector('div[onclick*="ToggleMenu"]');
//trigger the event
div.onclick.apply(div);
}
}
);
</script>
I can see you have an error in your code
onclick"javascript:xxxx"
is not correct,
"javascript:xxx"
should using on "a" tag "href" attribute, just remove the "javascript:" in your onclick attribute and you may get what you want.
Below is my jQuery:
$(".notificationfeedlist li").live('mouseleave', function() {
IF(NOT (MOUSE OVER AN ELEMENT WITH ID INFO))$('#info').hide();
});
And here is the HTML I am applying this jQuery to:
<div id="info">
<div class="arrow-right2"></div>
<div class="arrow-right"></div>
<div class="scrollerdiv"></div>
</div>
What should I replace IF(NOT (MOUSE OVER AN ELEMENT WITH ID INFO)) with to achieve hiding elements that do not have an ID of "info"?
$(".notificationfeedlist li").live('mouseleave',function(e){
if (e.target.id != "info") {
$('#info').hide();
};
});
You should change it to class="info" and then check with jQuery .hasClass();
Just trying to help: there are no lis in your code; just divs. That could be your problem.