here is the code i used
eventClick: function(event) {
$.fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'href': event.url,
});
return false;
},
............
when i click it for the first time it opens fine in a fancybox but when i click again it moves to a new page (event.url).Also there is tooltip being used and it goes null after the fancybox is opened for the first time
Use the following code to open Fancybox with url. It should work.
$('a.yourAnchor').fancybox({
'overlayColor': '#fff',
'autoDimensions': true,
'hideOnContentClick': false,
'scrolling': false
});
Related
I'm trying to add <style>// custom css here</style> into the tiny mce editor but currently it deletes the style tags and anything in between them on save.
I am trying to set valid_elements: "style" and/or custom_elements: "sabioStyle", and/or extended_valid_elements: "style". I've also tried: "[]" according to tiny's docs but it seems to have no effect on anything. I see that the init function:
piranha.editor.addInline = function (id, toolbarId) {
tinymce.init({
selector: "#" + id,
browser_spellcheck: true,
fixed_toolbar_container: "#" + toolbarId,
menubar: false,
branding: false,
statusbar: false,
inline: true,
convert_urls: false,
plugins: [
piranha.editorconfig.plugins
],
width: "100%",
autoresize_min_height: 0,
toolbar: piranha.editorconfig.toolbar,
extended_valid_elements: piranha.editorconfig.extended_valid_elements,
block_formats: piranha.editorconfig.block_formats,
style_formats: piranha.editorconfig.style_formats,
file_picker_callback: function(callback, value, meta) {
// Provide file and text for the link dialog
if (meta.filetype == 'file') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { text: data.filename });
}, null);
}
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { alt: "" });
}, "image");
}
}
});
$("#" + id).parent().append("<a class='tiny-brand' href='https://www.tiny.cloud' target='tiny'>Powered by Tiny</a>");
};
Piranha uses sets extended_valid_elements: piranha.editorconfig.extended_valid_elements but my dev tools are not showing the value that I type in editorconfig.json...
editorconfig.json
devTools
I've tried everything their docs say, I have a question open on github with Piranha as well.. Any suggestions would be great! Thanks
See the complete answer here: https://github.com/PiranhaCMS/piranha.core/issues/1663
I am using swal2 to get a confirm dialog on a page (sourcepage.html) after clicking on a link before redirecting to another page (targetpage.html).
This works well so far.
However, after being redirected to targetpage.html and want to go back using the browsers "back-button" to sourcepage.html, the page is "darkened" and not usable anymore and this is because the
<div class="swal2-container .....> is still there and covers the page completely.
If I hit "reload" on that page, the container is gone.
Here´s my current code:
HTML
Redirect me to targetpage.html
JS
function JSconfirm(){
swal.fire({
title: "Redirect",
type: "warning",
html: "Here comes custom text with html",
showCancelButton: true,
closeOnConfirm: true,
closeOnCancel: true,
confirmButtonColor: "#DD6B55",
cancelButtonText: "No",
confirmButtonText: "Yes"
}).then(function (result) {
if (result.value) {
window.location = "targetpage.html";
}
});
}
What can I do to make sure that this div isn´t visible anymore. It should be "deleted" from sourcepage.html after clicking "yes" to confirm to be redirected to "targetpage.html".
Thanks a lot
I found a solution myself
Adding swal.close and a timeout before the redirect did the trick.
}).then(function (result) {
if (result.value) {
swal.close();
setTimeout (
() => {
window.location.href = "targetpage.html";
},
1 * 500
);
}});
}
I am using fancybox and want to disable loading animation.
My code:
$(document).ready(function() {
$("#mypop").fancybox({
'onStart ': function(){ $.fancybox.hideActivity },
'onComplete' : function(){ $.fancybox.hideActivity },
'href' : 'file.php',
'transitionIn' : 'none',
'transitionOut' : 'none',
'titleShow' : false,
'overlayColor' : '#fff',
'overlayOpacity': 0.8,
});
});
And the loading animation still works what do I do worng ?
The docs say $.fancybox.hideLoading() for v2 if that is any good to you.
http://fancyapps.com/fancybox/#docs
Edit - #user1139767
You are missing the ()'s from the end of the $.fancybox.hideActivity() calls.
This post (http://stackoverflow.com/a/3673152/1791606) mentions the loading animation not appearing because of using an iframe as the type which accidentally achieves what you seem to be wanting to do.
I am using the following Modal popup script: http://fancyapps.com/fancybox/
I have a modal popup with a IFrame. In the iFrame there is a a registration form. When the user registers they are redirected to a members only page. Currently they are being redirected in the same modal window. I want it so that the modal window closes and a the page where they clicked the modal window redirects to the members only link.
Here is the javascript:
$(document).ready(function() {
$(".various").fancybox({
'width' : '85%',
'height' : '86%',
'paddingTop' : '40',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
Here is the HTML that calls the modal box:
<a class="various button" data-fancybox-type="iframe" href="/signup-test">
Since you only want to redirect members who've successfully registered, you need to insert code to redirect the user into the success function of your registration and/or validation code.
I can't address your specific example without the rest of your code, but two ways to do this are:
Option 1 - Create A Javascript Function
You can create a Javascript function which closes the iframe and redirects the user. The trick to doing this is putting the script in the parent document so that the script continues executing once the iframe closes.
This function goes in the parent document:
function closeiframe_redirect(url){
$.fancybox.close();
window.location = url;
}
Insert this code when you want to call the function:
parent.closeiframe_redirect('members_page.html');
Option 2 - In an AJAX Success Function
submitHandler: function (form){
$.ajax({
type: 'POST',
url: 'registration-exec.php',
data: $("#loginForm").serialize(),
success: function(data) {
if(data == "true") {
// This closes the Registration Form
$("#registrationForm").fadeOut("fast");
window.location = 'members_page.html'
}
});
}
Working on a webshop, and using fancybox to a quickshop type thing. My problem is that when user click "Add to basket" in fancybox, fancybox should close and refresh parent page. Using this:
$(".quickshop").fancybox({
'autoDimensions' : true,
'width' : 798,
'height' : 480,
'autoScale' : true,
'scrolling' : 'true',
'type' : 'iframe',
'titleShow' : false,
'onClosed': function() {
parent.location.reload(true);
}
});
And it does the trick, but it also reloads page when user just clicks the normal close button.
So is there any way to check if "Add to basket" link has been clicked, and only then reload page?
This should work:
Add to basket
Where "webshob.aspx" is a link to the page you have a fancybox on.