Develop Reference

Detect that all buttons have been clicked on a per user basis

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>

auto click button after another button was clicked on other page

I got 2 pages: index.html and contact.html and each of them have a button (a tag for index page). When I click a button on the contact page, it should redirect to the index page and auto click on the index page. Is this possible?
Here my index page:
<div id = "wrapper">
<a id="btn-show-content" href="#"></a>
</div>
Here's my contact page:
<div id = "contact-wrapper">
<button id="btn-back"></button>
</div>

you can add query to button in contact page
<div id = "contact-wrapper">
</div>
Then, when the index page loads, it triggers triggerMe() function in the index page, you do the check of url hash
<body onload="triggerMe()"></body>
<script>
function triggerMe() {
var check = location.hash;
if (check == "triggerbtn") {
//button trigger even though you do not click on it
$('#btn-show-content').trigger('click');
}
}
</script>
I assume that you only need to trigger the function when click button in contact page. If you need the action happen all time you go to index page, you can use
$(document).ready(function() {
$('#btn-show-content').trigger('click');
});

You can use the JQuery .trigger() function. For your problem you wish to click a button on the contact page and it'll redirect you to the index page. When you go onto the index page and the document loads, this function will be performed.
Documentation here
(document).ready(function(){
$('#id').trigger('click');
});
In order to take away the issue of not being able to use Index.html everytime without it autoclicking. You can pass over a value to trigger the function on contact.html and then parse it in index.html, check out the solution to this question for that:
How to pass values from one page to another in jQuery

How to hide/add button depending on the place of navigation using Jquery

I have a bootstrap dialog button, when clicked navigates t a certain url page. That page has certain elements ( for ex) that is conditionally shown depending from where it was navigated from. In short im trying to use an existing template to show/hide and add button, depending on the 'where' navigation.
For Ex: On click of the button from the dialog message,
$("#alert-proceed-button").on("click", function(){
window.location.href= '#accounts/admin';
}
it navigates to a url containing the following <div>:
<div id="account">
<button class="save-changes">Save changes</button>
</div>
and that url contains the following on that page. now when i navigate from elsewhere, i'd like to show the <button class="save-changes">Save changes</button>button, however when i navigate from the dialog message (i.e. <button id="alert-proceed-button"/>, i'd like to hide the 'Save Changes' button and append/add a new 'Add Service' button in its place:
<div id="account">
<button class="add-service">Add Service</button>
</div>
Is this possible? Any ideas on how this can be done??
Thanks!

You can send both on the page and set the css display attribute of one to be hidden. Then you can use jQuery to switch that. You can check the event object to see if where it came from, so it only switches them when it originates from the alert-proceed-button.
function toggleSave () {
$('.save-changes').attr('display', 'none')
$('.add-service').attr('display', 'block')
}
Assuming you already have a listener on the click event for links on your page add this line:
if (e.target.id === 'alert-proceed-button) {
togglesave()
}

Generating a link dynamicaly according with dropdown list value

I am using Joomla 2.5 with Mootools and a plugin (Chronoforms) to create a tabbed form.Right now I have a dropdown menu that is loading some data from the DB via PHP. I have a button that I wish could load some values depending on the value of the dropdown, so I tried:
window.addEvent('domready', function() {
$('province_aw').addEvent('change', function() {
document.getElementById('link1').href = "index.php?option=com_chronoforms&chronoform=listSpecific-3&id_province="+index+"&id_ch="+b;
});
});
with this button
<a class="jcepopup" id="link1" href="javascript:void(0);" rel="{handler:'iframe'}"> <input type='button' name='prueba' id='prueba' value='...' /> </a>
The dropdown is actually changing the value of the links HREF, but it keeps opening a blank iframe everytime I click on it.

The dropdown already works, it changes the button and if you right click to open the link in a new tab/window it works good.
Your problem is elsewhere, not in the code you posted. I suggest checking your jQuery script, in my console its not complete, it ends in the middle of a function, looks like a broken file. Check also the jcemediabox-popup-iframe, check for versions and opening it with simple content for debugging.

On Click: Open a Pop-up Div on a Different Page

On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)

When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});

You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.

Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/