close fancybox from jquery - javascript

I have a function that gets executed when clicking on certain things within the content of my fancybox. The functions work fine, but I cannot, for the life of me, figure out how to close fancybox programmatically. I have tried:
$.fancybox.close() and parent.$.fancybox.close();
I have even tried triggering a click to the close button but that has not worked either.
When I try $.fancybox.close() I get
Uncaught TypeError: Cannot call method 'close' of undefined
Here is what my fancybox call looks like:
Open
Here is what my function looks like (attached to the parent page's head)
$(document).on('click', ".group_box", function(e){
var nodeName = e.target.nodeName
//validation to ensure an input button was not pressed
if (nodeName != "INPUT"){
$.fancybox.close();
}
Any help greatly appreciated

I think you have two options :
1). Create a close button (with an <a> tag) and pass the $.fancybox.close() method directly into its href attribute like "
<a class="closeFancybox1" href="javascript:jQuery.fancybox.close()">close option 1</a>
This link can be added by your ajax call inside the #display div or you can append it to the fancybox content after show.
2). Create a close button using a unique selector and bind a click event to it to trigger the $.fancybox.close() method only until is visible inside fancybox
so having this html inside your fancybox content
<a class="closeFancybox2" href="javascript:;">close option 2</a>
bind a click event to it to trigger the $.fancybox.close() method using the afterShow callback like
afterShow: function () {
$(".fancybox-inner").on("click", ".closeFancybox2", function () {
$.fancybox.close();
});
}
Notice we still used .on() in its delegated form.
see JSFIDDLE using both options.

Related

How to trigger my javascript pop up form with WordPress navigation link?

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');
});

jQuery link instead of button trigger

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.

jQuery click handlers not triggered inside a modal window

I have a very simple click handler that makes an AJAX GET request on click like so:
$('span.switch-option').click(function() {
$(this).parents('div.log-in-option').hide();
$(this).parents('div.log-in-option').siblings('div.log-in-option').fadeIn();
});
This works perfectly anywhere else on the website. However, when I try to click a <span> element with the class switch-option inside a modal window, the event does not fire. Entering the contents of the click-handler function in the console and running them does perform the desired behavior, however.
Why will the click handler not fire in this modal window? I am using the popular SimpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ and jQuery 1.9.1.
A live example is here: http://ec2-107-22-8-70.compute-1.amazonaws.com/thread/19. If you click the 50,000 reps or any user's reputation then try to click the big blue link in the dialog, the click handler does not fire. This behavior happens with other click handlers in different modal windows as well.
When your script(main.js) is running the elements 'li.log-in, a.log-in' does not exists in the dom, they are loaded dynamically when the popup is created thus jQuery is not able to bind the event handlers
Try event propagation
$(document).on('click', 'li.log-in, a.log-in', function() {
$.get('/login/', function(data) {
//make a modal window with the html
$.modal(data);
});
return false;
});

Can we invoke click function on div class using Javascript

I have implemented colorbox functionality on a div class using
<script type="text/javascript">
$(document).ready(function(){
$(".exampleclass").colorbox({iframe:true, open:true, width:"50%", height:"50%"});
})
</script>
Now I want to know is it possible from Javascript to trigger an event which will dynamically open colorbox without me clicking on the div element.
See Jquery's trigger function
Jquery Trigger
You can call it like this:
$.colorbox({iframe:true, open:true, width:"50%", height:"50%"});
Edit: You may need to run this first:
$.colorbox.init();
Check
http://api.jquery.com/trigger/
and
http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/27e7c70e51ff8a99/98cea9cdf065a524
One of the jQuery Solution you can use
$('selector').trigger('click');
Which will exactly work like a normal click pro-grammatically.
Note for this you've to load jQuery in your page. which can be loaded from one of the CDN server.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
Absolutely, Rahul, opening colorbox through the jquery click() function is easy. But first you'll need to change your docReady code to look more like this:
$(document).ready(function(){
$("#example-id").click(function() {
$(this).colorbox({iframe:true, open:true, width:"50%", height:"50%"})
});
})
Notice here I have placed the code with the "open:true" option inside a click handler. You've probably already seen that having that option runnable right at docReady causes your colorbox to open when the page loads.
Now with the click handler ready, you can simply open the box with - well, a click, of course - but dynamically with this code:
$("#example-id").click();
Wherever you have this, your colorbox will open. So you could place it in an $.ajax() success or error handler or a $.load() completion handler. Also, I used a click handler, but if you don't need the click functionality, you could just as easily have placed the colorbox code in a standard function, then call the function whenever you need it.
By the way, I changed your exampleClass to example-id because having more than 1 element attached to the click handler will produce multiple calls to colorbox. This poses no problem if all classes open the same colorbox. If you are interested in seeing an example of the same class opening differing colorboxes, I can expand on this one (but right off I would start with simply embedding attributes into the tags and looking for them in the click handler).
One last note, colorbox is typically associated with an tag, which will have an href and a title. This is where colorbox will get the contents and caption from. You could simply add href and title tags to your . Html validators won't like the href in the div, though, so if that's important to you then you should just add it to the colorbox options:
$(this).colorbox({href: "http://stackoverflow.com", iframe:true, ... })
Additionally, the function called upon trigger will need to call ColorBox in the mode where it is not assigned to an element.
So the .trigger() method invokes a function that invoke colorbox as shown below.
$.colorbox()
This method allows you to call ColorBox without having to assign it to an element.
Example: $.colorbox({href:'login.php'});
See more at the colorbox docs.

Jquery class removed after link click, but second click is still recognized

I'm having a little problem. I'm trying to use Jquery load() function to load in stuff on a page using AJAX. After the content has been loaded, and the link gets tapped on a second time, I need to loaded content to slideup/hide; And when the same link is clicked for the 3+ time, I need to just toggle the loaded content display, since it's already been loaded once.
My problem is that after clicking the link once, I remove the loadable class, but on the second click the same function executes as if the class were still there. Here is my HTML:
<a title="Food" id="food" class="loadable" href="get-taste/food">Food</a>
<div class="food_load_space"></div>
The link triggers the load and the data loads into .food_load_space. And here's my JS:
$(document).ready(function(){
$('a.loadable').click(function(){ //executed upon link click 1;
url = $(this).attr('href');
linkid = $(this).attr('id');
toload = url + ' #content-area';
//now, remove loadable, add loaded and expanded
$(this).removeClass('loadable');
alert(toload);
$('.' + linkid + '_load_space').load(toload);
return false;
}); //kill loadable
I'm also planning on adding an .expanded class and a .loaded class so that the script knows at which state the link is in. But what happens is this function fires even if the .loadable class is gone.
The event has already been bound to the element, you need to manually unbind the event from the element(s) in question. This can be done by calling $(this).unbind('click');.
You may also wish to check if the element has the class in the event function.
The handler is bound the the element, not the selector.
If you only want it to exist for one click, use the one()(docs) method to bind it.
$('a.loadable').one('click', function(){
// and so on...
It will be automatically unbound after the first click.
The reason your second click is recognized is because jQuery has already binded an action to your element. You can't unbind the event just by removing the class. The class was only there to help you select that element (and style your element).
To remove the event binding, in your click function, you should do something like:
$('a.loadable').click(function() {
...your other code...
$(this).unbind('click');
});

Categories

Resources