This is my first post on here and I'm just learning Jquery so please be kind! :)
I have just created a website - www.wayfairertravel.com and I have some dropdown boxes on my homepage, where users can search 'By Style' etc...
At the moment once those boxes are opened you have to close them manually... I'm just wondering if there is a way to change the code there currently so that when a user clicks elsewhere on the page it disappears.
Any help greatly appreciated. If you you could be as precises in your answer that would be great - I.e where to change the code and what to change to.
Cheers,
Harry
Usually, you add events on body and on the desired dropdown:
$(document.body).on('click', function() {
dropdown.close(); // .hide(); whatever
});
dropdown.on('click', function(event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
However, I think there are jQuery plugins for clickOutisde events that you could use too (they probably work like mentioned above, but you don't have to write it yourself).
I took Jakub Michálek advice and applied it your code. I prepared fiddle so you can test it out: http://jsfiddle.net/tmuuS/
This is your javascript you want to have on your page:
$(document).ready(function () {
$("#expslider").hide();
$("#expshower").show();
$('#expshower').click(function () {
$("#expslider").slideToggle();
});
$(document.body).on('click', function () {
$("#expslider").slideUp();
});
$("#expslider").on('click', function (event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
$("#expshower").on('click', function (event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
});
Although remember that it's better to have javascript in head tag, not right beside the place where you use it. (hard to look for it later when you need changes)
Related
I have an index page that contains the following events.
<div id="sub_page"></div>
$(document).ready(function () {
$("a.menu_navegacion_abrircaja").on('click', function (ev) {
ev.preventDefault();
var href = “nombrecontrollerEJ/view_ej";
$.post(href, function (data) {
$("#sub_page").html(data);
});
});
});
In it, when you click, load the html contents of subpages in the div sub_page.
In view view view_ej, I bring html code and also, jquery code. The Jquery code of the view that is added to the index div is as follows:
$(document).ready(function () {
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert("hello");
});
});
By clicking on the link that contains the class "menu_navegacion_abrircaja", I get the alert ("hello");
But it turns out that there is a problem, for every time I click on the link, the alert messages are repeated (alert ("hello");). For example, the first time I click on the link that contains the class menu_navegacion_abrircaja, it works fine showing the alert once, but then I click again on the same link it shows me the alert twice, then I do it for the third time, He shows me three times the alert, and so on.
I would like to know how to solve this problem.
Will there be any way to restart the events or handler of the jquery, as are the events click, change, "hidden.bs.modal", etc., in such a way that their repetition of the events is avoided?
I have seen the methods unbind (), bind (), off (), which might be the solution, but if so, how could you apply them?
Maybe you could try something like this in the jQuery code of your subpage:
$(document).ready(function () {
$('#modal_establecer_turnos').off('hidden.bs.modal');
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert(“hello”);
});
});
Sorry for the vague project title but I'm not having a great idea about how to explain this.
So, let's dive in to it. I was in need of a dropdown list with multiple select options to select recipients from.
I've started my search on Codepen and came across this: https://codepen.io/MaartenTe/pen/mXYLXj
I've forked it so I could tweak it myself. The snippets works perfect. The only thing missing is the ability of closing the dropdownlist when clicking outside of it.
So I started to approach it using javascript. So far I got following code:
$(document).click(function(e) {
var target = e.target; //target div recorded
if (!$(target).is('.multi-select ') ) {
$('.multi-select-options span').css('display', 'none');
$('.multi-select-options label').css('display', 'none');
}
});
Although this isn't working the way I want, I think it's the right approach?
Looking at how that works, its a checkbox that causes the toggle so you need to clear that when you click out the box.
$('.multi-select').on('click', function(e){
e.stopPropagation()
});
$(window).on('click', function(e) {
$('#toggle-open').attr({checked: false})
});
The stopPropagation will stop the window click even firing. https://codepen.io/anon/pen/rdwrya?editors=1111
What works in the given codepen:
var toggle = document.getElementById('toggle-open');
document.addEventListener('click', function(event) {
if (['INPUT', 'LABEL', 'SPAN'].indexOf(event.target.nodeName) + 1) return;
if (toggle.checked) toggle.checked = false;
});
Just handle click, exclude the relevant elements and uncheck if needed.
JS Fiddle Example
I'm opeing the dropdown boxes using the 'FOO', 'BOO' items in the navigation bar and I'm closing them when a click event occurs outside using the following code which is working fine.
$(document).on('click', '.dd-box', function() {
// Comment out the return statement below and the links will start working.
return false
});
The problem that I'm experiencing is that this is also stopping the links within the dropdown boxes from being visted.
The reason I need this code is because I don't want the dropdown boxes to close when click events happen within them.
I'm trying to avoid using hacks like window.open to force the link from being visited, any ideas?
you should put stopPropagation
$(document).ready(function() {
$("a").click(function(e) {
e.stopPropagation();
});
...
see JSFiddle
I have zero experience in jQuery or js but I am trying to learn, so any help is much appreciated. I have a jQuery slide out (for live chat) that I would like to have slide out once a link is clicked. Ideally
Click Here
And this will make the chat slide out. The only code that is in the HTML is the onload
<body onload="initializeLiveHelp();">
You can see how it works here Link Fixed
If you need the jQuery I can get that as well but I was not sure if that was needed or not. Thank You
Try it by toggling the width. So write CSS for the closed state and use this jquery snippet to open it
Toggle width with jQuery
Add an ID to your link so
Click Here
becomes
Click Here
And the jquery something like this (but not exactly). Reference the SO thread for more info and check out the fiddle. Or post more HTML here and I can help further.
$(document).ready( function(){
$('#mylink').click( function() {
var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
$('#toggle').animate({ width: toggleWidth });
});
});
Trigger a click when someone clicks a link:
$("li a").on("click", function(event) {
event.preventDefault();
$(".livehelpslideout a").trigger("click");
}
Preventdefault() disables default behaviour when clicking on a link, otherwise browser will load another page. Your desired behaviour for that is unclear, so you'll need to think about your logic.
I've got a little autocomplete dropdown which I want to hide when someone clicks outside the textbox. I've been using this so far
$("#input-group_ids").on("blur", function () {
$(".input-dropdown").hide();
});
However my autocomplete dropdown has an overflow and a scroll bar if there are more than 10 options. When using the above code, clicking on the scroll bar closes the dropdown.
I need the dropdown to close only if the click is outside the textbox AND the dropdown itself. How do I do that?
Not yet tested hope this will work
$("html").click (function () {
$(".input-dropdown").hide();
});
$("#input-group_ids, .input-dropdown").click (function (e) {
e.stopPropagation;
}
In case you won't get clear with the blur event, try to register the click event to an element that is surrounding both the textbox and the dropdown. It may even be the body.
Then in the click event check the event.target element. If it is neither the textbox nor the dropdown, close it.
It feels clumsy, I know, but it is one of several working options.
Try this :
$("*:not(#input-group_ids)").on("click", function () {
$(".input-dropdown").hide();
});
Not tested because you didn't gave any jsfiddle
Have you tried the not selector the name explains it all and might work if you have a container on the dropdown and textbox
a little hackish but might work.
$(elementContainingTheDropDownContent).on('mouseleave', function(e){
$(window).on('click', function(e){
//close dropdown
})
}).on('mouseenter', function(){
$(window).off('click');
})
I found another answer to this which is actually the best version I think
$(document).click(function(e) {
if (!$('#input-group_ids').is(e.target) && !$('.input-dropdown').is(e.target))
$('.input-dropdown').hide();
});
This is slightly better than Benjamin's answer as it doesn't stop propagation of any clicks on $("#input-group_ids"), which may have unintended consequences. However I'm accepting Ben's answer as it worked and solved my problem, and he deserves the credit. =)
EDIT: Actually my version is pretty similar to #singe31's version, so I upvoted that one too