I'm using this control, which is the version 3 of jquery smart wizard.
This is the code of smart wizard:
$('#wizard').smartWizard({transitionEffect:'slide'});
This are helper functions in javascript:
function disableNextButton(){
var $actionBar = $('.actionBar');
$('.buttonNext', $actionBar).addClass('buttonDisabled').off("click");
}
function enableNextButton(){
var $actionBar = $('.actionBar');
$('.buttonNext', $actionBar).removeClass('buttonDisabled');
}
The css class actionBar, is used to style the area where are placed previous, next and finish buttons. The style buttonNext is applied to next button and the style buttonDisabled is used to put gray color to a button. All the referred styles are contained in smart wizard css files.
The problem is that I can disable button click event using ".off" function of jquery, but I cannot restore the original event handler with ".on".
My question is how do I restore next button click event after disabling button?
Thanks.
.off unlinks the event handler, so you need to re-attach the event handler. You can't just say
$('.buttonNext', $actionBar).removeClass('buttonDisabled').on("click");
because jQuery doesn't "remember" what the event was, or if you have more than one event, which event you wanted bound. You can use the click shorthand to specify the function like this:
$('.buttonNext', $actionBar).removeClass('buttonDisabled').click(function() {
// Code for your click goes here.
});
After reading the code of jquery smartwizard, I've decided to do the following for enableNextButton function:
function enableNextButton($wiz){
var $actionBar = $('.actionBar');
$('.buttonNext', $actionBar).removeClass('buttonDisabled')
.bind('click', function() {
$wiz.smartWizard('goForward');
return false;
});
}
The jquery wizard object is passed as a parameter.
This solves the problem of restoring click functionality, although repeating code from smart wizard.
Related
So, i have this code snippet that opens a modal:
<button id="trigger-overlay" class="order">Open Overlay</button>
Now, i wanted to include it in Wordpress menu, but i cant add button tag there, so i added:
Open Overlay
And i am using jquery to add a ID to that link, like this:
$('.order').attr('id','trigger-overlay');
ID is added, but link doesnt open anything, aka, it links to "#" instead of opening a modal...
How could i fix this to make it work?
Thanks!
This thing may causing due to events binging order. So, your code $('.order').attr('id','trigger-overlay'); is executing right after click's binding event (I think that event looks like this one: $('#trigger-overlay').click(function() { ... });.
If you have ability to change that binding, please use jquery.on method: http://api.jquery.com/on/
So that code will looks like: $(document).on('click', '#trigger-overlay', function() { ... });.
Also you can just move $('.order').attr('id','trigger-overlay'); above the script with that event binding.
Based on your
<button id="trigger-overlay" class="order>Open Overlay</button>
I'm not sure how you got a modal to trigger, since it is not connected to an event handler like:
<button onclick="turnOverlayOn()">Demo Button</button>
In this case, there would be a function that targets the overlay/modal and turns its CSS display property from none to block or inline-block (however you would like to display it):
var turnOverlayOn = function () {
$('targetOverlayId').css('display','block')
}
I suggest focusing on attaching an onClick event that triggers a function that does what you want to make the overlay appear.
The function used to turn the overlay off could be:
var turnOverlayOff = function () {
$('targetOverlayId').css('display','none')
}
You could attach this to a different anchor tag or button to turn the overlay off.
Note: the event should work the same for an anchor tag as it does for a button.
In my understanding you want to trigger the button click event. Using the a tag with class order.
try
jQuery(document).on('click','.order',function(){
jQuery('#trigger-overlay').click();
});
You can trigger the click event using jquery. Since I have no knowledge of your DOM structure jQuery(document).on('click','.order',function().. will work even if your elements are dynamic (added to the DOM after the script execution) because the click event is bind to the document.
NOTE:
When using wordpress always use jQuery instead of $ to avoid conflicts.
I'm making a small game that involves smurf and toadstools.
I've been able to already make this. [Can't do direct image :/ Reputation = 6] http://gyazo.com/e9cab4b04e6735712cf67e69c689fb7b
Each of the white / red and white / blue circles is a button in it's own seperate div. What I wan't to do now is "attach" a clickEvent handler to each of those buttons so that whenever a button get's pressed, the image switches to either blank or the red and white ones.
The buttons are created with code as below:
var circle = document.createElement('button');
column.appendChild(circle);
and each button has it's own ID.
So is there any simple and easy way to make each button respond to a click like mentioned above?
The data I would need later is most importantly the ID of the clicked button. Since it's id has a reference to the row and column it belongs in.
An event triggered function can be attached to an element through javascript using the addEventListener() method.
The syntax of said method is the following:
element.addEventListener(event, function, useCapture);
For instance, in your case:
circle.addEventListener("click", myFunction);
The code above would obviously need the function myFunction() to be previously defined, however, the function can also be defined within the method itself:
circle.addEventListener("click", function(){
//your function
});
You can learn more about this method here.
Since you are using jQuery, I would do something like this:
var circle = document.createElement('button');
circle.className = "nameOfTheClass";
column.appendChild(circle);
Then jQuery bind click events on each object of class nameOfTheClass:
$('.nameOfTheClass').click(function(){
alert( $(this).attr('id') );
});
PS: You could also use jquery to create your dom element but since you only asked how to bind it..
You can do this a lot more easily by adding your click event to the buttons' parent rather than to each button, like so:
column.addEventListener("click",function(event){
var target=event.target,id=target.id;
if(target.nodeName.toLowerCase()=="button"){
// do stuff ...
}
},0);
This way you don't have to worry about buttons added to your column element later on in your scripts.
if you're trying plain javascript use
circle.addEventListener("click", function(){
/* your code here */
});
or if you intend to use Jquery then use
$('button').on('click', function(){
/*your code here*/
});
note this will apply on all the buttons of the page. if you want to use it for a specific button, then you can just use id or the class.
hope this helps.
After page load I set that all anchors should block screen using the plugin jquery-blockui so as to prevent multiple clicks from impatient user and avoiding unnecessary multiple requests to the server.
$("a").on("click", $.blockUI);
I'm also using the jquery ui multiselect widget and this widget uses anchors to check all options, uncheck all options, or close itself. Unfortunatelly, these anchors also fires my blockUI event. I tried to prevent the event from firing using the code below:
$("a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close").on("click", function(e) {
e.preventDefault();
});
In other words, I tried to stop the default event of the anchors marked with the widget classes, but that did not work. What actually worked was what I used below:
$("a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close").on("click", $.unblockUI);
But this solution gives an effect on the screen as if it is flashing. Is there any way to make these links simply do not trigger the blockUI differently from every other anchors being an UX exception in the system?
If you never want those objects to trigger the blockui call, don't place the event listener on them in the first place. Use jQuery's :not selector:
$("a:not(.ui-multiselect-none, .ui-multiselect-all, .ui-multiselect-close)").on("click", $.blockUI);
You can do it in two steps. First, remove all handlers from the click event:
$("a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close").off('click');
Then, optinally, assign your own handler to prevent later bindings
$("a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close").on("click", function(e) {
e.preventDefault();
});
You have two options
1) Create a new target for blockUI
$("a").on("click", $.blockUI); // Change "a" to something else like "a.target"
2) Change a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close to perform the same functionality without the need of being anchortags.
Have this code wrapped in HOVER Event...
$("#div_ID").hover(function() {
// perform stuff here...
}
);
I'd like to trigger the above when I click a link using the ONCLICK Event...
$("anchor_ID").click (function() {
$("div_ID").trigger('hover'); // Not sure if this is even correct
}
);
It's not working though. How can I accomplish this? Is it even possible?
Using JQuery only on FF v16, IE8, and GC v23
How about this:
var dosomething = function() {
// perform the stuff here
}
$('#div_ID').hover(dosomething);
$('anchor_ID').click(dosomething);
But if you are set on using .trigger, your problem might be that you forgot to include # before div_ID. And change hover to mouseenter (the "hover" function in jQuery is just a shortcut for "mouseenter" -- credit to #FabrícioMatté for catching that) That is:
//change this:
$('div_ID').trigger('hover');
//To this:
$('#div_ID').trigger('mouseenter');
Same might apply to anchor_ID, but I won't know unless you post your HTML.
Update: another suggestion from #FabrícioMatté: the this keyword inside of dosomething might be a bit confusing when you call it as shown above, so watch out for it. The this keyword will work differently than using .trigger, so it's just a heads up....
hover is not an event so you can't trigger it. .hover() is just a shorthand which attaches mouseenter and mouseleave handlers.
$("#anchor_ID").click(function() {
$("#div_ID").trigger('mouseenter');
});
Fiddle
Note that .hover when passed a single argument will attach the function to both mouseenter and mouseleave so you can trigger either of these.
I'd recommend attaching the handler with mouseenter instead of hover if you intend to execute the handler only when users move their mouse above the div.
I am working on a project where I have a word cloud that is created by JQuery. Each word in the cloud will highlight red when you hover over it and each word is a link to a URL. What I would like to have is each link come up in a pop up. Here is an example of what I would like the pop up to look like: http://www.cybernetiksolutions.com/popup/popup.jpg . I have found a few script that allow you to do pop ups using JQuery but not when the link is being created via JQuery as well. Can someone point me in the right direction on this.
Here is a link to the work that I have already done on this project. http://www.cybernetiksolutions.com/popup/index.html
I have found a few script that allow you to do pop ups using JQuery but not when the link is being created via JQuery as well.
Those are probably the simple $(selector).click(function() { ... }); handlers you have seen. The reason those don't work with newly created elements is that they only scan the DOM for elements that match the selector when that function is ran, most probably on document ready. ( $(document).ready(function(){ /* right here */}); )
You have two options for attaching event handlers to the links you are creating.
Attach the event handler when the link is created
Use event delegation by using jQuery's delegate (v1.4.3+) or on (v1.7+) functions
Option 1 (attaching after creation):
After adding all the elements:
$('#wordcloud').find('a').click(function(event) {
event.preventDefault(); //to prevent the default click action
//do your popup magic right here
});
Option 2: delegation
Anywhere, on document ready:
Using .delegate:
$('#wordcloud').delegate('a', 'click', function(event) {
event.preventDefault(); //to prevent the default click action
//do your popup magic right here
});
Using .on:
$('#wordcloud').on('click', 'a', function(event) {
event.preventDefault(); //to prevent the default click action
//do your popup magic right here
});