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
});
Related
I've created a javascript pop up contact form, how do I trigger this after clicking a WordPress navigation item?
I have already tried the following code which works fine. However, after 1 second it loads the page which I've set the nav item to in WordPress.
document.getElementById('menu-item-177').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
$('body').css('overflow','hidden')
});
I tried deleting the page, but obviously the nav link disappears. I also tried removing the menu item in the Menu settings of WordPress, same outcome.
I somehow need to block the page loading when the nav link is clicked. Is there a way round this?
Make sure that you are selecting the <a href=".. anchor element and listen for the click on that. I see that you have jQuery loaded in, so it might be good to just use that, or don't use it at all.
In your click event listener you listen for a click to happen. Whenever this click happens the function in the listener will be called. This function exposes some information about the event in the Event object. You'll see this in other pieces of code named e, evt, event or something else to refer to this Event object.
The Event object has a method called Event.preventDefault() which stops the browser from executing any kind of behavior that is linked to that element. Like navigating with an <a> tag. See why it is important to know what element you are clicking on? By adding that you can add your own behavior. See the example below.
$('#menu-item-177 > a').on('click', function(event) {
event.preventDefault(); // Prevents default navigation behavior.
$('.bg-modal').css('display', 'flex');
$('body').css('overflow', 'hidden');
});
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.
I'm implementing an interactive tutorial for a js-heavy web application. I highlight some container and expect the user to click on some element inside it. At the same time, I want to prevent the user from doing anything else, e.g. clicking on a different link.
The main problem is that I don't want to unbind any events - when the tutorial's closed, the application must work like it did before.
I started with registering a handler on all the containter's descendant elements:
element.on("click.tutorialLock", function(e){
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
}
Then I set its "priority", so that it executes before any other events:
handlers = element.data("events").click;
our = handlers.pop();
handlers.splice(0, 0, our);
Finally, when I want to unlock some element, I just disable the event on it:
elementToEnable.off(".tutorialLock")
That works, but is very heavy. I tried registering the event only on elements which have some custom event handlers defined, but it omits anchors and other basic elements. Maybe you could come up with some good idea?
I would get the active parent element and pass it into a function which would disable every event other than the events in parent
$('.className').live ('click', function (e)
{
if (!$(this).parents('#targetParent').length))
return false; // same as e.preventDefault() & e.stopPropogation()
});
Hope this is similar to what you want
I'm making a script in jQuery, and I have many click links click events. The thing is that I don't want the links I have click events for to do anything except the event, so I put an e.preventDefault(); at start of all my click events. But I have many click events, so is there a more simple way to just add the e.preventDefault(); to all the links click events? Remember I also have some links that I want to work as they should, so adding the e.preventDefault(); to all the links won't work, I only want to add it to links with click event.
you can use jquery namespaced events
http://docs.jquery.com/Namespaced_Events
HTH
you can do something like this for the links you want to add a click event but prevent the default behaviour
$('a.someClass').bind('click.dontClick',function(e){
e.preventDefault();
});
and for the links you want the normal click behaviour
$('a.clickClass').bind('click.doClick',function(e){
//your event handling code here
});
DEMO
You could try overriding the bind method, or the click method, before any of your binding code runs. Here I'm overriding the click method in a fairly hacky way. I would really recommend just calling preventDefault where you need it.
(function(){
var original = jQuery.fn.click;
jQuery.fn.click = function(){
// wrap your function in another function
var f = arguments[0];
arguments[0] = function(e) {
e.preventDefault();
f(e);
}
original.apply( this, arguments );
}
})();
Example in action: http://jsfiddle.net/k4jzb/
This SO answer details how to detect events on an element, but it looks like the asker took that answer and built a jQuery plugin for selecting elements based on their event listeners.
So you could use that plugin and then use some event delegation like so:
$(document).delegate('a:Event(click)', 'click', function (e) { e.preventDefault(); });
Warning: I've never used this plugin myself, and I'm not really familiar with custom jQuery CSS filters, so this might not actually work. At all.
I would take #3nigma's answer a little further. Usually the links you don't want to do default actions on are like <a href="#">
So filter out these links so the page doesn't jump when clicked. I use jQuerys filter() function. Not sure if that is the best. What do you think?
$('a').filter(function(i) {
return $(this).attr("href") === "#";
})
.bind('click.dontClick',function(e){
e.preventDefault();
})
Example here: Filter a tags containing #
Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)
First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });
Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.