In fancybox 2 you have the helpers option, i used this to stop the browser from scrolling to the top after a fancybox exit:
helpers: {
overlay: {
locked: true
}
}
what is the fancybox 3 equilevant? i can't find it in the documentation. The helpers option does not work in fancybox 3 and default it scrolles to the top in my fancybox 3 implementation.
You may use
{
backFocus: false
}
Related
When I navigate from page A to page B, I want to slide in the page B from the bottom upwards.
How can I do this in Ionic 3?
I have now
this.navCtrl.push(PageB,
{session: this.session},
{animate: true,
animation: 'transition',
duration: 500,
direction: 'forward'}
);
I tried to change the 'forward' in 'up' but that does not do anything.
Currently I am testing in Chrome browser.
Thanks
I think the navController is the wrong choice for this.
Mostly, the use case for sliding a page from bottom to top is when you want to show modal page. This can be done with the ModalController:
constructor(private modalCtrl: ModalController) {
}
showModal(): void {
let modal = this.modalCtrl.create(PageB, options);
modal.present();
}
I'm using the Fancybox JQuery plugin, but am coming across an issue because of my html and body CSS properties. Currently, the overflow-y property is set to scroll in an attempt to hide jittery animations that adjust the page's length.
Because Fancybox is invoking a second HTML element (I think), a second scroll bar appears when it is called, which again, causes a jittery animation or effect.
I'm trying to use the beforeShow and beforeClose callbacks of Fancybox in order to fix this, and it seems to be effective in some regards.
The beforeShow callback works seamlessly, in that when Fancybox is called, no second scrollbar appears. The beforeClose callback, however, does work in a sense that the original scrolling properties are returned, but there is a small 'blip' that occurs causing the screen to jitter and all of the body's elements to resize/reshape as if there was a second scrollbar to begin with.
I'm not sure why this is occurring, because technically there is no second scrollbar, but closing Fancybox acts as if there was. Are there CSS rules I can modify, or different callbacks to prevent this?
My Fancybox script:
jQuery('.fancyboox').fancybox({
fitToView : false,
width : '90%',
height : '90%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
beforeShow : function() {
$('body, html').css('overflowY','hidden');
},
afterClose : function() {
$('body, html').css('overflowY','auto');
}
});
A demo that emulates the same effect - http://jsfiddle.net/NVHWw/ - If you'll notice, the second scrollbar appears then disappears very quickly upon closing the lightbox.
Many thanks, SO. Very appreciated.
Just add the helpers API option to disable the overlay lock like :
helpers: {
overlay: {
locked: false
}
}
... no need of beforeShow and/or afterClose callbacks.
See JSFIDDLE
I have been trying for two days to get ColorBox to return post results back to the same open box but it just will not do it.
I am using Jquery Form Plugin to Post from a ColorBox. It seems to work in IE 8, but not Safari or FireFox.
In IE 8 it returns the result from the post page "action" and returns the result in the same ColorBox but in FF and Safari it closes the box and sits on the load page (i.e. process1.php)?
I have a page say "process1.php" which loads the ColorBox onLoad (it does this no problem)
Load Page ColorBox Code For process1.php:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j.fn.colorbox({
href:"process2.php",
escKey: false,
overlayClose: false,
width: "60%",
height: 350,
title: "Process Secure Order",
open:true
});
});
Upon Page Load it will load the "process2.php" displaying a form for the user to submit data.
This is my JQuery Form Plugin Code:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var options = {
beforeSubmit: showSpinner,
success: showResponse,
//resetForm: true,
timeout: 3000,
target: '#output1'
};
function showSpinner() {
$j('#sterms, #accept, #decline, #side-cart').hide();
$j('#working').show().html('Please Wait');
return true;
};
function showResponse(){
$j('#working').hide();
$j('#result').show();
return true;
};
// bind form using 'ajaxForm'
$j('#secure_process01').ajaxForm(options);
});
It posts fine and then just tries to reload the same page with out the ColorBox opening on Load.
It has me stumped why it works in IE and nothing else, any help would be appreciated.
Using JQuery 1.5.2 (JQuery Form Plug In is not working with anything higher has permission issues)
Reference For JQuery Form Plugin http://jquery.malsup.com/form/#ajaxForm
This issue has been solved.
It turned out that the Jquery Form Plugin did not like the 1.6.1 JQuery version so I did the code using Jquery Post and it worked in all browsers.
ColorBox plugin big rap, great and easy.
Is it possible to disable the pagination (First, Previous, Next, last) links in the tablesorterpager plugin of jQuery. This is my code in jQuery
jQuery('#mentor_engagement_report_table')
.tablesorter({ debug: false, sortList: [[0, 0]], widgets: ['zebra'] })
.tablesorterPager({container: jQuery("#pager"), positionFixed: false,size:10});
I've created a fork of the tablesorter plugin on github. After reading this question, I added a new option to the pager plugin named updateArrows which when true it applies a class name, contained in the new cssDisabled option to the arrows. Here is the initialization code and a demo:
$("table")
// initialize tablesorter
.tablesorter()
// initialize the pager plugin
.tablesorterPager({
// target the pager markup
container: $("#pager"),
// disabled class name to use
cssDisabled : 'disabled',
// apply disabled class name to the pager arrows when the rows at either extreme is visible
updateArrows: true
});
And here is some example of css used in the demo:
/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
#pager.disabled {
display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
#pager img.disabled {
/* visibility: hidden */
opacity: 0.5;
filter: alpha(opacity=50);
}
There is only pagination if you use the Pager Plugin, if not, not a thing will have pager part...
if you would like just to hide the pager
after your javascript code add:
$(".pager").hide();
Your question should be, Why do i want to hie the pager area? if I only want to shown 10 rows, the data should only contain 10 rows ...
It would be easier if you posted your whole code, and be more clear to what you want.
do you still want to select the row count per page?
then try this: http://jsfiddle.net/q66TA/
If you don't want anything from the pager, don't use it..
Update:
If you need the current page number and the total page count, you'll need to add this functionality to the plugin. There is a callback addon/patch available for this:
http://www.vinertech.com/patches/tblsorter.pager.cbk.patch
More on this: http://daveviner.blogspot.com/2009/12/jquery-tables-and-administrative.html
The best way, and what we use on all our's that require a view all button, is to use the plugin itself's way of disabling it.
This is brought directly from their site http://mottie.github.io/tablesorter/docs/example-pager.html
The code used is real simple actually:
// Disable / Enable
// **************
$('.toggle').click(function(){
var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
$(this).text( (mode ? 'Enable' : 'Disable') + ' Pager');
return false;
});
$('table').bind('pagerChange', function(){
// pager automatically enables when table is sorted.
$('.toggle').text('Disable Pager');
});
<button type="button" class="toggle">Disable Pager</button>
I have a link, after click this link, a modal was displayed. I used ModalDialog with code:
$(document).ready(function() {
//linkTTT is link id
$("a#linkTTT").click(function() {
//content is id of div that contains content
$("#content").modal({ onOpen: function(dialog) {
dialog.overlay.fadeIn('slow', function() {
dialog.data.hide();
dialog.container.fadeIn('slow', function() {
dialog.data.slideDown('slow');
});
});
}
});
}); //end a click
});
Content're contained in a , it includes two tables that containt text and some images.
This application run well in Firefox 3+, Chrome and IE8.
Images here: [http://bian.vn/normal.png]
I'm having problem with IE 6 and IE 7.
In IE 6:
Images here: [http://bian.vn/IE6.png]
In IE 7, content's cleaned after is loaded...
Images here: [http://bian.vn/IE7.png]
You can see screencast at link text
Let me know your answer about this problem
Thanks a lot.
I found solution for my problem :)
In <div> tag that have id="content", I included two tables. After I remove table. It's resolved!
Thanks for viewing :)