I'm a huge fan of Fancybox and I'm using it for years now. At the moment I'm thinking of installing the newest version and I want to use the confirm dialog that is demoed on the project page of Fancybox 3 (https://fancyapps.com/fancybox/3/). But I don't understand how to do this. Where can I find settings for this, how to initiate the dialog and where does the content that is in the dialog come from?
Basically, you display some inline content as usual and then use afterClose callback to check what element was clicked to close the modal (tip: add data-fancybox-close attribute to any element to act as close button), something like this:
afterClose : function( instance, current, e ) {
var button = e ? e.target || e.currentTarget : null;
var value = button ? $(button).data('value') : 0;
// Here you can choose what to do depending on the element
}
Here is a more complete code - https://codepen.io/fancyapps/pen/YRPoVB?editors=1010 - that is used on the homepage.
Related
I'm trying to tweak the WordPress plugin https://github.com/algolia/algoliasearch-wordpress to suit our needs. What we want to be able to do is have a search result that will load the data up in the same page.
I have my WordPress posts and its data being indexed successfully. I have added a search box to the page, and autocomplete is being fired.
Out of the box, the WordPress plugin template wraps the result in an anchor tag and assigns it the URL of the found result. When clicked, this navigates you to that post. However, what I want to do is intercept that click and load the result in the same page without navigating away.
I have removed the href from the anchor. I have also edited the supplied autocomplete.php template where the call to autocomplete:selected occurs. In there I have removed the call to navigate away by removing window.location.href.
Now I have two main issues.
1 - When the user clicks the search result I would like the input to be populate with the title of the item they clicked on. I added this in the autocomplete:selected callback by adding $searchInput[0].value = suggestion.post_title. Which seems to change the value of the input correctly, but as soon as I click away from the input, it is re-set back to the original typed value. So if I type 'may' and click the result 'mayonnaise', the result data can be accessed but the input returns back to 'may'. My function looks this:
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
console.log(suggestion);
autocomplete.autocomplete.close();
});
2 - It seems that the autocomplete dropdown does not hide when the user clicks away. To resolve this i've had to use what I think is a bit of a nasty hack with jQuery. I was wondering if this is really required? My code just below the autocomplete:selected call looks like this:
jQuery('body').on("click", function(event){
if (!jQuery(event.target).closest($searchInput[0]).length) {
autocomplete.autocomplete.close();
}
});
Found some answers to my questions.
1 - In order to populate the input with the title of the selected search result I added a call to the setVal method of the autocomplete object. I'[m still not sure why this is required.
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
autocomplete.autocomplete.setVal(suggestion.post_title);
});
2 - It looks like the config of the autocomplete object uses the value of WP_DEBUG in order to set the debug value. The options available for the autocomplete component can be found here https://github.com/algolia/autocomplete.js#options. This lead me to find that when debug is set to true, the autocomplete box does not hide on selection. This is to allow for easier debugging and styling of the component.
The jQuery UI dialog drives me up the walls. To the best of my understanding, here's how it works:
When you do $('#myDialog').dialog({...}), it copies the #myDialog element and moves it inside this bizarre widget thing at the bottom of your body tag. This is crazy! It will duplicate possibly unique DOM elements (with ids) when it does this.
So what I'm trying to do is make it behave in a predictable way when I refresh the HTML of the original element (#myDialog). If I do this dynamically, sometimes the dialog doesn't open any more:
http://jsfiddle.net/t67y7/3/
Or sometimes the dialog opens with the old HTML (because it's cached at the bottom of the page that way). What is up with this?
Since nobody seems to have any idea how to tame this beastly dialog, here's the best thing I've come up with to date. I'll accept any superior alternatives.
var original = $('#dialogId')[0];
var clone = $(original).clone().attr('id', 'dialogIdClone');
var saveHtml = $(original).html();
$(original).html('');
$(clone).dialog({
... // other options
open: function (){
// add any dynamic behavior you need to the dialog here
},
close: function(){
$(clone).remove();
$(original).html(saveHtml);
}
});
The purpose of this whole craziness is to keep the HTML of the original dialog unique on the page. I'm not really sure why this can't be the built-in behavior of the dialog... Actually, I don't understand why jQuery UI needs to clone the HTML to begin with.
I know this has been posted for a while, but a less extensive way to handle this issue would be:
$('#your-dialog').dialog({
... // other options
open: function (){
// add any dynamic behavior you need to the dialog here
},
close: function(){
}
});
$('#your-dialog').remove();
This is due to dialog widget wants to be able to control the display and will wrap the inner content of the original dialog then create a brand new one at the bottom of the body.
The draw back of this solution is that the dialogs have to be the first to be initialized to ensure all your 3rd party library widget will operate properly.
Why don't you just call $("#dialogId").dialog("destroy") on close function, like this:
$("#dialogId").dialog({
close: function() {
$(this).dialog("destroy");
// you may want empty content after close if you use AJAX request to get content for dialog
$(this).html('');
}
}
The destroy function will remove the decorated code, and your dialog element will not be duplicate next time you show the dialog.
I added a sample code to jsfiddle.net example.
You need to empty the dialog before opening it.
$("#dialogId").html('');
$("#dialogId").dialog({
close: function() {
$(this).dialog("destroy");
}
}
I have a vertical menu inside a jScrollPane in a ASP.NET page. When the user clicks a menu choice it displays content in another panel relating to the selection. How can I make sure that the selected menu choice is in view when the page refreshes.
I'm looking for the same solution myself. You may have some success with my temporary solution using the scrollToElement api. Providing you can locate the specific menu item using a jquery selector you can have jScroll automatically jump to it in the scroll pane. eg
$(window).load(function()
{var api=$('#yourMenu').data('jsp');
api.scrollToElement($('.selectedOption'));
});
This will require the latest version of jscrollpane (http://jscrollpane.kelvinluck.com)
I wanted the same solution, and found this, which wasn't much help.
I eventually got it to work.
The position of the scrollbar is saved to localstorage, then when the page loads again, either by refresh or back from another page, if localstorage has a value greater than 0 which represents the top of the scrollbar (default, unscrolled position), it scrolls to that position.
var element = $(".scroll-pane").jScrollPane({showArrows:!0});
if(void 0 != element) {
var api = element.data("jsp");
$(function() {
0 < parseInt(localStorage.getItem("ScrollPosition")) && api.scrollToY(parseInt(localStorage.getItem("ScrollPosition")));
$(".scroll-pane").bind("jsp-scroll-y", function(b, a) {
localStorage.setItem("ScrollPosition", a)
}).jScrollPane()
})
};
I'm trying to duplicate the behaviour of the "Share on Facebook" button from Youtube. Basically, inside a Flex app I'll have a button and when I click it I want a popup that enables me to post something on the wall.
While it is possible to make a call to javascript to open the pop-up I want to be able to set the images and the text of my posting.
Do you know how I could set the images or text as a paramter to the sharer window?
Thank you!
This is fairly straightforward to do. Youtube uses the Facebook API which pops up a new window (Info on Facebook sharer API).
To do this in flex,
Create a button that onClick will call a javascript method, ExternalInterface.call("fbLink", "www.yahoo.com");
In your HTML file (most likely index.template.html) add the JavaScript method, fbLink which does the following:
function fbLink(url) {
window.popup("http://www.facebook.com/sharer.php?u=" + url, {height:440, width:620, scrollbars:true})
}
Now when a user clicks on the button they will be sharing the link "yahoo.com" with facebook account.
as I understood you asking for some help in accessing js popup in html page of facebook share button, so you should use ExternalInterface in this casa and access needed DOM node using getElementById function in your js interface.
In other case I want propose you to read another one way http://www.riaxe.com/blog/flex/publish-into-facebook-wall-from-flex/
It seems that you want to have a button on the flash application and once clicked it opens the facebook page that shares the video/image that pertains to the clicked button. What you want to do is simply create a button that on click opens a new website to facebook using their share api which has the following format:
var facebookShare:String = "http://www.facebook.com/share.php?u=' + encodedVideoLink + '&t='+ encodedVideoText";
Where the u parameter stands for the link that you wish to share, and the t parameter stands for the title of the piece that you want to share, whether it be a picture or video.
You want to add an event listener on MouseEvent.CLICK that has as its callback function a method that handles the opening of the facebook page passing the facebookShare variable as shown above. To open another page on your browser you can use this AS3 Class called URLNavigator: http://www.danishmetal.dk/project/source/com/zorked/URLNavigator.as
To sum it up, something along these lines would do:
var facebookShare:String = "http://www.facebook.com/share.php?u=' + encodedVideoLink + '&t='+ encodedVideoText";
facebookButton.addEventListener(MouseEvent.CLICK, this._goToUrl(facebookShare));
private function _goToUrl(link:String):Function {
var window:String = "_blank",
feats = "",
thisOverlay:Object = this; // to not lose scope when returning a func
return function (e:MouseEvent):void {
trace("Opening link to:"+link);
try { URLNavigator.ChangePage(link, window, feats); }
catch (e:Error) { trace("error launching "+link+" in "+window+" with feature set "+feats); }
}
}
I hope that helps. If you have questions regarding the code please let me know.
I want to redirect a new tab and to get focus of the new window when a button is clicked.. I can create a new window, but can't get its focus even thourh, I tried the following code
Window.focus(); How to do this?
My Code:
function new_window(url)
{
//Open a Window in New tab
var popupwin = null;
popupwin = window.open(url);
popupwin.focus();
self.focus();
//window.focus();
}
I think it would be better not to do this. These are browser preferences and don't try to override those. It may fail due to user settings.
Remove
self.focus();
You can use focus() method of a form element. This brings mostly the window to front. window.focus() might implemented different by different browsers.
Do you have html input elements on you popup win?
Try calling focus() on one of the html input elements. This will place the cursor into the element to assist the user start typing there.