I have a button that has a doubleclick event, that I want to run, regardless of whether the button is enabled or disabled. I posted a similar question about this here, but now I need to run a function from the disabled button that uses thethis paramater, and if I use the <span> workaround, as described in the other question, it gives me the info about the <span> element, not the <button> element.
jsfiddle example
How can I get round this?
First of all, you can't have two elements with same ids. Your markup should look like that:
<button name='name_of_button' id='id_of_button1' ondblclick="runFunction( this );">Enabled Button</button>
<br>
<button name='name_of_button' id='id_of_button2' ondblclick="runFunction( this );" disabled>Disabled Button</button>
Second, it is not a good idea to use inline javascript. However, your problem could be solved like that:
HTML:
<div class="wrapper">
<button name='name_of_button'>Enabled Button</button>
<div class="over"></div>
</div>
<div class="wrapper">
<button name='name_of_button' disabled="disabled">Disabled Button</button>
<div class="over"></div>
</div>
JS:
window.onload = function() {
var dblClicked = function() {
console.log(this.parentNode.childNodes[1].removeAttribute("disabled"));
}
var overlays = document.querySelectorAll(".wrapper .over");
for(var i=0; i<overlays.length; i++) {
var over = overlays[i];
over.addEventListener("dblclick", dblClicked);
}
}
http://jsfiddle.net/NRKLG/12/
If the element is disabled it can't trigger events. This means that you can't listen for dblclick even if you add the listener to the parent element. So, you should put an overlay transparent div over the button.
Related
For example, if I have an HTML snippet like so:
<body>
<div id="1">
<span class="title">I'm a title!</span>
</div>
<div id="2">I'm the first element!</div>
<div id="3">I'm the first element!</div>
<body>
Obviously, if I wanted to get a specific element, say the div with id of 1, I could do something like
document.getElementById("1").addEventListener("mouseover", () => console.log("in div 1!"), false);
and that would output in div 1! whenever I hovered over it. But is there some javascript I can have that apply to every single element in body? To basically write some function like, getElementUserIsHoveringOver()?
I don't think addEventListener works on HTMLCollections, which was my only idea.
mouseover bubbles, so if you attach a listener to the <body>, you can watch for events and log the event.target:
document.body.addEventListener('mouseover', (e) => {
console.log(e.target);
});
<div id="1">
<span class="title">I'm a title!</span>
</div>
<div id="2">I'm the first element!</div>
<div id="3">I'm the second element!</div>
So i want to hide (better to say toggle) some division when someone clicks an button. I have more than 20 division and 20 button, each button should close the specified division. For easier understanding lets do it just with one division and one button.
so i have 2 parts, here is what i tried:
html part which I have
<div class="sssadsa" id="buttonsdiv">
<button id="thebutton" type="button" onclick="toggleDiv(divtohide0);">
<h3>Scene 1</h3>
</button>
</div>
<div id="divtohide0">
some content
</div>
and this is my WHOLe javascript which I have
but somehow I cannot manage it to get working, the js doesn't do anything when clicking the button. not even the alert("hello world");
function toggleDiv(id){
alert("hello world -back to the roots" );
event.preventDefault();
$('#' + id).toggle(); // Toggle div visibility
}
There can be several things that might occur.
Your javascript isn't loaded (try running a console.log outside the function and check if you see anything. If you don't check the way you are loading the script)
toggleDiv isn't available globally (try adding window.toggleDiv = toggleDiv after you declared the function)
If any of the above doesn't work, leave a comment.
Also note the following errors in your code:
You cannot call the event if you pass another parameter (eg: divtohide0).
You need to use a string to pass the id, otherwise javascript will expect a variable. (eg: toggleDiv('divtohide0');)
I suggest you to avoid adding a h3 tag inside a button. If you need to style the content do it with a class.
In the snipper there is another function where the event works which require a data argument on the button. But there are several ways to achieve the same result.
function toggleDiv(id){
alert("hello world -back to the roots" );
// event.preventDefault(); this won't work
$('#' + id).toggle(); // Toggle div visibility
}
function toggleDivWithEvent(event) {
event.preventDefault();
var id = $(event.target).data('target-id');
$('#' + id).toggle(); // Toggle div visibility
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sssadsa" id="buttonsdiv">
<button id="thebutton" type="button" onclick="toggleDiv('divtohide0');">
<h3>Scene 1</h3>
</button>
</div>
<div id="divtohide0">
some content
</div>
<div class="sssadsa" id="buttonsdiv">
<button id="thebutton" type="button" data-target-id="divtohide1" onclick="toggleDivWithEvent(event)">
<h3>Scene 1</h3>
</button>
</div>
<div id="divtohide1">
some content
</div>
Fiddle: http://jsfiddle.net/0o1mrapd/20/
Angular stackblitz link: https://stackblitz.com/edit/angular-fhtaki?file=src%2Fapp%2Fapp.component.html
I have a complex case which i need some enlightenment. (For angular developers, you can think the wrapper div as a host selector, <my-button></my-button>)
As you can see in the fiddle I have a disabled button with a wrapper div which has a click event.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span>Click</span>
</button>
</div>
What I expect is that when I click on that area, nothing will happen but alas I get the alert. If I remove the span element and put plain text inside the button, this works.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
Click
</button>
</div>
How can I make the div unclickable in this case? I found out that pointer-events: none does the trick but then I lose the curser-event which I need for accessibility
I stumbled upon this issue while creating a custom button component with an ng-content in Angular but then realized this is bigger than the framework.
Some links i checked:
Can you prevent an Angular component's host click from firing?
Add CSS cursor property when using "pointer-events: none"
How to stop event propagation with inline onclick attribute?
https://github.com/angular/angular/issues/9587
Maybe this example will be useful
function clickHandler() {
console.log('Click');
}
<div onclick="return false;">
<button onclick="clickHandler()">
Click
</button>
</div>
You can use this css property to avoid click event be fired in the span tag. It could be a workaround.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span style="pointer-events:none;">Click</span>
</button>
</div>
First off, I've read extensively by now into what seem to be recurrent questions about how to hide a div after a properly detecting a click, or event, outside the div; indeed this has influenced my javascript code. But I'm a newbie and it's not working so I hope you can help me out.
Second, the jfiddle - https://jsfiddle.net/u5uzexqk/ ... please note the button should show when the any section of the search bar or indeed button is clicked on; and not show when a click anywhere outside is detected.
Before the code, I would just like to point out I have also read into the e-propagation thing, however I don't think it's the absence of that which is the problem; if it is, my profuse apologies.
Perhaps owing to the fact I'm new to Javascript, I can't see how the suggested answer from another question helps; the Jfiddle on the most popular answer seems to do the opposite - remove the menu when the menu link is clicked again.
Html
<body>
<div id = "wrapper">
<form action="" class="search-form">
<div class="cell">
<input type="text" name="q">
</div>
<div class="cell button-holder">
<button type="submit" id="dropdownbutton">
<span>Search</span>
</button>
</div>
</form>
</div>
</body>
Javascript
$("#wrapper").onclick(function (e){
document.getElementById('#dropdownbutton').style.visibility = 'visible';
}
$(document).mouseup(function (e)
{
var container = $("#wrapper");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#dropdownbutton").hide();
}
});
});
You are mixing methods for hiding and showing. If you are going to use .hide() then use .show() when showing it.
With your code, the call to .hide() will set the style to display: none, but then your native Javascript technique to show the button (which also contains the pound symbol in the id i.e. document.getElementById('#dropdownbutton') - don't confuse it with jQuery's selector when calling document.getElementById()) just adds a style for visibility: visible. Those are different properties.
<button type="submit" id="dropdownbutton" style="display: none; visibility: visible;">
<span>Search</span>
</button>
Also, as was pointed out in comments, there is no jQuery method .onclick. Use .click(). Also, there is a missing closing parenthesis after the click handler for the wrapper button. So update it like this:
$("#wrapper").click(function(e) {
$("#dropdownbutton").show();
}); // <- add parenthesis (and optional semi-colon) to terminate the function call
And has already been mentioned, you should wait until the DOM is ready to access elements. With jQuery, use document.ready().
$(document).ready(function(readyEvent) {
//interact with DOM
//now that the DOM is ready
//e.g. fetch elements by id attribute, add event handlers, etc.
});
See these changes in action in the snippet below:
$(document).ready(function() {
$("#wrapper").click(function(e) {
//document.getElementById('dropdownbutton').style.visibility = 'visible';
$("#dropdownbutton").show();
});
$(document).mouseup(function(e) {
var container = $("#wrapper");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#dropdownbutton").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<form action="" class="search-form">
<div class="cell">
<input type="text" name="q">
</div>
<div class="cell button-holder">
<button type="submit" id="dropdownbutton">
<span>Search</span>
</button>
</div>
</form>
</div>
First let's point out some issues in your code:
There is no such function as onclick in jQuery. To attach a click event you either use: $(...).click(callback) or $(...).on("click", callback).
The oposite of show is not visibility = "visible". show uses the display property (show = display = "none") and its oposite is hide (display = ""). So use show and hide.
Since you are already using jQuery, why use document.getElementById, just $("#id") will do.
Instead of all those checks to see if the target is the wrapper or something inside the wrapper, just stop the propagation of the event inside the event listener of the wrapper so it will never reach the document.
You should wrap your code inside a load event- $() will do- To make sure that everything is loaded before starting doing anything.
$(function() {
$("#wrapper").click(function(e) {
$("#dropdownbutton").show();
e.stopPropagation(); // if the event occur inside the wrraper, prevent it from bubbling up to the document and fires the bellow function
});
$(document).click(function(e) { // if the click target is the #wrapper (or something inside it) this event will never reach the document because of the stop propagation inside the above listener. So if this is fired then the target is not the wrapper, therefore we should hide the button
$("#dropdownbutton").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<form action="" class="search-form">
<div class="cell">
<input type="text" name="q">
</div>
<div class="cell button-holder">
<button type="submit" id="dropdownbutton">
<span>Search</span>
</button>
</div>
</form>
</div>
</body>
I would do it like this:
$("document").ready(function(){
$("#dropdownbutton").hide();
$( "input[name=q]" ).on( "focus blur", function() {
if($(this).is( ":focus" ) ){
$("#dropdownbutton").show();
}else{
$("#dropdownbutton").hide();
}
});
});
Demo: http://codesheet.org/cs/wAnG3ofQ
I am trying to copy the Like button of Facebook, but the problem is on the specific place to click to change the button.
When it's not yet liked, the user should click anywhere on the button and the button will change on the gray state (already liked). This is already done.
But the problem is when unliking it, I think I'm not using jquery correctly so that it should set to the blue state(not liked), only if it is clicked on the image.
Here's what I've made, take a look at it so you can understand better: https://glenrdsgn.com/button/
I've added a class '.unlike' to the ch2 div so that the HTML looks like this:
<div id="like" >
<div id="ch1" class="btn btn-empty no-like">
<div class="pad">
<div class="like-text">
<div id="ch2" class="data-empty"></div>
<div class="txt">Like</div>
</div>
</div>
</div>
</div>
Then the following jQuery does what I think you mean:
$(function() {
$('.btn').live('click', function() {
$('#ch1').attr('class', 'btn like btn-fill');
$('#ch2').attr('class', 'unlike data-fill');
});
$('.unlike').live('click', function() {
$('#ch1').attr('class', 'btn btn-empty no-like');
$('#ch2').attr('class', 'data-empty');
return false;
});
});
The return false is needed as otherwise both events are triggered. Hope this helps