[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.
Related
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.
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 this code which was working earlier. Then I started putting the code into small small functions and now it is not working. I can see that it is adding list item but automatically removing it also. Please guide -
<body>
<header>
<h1>Your Ration List</h1>
</header>
<div id="container">
<form class="shopList-form">
<input id="add" type="text" placeholder="Type new item here" />
</form>
<ul id="item_list">
<li id="base" class="hidden">
<form>
<input class="check" type="checkbox" /> <span class="item">Item</span>
</form>
<button class="delete_item hidden"></button>
</li>
</ul>
JQuery code -
$(document).ready(function () {
/* Get user input */
getItem();
function getItem() {
$('input#add').keydown(function (event) {
if (event.keyCode == 13) {
addItem();
}
});
}
function addItem() {
$('li#base').clone(true).appendTo('#item_list').removeAttr('id').removeClass('hidden');
$('ul#item_list>li:last>form>span').text($('input#add').val());
$('input#add').val("");
}
});
Full code can be found at this JSFiddle -
http://jsfiddle.net/varunksaini/Zjxq5/8/
Since it is a form, pressing enter not only triggers your function but also submits the form (since there is no action it submits to itself) so the page actually refreshes and that is why the new <li> is gone.
All you need to do is add return false to getItem.
see fiddle: http://jsfiddle.net/Zjxq5/9/
The problem you have with your script is that you are using a form and when you press enter it submits the form to the server and reloads the page. You can use the preventDefault() function to avoid that.
$('input#add').keydown(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
addItem();
}
});
Example: http://jsfiddle.net/rdnKq/1/
I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle
if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;
This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here
Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.
Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}
When I click the div that suppose to show, it just showed in a second and then disappeared.
How do I make it stay display on the page?
Here is the code
<div class="circle0">
<h4>sketch & drawing</h4>
</div>
<div class="sec_down" style="display: none;">
<h1>{Mask}</h1>
</div>
<script>
$("#show_1").click(function () {
$(".sec_down").show();
});
</script>
You need to prevent the default click handling in the link so it won't process the href in the link and reload the page. in jQuery, you can do that by adding return(false) to the click handler:
<div class="circle0">
<h4>sketch & drawing</h4>
</div>
<div class="sec_down" style="display: none;">
<h1>{Mask}</h1>
</div>
<script>
$("#show_1").click(function () {
$(".sec_down").show();
return(false); // prevent default handling of the click
});
</script>
Change href="" to href="#" or break the default action of the link by using return false.