I am using this code, which is taken almost out of the box from the bootstrap docs, to get a simple collapse behaviour for a button (I converted the button to a link):
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTree" aria-expanded="false" aria-controls="collapseTree">
<b>click me</b>
</button>
<div class="collapse" id="collapseTree">
<div class="well">
<h6>Example text goes here</h6>
</div>
</div>
Now, what I am trying to do is to be able to close the text when the user clicks outside the button. I know that is asked many times in stack overflow but jQuery is NOT AT ALL intuitive ! at least for a beginner like me, so I am not really able to adapt any of the solutions proposed on this SO answer to get the desired behaviour.
For example, I am using this script (concept borrowed from here to try to control the outside click behaviour of the above code :
<script>
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".btn-link").hasClass("collapse");
if (_opened === true && !clickover.hasClass("data-toggle") && clickover.parents('.btn-link').length == 0) {
$("button.data-toggle").click();
}
});
});
</script>
but of course with no luck. Any hint would be greatly appreciated !
UPDATE
Another try with no luck here.
you could use the following:
//handling the hiding when clicking anywhere else in the document
$(document).mouseup(function(e)
{
var container = $('.btn-link');
if (container.has(e.target).length === 0) {
// the closing function
}
});
This is how I did it in Coffeescript for Bootstrap 4 with a non-standard navbar.
$(document).click (e)->
#console.log e.target
unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
$('#toggle-menu').collapse('hide')
So basically, unless you click the button or the menu, close the menu.
Note: Strange, on iOS clicking on text doesn't register a click event, nor a mouseup event. Clicking on an image does fire events though. Don't know how to fix this.
Related
I am working on a popover code. Which by default works with hover on website. However in the mobile view. Its existing functionality is opening and closing the popover, when we click on the question mark icon. I was trying to close the popover with touch/click event anywhere on the screen with the below code with jQuery.
$('body').on('touchstart', function(e) {
$('[data-toggle="popover"]').each(function() {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
But now when I want to open the popover again, it highlights the question mark icon but doesn't open the popover. It only hovers it. We have to double click to open the popover
<span href="javascript:void(0)" data-placement="top" data-toggle="popover" data-content="Promotions" data-original-title="" title="">
<a class="tool-tip">?</a>
</span>
The first time it works fine but from the second time the double click issue starts. Please help
You can sure find out how to solve your issue in this link How to dismiss a Twitter Bootstrap popover by clicking outside?
Using Bootstrap 4.1:
$("html").on("mouseup", function (e) {
var l = $(e.target);
if (l[0].className.indexOf("popover") == -1) {
$(".popover").each(function () {
$(this).popover("hide");
});
}
});
I have a button, clicking on which, I have to enable the click event handler on the entire document. Once someone clicks now, I want to capture the dom selector of that element and disable the event handler again.
Is this question asked already? I searched a lot but couldn't find anything relevant. There are a lot of solutions on enabling or disabling event handler on a particular element, but I have to do it over the entire document. Here is my code -
JavaScript -
<script>
var select_target = false;
$(document).click(function(event) {
if (select_target) {
element.style.backgroundColor = "#FDFF47";
var text = $(event.target).text();
console.log(text) //This text should be the DOM Selector, which I'm not able to retrieve
select_target = false
}
})
$('.select_target').click(function() {
select_target = true
})
</script>
HTML -
<!-- Lot of code from the other parts of the webpage -->
<button name="ignore" type="button" class="btn btn-primary btn-md m-1 select_target">
Select Target
</button>
<!-- Lot of code from the other parts of the webpage -->
This gives me Select Target as the output instead of the DOM Selector of the element, which I wasn't expecting to be the target button in the first place, but whatever I click after clicking the select target button.
I know the code looks clumsy, but any help would be appreciated. Thanks!
It looks like the following code does what I'm expecting. It's for everyone who wants a similar thing to happen i.e., To be able to select the element from the page on which you want to perform specific operations with a clean and modifiable code.
Javascript -
<script>
var select_target = false;
$(document).click(function(event) {
if (select_target) {
event.preventDefault(); //If you click a link or a button, this helps in just selecting it and it won't perform it's default operation.
var text = $(event.target).text();
console.log(text)
select_target = false;
}
})
$(document).ready(function() {
$("body *").mouseenter(function(el){
if(select_target){
$(el.target).addClass("red-hover-box"); //To highlight the elements on hover
}
})
$("body *").mouseout(function(el){
if(select_target){
$(el.target).removeClass("red-hover-box"); //To remove the highlight on the elements. This will keep the element highlighted if you click on it, since the select_target's value would be false after the click.
}
})
})
$('.select_target').click(function() {
e.stopPropagation(); //To prevent the click on the button to be handled by the event listener.
select_target = true
})
</script>
CSS -
.red-hover-box{
border:1px solid red;
}
HTML -
<!-- Lot of code from the other parts of the webpage -->
<button name="ignore" type="button" class="btn btn-primary btn-md m-1 select_target">
Select Target
</button>
<!-- Lot of code from the other parts of the webpage -->
I'm still now able to figure out on how to get a unique identifier for the HTML element that has been clicked, and would update this answer once it's been figured out.
Thanks!
I am working on a large project and need to fix some accessibility issues.
These is a section which has been generated by https://www.atbar.org/ in a JS format I am not familiar with. The user clicks buttons to change font size, background colour and other html elements to assist them with reading content.
When you click on the buttons with your mouse they work fine. This is an example of how the buttons appear:
<li class=“access-button">
<a title="Decrease Text Size" id="block_accessibility_dec" tabindex=“0">A-</a>
</li>
If I focus my Chrome inspector on the link element I can see there is an event listening for my click:
This appears to trigger the change in font size. I found the code that triggers this click, it is in a JS format that I am not familiar with:
M.block_accessibility = {
init: function(Y, autoload_atbar, instance_id) {
this.defaultsize = M.block_accessibility.DEFAULT_FONTSIZE;
// This event triggers after clicking
Y.all('#block_accessibility_textresize a').on('click', function(e) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
});
// This is the function it runs, it has many cases for all the different buttons.
changesize: function(button) {
Y = this.Y;
switch (button.get('id')) {
case "block_accessibility_dec":
Obviously this is just snippets of the code with comments I added.
What I require is the user to be able to change the font size using just tab and enter, so I added the following JQuery:
$("#block_accessibility_dec").keyup(function(event) {
if (event.keyCode === 13) {
$('#block_accessibility_textresize #block_accessibility_dec').click();
}
});
This is not triggering the change in font size. Yet when I click on the button it does? There is probably a really simple solution here but I've been stuck for ages. I tested the .click() on other elements on the screen and it works for them so the JS is definitely executing.
I have also tested:
$(this).click();
But to no avail.
Try to trigger the click event by the native way:
$('#block_accessibility_textresize #block_accessibility_dec')[0].click();
Source: I tried their demo page together with the chrome inspector and couldn't get the click working with JQuery.
But with the native click event it suddenly worked.
Unfortunately I can't really explain to you, why JQuery doesn't work here. Maybe something with their version (1.11)?
Replace your code with the following code and add the keyup event. This should work when you press the enter key.
Y.all('#block_accessibility_textresize a').on('click keyup', function(e) {
if (e.keyCode == 13 || e.keyCode ==9) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
}
});
You should use the following Jquery:
$('#block_accessibility_textresize #block_accessibility_dec').trigger("click");
Please let me know if this doesn't work.
I'm using this simple popup correctly initialized along with corresponding popupafterclose handler, wrapped appropriate in content div. It just works. -
<div id="start-activity-popup" data-role="popup">
here is popup.
<button id="start">Start</button>
<button id="cancel">Cancel</button>
</div>
But if I had to retrieve values from popup or know which button
was pressed - do I need to write another handler for each - start and cancel buttons ?
Is there a better way ?
You can just write one handler:
$("#start-activity-popup button").click(function() {
var clicked = this.id; //this is the id of the clicked button
//do stuff
});
I have the following jQuery Tools overlay:
<div id='editDescriptiontOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
Background info: The HTML for this overlay is static. I have a list of items each having their own Edit link. When a given Edit link is clicked, the overlay is generated by calling: $('a[rel=#editDescriptionOverlay]').overlay( { ... } ); and the input is populated with the respective text.
The Save button needs to validate the text in the input element and close the overlay if and only if the validation is successful. Otherwise, the overlay must remain open. The Cancel button simply closes the overlay without validation.
The validation logic has been independently verified to work.
I've tried setting the onBeforeClose event during overlay generation as a means of validation. Taking this approach, both the Save and Cancel buttons needed the same class .close. Unfortunately, the condition applies to all .close elements in the overlay so even the Cancel button was validating.
I've also tried binding a click event to the Save button immediately after generating the overlay, like so:
$('.save', $('#editDescriptionOverlay'))
.unbind('click')
.bind('click', function() {
if (validateText) {
console.log("Validation passed.");
$('a[rel=#editDescriptionOverlay]').overlay().close();
}
else {
console.log("Validation failed.");
}
});
The console.log's confirm that the validation is working, but the overlay doesn't close.
Any insight is appreciated, thanks.
For jquery widgets, public methods should be called as follows:
$('a[rel=#editDescriptionOverlay]').overlay("close");
wherein close is the method name that you wish to call.
If a method accepts parameters, then, these should be added as parameters right after the method name.
Updated:
I am sorry. I just had time to check what jQuery Overlay Tools is and I am mistaken. This is not similar to any jQuery widget, hence, my comment above will also not work for this case. I tried your code above and it worked. The overlay was closed. But, when I tried it with multiple <a rel="#editDescriptionOverlay">, which I think is what you did. It did not work. My suggestion would be to use just one <a rel="#editDescriptionOverlay"> and use a dummy anchor element for the Edit link, which when clicked would trigger a click to <a rel="#editDescriptionOverlay">. You can do something like this:
<script type="text/javascript">
$(document).bind("ready", function(e){
$("a[rel]").overlay();
$('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
if (validationValue){
$("a[rel=#editDescriptionOverlay]").overlay().close();
}
});
});
function clickThis(){
$("a[rel=#editDescriptionOverlay]").trigger('click');
return false;
}
</script>
Edit1
Edit2
<a rel="#editDescriptionOverlay">Dummy</a>
<div id='editDescriptionOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
I'd prefer binding an event to the save button (the second one you mentioned). Actually your code looks fine, except that you probably don't need to bind the event to $('#editDescriptionOverlay') and you have typo in your html markup above (<div id='editDescriptiontOverlay' should be <div id='editDescriptionOverlay').
See here for an example.