I am new to javascript .I want to have a javascript code that allow to open new tab for a link just once when you click on either buttons but when you click on same button or other button , the script wont work .For example : After clicking on the download or printing button I want to open new tab of my facebook page but I want to do it just once , so if that user clicked on download button that's it .So even if he clicks on same button multiple times or other print button multiple times the facebook function wont work at all
function facebook() {
window.open("https://www.facebook.com");
}
<button onclick="facebook();printContent('exportContent')" >Print</button>
<button onclick="facebook();Download();" >Download</button>
I tried to use this.onclick=null in the buttons but it cause two problems : 1/ It make other functions just work once while I want other functions to keep working each time the buttons are clicked and facebook function to work just once ; 2/ when click on one of the buttons new tab opens and when you click on other button it still open too .
You can create a global variable to keep track of how many times you invoked facebook function
var counter = 0;
function facebook() {
if(counter === 0) {
window.open("https://www.facebook.com");
counter += 1;
}
}
function Download() {
console.log('dl')
}
function printContent(msg) {
console.log(msg)
}
<button onclick="facebook();printContent('exportContent')" >Print</button>
<button onclick="facebook();Download();" >Download</button>
Related
I was developing an application that programmatically shows a popup after 5 seconds, but i found out that web browsers like firefox, chrome, internet explorer, etc. were blocking the popup.
Popup blocking
In the past, evil sites abused popups a lot. A bad page could open tons of popup windows with ads. So now most browsers try to block popups and protect the user.
Most browsers block popups if they are called outside of user-triggered event handlers like onclick
By default modern web browsers block popups triggered by a function or code. But does not block popups triggered by clicking on buttons.
// popup blocked
window.open('https://javascript.info');
// popup allowed
button.onclick = () => {
window.open('https://javascript.info');
};
So i had to bypass their blocking policy by programmatically clicking on the button after 5 seconds to still initiate the same popup.
So i decided to post this as a question and also answer it by myself for those that might be facing the same issue.
Step 1.
Create a button, give it and ID and pass a function name on the onClick
<button id="buttonID" onclick="trigerPopup()"></button>
Step 2
Create trigerPopup function
function trigerPopup(){
alert("Hello I am poping up after 5 seconds");
//your code goes here
}
Step 3
After 5 seconds, programmatically clicked on button
window.setTimeout(function () {
//this will trigger a click on the button
const buttonID = document.getElementById('buttonID').click();
}, 5000);
Thanks guys
Step 1.
Create a button, give it and ID and pass a function name on the onClick
<button id="buttonID" onclick="trigerPopup()"></button>
Step 2
Create trigerPopup function
function trigerPopup(){
alert("Hello I am poping up after 5 seconds");
//your code goes here
}
Step 3
After 5 seconds, programmatically clicked on button
window.setTimeout(function () {
//this will trigger a click on the button
const buttonID = document.getElementById('buttonID').click();
}, 5000);
I work in a Call center (ticket based Support) and for me to get a ticket I need to click on 2 Buttons. the one that opens the tickets section, and the one that actually gets me a ticket. After i click on the Get_ticket class, the ticket box closes. So i need to start again to click on the "Tickets" Button, and then on Get_Ticket. Tickets button -> Get_ticket. And repeat and repeat. I want to tell Google console to help me with this. I found a way but it's not very friendly. I tried with the button.click function at a different interval but it's not working...If i put the function separately, it's working, but when I put the functions at the same time in Console, it's not working. Can you please give me an advice ? Those are the functions:
1.(click on TICKETS)
var button = document.getElementsByClassName("_1f8o8ru7")[0];
setInterval(function(){button.click();},2000);
2.(Click on GET TICKET)
var button2 = document.getElementsByClassName("_sl2x43m")[0];
setInterval(function(){button2.click();},2500);
The second interval should be added inside the first interval. I also recommend to use setTimeout, instead of setInterval.
setInterval(function(){
var button = document.getElementsByClassName("_1f8o8ru7")[0];
button.click();
setInterval(
function(){
var button2 = document.getElementsByClassName("_sl2x43m")[0];
button2.click();
},2500);
},2000);
After you figure it out, you can save your code in a js file: my_script.js and use Chrome extension JS Injector to automatically inject it in your page, without needing to use Chrome DEV Tools.
you need to call first button click on click of first button call another method on given timeout
so first time 1 button is clicked after on click of first button call another button method with 500 timeouts will be ok no need to do 2000 or 2500 timeout
I'm creating a "Complete tasks to unlock" system, but I'm very newbie on coding and can't make it work. I'm literally weeks trying to search ways to do it, but nothing until know. I have only the very basic.
I'll separate all that I need and I really apreciate any help of you guys.
Oh, and I'm using Wordpress and Visual Composer for this.
Well, I already have a code for it (or almost), but isn't working properly as I want.
What I need is that a certain button (.Test) only appear after some completed tasks.
Inittialy, the tasks will be "Visit this link to unlock". So I'll give some buttons, and each button will open a different link. When clicked, the button will trigger the action, unlocking the button to get the cd-keys/links. But the problem is that I need the user click on all the buttons for it. On the code that I'm using, when the user click in just one task button, the .Test appears.
Here's the code that I'm using:
jQuery code
<script>
jQuery(document).ready(function(){
jQuery('.Like').click(function() { //Will open a Facebook page
jQuery('.Test').show(); //Show the button for the link generation
});
jQuery('.Follow').click(function() { //Will open a Twitter page
jQuery('.Test').show(); //Show the button for the link generation
});
});
</script>
CSS code
.Test {
display: none;
}
.Like,
.Follow {
cursor: pointer;
}
I tried to use an && operator, but it doesn't work. I need that the user click on all the link buttons to show the button generator. Not just one.
thanks for any help.
If you need more info, please ask me.
One approach would be counting the clicks on these certain buttons, e.g. through storing the buttons in a Set and getting the Sets size:
jQuery(function(){
var clicked=new Set;//a new unique set
jQuery('.social').click(function() { // some button clicked
clicked.add(this); //add this button to set
if(clicked.size>=3) alert("wohoo, all buttons clicked");//actually: three different buttons with class social clicked
});
});
<button class="social">Twitter</button>
<button class="social">Facebook</button>
<button class="social">GitHub</button>
http://jsbin.com/fanuloxori/edit?output
Note that Sets are quite new, may replace it with an unique array.
You may assign unique ids to the buttons, so you can keep track of the clicked ids, which then can be stored in a database, or on the users device:
jQuery(function(){
var clicked=new Set((localStorage.getItem("clicked")||"").split(","));//a new unique set may restored from storage
jQuery('.social').click(function() { // some button clicked
clicked.add(this.id); //add this buttons id to set
localStorage.setItem("clicked",[...clicked].join(","))
if(clicked.size>=3) alert("wohoo, all buttons clicked");//actually: three different buttons with class social clicked
});
});
<button class="social" id="twitter">Twitter</button>
<button class="social" id="facebook">Facebook</button>
<button class="social" id="github">GitHub</button>
#Jonasw Thank you dude. Using the code bellow without id works fine. Now I have to click on all the buttons (I had set the classes of all for "social") to show the hiden content. But I couldn't use it with the data storage of your second code.
<script>
jQuery(document).ready(function(){
var clicked=new Set;
jQuery('.social').click(function() {
clicked.add(this);
if(clicked.size>=2) jQuery('.Test').show();
});
});
</script>
I'm trying to create a custom alert function for a website. It checks if there is anything in some form fields, and if there is, it should display a confirmation message if you're trying to navigate away. (Excluding the submit and cancel button.)
I have this code to check for the data, and navigation excluding certain buttons:
var leave_page_confirm = true;
function save_data_check() {
var msg;
if (leave_page_confirm === true) {
$('.input-right').each(function() {
if (this.value) {
leave_page_alert();
}
});
}
}
window.onbeforeunload = save_data_check;
Buttons that I want to exclude from being seen as navigating away from the page will contain:
onclick="leave_page_confirm=false;"
The leave_page_alert function is defined like this:
var leave_page_alert = function() {
$("#custom-alert-overlay").show();
}
Without knowing the CSS and HTML, it suffices to say that "custom-alert-overlay" is the id of the element which will contain the buttons.
What I'm stumped on is what to add to "leave_page_alert()" in order to prevent the page from loading until one of the buttons is clicked.
For arguments sake, suppose that "custom-alert-overlay" contains these buttons:
<button type="button" id="stay">Stay on this Page</button>
<button type="button" id="leave">Leave this Page</button>
Despite Googling around, I haven't managed to dig up exactly how one would do this...
I have a application where i have disabled the back button of IE8 by using the following code.
window.history.forward();
function noBack() {
window.history.forward();
}
I know this code takes the page back and again moves the page forward. i have called a function onload of the page which makes a textbox read only. i have used the following code to make it read only.
$("#IDofTheTextBox").attr('readonly',true);
but if i select the textbox and try to edit by pressing "BackSpace" button, IE back button is getting invoked and the textbox which was readonly is not readonly anymore. Can anyone help me how to solve this issue?
The answer is simply "NO"
If you're trying to prevent the user from losing their work, try something like:
window.onbeforeunload = function() { return "Are you sure want to leave this page?."; };
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);
You add the above javascript functions in the js file and onload call the function changeHashOnLoad().
its working fine in IE8. i just tested it.
I dont know what your page is trying to do... but this is what we do:
We have an assessment where we do not want the browser buttons enabled... because we run ajax/logic when the user hits next/back etc (to determine what to display next based on their inputs). Back and forward buttons can muddy that process up.
So..... we have users open our assessments in A NEW WINDOW so the back button is already disabled...(there is no prior history in a new window). Then, Our next/back buttons use window.location.replace(url); This will prevent a history item from being created. Therefore, the back/forward buttons are never enabled and they must use the next/prev buttons to navigate our tool.
I would not try to muck with the buttons outside of something like the example I provided.