I have a navigation overlay and what I would like to do is close the navigation when a link is clicked. It works with href="#" but my links are href="someplace.com". How can I have the link close my div while still using the href?
`<script>
$(document).ready(function(){
$(".menu-wrapper a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".menu-wrapper a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
</script>`
and the link is
`<li><a class="btn-close" href="<?php echo SITE_URL; ?>profiles">Profiles</a></li>`
Thanks for any help.
If the link has href="#" page doesn't get reloaded, otherwise it would.
You could do this:
<li><a class="btn-close" href="javascript:void(0)" onclick="closeOverlay()">Profiles</a></li>
then write a function
function closeOverlay() {...}
where you would close the overlay and call AJAX to get your PHP data
My Jquery is rusty
$('.some-class-for-all-nav-links').click(function () {
// select the nav and close it with css or javascript
})
Events in a browser cascade down and then up. Say you have the following structure:
<html>
<head>...</head>
<body>
<section>
<p>Here is a link</p>
</section>
</body>
</html>
When you click on the link, the click event is sent to any event listener bound to elements in this order: window, html, body, section, p, a, a, p, section, body, html, window. Whether an event occurs when the event is passing from top to bottom (on capture) or from bottom to top (on bubbling) is determined by setting the onCapture boolean parameter on the addEventListener call.
You could bind an event to the HTML document that is triggered on capture, checks if the user clicked a link and if so, close the nav or whatever it is you want to do. I don't think jquery supports event capturing, you'll have to do it vanilla-style.
Here's some JS following my mockup example. This adds an event listener to the whole document which will fire when a click is detected. It then checks that the thing that was clicked is actually a link (<a> element).
document.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
alert("You've just clicked a link");
}
}, true); // true to trigger on 'capture'
https://jsfiddle.net/gf9drum2/
Related
I have the following markup:
<a class="list-group-item hola" id="competition-card-<%= competition.id %>" href="a_url_to_a_site">
<div class='row'>
<div class='col-xs-11'>
Some text
</div>
<div class='col-xs-1 shows-submenu'>
Some text
</div>
</div>
</a>
I'm trying to achieve:
If user clicks the 'a' tag he is directed to a site, except when...
user clicks the '.shows-submenu' div a hidden div is displayed.
My jQuery is as follows:
$('body').on('click', '.shows-submenu', function(e) {
event.stopImmediatePropagation();
if ($(this).closest('a.list-group-item').next('.hidden-group-item').hasClass('hide')) {
$('.hidden-group-item').addClass('hide');
$(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
}
else {
$(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
}
});
Currently, if I click '.shows-submenu' div the 'a' tag is still called and I'm directed to the site.
As I'm using bootcards plugin I can't change the 'a' tag to a div, for example.
Is there any way to stop 'a' only when clicking the '.shows-submenu' div. I've tried using stopPropagation in both 'a' and the 'div' without success.
What you are looking for is event.stopPropagation() that will prevent bubbling and event.preventDefault that will avoid the default behavior for links onClick.
Fortunately, in jQuery returning false inside the click handler function will fire both. More on the subject here: https://stackoverflow.com/a/1357151/670377
So you just need to modify your function as:
$('document').on('click', '.shows-submenu', function(e) {
if ($(this).closest('a.list-group-item').next('.hidden-group-item').hasClass('hide')) {
$('.hidden-group-item').addClass('hide');
$(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
}
else {
$(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
}
// This will be equivalent to
// e.preventDefault; e.stopPropagation;
return false;
});
event.stopImmediatePropagation has another purpose than just stopping the default functionality, it will also prevent all the remaining listeners of the element from being called.
I think what you want is event.preventDefault(). Both event.stopPropagation() and event.stopImmediatePropagation() will affect other event handlers but not the default behavior of an anchor. Also you should declare the argument as event if that's how you're referring to it inside the function:
$('.show-submenu').on('click', function(event) {
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com">this follows link
<div class="show-submenu">this does not</div>
</a>
I am refreshing my page every 25 seconds using Javascript.But another Javascript for click function works fine before page refresh whereas after page refresh it doesnot work.
HTML:
<div id="refreshOnline">
<div id="refreshData">
//Set of Functions
<a target="_blank" href="http://example.com/startgame.php?gname='.$key['gameName'].'&player='.$_SESSION["uname"].'&type=t20" class="btn btn-primary btn-sm popup-game" id="popup-game" >Play Now!</a>
</div>
</div>
Javascript:
<script type="text/javascript">
//Script to refresh Div
function show_data()
{
$('#refreshOnline').load('main.php #refreshData');
}
setInterval('show_data()', 25000);
//Script to oprn link in new window
$('#popup-game').click(function (event) {
event.preventDefault();
alert("Working");
window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes");
});
</script>
Before refresh, link opens in new window whereas after execution of refresh script, link opens in new tab instead of new window.
The code:
$('#popup-game').click(...
binds a click handler to the #popup-game element that exists at the moment that code runs. If that element is a child of #refreshOnline it will be replaced when you refresh #refreshOnline and so the new version of that element will not have a click bound. You can use a delegated event handler instead:
$('#refreshOnline').on('click', '#popup-game', function(event) {
event.preventDefault();
alert("Working");
window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes");
});
This actually binds the handler to #refreshOnline, but when a click occurs jQuery automatically checks if it was on a child element that matches the selector in the second parameter and only calls your function if it does.
For more information see the .on() doco.
This is because the click handler is not assigned to the new content. Set them again after you have changed the content like so:
<script type="text/javascript">
//Script to refresh Div
function show_data()
{
$('#refreshOnline').load('main.php #refreshData');
setClickers();
}
function setClickers(){
//Script to oprn link in new window
$('#popup-game').click(function (event) {
event.preventDefault();
alert("Working");
window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes");
});
}
$(function(){
setClickers();
setInterval('show_data()', 25000);
});
</script>
You should register the click event every time you refresh the content of the div.
I'm still quite new to javascript and JQuery...How do I get this div to close by clicking outside the toggle area (I don't want the user to have to use a close button)
the code looks like this:
function toggleDiv(divId) {
$("#"+divId).toggle();
}
function showonlyone(thechosenone) {
$('.newnote').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(0);
}
else {
$(this).hide(0);
}
});
}
and the html looks like this
<div class="note">
<a id="myHeader1" href="javascript:showonlyone('newnote1');" >
<img src="images/SN_NotesPage_14.png">
</a>
<div class="newnote" id="newnote1">
<a>
<img src="images/SN_NotesPage_16.png">
</a>
</div>
</div>
thank you
What I usually do is adding a click event listener to the document body which closes the overlay. To prevent closing the overlay by clicking on it I add a second click event listener to the overlay which contains ev.stopPropagation();
So with jQuery it would look like:
$(document.body).bind('click.closeNote', function() {
$('.newnote').hide();
});
$('.newnote').bind('click.closeNote', function(ev) {
ev.stopPropagation();
});
Another way is to add a transparent div (with a lower zIndex than the note) which covers the whole page. You could then add a click event listener to this div which closes the note.
Edit:
Please note, that the example above is not very performant as it executes a selector on every click. Just bind this event when a note is shown and unbind it when they get closed.
I have a div that hides whenever you click outside of it but I'm having some trouble getting certain links inside the div to work (and not hide the div).
$(document).click(function() {
fav.hide();
});
theDiv.click(function(e) {
e.stopPropagation();
});
That is what I have for the whole clicking outside and closing event. Heres the thing: I have two types of links in my div, one regular link and another which is a javascript one. The regular one redirects OK but the javascript one doesn't do anything.
Could somebody help me out? Thanks.
EDIT:
Here are the bits of my code that might help out
var fav = $('#favorites');
// Open & close button
$('#favorites_a').click(function(e) {
e.stopPropagation();
e.preventDefault();
fav.toggle();
});
$('a.c',fav).live('click', function(e) {
alert('hey');
});
$(document).click(function() {
fav.hide();
});
fav.click(function(e) {
e.stopPropagation();
});
HTML (built after page load):
<div id="favorites">
<div class="wrap">
<ul><li>AB</li></ul>
</div>
</div>
This could be a problem with the live() click event handler. When you use live the event handler is actually attached to the document. So the event needs to bubble up to the document, but your click event handler on fav prevents bubbling up.
It works with delegate though:
fav.delegate('a.c', 'click', function(e) {
alert('hey');
});
Here, the event handler is added to fav.
DEMO
I think your code for fav is preventing the 'B' link from working. Instead of .live(), try:
$('a.c').click(function() { ... });
instead.
i have an menu with some values and i got someting hidden and while click on more button it shows like google more menu... if it is clicked out it is not hiding till the more menu is clicked once again
More<small>▼</small><div class="more list" id="one" style="display:none">test <span style="color:#329">|</span> test1 <span style="color:#169">|</span> test4</div></div>
Script:
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}
how to make it close while the mosuse clicks on any other place other than the menus
Try using the onblur event.
I see you've tagged this with jQuery, if that is an option, you can clear up the link a bit, like this:
More<small>▼</small>
And use unobtrusive script combined with event bubbling to your advantage, like this:
$(function() {
$(".more_link").click(function(e) {
$(this).next(".more").toggle();
e.stopPropagation();
});
$(".more").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$(".more").hide();
});
});
You can test it out here, this only closes the menu if you clicked neither the menu of the toggle, e.g. clicking one of the test links will not close it. If you want it to, just remove the $(".more").click(function(e) { e.stopPropagation(); }); portion.
It uses event.stopPropagation() to stop the click from bubbling up to document, which if happens (and would if you clicked anything else) triggers its click handler, closing all the .more elements.
I wouldn't use onBlur because it's not a good accessibility approach (for example if the user is using tab to navigate the page).
Look at this solution instead:
jQuery click event for document but ignore a div
Typically, I let the event bubble up to the 'body' or 'html' doc and check if the target is what i want (and/or isn't contained within what i want). If the event target is not contained within your menu, then perform your desired operation (in this case, hide the div).
i.e.
jQuery(document).ready(function(){
jQuery("html").bind("click", function(evt){
var $target = jQuery(evt.target);
var shouldShowMenu = $target.hasClass("menu_toggle");
shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
if(!shouldShowMenu)jQuery(".more_list").hide();
});
});
NOTE: your markup would needs to be extended such that the "more" href becomes has a class attribute, class="menu_toggle"