I am having a problem with my fancybox 3 and jquery ui datepicker.
if I place the datepicker outside the fancybox.. the dropdown for months and years are working.. but when I place it inside fancybox. the dropdown is not being triggered. any idea what is happening?
$("#Date_To").datepicker({changeMonth: true,changeYear: true});
image
Try disabling focusing, something like this:
$('[data-fancybox]').fancybox({
autoFocus : false,
trapFocus : false,
touch : false,
beforeClose : function() {
$( ".selector" ).datepicker( "hide" );
}
});
Demo - https://codepen.io/fancyapps/pen/QqLXaz
I tried using modal and found a solution. is there any way I can covert this code for fancybox?
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
$confModal.on('hidden', function() {
$.fn.modal.Constructor.prototype.enfor
Related
I have created the following button for an interactive grid (IG) using JavaScript Initialization Code in the IG attributes section.
function(config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
lastToolbarGroup = toolbarData.toolbarFind("actions4"),
assembleButton = {
type: "BUTTON",
hot: false,
icon: "fa fa-send u-info-text",
iconBeforeLabel: true,
action: "assemble-as"
};
lastToolbarGroup.controls.push( assembleButton );
config.toolbarData = toolbarData;
// this is how actions are added
config.initActions = function(actions) {
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { apex.event.trigger("#hiddenAssembleAsButton", "hidden_assemble_as_button_click"); }
});
}
return config;
}
Then I created the hiddenAssembleAsButton using that name as the Static ID under advanced.
The button is defined by a dynamic action Hidden_Assemble_As_Button_Click which is where I think I should be able to redirect the page, but I'm not sure.
It seems like the page redirect should happen in the jQuery Selector but I don't know what to put there or if that's the correct area to add the code.
I can add images if necessary but I feel like I've described this pretty well.
Sometimes, you need a button somewhere in the interactive grid, but you still like to use the declarative options APEX provides with basic buttons, like doing all the stuff like passing variable values, calculating checksums or opening a dialog when your target page is a model page. This can be difficult in pure javascript.
In this case, you can also just create a basic button, set it up all the way you like in the designer, then hide it using Advanced --> Custom Attributes: style="display:none". Also, set a static ID like button1.
Then, in your action, you can simply trigger a click on the button.
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { $('#button1').click(); }
});
Clicking the button does something. It triggers an event called hidden_assemble_as_button_click binded to an id #hiddenAssembleAsButton. You want it to redirect. The simplest option is to do the redirect right in that code. Replace the actions.add block with this one:
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { window.location.href = "http://www.stackoverflow.com"; }
});
I am trying to get this series of slideshows to fade in/out on scroll.
Trying to get it to do gradual fade but am not getting anywhere with this.
https://thetulip.community/Shannon-Garden-Smith
<script>
$(window).scroll(function() {
$(".image 1").css({
'opacity' : 0.5-(($(this).scrollTop())/20)
});
});
</script>
I tried this but to no avail!
My knowledge of Java is limited, so I'm not sure how to have each one fade in and out on scorll.
Any help would be beyond appreciated.
Thank you,
S
Welcome to the community.
I'm not sure which library you're using for your slideshow presentation, but jQuery has built in methods to fade HTML elements in or out. You can view them here:
https://api.jquery.com/fadeIn/
https://api.jquery.com/fadeout/
Note that each method has an optional function to call once the animation is completed, which is called once per element match. One approach could be to call fadeOut() on click, and then call fadeIn() within the fadeOut method's complete function. For example:
var images = [
"https://freight.cargo.site/w/750/i/0c4f83626e13ce4aa69fee4a84d02618c43afa3ff33d3c6bbd8fd6e265aa5538/01-03-downwrong.jpg",
"https://freight.cargo.site/w/750/i/3aa2564a6c11b13ef5c44820c69b00563e89ddd572372d52d60b6a0bfd80d1bc/01-04-downwrong.jpg"
]
var i = 0;
$(function() {
$('img').attr('src', images[i]);
});
$('img').click(function() {
$(this).fadeOut('slow', function() {
i = i === images.length - 1 ? 0 : i + 1;
$('img').attr('src', images[i]);
$(this).fadeIn('slow');
});
});
Here's a fiddle: https://jsfiddle.net/matthewmeppiel/n28hg4qj/5/
I am working on opencart. I tried to create a modal dialog popup every time user click a link that contains a product page. That links has a tabs inside (review,description). It load successfully, but the tabs are not working. How can i fix this?
This is how i call this:
$('a[href*="index.php?route=product/product"]').click(function(event){
event.preventDefault();
showDialog(this.href);
});
$("#dialog-modal").dialog({ //create dialog, but keep it closed
autoOpen: false,
height: 550,
width: 1000,
position: "center",
modal: true,
close: function(event, ui) { $('#wrap').show(); },
open: function(event, ui) { $('.ui-widget-overlay').bind('click', function(){ $("#dialog-modal").dialog('close'); }); }
});
function showDialog(urlToLoad){ //load content and open dialog
$.ajax({
type: "POST",
url: urlToLoad,
success: function( returnedData ) {
var $html = $(returnedData);
var content = $html.find('#content').find('.breadcrumb').remove();
content = $html.find('#content').html();
var container = document.getElementById('dialog-content');
container.innerHTML = content;
$("#dialog-modal").dialog("open");
$('#tabs a').tabs();
}
});
}
Apparently the $('#tabs a').tabs(); after $("#dialog-modal").dialog("open"); is not working.
Finally i solve this. It's just a silly problem, i forgot to import the jquerytabs.js in my caller page. So the tabs() function doesn't work. Now it's work perfectly.
I finally got PJAX all setup and working perfect on my Foundation 5 site and its time to add my page transitions. For some reason no matter what I try the page loads and then the transition happens.
Here is my website with with one of the transitions I tried
I've also tried simple things like:
$(document)
.on('pjax:start', function() { $('#main').fadeOut(200); })
.on('pjax:end', function() { $('#main').fadeIn(200); })
I also ran into aenism.com/teleportation-is-scary/ in my searches for a solution and its what I currently have running on my pages.
Here is an example of it working: Demo Site
I'm not sure what the problem could be at this point.
I found a solution that works perfect for fading out and back in again. I have not tested it with other animations but it looks like it should do the trick. I hope this helps someone else!
// USER CLICKS LINK WITH PJAX CLASS
$('body').delegate('a.pjax', 'click', function() {
// CONTENT FADE OUT TRANSITION BEGINS
$('#main-content').fadeOut(300, function() {
// CALLBACK TO RUN PJAX AFTER FADEOUT
$.pjax({
url: target,
container: '#main-content',
fragment: '#main-content'
})
})
// STOP THE LINK FROM WORKING NORMALLY
return false;
})
// PJAX DOIN THANGS TO THE CONTENT FRAGMENT IDENTIFIED ABOVE
$('#main-content')
.on('pjax:start', function() {
// KEEPING THE MAIN CONTENT HIDDEN
$(this).fadeOut(0)
})
.on('pjax:end', function() {
// FADE IN THE MAIN CONTENT
$(this).fadeIn(300)
// FUNCTIONS LOADED AGAIN AFTER PJAX ENDS GO HERE
})
WOOO That suggestion worked, had to tweak it a bunch to get it to fit with my page transitions, but this is what I ended up with (works off of css3 animations):
$("body").delegate('a[data-pjax]', 'click', function(event) {
var target = $(this).attr("href");
if (contentpage == "true" || errorpage == "true") { $(".contentimage").append('<div class="pjax-loading"></div>'); }
$("body").removeClass("pjax-fadeIn").addClass("pjax-fadeOut").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$.pjax({url: target, container: '#content', fragment: '#content'});
});
return false;
})
$("#content").on('pjax:start', function() {
$("body").removeClass("pjax-fadeOut").addClass("pjax-hide");
}).on('pjax:complete', function() {
$("body").removeClass("pjax-hide").addClass("pjax-fadeIn");
});
I am facing one problem that Datepicker is not working properly first time, i.e. first time when i open the page and click on "from"/"to" input field, the datepicker opens but I cannot select a date as I get an error on console: "Uncaught Missing instance data for this datepicker". But when I refresh page, it perfectly works!
Why does this happens?
This is my code:
$('.datepicker').live('focus',function(){
$(this).datepicker({
defaultDate : "+1w",
changeMonth : true,
numberOfMonth : 1,
dateFormat: 'dd-mm-yy'
});
});
can you tell is it right to use '.live' method here?
i guess you are doing this
$("#datepicker").click(function(){
$(this).datepicker({ dateFormat: 'yy-mm-dd' }).val();
});
May be only this will work as it did for me
$(function() {
$("#datepicker").datepicker({ dateFormat: 'yy-mm-dd' }).val();
});
If its for multiple inputs just make use of class name instead of id.
$('.datepicker').on('focus',function(){
$(this).datepicker({
defaultDate : "+1w",
changeMonth : true,
numberOfMonth : 1,
dateFormat: 'dd-mm-yy'
});
});
Try this
for it to show first time you can do this inside on click:
$("#datepicker").datepicker().datepicker( "show" )
You can try this
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});