I am trying to make it when a user clicks anywhere on the page, a new tab opens. I only want this to happen once, as it would other-wise make it hard for them to navigate around my site. Here is my code:
document.onclick = function() {
window.open('http://example.com');
};
My problem is like I said, it happens every time a user clicks. How can I make it so it only happens once?
Thanks!
You could simply keep the count !
<script type="text/javascript">
var count=0;
document.onclick=function()
{
if(count==0){
window.open('http://example.com');
}
++count;
}
</script>
Just remove that onclick should be enough:
document.onclick = function() {
window.open('http://example.com');
document.onclick = null;
};
Demo:
document.onclick=function() {
alert('only show once!');
// Unset the onclick function.
document.onclick = null;
}
Add a name for the window
window.open('http://example.com','_test');
If you can use jquery:
$(document).one('click', function() {
window.open('your-url')
});
Related
for(i=0;i<document.querySelectorAll(".skill-images").length;i++){
document.querySelectorAll(".skill-images")[i].addEventListener("click", function (){
document.querySelectorAll(".skill-images")[i].classList.add("imghover");
setTimeout(function(){
document.querySelectorAll(".skill-images")[i].classList.remove("imghover");
},500);
});
}
Where am i going wrong? I just need to add a class imghover on a click.
My all images have a class = "skill-images:
Please someone check and solve it!
You're binding a click event, which is triggered when user clicks on the element, not hover over it. If possible, it's better to stick to css for hover states and do it like this:
.skill-images:hover {
// Put here your rules which were defined for .imghover
}
try this
var skillImagesElement = document.querySelectorAll(".skill-images");
for(var i=0; i<skillImagesElement.length;i++){
skillImagesElement[i].addEventListener("click", function (e) {
var eachElement = this;
eachElement.classList.add("imghover");
setTimeout(function(){
eachElement.classList.remove("imghover");
},500);
},false);
}
So here is my code
prev
prev
How do I make it both click if I click any of it ?
If I click .slider-1-prev, at the same I click .slider-2-prev
If I click .slider-2-prev, at the same I click .slider-2-prev
How to make it by javascript ?
As well as triggering the event on the other link, you need to shield against infinite repeating (e.g. with a shield variable):
var inClick = false;
$(document).ready(function {
$('.slider-1-prev').on('click', function {
if (!inClick) {
inClick = true;
$('.slider-2-prev').trigger('click');
inClick = false;
}
});
$('.slider-2-prev').on('click', function {
if (!inClick) {
inClick = true;
$('.slider-1-prev').trigger('click');
inClick = false;
}
});
})
If you want a shorter version, you can listen for both on one handler and click "the other":
var inClick = false;
$(document).ready(function {
var $sliders = $('.slider-1-prev,.slider-2-prev');
$sliders.on('click', function {
if (!inClick) {
inClick = true;
// Click the one that was not clicked (not this)
$sliders.not(this).trigger('click');
inClick = false;
}
});
})
Another option is a bit more complicated as you need to turn the handler off and then on again. Stick with this simple one for now.
The on/off approach involves disabling the handling while executing it, so that it will not trigger again until you reconnect it. The downside is you need to reference a separate function so that it can effectively reference itself:
$(document).ready(function {
var $sliders = $('.slider-1-prev,.slider-2-prev');
// Define separate named function
var clickTheOtherOne = function(){
// Disable the click
$sliders.off('click');
// Click the one that was not clicked (not this)
$sliders.not(this).trigger('click');
// Reenable the click handler
$sliders.on('click', clickTheOtherOne);
}
// Initial enabling of the handler
$sliders.on('click', clickTheOtherOne);
});
If they're going to behave the same, why not define only one function for both?
$('.slider-1-prev, .slider-2-prev').click(function(){
//... mutual code
});
I can't figure why you need to do what you ask, but try this approach:
js code:
// this will work on all classes that start with 'slider-prev'
$('*[class^="slider-prev"]').on('click',function{
// do something
});
Of course you will need to alter your htm code to:
prev
prev
this should do the trick
$(document).ready(function{
$('.slider-1-prev').on('click',function{
$('.slider-2-prev').trigger('click');
});
$('.slider-2-prev').on('click',function{
$('.slider-1-prev').trigger('click');
});
})
Try this -
$('.slider-1-prev').click(function(){
$('.slider-2-prev').trigger('click');
});
// If you need the opposite, then do -
$('.slider-2-prev').click(function(){
$('.slider-1-prev').trigger('click');
});
Made this custom alert box:
<script type="text/javascript">
$(function () {
var $alert = $('#alert');
if ($alert.length) {
var alerttimer = window.setTimeout(function () {
$alert.trigger('click');
});
$alert.animate({ height: $alert.css('line-height') || '80px' }, 200).click(function () {
window.clearTimeout(alerttimer);
$alert.animate({ height: '0' }, 200);
});
}
});
</script>
I want it to be open until the user chooses to click on it or anywhere else on the screen. How do I make this happen?
Assuming that clicking anywhere (in, or out, of the alert box itself) is supposed to hide/remove the alert:
$('body').click(
function(){
if ($alert.is(':visible')){
$alert.hide();
}
});
should work, I think.
If you want to justs get rid of it, try calling the hide() function when an onclick event is triggered.
$.click(function() {
$alert.hide();
});
The top answer here is excellent IMO. It covers the part about anywhere else on the screen.
The way to do it is to bind a click event to the body and stop propagation on any event that happens inside the area that isn't supposed to trigger closing the alert.
How can I disable onbeforeunload for links?
var show = true;
function showWindow(){
if(show){
alert('Hi');
return "Hi Again";
}
}
$('a').click(function(){
show = false;
});
window.onbeforeunload = showWindow;
This is what I have, but it still shows when I click on an 'a' element
Button code:
<button type="submit" class="submitBtn"><span>Open Account</span></button>
Instead of
show = false;
try
window.onbeforeunload = null;
This will simply unbind the function from the event.
I just ran into the same problem and found a very easy solution:
$("a").mousedown(function() {
$(window).unbind();
});
This will remove the onbeforeunload event just before the click event is triggered.
Use following code to unbind the event:
javascript:window.onbeforeunload=function(){null}
For some reason, using window.onbeforeunload = null did not work for me.
What did the trick instead was adding and removing the listener accordingly:
let onBeforeUnloadListener;
// Mounting
window.addEventListener('beforeunload', onBeforeUnloadListener = ev => {
ev.preventDefault();
ev.returnValue = 'Any';
});
// Unmounting
window.removeEventListener('beforeunload', onBeforeUnloadListener);
This idea came to mind due to using getEventListeners(window), which shown the active beforeunload listeners.
I have created a jQuery content switcher. Generally, it works fine, but there is one problem with it. If you click the links on the side multiple times, multiple pieces of content sometimes become visible.
The problem most likely lies somewhere within the click event. Here is the code:
$('#tab-list li a').click(
function() {
var targetTab = $(this).attr('href');
if ($(targetTab).is(':hidden')) {
$('#tab-list li').removeClass('selected');
var targetTabLink = $(this).parents('li').eq(0);
$(targetTabLink).addClass('selected');
$('.tab:visible').fadeOut('slow',
function() {
$(targetTab).fadeIn('slow');
}
);
}
return false;
}
);
I have tried adding a lock to the transition so that further clicks are ignored as the transition is happening, but to no avail. I have also tried to prevent the transition from being triggered if something is already animating, using the following:
if ($(':animated')) {
// Don't do anything
}
else {
// Do transition
}
But it seems to always think things are being animated. Any ideas how I can prevent the animation being triggered multiple times?
One idea would be to remove the click event at the start of your function, and then add the click event back in when your animation has finished, so clicks during the duration would have no effect.
If you have the ability to execute code when the animation has finished this should work.
Add a variable to use as a lock rather than is(:animating).
On the click, check if the lock is set. If not, set the lock, start the process, then release the lock when the fadeIn finishes.
var blockAnimation = false;
$('#tab-list li a').click(
function() {
if(blockAnimation != true){
blockAnimation = true;
var targetTab = $(this).attr('href');
if ($(targetTab).is(':hidden')) {
$('#tab-list li').removeClass('selected');
var targetTabLink = $(this).parents('li').eq(0);
$(targetTabLink).addClass('selected');
$('.tab:visible').fadeOut('slow',
function() {
$(targetTab).fadeIn('slow', function(){ blockAnimation=false; });
}
);
}
}
return false;
}
);
Well this is how i did it, and it worked fine.
$(document).ready(function() {
$(".clickitey").click(function () {
if($("#mdpane:animated").length == 0) {
$("#mdpane").slideToggle("slow");
$(".jcrtarrow").toggleClass("arrow-open");
}
});
});
this is not doing what your code does ofcourse this is a code from my site, but i just like to point how i ignored the clicks that were happening during the animation. Please let me know if this is inefficient in anyway. Thank you.
I toyed around with the code earlier and came up with the following modification which seems to work:
$('#tab-list li a').click(
function() {
$('.tab:animated').stop(true, true);
var targetTab = $(this).attr('href');
if ($(targetTab).is(':hidden')) {
$('#tab-list li').removeClass('selected');
var targetTabLink = $(this).parents('li').eq(0);
$(targetTabLink).addClass('selected');
$('.tab:visible').fadeOut('slow',
function() {
$(targetTab).fadeIn('slow');
}
);
}
return false;
}
);
All that happens is, when a new tab is clicked, it immediately brings the current animation to the end and then begins the new transition.
one way would be this:
$('#tab-list ul li').one( 'click', loadPage );
var loadPage = function(event) {
var $this = $(this);
$global_just_clicked = $this;
var urlToLoad = $this.attr('href');
$('#content-area').load( urlToLoad, pageLoaded );
}
$global_just_clicked = null;
var pageLoaded() {
$global_just_clicked.one( 'click', loadPage );
}
As you can see, this method is fraught with shortcomings: what happens when another tab is clicked before the current page loads? What if the request is denied? what if its a full moon?
The answer is: this method is just a rudimentary demonstration. A proper implementation would:
not contain the global variable $global_just_clicked
not rely on .load(). Would use .ajax(), and handle request cancellation, clicking of other tabs etc.
NOTE: In most cases you need not take this round-about approach. I'm sure you can remedy you code in such a way that multiple clicks to the same tab would not affect the end result.
jrh.
One way to do this to use timeStamp property of event like this to gap some time between multiple clicks:
var a = $("a"),
stopClick = 0;
a.on("click", function(e) {
if(e.timeStamp - stopClick > 300) { // give 300ms gap between clicks
// logic here
stopClick = e.timeStamp; // new timestamp given
}
});