I'm using the Tablesaw plugin to get responsive tables.
At some point I need to include different tables inside different items/slides of a Bootstrap Carousel.
On load, the table on the active Item of the Carousel will display correctly (Tablesaw is initiated properly), but once I move to the next slide/item, the tables in there won't be properly displayed (Tablesaw not initiated).
Tablesaw includes an extra JS file to initiate upon load:
$( function(){
$( document ).trigger( "enhance.tablesaw" );
});
This seems to work for the first slide/item but not for the rest.
Any clue on why this might be happening?
I've created a Plunker to illustrate the issue.
The problem is in the Tablesaw intialization. Tablesaw needs to know during initialization (which is done in the tablesaw-init.js) the size of the element. You have two tablesaw elements placed inside the bootstrap Carousel, while one is active and the other is not. When you look at the Carousel css, you can see that the display property of the Carousel item which is not currently active is set to none. Elements which are not displayed have width and height set to 0.
So the solution could be changing the code inside the file tablesaw-init.js to this:
;(function($) {
$(function(){
// Show all carousel items before Tablesaw intialization
$(".carousel-inner > .item").css("display", "block");
// Initialize the Tablesaw
$( document ).trigger( "enhance.tablesaw" );
// Remove the style added before initialization
$(".carousel-inner > .item").removeAttr("style");
});
})(jQuery);
After this change there is no need to handle the slid event.
Here is your original code sample with the mentioned change, so you can see it is working https://plnkr.co/edit/Ocd0axmKLS1KDtGYlU4K?p=preview
You can't initialize Tablesaw on hidden tables.
So you have to set your custom initialization script to only initialize visible tables:
;(function($) {
$(function(){
// Initialize Tablesaw on the active carousel slide
$('#carousel-einzelwerte .item.active').trigger('enhance.tablesaw');
// Initialize Tablesaw on slide change
$('#carousel-einzelwerte').on('slid.bs.carousel', function(e) {
$(e.relatedTarget).trigger('enhance.tablesaw');
});
});
})(jQuery);
Demo: https://plnkr.co/edit/JxOnj6dJVcmpyBrzEzrs?p=preview
Related
I have created a container which is not resizable during initialization but when I'm clicking it it's width is expanding and then it is resizable,and on clicking again it's width it again contracting and the container becomes not resizable. However the problem is I'm able to disable resizable on the container but resize cursor is still there, how can I remove it ?
I'm using this code:
// while intializing
$(".container").resizable({
disabled:true,
handles:"e,w"
});
//on Click event
disableSideBarResize: function() {
$(".container").resizable().resizable("disable");
},
enableSideBarResize: function() {
$(".container").resizable().resizable("enable");
},
But I'm not able to remove the resize cursor/icon. Can anyone please help me with this?
Syntax:
$( ".selector" ).resizable( "disable" );
CDN Link: First, add jQuery UI scripts needed for your project.
code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css
Blockquote
code.jquery.com/jquery-1.12.4.js And code.jquery.com/ui/1.12.1/jquery-ui.js
Check the link
https://www.geeksforgeeks.org/jquery-ui-resizable-disable-method/
I have child elements in th that are popup windows. When i click .show_history div to display the popup div .show_history_ctn, sorting for that column is triggered. I have increased the z-index for .show_history to 9999 and still sorting is triggered. I've also added stopPropagation to .show_history click event and still sorting occurs.
jQuery
$(".show_history").on("click",function(event) {
$(this).siblings(".show_history_ctn").find("tr").show();
event.stopPropagation();
if($(this).hasClass("active")) {
$(this).siblings(".show_history_ctn").slideUp();
$(this).removeClass("active");
} else {
$(".show_history_ctn").hide();
$(".show_history").removeClass("active");
$(this).siblings(".show_history_ctn").slideDown();
$(this).addClass("active");
}
});
$(".tablesorter").tablesorter();
html
<table class='tablesorter'><thead><tr><th><div class='show_history'>Show History</div><div class='show_history_ctn' style='display:none'>**content**</div></th><th></th></tr></thead></table>
How do i solve? I need sorting on the column otherwise i'd just add sorter:'false'.
The problem is that the click binding is removed by tablesorter since it rebuilds the table header. You can solve this using either of the following methods:
Set the headerTemplate option to an empty string ("") - this prevents altering the header content and therefore doesn't break any bindings. Internally, it is using an innerHTML (this will likely be changed soon) to wrap the content because jQuery's wrap was extremely slow in older versions of IE.
Bind the popup links inside the initialized callback (demo)
$(function() {
function bindLink() {
$('.link').click(function(e) {
e.preventDefault();
e.stopPropagation();
});
}
$('table').tablesorter({
theme: 'blue',
initialized: bindLink
});
});
Update: Oops, I forgot to include the cssNoSort class name of "tablesorter-noSort" which needs to be added to the element you're clicking on. Demo link updated above.
<th>AlphaNumeric <a class="link tablesorter-noSort" href="https://google.com">test</a>
Background:
I am using the materialize JS to create collapsible divs. When a div that has a class of collapsible-header is clicked, a slide down animation occurs on the sibling div that has a class of collapsible-body, showing the contents of the collapsible-body.
What I am trying to accomplish is when a collapsible header is clicked, the browser should scroll to the top of that div so that the contents are in full view of the user. I have used an on click event, which works fine on the first collapsible. But then, if you have an open collapsible and you click on another to open it, it doesn't scroll to the top of the clicked div properly (it will scroll to the middle of the body, or way above the top of the div).
JS Fiddle of on click functionality: https://jsfiddle.net/f83dct8f/4/
I am able to accomplish what I am looking to do by editing the Materialize JS itself. Here is how the line looks before my edit:
object.siblings('.collapsible-body').stop(true, false).slideDown({
duration: 350,
easing: "easeOutQuart",
queue: false,
complete: function() {
$(this).css('height', '');
}
});
I add the following to the complete portion of the above statement to accomplish what I'm looking for:
$('body').animate({scrollTop: $('.collapsible-header.active').offset().top },'slow');
Question: I do not want to edit the Materialize 3rd party code to accomplish what I need, so I need to find a way to implement the body animate code after the slide down is finished, without editing the Materialize animation. I know there has to be a way to do it?
I have tried event queues on the collapsible body, which seemed promising, but my test console print executed during the animation. See below. If someone could point me in the right direction of what else I could try, I would greatly appreciate it.
$('.collapsible-header.active')
.siblings('.collapsible-body').slideDown().queue(function(){
console.log('DONE');
});
You should be able to use the onOpen option when initialising your .collapsible. Pass in a function to execute when the accordion is opened. The function receives the element as a argument.
$(document).ready(function() {
$('.collapsible').collapsible({
onOpen: function(el) {
$('body').animate({scrollTop: el.offset().top },'slow');
}
});
});
I have an isotope layout and everything - sorting and filtering and general display - works great. But I have to make the isotope items expandable on click. I did this via a span class which is hidden via JavaScript on initial page load but can be toggled via click on a different span class <span class='Point'>.
This works to a certain degree: the text is toggable - but the layout doesn't resize on click, despite me including .isotope('layout'). The specific jQuery code looks as follows:
$(".risknotes").hide(); $grid.on( 'click', '.Point', function() {
$(this).parent().find(".risknotes").toggle(2000);
$(this).parent().toggleClass('bigger');
$grid.isotope('layout')
});
Funny thing is: if I click a filter, or a sort button, everything resizes perfectly. Just not on initial load or click. I made a jsfiddle reproducing the problem: http://jsfiddle.net/3t2fk5aq/
Your problem is jquery take a time to finish toggle .ricknotes but isotope relayout instantly.
You can use complete option of .toggle() to handle it like this:
$grid.on('click', '.Point', function() {
$(this)
.parent()
.find(".risknotes")
.toggle({ duration: 200,complete: function(){ $grid.isotope('layout') } });
$(this)
.parent()
.toggleClass('bigger');
});
Following is the link to my js fiddle in which i am trying to show a popover on hover property of the element hover for popover with id a1 . The problem i am facing is that when the page loads for the first time and on hover on that element the popover doesnot display. But when user clicks on hover for popover and then do the hover, then hover property works perfectly fine kindly let me know why isn't it happening on the page load event and how can i fix it so user doesnot have to click on the button and it display whatever in it.
Note: It can be easily done by following but the problem is ids for the elements are being dynamically generated so i cannot use the following method for specifically one id.
$(function ()
{ $("#example").popover();
});
JSFIDDLE:
http://jsfiddle.net/weuWk/323/
First, add a class to all of your hover elements:
<span id="a1" class="btn large primary hoverable">Popover</span>
Then, add the popover to each item:
$(document).ready(function(){
$('.hoverable').popover({title: "Hello"});
});
Edit: To reference the id (or any other attribute), you can use .attr() as follows:
$(document).ready(function(){
$('.hoverable').each(function(){
$(this).popover({title: $(this).attr('id')});
});
});
I think the problem comes from the fact you are calling the popover() function before your document is properly loaded and then before $('#a1') in your example can match anything.
Check your updated jsfiddle here : http://jsfiddle.net/weuWk/325/
You need to call popover only when your document is ready like this :
$(document).ready(function() {
$('#a1').popover({title: "Hello"});
});
fixed http://jsfiddle.net/pieterwillaert/weuWk/327/
what you do is the following:
when the document is loaded you iterate through all your buttons (I did it by using 'span' you could easely change that too '.button')
you give each button a popover
$(document).ready(function() {
$('span').each(function(index) {
$(this).popover({title: "Hello"});
});
});