I am using this tablescript to display a virtual table but for some reason after a specific point problems occur.
On Google Chrome after the top value (The position value where the row is displayed in the parent div) of 1.677715e+07px (16777150px) is exceed the rows are missing its border-bottom for some reason. This happens on the newest version of Chrome (v69). On version 68 the rows at this top value and more arent rendert at all.
They are still there, you can see them via the inspect tool on the browser.
Does the number 16777150 has something to do with JavaScript or Google Chrome?
On Edge browser something different happens. If the parent div of the virtual table exceed the height of 10737418px, the rendered height of this div will be only as big as its content height So if the last row is ending at top 900px, the table will be 900px height too. If you scoll further down and the new row is rendert, the div will get bigger too. But in the inspector you can see the right height value in this element and it doesnt change at all.
To post this link I need this code..
Here is the Code exampel.
If you want it to test it yourself, the .js and .css are in the github of this tablescript in the example folder.
Maybe this hase something to do with the browsers or JavaScript so I ask this question here.
I dont know how your table is being displayed.
But it's not a good practice to display this much entries at once. Try to use pagination.
Have a look at https://datatables.net/ and try to dynamically load table entries (like pick it up from database or something like this)
You had mentioned that tablescript also do the same thing and i see that after many records it display so long empty space without data.
But here, I want to confirm with you that if you use the pagination and display 20 rows at a time then it should work without any issue.
Then why you want to display large number of records?
If you have any issue with 20 rows then try to let us know about that.
We will try to find the solution for it.
Regards
Deepak
Related
I´m trying to code blog and i want to synchronise positions of timeline events and it´s posts. I coded it as two different columns and I´m trying to get height of post with jQuery and then count the size of blank space in timeline event. Everything seems to be set OK, console gives me equivalent numbers and so the programmer tools in chrome. You can see the height of the post here and these are heights of elements next to it: element1, element2, element3. Together, it 740px but the main element-post is also 740px.
So, I would like to know, how is this possible? Thank you.
As you can see in the pictures, the margin is not included in the size. So, for instance, while that "G+" icon may be 32x32, with margins, it taking up what looks to be closer to maybe 48x48. And the height of the article is only referring to up to the green line (the padding).
There are probably multiple ways of solving this, but using what you're doing now, if you wrap those margin-spaced elements in divs, then those wrapping divs will have the correct sizing themselves.
I have to render up to 1500 row using jquery plugin Datatables and twitter bootstrap css. In each row, there is a table that can contain up to 50 row.
Using chrome developper tools profiler and testing, the rendering is a real problem. For example, i have for 250 items displayed 219861 selector match for .table th, .table td.
How can i optimize this ?
I retrieve twitter bootstrap from bootstrapcdn
I am a framework developer and I can share some of things I have faced and remember at this moment
When writing table inside table layout, don't use
'box-sizing:border-box'
Instead use 'content-box', otherwise it will create gaps between rows, not columns if you have specified or not specified borders. No style will help you to remove that.. This is very important while implementing nested table layout
Even if you are using DIV with table layout, take care 'max-width' does not work properly in some mozilla versions, for that you may have to maintain a "wrapper" DIV that is occupying the 100% width and 100% height of cell.
Maintain block lever wrappers inside cells and apply skins to it if it is table, because hover and focus will not apply properly.. Example: half filled hover skin observed in some modern browsers as well.
And while embedding those many elements dynamically instead of creating elements on fly and appending, prepare HTML string and append it, it does perform very well.. I have observed this. But modifying html renderer might look dirty, but all we need is performance
These are some things I remember at this point of time. If I am wrong somewhere please correct me..
Suggestion If you are targeting mobile browsers as well, then go for table layout until unless you have good expertise in dealing with div layout. Floats does not work properly in some mobile devices. And tables scaled properly with media Queries in mobiles as well.
I recently had a similar situation with waaaay too much table data and had to solve it with pagination. The HTML has to pull all that info and build that massive table before it will even start to render it, thus the horrible slowness.
Finally i will limit maximum number of rows displayed to 200. No "display all the stuff" allowed.
I will try to optimize css too. Seems that there is a lot of definition of bootstrap css i don't use.
I'm trying to create a column-based, blog layout. I want the text to wrap to a new column when it hits the bottom of the page. At it's very simplest form something like, when the column height == the_height_of_the_wrapper then column-count++.
The problem with something like that would be the text would be distributed evenly. Also, that would rely on css columns and I want something a bit more browser-friendly. Are there any existing plugins for this functionality or anywhere I can get some ideas?
If anyone is familiar with any of the text-heavy windows 8 "metro" apps (such as the news one) that's the kind of layout I'm trying to mimic.
As i noticed in comments, you cannot use column-count there. But there is solution, check this one please: Continuing overflowed text in a different div?
Alternatively. You can apply a fixed height (even a percentage will work) to the wrapper the columns will fill appropriately. (example: w3schools.com/css3/tryit.asp?filename=trycss3_column-count). It even seems as though you don't have to specify a fixed column count as it appears to create extra columns as the content dictates.
I am using jQuery Tools scrollable for a carousel with three items in view at a time and scrolling one single item in an autoscrolling and circular fashion.
I have used CSS to show the three items. This works ok until the carousel reaches the last item, it seems to wait until it has gone past it to load in the following items.
It also seems to wait until the middle item is fully in view before displaying the last item.
Demo here:
http://jsfiddle.net/pgxSm/6/
Is there anything I can do about this?
Yes you can. I've had that very same problem.
The element that contains the items needs to have a very large width. Try adding CSS like this:
.items {
width: 20000em;
}
Actually this is one of the requirements to make jQuery Tools Scrollable work properly, as stated on the developer's demo page. This way all items can be displayed in one row to that there is no space visible after the last item while scrolling. It doesn't matter if it's larger than needed, as long as it is never too small.
jQuery Tools Scrollable is actually built to only display one item at a time. This means you have to change the code of the script:
You can find the non-minified script here. Search for the line in the Scrollable script that says
cloned2 = self.getItems().eq(1).clone().appendTo(itemWrap);
Replace it with this line:
cloned2 = self.getItems().slice(1,4).clone().appendTo(itemWrap);
This way you clone the first 3 items (instead of only the first item) and add it to the end of the items, so that circular scrolling is possible even though more than one items are visible at a time. If you want more items to be visible at a time, just replace 4 with [number of visible items] + 1. Afaik, there's no other way to make jQuery tools work with multiple items being visible at a time. I also use this solution at work.
If you want to get the minified version of the script again, after your changes, simply use this minifier. It works like a charm. :)
If this was what you were looking for, please consider marking it as the correct answer. Thank you!
The above answer is technically correct, however, if you're downloading it in a bundle from the jQuerytools site, it is worded slightly differently.
The line you might be looking for instead is:
l = f.getItems().eq(1).clone().appendTo(h);
Which should change, in a similar way to the above answer, to this:
l = f.getItems().slice(1,4).clone().appendTo(h);
Not fully tested, use at your own risk.
If you'd like to make it configurable, just add
circularVisibleItems:1
into conf object and then change
l=f.getItems().eq(1).clone().appendTo(h);
into
l=e.circularVisibleItems>1?f.getItems().slice(1,e.circularVisibleItems+1).clone().appendTo(h):f.getItems().eq(1).clone().appendTo(h);
Than you can define how many items have to be cloned in which slider.
I created a some javascript/jquery code to filter an html table. The filter works by assigning two classes to the rows ('show' and 'hide') depending on the value of certain cells and then using CSS to hide the rows with the 'hide' class. The filter works perfectly. However, when I apply the filter, somehow the table row height keeps changing (usually the height increases significantly - ~ 2 or 3 times the desired height). I have no idea why this is happening. My code is a few hundred lines so I don't think it would be worth pasting here. And I have no idea which section(s) of my code are causing the problem (or whether the issue is with the javascript/jquery or external css file).
Can anyone offer some suggestions for how I can best debug this problem?
EDIT: In addition to the row height increasing (the main problem), the column width also shrinks a little when the filter is applied.
UPDATE: I solved the problem (at least for the changing row heights). It was related to a CSS setting where I set the height of the table body. Thanks to the suggestions below, I used Firebug to inspect everything more closely. I found a feature in Firebug that allows you to turn on/off CSS properties, as well as delete DOM elements. By using those features, I was able to isolate the on CSS property that was causing the problems. Thanks for the input everyone.
Are you trying to do something like this.
If so then see if that helps or if you can put a sample like that which replicates the problem.
What I can think of is:
1: The class that is being applied when your hide/show has some issues.
2: The elements on which you are trying to apply the classes are wrong.
May be you can post some sample markup before and after filters.
I solved the problem (at least for the changing row heights). It was related to a CSS setting where I set the height of the table body. Thanks to the suggestions below, I used Firebug to inspect everything more closely. I found a feature in Firebug that allows you to turn on/off CSS properties, as well as delete DOM elements. By using those features, I was able to isolate the on CSS property that was causing the problems. Thanks for the input everyone.