I am facing an weird issue, I have integrated the mega menu from https://codyhouse.co/demo/mega-dropdown/index.html
But the Category and sub category links are not getting clicked and not navigating to the links. I believe that might be some restriction in Js or Jquery.
Here is the site I am talking about http://puunnamiifashhions.com/punami/index.php
Please help me.
you need to user event.preventDefault() in jquery to prevent default behavior of <a> tag
read more here:jquery preventDefault
in your problem i think this script work:
$('p.close-menu a').click(function( event ) {
event.preventDefault();
});
above code in javascript is:
read more here
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
event.preventDefault();
}, false);
Related
I'm having a problem with a href target _blank on my website.
I cannot determine why it is not opening the link in a new tab, in the section: LATEST PROJECTS > Boranito skat and others, in fact, is instead opening the link in the same tab... can someone explore my website and tell me what is happening and how to solve it? I think it does have to be something with the JS but I am not able to find the problem in the Javascript code since I am a javascript rookie and cannot understand properly what the javascript code here does...
from what I have understood due to previous google and StackOverflow research and behavior watching, it is because javascript is handling the event target _blank in a different way, in fact, javascript here is being used for website change( i mean every click you do on the menu, some divs appears, some divs disappears and it is being handled by 3 js classes), already examined the JS files, clicked right-click, used element inspector> elements> event listeners>click event to see which JS files are being triggered while clicking...
see here detailed image
as you can see, two javascript archives are executing while doing the click event:
1: `jquery.pagepiling.min.js. //// 2: animsition.js`
3: scripts.js
so apparently both javascript classes are handling the events: on click, but since I am a newbie in javascript I cannot understand how to handle this or even understand what the JS does to the website ( i am just tinkering with the given template to try to understand it and to customize it better, (and hence, make the target _blank work properly( as exposed before, while clicking the link, it opens the link in the same page) so I come here for some support of you
Here is the code snippet for you to be able to locate easily inside my website the code while using the code explorer in chrome:
<a href="project-detail.html" target="_blank" class="project-box">
<div class="project-box-inner">
<h5>Boranito<br>Skat</h5>
<div class="project-category">House Design</div>
</div>
</a>
however, will leave the javascript source files here since I am requested to give all possible details here to avoid users being in the need of accessing , here are all the 3 javascript classes handling all the template events which I don't know what they do:
(since I am not able to attach the source code of the javascript classes, I will attach a link for each js file so you could check it, thanks in forward.....
Thank you in advance.
Problem
Your script (scripts.js) on line 13 toggle animsition's feature for links: linkElement: "a.project-box". This will add an handler to every a element with a project-box class. The handler is the following code (I've commented for your understanding):
function(event) {
event.preventDefault(); // prevent the default behavior for links (prevent the behavior you want)
var $self = $(this);
var url = $self.attr('href'); // get the url of the link
if (event.which === 2 || event.metaKey || event.shiftKey || navigator.platform.toUpperCase().indexOf('WIN') !== -1 && event.ctrlKey) {
// open the link in a new tab ONLY IF I clicked on it with the middle mouse button or with Ctrl/Cmd pressed
window.open(url, '_blank');
} else {
// Else do the animation and open the link in the same tab
__.out.call(_this, $self, url);
}
}
Fix
To fix your problem, you can either
Change the way you setup Animsition, be aware that it can modify other links/behaviors in your site
Change the class of your link so it is not matched as the linkElement of your Animsition's setup. For example: remove the class of the a element (it will affect the styling) and you will see that the link opens in a new tab.
Appendix
You can find the handler's code in the devtools -> your link element -> handlers -> click.
I have two small scripts that, when working alone, have no problems.
However, when appearing together in the same document, they fail to work properly.
Script #1: Launch Modal Dialog Box
All pages on my website have links to the following features:
Login Page
Contact Page
E-mail Sign-Up
When a user clicks on one of these links, a lightbox appears and the relevant modal slides in.
To prevent the page from scrolling in the background when the lightbox is active, I have this script:
$(document).ready(function(){
$("[href$='#contact'],[href$='#email'],[href$='#login']").click(function(){
$("body").addClass("noscroll");
});
$("a[href$='#close']").click(function(){
$("body").removeClass("noscroll");
});
});
The CSS is simply:
.noscroll {
overflow: hidden;
}
This function works perfectly, as far as I can tell.
Script #2: Smooth Scrolling
I have several web pages with long content (e.g., Terms of Service, Privacy Policy, etc.)
To make these pages more user-friendly, I've added a table of contents on the top. Each item in the TOC is an anchor link leading to the relevant section on the page.
Example:
TOC
<ol>
<li>Copyrights</li>
<li>Trademarks</li>
<li>Indemnification</li>
</ol>
Content
<h3 id="trademarks">Trademarks</h3>
<p> text text text </p>
The standard behavior for in-page links is an immediate jump to the content. For a more elegant experience, I added a smooth scrolling effect:
$('a[href*="\\#"]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
Like script #1, this seems to work perfectly.
However, when both scripts appear together on the page, nothing works properly.
There are no console errors. The main problem is that the modal script activates the CSS (scrollbar disappears), but doesn't launch the lightbox.
How can both of these scripts work together?
This should do it. However, I coded it blindly. If it doesn't work I could use testing it on the live example, to see where it fails. It should work, though. What it does is simple: it skips smooth-scrolling if any of the these have been pressed: (#contact, #email, #login or #close).
$(document).ready(function(){
$("[href$='#contact'],[href$='#email'],[href$='#login']").click(function(){
$("body").addClass("noscroll");
});
$("a[href$='#close']").click(function(){
$("body").removeClass("noscroll");
});
$('a[href*="\\#"]').on('click', function(event){
var href = $(event.target).closest('a').attr('href'),
exceptions = ['#contact', '#email', '#login', '#close'],
skip = false;
for (i = 0; i < exceptions.length; i++) {
if (href.indexOf(exceptions[i]) > -1) {
skip = true;
}
}
if (!skip) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
}
});
});
Note. The above script combines the two scripts you showed in your question and should replace both.
What does the '\\' on the second script's selector? Having this said, I don't think it is the problem.
As far as I can see, first script is selecting the links by their hrefs starting with a dash character and following four different words.
Second script also selects links contain a dash character in their hrefs.
Normally attached multiple handler to an elements same event should not conflict and they all run. But second script also stops event processing with : event.preventDefault();
I'm assuming this is intended so you need to be more specific on selecting the HTML elements before attaching the event handlers to prevent unwanted behaviours. For example you can modify your second script to be :
$("[href$='#copyrights'],[href$='#trademarks'],[href$='#indemnification']").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
I have a navigation bar with many links. The problem is that I am not done with all the pages. Is there anyway that I can block my users from clicking on certain links and instead display a little message that notifies them that the content will be coming soon?
Edit: It did not allow me to include bootstrap within the tags--but if a solution includes bootstrap, I am comfortable with it.
Edit 2: I have some jQuery effects on the navigation bar, is there anyway to also disable these effects when the link is clicked?
Put a class to your links which are not ready. For i.e. inactive class. And then in jQuery you can simply do it like below:
$( ".inactive" ).click(function(event) {
alert("This page is coming soon!");
event.preventDefault();
});
You can also use alert for displaying message :
HTML
Link
Link Wroking
JS
$('a.inactive').click(function( event ) {
event.preventDefault();
var yesno = alert("Coming Soon");
});
Add class inactive for showing message. For the link which are working, don't add class inactive.
Here is a fiddle.
Simply, you can use href="#" and alert message onclick:
MenuName
I am working on a Wordpress website with a MapSVG plugin. Here it is:http://www.wordpressdemo7.mozaikdesign.fr/
My client want to open specific tab bellow when click on an area of the map. For example, when click on Kalimantan area, the tab Kalimantan will be open.
The problem is I can not select the clicked area. I used the code bellow but no luck.
jQuery(document).ready(function ($) {
jQuery("a[href$=#tanjung]").click(function( event ) {
event.preventDefault();
jQuery("#tabbed-nav").data('zozoTabs').select(4);
});
});
So, can anyone help me out of this problem? Thank you and thank you very much.
Greetings from plugin's author. You have to put it into onClick event handler in javaScript tab inside of MapSVG control panel:
function(){
var regionID = this.id;
if (regionID == "Kalimantan"){
jQuery("#tabbed-nav").data('zozoTabs').select(4);
}
}
I want to send an ajax request when a user leaves a page or closes the window.
Here is my code inside :
<script type="text/javascript">
function sendajax(){
$.ajax({
url: "someurl",
data: mydata,
async : false
});
}
</script>
<script type="text/javascript">
window.onbeforeunload=function(){sendajax();};
</script>
When the event occurs the event fires twice.
Why does in happen?
I know I can prevent it by adding a variable var ajaxSent=true; but may be there is a cleaner way to do it?
UPD:
I replaced the sendajax function content with some other code (without sending ajax) and found out that ajax is not the one causing the problem. It still enters the function twice.
Based on the code in your edit and comments, it looks like it could simply be caused by the broken link you are clicking to leave the page.
Given the following code:
<script>
function doSomething() { console.log('onbeforeunload fired'); }
window.onbeforeunload = doSomething;
</script>
link A
link B
If I click on link A, I get two console log entries, if I click on link B I only get one.
It looks like it could be a quirk of how the browsers handle their internal "This web page has not been found" pages, causing your page to be refreshed and closed again before showing the message, leaving you with two occurrences of the onbeforeunload event.
I had the same problem and it took a while to understand and resolve, sharing the case details:
There was a custom JS within our template that manipulated the menu.
It caused the unload to fire twice, only when clicking on the menu links, not on other links, and only in IE/EDGE.
We eventually stopped the propagation on these links and the problem was resolved.
$('.SELECTOR a[href^="http://"]').on('click', function(e){
e.stopPropagation();
});
It's a specific bug in your application, therefore you won't find too much information on google.
You could try the following code:
<script type="text/javascript"><br>
window.onbeforeunload=function sendajax(){<br>
$.ajax({<br>
url: "someurl",<br>
data: mydata,<br>
async : false<br>
});<br>
};<br>
</script>
or you can define sendajax() {} at some place and the use it like onbeforeunload = "sendajax()" not as onbeforeunload = "function () { sendajax() }"
beforeUnload is cancellable
I know this post is quite old but from the Chrome Pagelifecycle API documentation, browsers can occasionally partially unload pages to save resources. https://developers.google.com/web/updates/2018/07/page-lifecycle-api beforeUnload is not reliable to make sure that the page is closed. This especially happens on android devices when the screen is locked.
There is a jsfiddle that I found somebody wrote that you can test out https://jsfiddle.net/ov6b9pdL/. Keep the screen locked for 5-10 minutes on Chrome android and you'll see that beforeUnload is fired without even closing the tab.
$(document).ready(function() {
window.addEventListener('beforeunload', showLoader);
});
var showLoader = function() {
$('#loader').show();
};
Agree with AlonMichaeli's concept.
In my application there was anchor tag wrapped with in a div together with couple of spans. When Anchor was clicked on a dirty page, there was couple of 'Leave site' notifications.
It worked fine if any other part of menuItem (div or spans) are clicked.
So in custom javascript method I've added stopped propagation and preventDefault only if anchor tag is clicked. Somehow in this case preventDefault is necessary.
function menuItemClicked(event: JQueryEventObject) {
var item = $(event.target);
if (item.is(".anchor-item")) {
event.stopPropagation();
event.preventDefault();
}
href = item.closest(".anchor-item").attr("href");
if (!event.ctrlKey && href) {
window.location.href = href;
}
}