I have 3 jquery plugins - fixheadertable, jqTransform and facebox. Whenever fixheadertable plugin is called other two plugins are not working.
So i have to call those two plugins after each call of fixheadertable.
This is happening because fixheadertable recreates the table rows whenever i sort or use pager. So the plugins used in those table rows are not working.
The important thing is jqTransform and facebox should be applied only inside the table where fixheadertable plugin is applied. Otherwise facebox displays the content twice on overlay.
jQuery(document).ready(function($)
{
$('.alter').fixheadertable({
height : ($(window).height()- 200),
colratio : [30, ,50, 50],
zebra : true,
sortable : true,
resizeCol : true,
pager : false });
$('form').jqTransform({imgPath:'../../assets/includes/formplugin/img/'});
$('a[rel*=facebox]').facebox();
});
Edit :
Sample : http://jsfiddle.net/rQXtZ/6/
First click edit link. And then click on country to sort. Again try edit link. now facebox will not work
Related
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've got a datatable with pagination and I've got anchors with popovers generated for each row but popovers are only shown on first results page. While filtering results or moving to another results page, popovers don't appear.
I wonder if someone already had the same problem and what I can do to fix this issue.
An alternative to ditscheri 's solution is using fnDrawCallback:
"fnDrawCallback": function ( oSettings ) {
$(".js_popover").popover({ html:true });
// $("[data-toggle=popover]").popover({ html:true });
},
The DataTables Plugin destroys and rebuilds the DOM elements on filtering/sorting. You might get along with something like this:
var myTable = $('#myTable').dataTable();
/* Apply the popover using the API */
myTable.$("[id^=popover-]").popover();
Here's some documentation on it: http://www.datatables.net/release-datatables/examples/advanced_init/events_post_init.html
If it doesn't help, you might want to provide a basic example of you code.
(Bootstrap 4, DataTables 1.10.25)
In my situation popovers worked on the first page - but NOT subsequent pages (page number > 1).
For my application this code allowed popovers to work on subsequent pages:
const rows = $("#tbl").dataTable().fnGetNodes();
$(rows).find('[data-toggle="popover"]').popover({ html: true, trigger: 'hover', placement: 'bottom', content: function () { return $(this).data('content') ; } });
I am currently using a full-screen image slider called supersized on a site, which references the images and associated extras in a script tag like so:
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
property_1 : value,
property_2 : value,
slides : [
{image :'http://image1.jpg', title :'Name1', url :'1.html'},
{image :'http://image2.jpg', title :'Name2', url :'2.html'},
{image :'http://image3.jpg', title :'Name3', url :'3.html'},
],
// Options
option_1 : value,
option_1 : value
});
});
</script>
What would be very nice, is to be able to dynamically load a new array of images with their associated extras via ajax (jquery preferred, but vanilla js fine). Is this possible? If so, I've struggled to find any resources that explain how.
It seem that you need to code such feature youself.
See what plugin author is writing in FAQ: http://www.buildinternet.com/project/supersized/faq.html#q-4
Can I load different sets of slides without reloading the page?
This is a feature I am looking to develop out in the future. If you're hurting for it in the meantime, you can hire me for custom work.
If you need just one set of slides loaded by AJAX you can code it like that:
jQuery(function($){
$.ajax({
url: "URL"
}).done(function ( data ) {
$.supersized({
// Functionality
property_1 : value,
property_2 : value,
slides : data.slides,
// Options
option_1 : value,
option_1 : value
});
});
});
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'm sorry for my bad english but I hope you will understand.
What's my problem....
I wrote a code to simple show the form which contains textfields, htmleditors, comboboxes, etc. Everything goes fine but in Firefox my fields appears before the form layout is done. so it looks quite weird because form fields overlaps other components.
sample code:
positionsPanel = new Ext.FormPanel({
margins : '2 2 2 0',
frame : true,
flex : 3,
labelWidth : 220,
buttonAlign : 'right',
labelAlign : 'top',
autoScroll : true,
height : oldFormPanelHeight, //this is ok, just a value
autoShow : true,
defaults : {
enableKeyEvents : true,
anchor : '97%'
},
items : [{...etc.
Have you any idea how to fix that? Thanks a lot...
remove flex: 3
Note: this config is only used when this Component is rendered by a Container which has been configured to use a BoxLayout.
By default (in your case also) FormPanel use 'form' layout