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
Related
So far - and with great support from SO members, I am at the edge of finishing my Music Database program, along with all its complexities... As previously suggested, I am using Mysql, Php, JQuery and DataTable plugin, which gives great paginated results. All my Search results work as intended.
My database holds 15 columns of data. I have one table (OK for my current needs). I am able to currently POST and ECHO 12 columns of Search results within a 900px table.
To finalize my project, I also need to be able to show 3 more columns of - data which holds longer text (song description (150 Char), Producer Name(80 Char), and Publisher Name (80 Char), which obviously will not fit on this size table, even with wrapping - on the same row echo.
BUT how do I POST the last 3 columns in a SHOW/HIDE hidden div?, so users maybe click on a link and have these 3 pieces of information suddenly appear underneath any one row on the 900px table?
I have struggled for hundreds of hours just to get to this final stretch...So I need a final suggestion (or push off a cliff) as to where to look next for this answer...
Thank you in advance for any "easy" to understand suggestions you may have to offer me!!
Since you said that you are using datatable plugin, You can use following example to display lengthy details. Once you click on expand button, it will expand the particular row.
http://datatables.net/release-datatables/examples/api/row_details.html
Users don't need (and usually don't care) about all this information. Allow them to configure which columns they can see, and if they choose too many for the width then it's not your problem.
Create a link in your furthest right hand column (for example). Use an anchor link like this:
See More
In the next table row, put in a hidden <div id="extra-<?php echo $counter; ?>" class="hidden-more-data">..your data here..</div>
You can structure your data any way you like in those elements.
In CSS, you can hide .hidden-more-data with {display:none;}
Using jQuery, you can use $('.see-more').live('click',function(){}); in this kind of fashion:
$('.see-more').live('click',function(){
var href = this.href;
$(href).toggle();
return false;
});
And various similar possibilities.
use short headings and show full headings on mouse-over or title attribute.
Show limited char in table cells. And for detailed view show them in pop up div's or mouse-over events.
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've been racking my brain about an easy way to generate an HTML table with rowspans with PHP that would look like this, numbers indicating each cell's rowspan:
I noticed that there is sort of a pattern in the rowspans if you go from left to right, top to bottom: 1,3,7,1,1,1,1,1,3,1,1. I'm not sure if that matters.
Also, I wonder if it's possible to use any method for the table above for a table like this:
maybe addressing your second example first is easier, but it might be adapted to the first example.
the structure of the tables in html is obtained using the rowspan an colspan properties.
try to picture the table as a closet, the rows as drawers and cells as boxes inside those drawers.
with these properties, u can "merge" the cells throughout rows and/or columns.
my approach would be to set a minimal block with the appearance and data that you need, ie your second example, and write it down in html.
the "php-cycle-the-thing-up" part would require you to use that html "template" in the loop dropping your recordset data in the td portions of the html.
in that way, i think you might get what your looking for.
on the other side, if you need the php to create the table dynamically, and merge the cells automatically in a set pattern, or even ignoring the pattern and simply adapt the structure as the data is coming, it would probably be better to look at the structure from the end.
because of the way that tables are built with html, nesting table-tr-td, building cycles with this look is tricky. have you considered simply nesting divs?
i'm new to stackoverflow, i wanted to comment but by the time i finished this, i couldn't remove the answer nor comment the question, sorry if this didnt quite help you... :S
write down, come up with the recursion formula for the table. you need to come up with the math with the least number ideally ZERO conditional statements.
it's not that hard. for a desktop, i use three columns if it detects a mobile devices, my php automatically switches to 1 or 2 columns depending upon screen size
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;
}