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>
Related
I'm working on designing a website, which I have two pages the first page contains a button when it's clicked the hidden class belongs to some element from the second page must be removed. I searched a lot but nothing works for me, Hope you can help me.
The first page contains something like this:
<button class="btn btn-primary add" >Click me!</button>
The second page contains something like this:
<div class="hidden" id="someDivId">Some content!</div>
jQuery code in the first page:
$('.add').click(function (){
//Access the second page
//Remove hidden class from #someDivId
});
You can use localStorage for storing data through the pages. After user opens website page with hidden element you just call javascript which checks the localStorage.
$(".add").click(function() {
//sets hidden on false
localStorage.setItem("hidden", false);
})
//on another website page load check localstorage value
let isHidden = localStorage.getItem("hidden") ? localStorage.getItem("hidden") : false;
if(isHidden) {
$(".hidden").removeClass("hidden");
}
Scenario: user profile. I would like to be able to display a user name with a popover that displays a limited amount of information from the user profile. So far, I have that part working. I can build it on the fly and have it do what I need. The popover works perfectly.
What I would also like to do is have the user be able to click on the user name and bring up a Bootstrap modal form with more information about the user (if provided). The first problem I am seeing is that it appears the data-toggle attribute can only have a single setting:
echo '' . $user_row['user_name'] . '';
In that example, if I add the modal to the data-toggle attribute it doesn't seem to do me much good.
I have discovered by tinkering (and that is why the class 'userprof' in the code above), that a JavaScript click event can be triggered (right now all I'm doing is a basic JS alert dialog to test), but from there I would want to load the modal. I am not sure if I can make it all work.
I have a set of functions I've used successfully for another modal (calling this one 'userModal') that I got some help from someone here a while back with -- is it possible to call that from the click event?
// code to open the modal with the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget); // Button that triggered the modal
var title = button.data('title'); // Extract info from data-* attributes
var body = button.data('body'); // Extract info from data-* attributes
var modal = $(this);
modal.find('.modal-title').text( title );
modal.find('.modal-body').append( body );
});
// when modal closes, clear out the body:
$('#userModal').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
Since these are "anonymous" functions I am not sure I can call them ... feeling a bit lost in the code here. Any help pointing me in the right direction would be great. I'd even be willing to consider a different idea, but I would like this kind of functionality (hover and click) for this situation and possibly something else. Thanks!
You're listening for the modal to show itself, when the DOM is showing the modal.
try using something like this, and use a button or a link with data-toggle="modal"
$(document).on('hidden.bs.modal', '#userModal', function ()
{
$(this).find(".modal-body").text('');
});
for reference https://jsfiddle.net/y063mu4t/1/
You can try:
$(document).on('click', 'a.userprof', function(){
$('#userModal').modal('show');
});
To make your callback function work, you need to add according data-* attribute to each of the <a> tag.
This is all I want to do:
User click on an image button
It displays a confirmation dialog with a label and a text field and OK button
If they enter a value and click OK button then returns the value which can then be used to invoke a constructed hyperlink based on the value entered.
If they click on cancel leave value blank then the popup is just dismissed
But the page is generated dynamically and there may be many rows that have an image button that will open the said popup, I dont want to have to add a javascript function for each popup required.
Im already using JQuery a little bit so I think using JQuery Dialog is the way to go but I'm not getting anywhere with actually implementing this seemingly simple task.
I'm looking for a simple example without any extraneous cruft that I dont actually need.
Update With More detail
This is what I currently have in the calling htmnl
There are two buttons within a element, the first is an input button is fine, the second is currently just invokes a hyperlink but it needs a value for the discogsid parameter (currently xxxxx). So I want clicking on the second one to provide user with a way to enter a value and then if they enter something use that as the value of discogsid in the url
<td>
<input title="View tracks in this release" onclick="return toggleMe(this,'232')"
src="/images/open.png" alt="Open" type="image">
<a href="/linkrelease/?discogsid=xxxxxx&mbid=e3c0e7c7-df7c-4b51-9894-e45d1480e7b5" target="_blank">
<img src="/images/link.png"</a>
</td>
Keep it simple :)
try this http://jsfiddle.net/7r1z8v7u/
$("div").click(function() {
var answer = prompt("Pls provide your input");
if(answer != null) myHyperlinkBuilder(answer);
}
Here I have used "div" as selector. Through this, in one shot, we can handle click behavior for all the images.
After that, it is simple JavaScript to display dialog box. Only when the user has enter some input, through if condition we proceed with building our custom URL.
Hope this helps!
Using jQuery you will need to attach an on click event to your link. You can do this in any way you deem acceptable for your application. I'll use a class in my example.
Test
$('.requireQueryEntry').click(GetSearchQuery);
Your click handler will need to prevent the default action since you are using a link. Which means you'll have to reissue your navigation in your code.
function GetSearchQuery() {
var thelink = $(this);
$("#dialogSearch").dialog({
resizable: false,
modal: true,
title: "Search",
height: 180,
width: 340,
buttons: {
"Search": function () {
$(this).dialog('close');
callback(thelink);
},
"Cancel": function () {
$(this).dialog('close');
}
}
});
//This line prevents the default action and the propagation of the event. It only works this way because jQuery handles it that way for us.
return false;
}
function callback(theLink) {
var href = theLink.attr("href");
var target = theLink.attr('target');
var newQuery = $("#googleQuery").val();
if (newQuery.length > 0) {
href = href.replace("xxxxxx", newQuery);
} else {
return; // end the function here when the user enters nothing
}
//This may cause popup blockers
var win = window.open(href, target);
$("#googleQuery").val("");
}
I've put together an example: http://jsfiddle.net/anh7g8eb/2/
My difficulty with both of these solutions was actually get the dialog to be invoked from the html. both solutions used that didn't compatible with my situation.
I worked out that as in the solutions the hyperlink was not actually a hyperlink that if I changed it to a button like I do for the first option things would be easier, so the hmtl changed to
<td>
<input title="View tracks in this release" onclick="return toggleMe(this,'30')" src="/images/open.png" alt="Open" type="image">
<input title="Link" onclick="return promptForDiscogsReleaseId(this,'676fdad7-69b5-4f38-a547-a8320f01ad59')" src="/images/custom_link.png" alt="Link" type="image">
</td>
and added this javascript function that shows a prompt and then creates a new page with the derived hyperlink
javascript function to
function promptForDiscogsReleaseId(btn,mbReleaseId) {
var answer = prompt("Please the Discogs Release Id you want to link this release to:");
window.open("/linkrelease/?discogsid="+answer+"&mbid="+mbReleaseId, "_blank");
}
and it works.
I'm using WordPress Liveblog and a not-yet merged pull-request so will reference the code directly on the GitHub repo to hopefully explain my question better. Please see here for a working example of the plugin code in action.
The WordPress comment form is shown when I click on the Reply button. Before clicking the button, the form is hidden from view.
The comments are shown when I click on the second reply button > Reply
My aim is to replace both buttons with one single button called Toggle. When clicked, I'd like both the WordPress comment form AND the comments to be displayed.
So far I have done the following...
My Toggle button:
<a class="toggle" href="#">Toggle</a>
My script (modified from here):
jQuery('a.toggle').click(function () {
var openImgUrl = 'open.png',
closeImgUrl = 'close.png';
var $newsItem = jQuery(this).closest('.news-text'),
$newsContent = $newsItem.find('.news-content'),
isContentVisible = ($newsContent.is(':visible'));
// slide up all shown news-items - but its expected that only one is visible at a time
jQuery('.news-text').find('.news-content').slideUp(function () {
// on animation callback change the img
jQuery('.news-text').find('.toggle > img').attr('src', openImgUrl);
});
if (!isContentVisible) { // if the new-item was hidden when clicked, then show it!
$newsContent.slideDown(function () {
// on animation callback change the img
$newsItem.find('.toggle > img').attr('src', closeImgUrl);
});
}
return false; // stop postback
});
Using my script and toggle button, when the Toggle button is clicked, comments are displayed under each entry. When the toggle button is clicked again, the comments are hidden. However, this doesn't take the WordPress comment form into account.
How can I get the WordPress comment form to display along with the comments when the Toggle button is clicked?
Liveblog Glossary:
Entry: An entry is a top-level comment just like a standard 'comment' made in WordPress.
Comment: Comments can be made on entries.
I found comment_reply_link to be the answer!
http://codex.wordpress.org/Function_Reference/comment_reply_link
Using this function to output the reply link enabled me to do what I needed. I just had to change my selector in my script to use the comment reply button as the toggle and remove the original toggle button I had set up. For example:
jQuery('a.comment-reply-link').click(function () {
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.