Do you guys have some tips to make any large table, with 500+ rows, display quicker in Internet Explorer?
This is how I'm doing it right now:
The result of the MySQL query returns 500+ rows, so I use to a while loop with the following to display all the rows:
echo "<tr class='someMainClass' bgcolor='".$someBgColor."'>";
echo "<td width='10px' style='display: none;' class='someClass'>String</td>";
echo "<td class='someClassAgain andOtherClass' title='someTitle' >String again</td>";
echo "<td width='100px' class='ClassAgain' id='>another string</td>";
echo "<td width='100px' class='ClassAgain' title='title'><input type='text' value='and i input'/></td>";
echo "</tr>";
When the list is done, IE just freezes for a couple of seconds and then the list appears. In addition to this any hover effect on the <tr> works really slowly.
I'm not sure why this slow motion is being caused in IE as all other browsers work perfrectly.
Any help would be greatly appreciated.
Remember that most IE users aren't aware that their experience is subpar, they are used to it.
The best way might be to implement pagination, either server side, or via javascript.
Unfortunately it's going to be a problem with IE... You're better off somehow gracefully degrading for IE. Maybe just show the first 50 rows and implement pagination.
Save the data in a javascript object, load the first 20 (or however many take up the page), wait for document.ready and then start plugging the rest of the rows in with javascript. You could even plug the rows in as the page is scrolled.
A lot of work to make it look good in such a piece o' crap browser.
Rendering 500 rows on one page is a bad idea no matter what browser you are using, even though it might work better in Safari, Firefox and Chrome compared to IE. From a usability point of view it's horrible too.
So a better approach would probably be to re-think the solution and introduce pagination instead. Maybe 50 rows per page? or something.
Try to limit the markup. Remove all the width, style, id, etc, attributes, then make a script to populate these after the HTML is loaded. Scrap the style and width, go with classes. Remove extra spaces.
You can impliment it only showing what you need as you scroll through ajax, something like this tut, or even this tut.
But really IE just is awful. Having that much HTML is just so much for a simple little browser to handle...unless of course its not garbage.
The :hover pseudo-selector on non-anchor elements is known to make IE7 and IE8 slow in some cases*. When a strict doctype is not used, IE7 and IE8 will ignore :hover on any element other than anchors. When a strict doctype is used, :hover on non-anchors may cause performance degradation.
Source
Try using table-layout: fixed in your CSS:
With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.
That should speed up the initial rendering but you'll have to manage the column sizes by hand. Table column sizing usually requires a full scan of the table and then some negotiation if there isn't enough room to accommodate the natural widths of all the columns; using a fixed layout avoids the scan and the negotiation by statically setting the widths right away and then making all the cells comply whether they like it or not.
Related
Does anyone know a clever way to create even columns of text using php?
So lets say I have a few paragraphs of text and I want to split this into two columns of even length (not string length, I'm talking even visible length).
At the moment I'm splitting based on word count, which (as you can imagine) isn't working too well. For instance, on one page I have a list (ul li style) which is increasing the line breaks but not the word count. eg: whats happening is that the left column (with the list in it) is visibly longer than the right column (and if there was a list in the right hand column then it would be the same the other way round).
So does anyone have a clever way to split text? For instance using my knowledge of objective c there is a "size that fits" function. I know how wide the columns are going to be, so is there any way to take that, and the string, and work out how high its going to be? Then cut it in half? Or similar?
Thanks
ps: no css3 nonsense please, we're targeting browsers as far back as ie6 (shudder). :)
I know you're looking at a PHP solution but since the number of lines will depend on how it's rendered in the browser, you'll need to use some javascript.
You basically need to know the dimensions of the container the text is in and using the height divided by the text's line-height, you'll get the number of lines.
Here's a fiddle using jQuery: http://jsfiddle.net/bh8ZR/
There is not a lot of information here as to the source data. However, if you know that you have 20 lines of data, and want to split it, why not simply use an array of the display lines, then divide by two. Then you can take the first half of the PHP array and push it into the second column when you hit the limit of the first.
I think you're going to have trouble displaying these columns in a web browser and having a consistent look and feel because you're trying to apply simple programming logic to a visual layout. CSS and jQuery were designed to help layout issues. jQuery does have IE6 compatibility.
I really don't think you're going to find a magic bullet here if you have HTML formatting inside the data you're trying to display. The browser is going to render this based on a lot of variables. Page width, font size, etc. This is exactly why CSS and other layout styles are there, to handle this sort of formatting.
Is there any reason why you're not trying to solve this in the browser instead of PHP? IE6 to me is not a strong enough case not to do this where it belongs.
I am implementing search page in php.
I need to show the results like the following image
how can i achieve this kind of designing using css. I want it a fluid design using percentages with an addition i.e alternate row color changed.
Also let me know how can i limit a column to have not more than say 50 words. full detail will be available through a hyperlink on each row.
That's a perfect situation to use a table.
Don't just assume that "tableless design is better than design with tables", tables are meant to be used with tabular data and your design clearly fits.
About even/odd row coloring, if you target the modern browsers, use the following rule:
table tr:nth-child(even) { background-color: #c0ffee; }
table tr:nth-child(odd) { background-color: #123456; }
If you target also the older browsers, you can use javascript for that, JQuery comes in handy:
$('table tr:even').css('background-color: #123456');
Or add the classes manually in your server-side code.
About the limitation of number of characters/words in the row, that's usually done on server side. If you use a template engine like Smarty, then you're likely to have a function for that, but that's no big thing to roll up by yourself too.
1.) It is a table, so why not use tables?
2.) Give every row a div and inside the div make floating divs with fixed with.
3.) See this example: http://www.bernzilla.com/design/tables/table.html
I have lists generated from php that are varying lengths. How could I have the list at a certain height break and start filling a new column rather than remain in one long column?
If lists are no good I would be fine doing it with divs but I can not figure out how to do that either.
I would take a look at column-* declarations in CSS3. Be aware that they most likely won't work in IE as Firefox/Webkit browsers require hacks for it to work.
http://www.quirksmode.org/css/multicolumn.html
You would then just set a height to the wrapping div, which is where it will cut off and start a new column. I can't think of a way to do this after a set number of items, unless you add logic in your PHP to start a new column <div>/<ul> after X elements. Would even be a better solution.
If order isn't important, you can simulate columns by giving each li a fixed width and simply make them wrap around (float: left ought to do it).
Otherwise, you'll have to wait for CSS3 to be finalized and adopted.
I've got a client that requires that an article be displayed in two, sometimes three, columns in Joomla. I am fairly sure they won't be happy with having to edit 3 articles for 3 columns so the splitting would have to be done automatically.
I've done something similar before where it'll split a chunk of HTML into n columns, but have no real idea how to accomplish this within Joomla itself.
Any ideas gratefully recieved!
An alternative approach:
Use Javascript to split up the Article in several column in the browser. Here I could imagine a full-automated approach could work.
Advantages (over the first approach):
As Javascript can know, which height the paragraphs actually have in the browser (unlinke PHP), you could find the optimum split more accurately.
This can be implemented in the template php-File: you tell the template to include the js-File. So it could be made context-dependent,E.g.: If the left column is collapsed (because there are no modules in it), tell the JavaScript-File to initialize to 3 columns, else 2 columns.
However, have in mind that it should rest usable for those who have Javascript disabled.
This doesn't seem to be easy.
At first thought this should be an CSS attribute, but if it exists, it is part of CSS 3.0 and as such only understood by modern browsers (if at all). But I didn't find any way to do this in CSS.
So you actually have to modify your HTML code. I would propose the following:
A Button (editor-xtd plugin) that splits the article into several parts, each one for one column, showing a dotted line in the editor box (similar to the "read-more"-Button).
E.g. it inserts in the article: (you will have to define hr.column in /templates/system/css/editor.css).
A (content) plugin that creates the multiple colum-style,
E.g. replacing the hr-Tag with table or floating divs.
This way, it is half-automized, without mangeling in the Joomla! files but only adding to extensions to it.
the CSS 3 rules for multi-columns are:
-column-width
-column-gap
-column-rule
-column-count
with the vendor label (-moz, -webkit) before.
More info at http://www.css3.info/preview/multi-column-layout/
I would use css and tell the people with Explorer to change browser! (i'm jocking of course)
Otherwise javascript is the way like said before. This script should do (not tested) http://13thparallel.com/archive/column-script/
This should be done through the template, some PHP coding is involved.
One of our clients asked us to do the exact same thing before, and we have done it through template. Note that for very small articles we increased the font in order to split the article into 3 columns.
Setup
I have a website that draws RSS feeds and displays them on the page. Currently, I use percentages on the divs that contain each feed, so that multiples can appear next to each other.
However, I only have two next to each other, and if the window resizes, there can be some ugly empty space on the screen.
Desire
What I'd like to be able to do, but have not figured out a way yet, is to put all the feeds linearly into the page, and have:
a 'pre-built' multicolumn view where the feeds would "balance" themselves into the columns
which leads me to:
the number of columns change depending on how wide the screen is currently\
This is akin to how word processing applications handle columnar layouts.
Question
I presume that I will need to implement some form of AJAXy happiness, but currently know very little about Javascript.
Is there a way to do this with just CSS/HTML/PHP?
If not, how should I go about solving this?
final solution:
(based on #warpr's and #joh6nn's answers)
#rss
{min-width: 10em;
max-width: 25em;
min-height: 15em;
max-height: 25em;
font-size: .97em;
float: left;
}
You probably cannot get what you want with just CSS/HTML, but you can get somewhat close.
A trick I used for a photo album is this:
Make sure each feed has a fixed width, I would recommend something like '20em';
Make sure each feed has the same height.
Float everything left.
Because each div has the same dimensions, when they're floated left they will form a grid with exactly the number of columns that will fit in your browser.
Unless you actually fix the height of the divs and use CSS to clip the content, you will need javascript for step 2, what I did was:
Iterate over each feed div, finding the tallest div.
Iterate over each div again, changing the height to match the div found in the first step.
This is fairly easy to implement, but is obviously not optimal. I look forward to reading any better solutions posted here :)
you might be able to do this with lists; i've never tried it, so i'm not sure.
if you make list items display:inline, the list becomes horizontal instead of vertical. from there, if you stuff the list into a containing element and fiddle with the padding and margins, you may be able to get the list to line-warp, like text: again, i've never tried that, so i don't know.
if this technique works, i'd be very interested to hear about it.
The only way I can think of is a mixture of dynamic CSS and javascript. Every time a column (feed) is added, use the javascript to rewrite the width (in percentage) of each div.
jQuery would come in handy here.
var columns = $(".feed").size();
var size = 100/columns;
$(".feed").css("width",size+"%");
Someone feel free to correct me if I'm wrong. My jQuery is a little wobbly.
Of course, if you're not using AJAX, you could implement the same solution entirely in PHP.
You could also use this jQuery javascript (you will need the jQuery library).
var docwidth = $(document).width();
var numOfCollums = $('.feed').length;
var colWidth = docwidth/numOfCollums;
$('.feed').each( function() {
$(this).width(colWidth);
});
Which would set the column width dynamically.
For this to work your columns should have the class 'feed'
EDIT:
You should style your divs something like this:
.feed{
float:left;
}