I am trying to display the retrieved data in grid.
I used while loop and retrieved every thing.I applied css but now all rows are getting displayed in same color.
I am trying to do like this row0 blue color row1 green color row2 blue color row3 green color.How do i do it?
Use something like this (of course, adapt it to your loop) :
echo '<table>';
$i = 0;
foreach($myrows as $row) {
echo '<tr class="row'.(++$i % 2).'"><td>';
echo $row;
echo '</td></tr>';
}
echo '</table>';
With the following CSS code :
tr.row0 > td { background-color: blue; }
tr.row1 > td { background-color: green; }
Few methods if happy using CSS3 look at nth-child
Or place a counter inside your while statement and use mod function to apply a class
e.g.
while(...){
if($count%2)
{
\\add class
}
$count++;
}
You can do it in CSS3 (see http://www.w3.org/Style/Examples/007/evenodd)
In PHP, you can apply a "odd" class using a modulo:
<?php for ($i = 0; $i < 10; $i++) {
$class = ($i%2 != 0) ? ' class="odd"' : '';
echo '<tr'.$class.'>...</tr>';
}
You can also use a free tool like SDTable.com and it will do the job for you. You just go in into template css file and change row-1 and row-2 background colors or create a rule which specify the background color dynamicly based on the native data in your database.
Related
I've read a lot of information about the determination of a even/odd number and using it to change the class of a div.
In my case I want to switch the position of divs called MessagePicture and MessageText every new message posted.
Picture left, Text right
Picture right, Text left
Picture left, Text right
ect.
This is the code I am using to display the messages, I also included one of my tries to get the even/odd code to work.
Can anyone tell me what I should change to get it to work?
<?PHP
$Query =
"
SELECT
ID,
NameBox,
MessageBox,
Code
FROM
messages
ORDER BY
ID
DESC LIMIT 10
";
$Result = mysql_query($Query);
if(!$Result)
{
echo 'ERROR: '.mysql_error();
}
else
{
if(mysql_num_rows($Result) == 0)
{
echo 'No results';
}
else
{
$i = 0;
$class = (++$i % 2) ? 'even' : 'odd';
while
($Row = mysql_fetch_assoc($Result))
echo '
<div id="MessageWrapper">
<div id="MessagePicture" class="'.$class.'">
<style>
#MessagePicture {
background-image: url(../../../Images/'.stripslashes($Row['Code']).'.png);
background-repeat: no-repeat;
background-position: center
</style>
</div>
<div id="MessageText" class="'.$class.'">
<div id="MessageTitle">
<h1>'.$Row['NameBox'].'</h1>
</div>
<div id="MessageContent">
<p>'.nl2br($Row['MessageBox']).'</p>
</div>
</div>
</div>
';}}}?>
Your $i always stays 0. Add $i++ in the while loop to increment it.
You can do that in one line:
$class = ($i++ % 2 == 0) ? 'even' : 'odd';
Full Example:
$i = 0;
while ($Row = mysql_fetch_assoc($Result)) {
$class = ($i++ % 2 == 0) ? 'even' : 'odd';
//echo ...
}
This may not be an answer to your exact problem, but since any markup already carries information on which of child element rows are even and which are odd, and since CSS is able to differentiate between these, you can achieve this using pure CSS, which is what I boldly offer here.
Use CSS selectors :nth-child(even) and :nth-child(odd) to select even and odd children, respectively. That way you also don't have to change or tag your markup. An example:
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Pineapples</li>
</ul>
li:nth-child(even)
{
background-color: silver;
}
li:nth-child(odd) /* or leave this one out altogether */
{
background-color: white;
}
Check the following, rather authoritative page for more details and usage (like nth-child(5n+3)):
http://www.w3.org/Style/Examples/007/evenodd.en.html
I am creating multiple divs in a loop in php shown below.
<?php
for ($i=0; $i<=9; $i++)
{
for ($j=0; $j<=9; $j++)
{
echo "<div class=\"bg\" id=\"aaa".$i."\" style=\" position:absolute;top:".($i*10)."%;left:".($j*10)."%;\">
</div>";
}
}
?>
i want to select multiple divs (not all) and change their backgrounds using jquery. i cant seem to be able to figure out how to proceed with this
You can select div with id starting with aaa
$('div[id^=aaa]')
if you want to select yhe div's based on their index, you could use the nth-of-type selector:
divs = $('.bg:nth-of-type(1)');
divs.css('background-color','blue');
You can select multiple elements by adding them to the variable:
divs.add('.bg:nth-of-type(2)').add('.bg:nth-of-type(3)');
Note that these are css selectors so it may be an idea to simply do this in css:
.bg:nth-of-type(1),
.bg:nth-of-type(2),
.bg:nth-of-type(3){
background-color: blue;
}
also note you can use an expression inside the brackets to represent multiple values in a sequence.
.bg:nth-of-type(3n+1){ //will select every fourth div
background-color: blue;
}
Unless you can come up with a better criteria for which div's you want to change, this is probably the best way.
Source(s)
jQuery API - .add()
MDN - CSS :nth-of-type selector
This should do the trick:
var arrayDivs = $('div[id^=aaa]');
$.each(arrayDivs, function(){
$(this).css('background-color', '#000');
});
If you want to select multiple lists and not all "aaa"+integer ones, you will need to either know the numbers of those or you need to differ within your loops already.
More information would be awesome!
The "proper" way (if you can say that) would be to group the elements you want to assign common properties with appropriate classes. You can then manipulate them via CSS
So in essense, while looping in the above code :
for ($i=0; $i<=9; $i++) {
for ($j=0; $j<=9; $j++) {
$classes = 'bg';
if( [somelogic] ) { $classes .= ' bluefront'; }
if( [otherlogic] ) { $classes .= ' greenback'; }
echo "<div class=\"".$classes."\" id=\"aaa".$i."\" style=\" position:absolute;top:".($i*10)."%;left:".($j*10)."%;\"></div>";
}
}
and then, via CSS :
.bg.bluefront { color: blue; }
.bg.greenback.bluefront { background-color: green; color: white; }
//select all elements with class bg and add background image
$('.bg').css('background-image',"url('some_image.gif')");
better yet use css:
.bg {
background-image: url('some_image.gif');
}
if you only want some divs from the class bg:
$('.bg').each(function(index,element){
//your code here eg:
if(index == 2)
alert(index);
});
Hope this makes sense, I'll hopefully paint a clear picture.
<?php $rx_event_color = $rx_image_color = '#FF0000';
if ($a['rx_event_exists'] == 1) { $rx_event_color = '#00FF00'; }
if ($a['rx_scanned'] == 1) { $rx_image_color = '#00FF00'; }
else if ($a['rx_scanned'] > 1) { $rx_image_color = '#FFFF00'; }
?>
I don't want the whole background td to change color, only the text inside the td based on the event (data in sql)
if ($a['rx_event_exists'] == 0)
{
echo "<tr><td style='background:$rx_event_color'><a href='"
. matry::here_to('new', array('tfilt'=>'WR', 'pfilt'=>$patient->code))
. "'>**Rx Event Not Created**</a></td></tr>";
}
I tried to just change background to color and also tried adding it in a div instead... i figured it should be easier than it's turning out to be.. that's why i'm asking here. Thanks in advance my friends.
You need to move the style attribute to the anchor tag, as the link's styling is controlling the coloring of the text, not the td. Color and background-color can be used interchangeably here, depending on your purposes.
<td><a href='...' style='color:$rx_event_color'>...</a></td>
Alternately, you could use classes:
.notfound a { color: red }
<td class="notfound">...</td>
Basically I am createing a unknown size of checkboxs that is dependent on the row that is chosen from a table in my database. The reason I dont know the size is that the user chooses which row they will use with some rows containing what will become 10 checkboxs adn others containing as many as 75. So the problem is that if the user selects a row with a large amount of options it goes through the border of my div and then forces me to scroll the page down what I am looking for is a way to say >
if(number of checkboxs is >25 )
create a new column on my page
I dont know whether the right way to go about this is to use php or javascript or possibly do it using css I am new to all of these languages so any help no matter how trivial will greatly appreciated.
<div id="major1">
<?php
$courses=mysql_query("SELECT * FROM MAJORS_CHECKLIST WHERE MAJOR='$major'");
$courses_row=mysql_fetch_row($courses);
$count = 0;
echo "$courses_row[0] <br/>";
$checkit = 0;
$sidebyside = 0;
foreach($courses_row as $i=>$courses_row){
if($courses_row['$count'] == NULL)
{
break;//if we run out of courses stop printing them
}
if($courses_row[$count] == $courses_row[0] && $checkit == 0 )
{
$checkit = $checkit + 1;
}
else
{
echo "<input type='checkbox' value='$courses_row' name='majorCourses[]' /> ";//answer-$i
echo "$courses_row<br /> ";
}
$count = $count + 1;
/*$sidebyside++;
if($sidebyside == 2)//tried using this to put 2 checkboxes side by side that ened up just messing everything up
{
echo "<br/>";
$sidebyside = 0;
}*/
}
?>
here is my css:
#major1{
color: white;
/*border: 1px solid black;*/
padding: 5px;
float: left;
height:500px;
width:150px;
}
Producing a bunch of checkboxes in the div can be controlled using CSS. Should set the parent div of the checkboxes to the following rules: width:auto; height:auto; padding:10px 10px; position:relative; This is all assuming that the parent div of the checkboxes is a child of another div to control the preferred dimensions
edit: if you do not want to want to use css with the methods above, you can control the "X" amount of checkboxes per row. You can create a counter to count how many are being displayed and do a if($counter % X == 0) echo "</div><div>"; This is all assuming you have a starting div at the beginning of your code and an ending div at the end of the code.
I have a MySQL table that contains people's names.
Using PHP, what's the best way of dividing these names up and displaying them in 3 columns.
This could be achieved using an HTML table, but would it be possible to do this using only <div>'s?
I heard that this can be done using the % operator. Would this be the best way, and how would this be done?
You could do this using the modulus operator, however it's actually possible with just CSS.
Using display: inline-block, you can get a good column effect. Take a look at this JSFiddle here. I'm only using JavaScript because I'm lazy; the <div> list would be generated by PHP in your case. If you want to confine them to a certain width, just put them in a container <div> with a fixed width.
I've come up with a solution using tables, which is really what you should be doing (you haven't given any special use cases). The code is below, as well as a working demo here.
$columns = 4; // The number of columns you want.
echo "<table>"; // Open the table
// Main printing loop. change `30` to however many pieces of data you have
for($i = 0; $i < 30; $i++)
{
// If we've reached the end of a row, close it and start another
if(!($i % $columns))
{
if($i > 0)
{
echo "</tr>"; // Close the row above this if it's not the first row
}
echo "<tr>"; // Start a new row
}
echo "<td>Cell</td>"; // Add a cell and your content
}
// Close the last row, and the table
echo "</tr>
</table>";
And to finish off, we have our column-centric layout, this time going back to divs. There's some CSS here; this should be put in a separate file, not left inline.
<?php
$rows = 10; // The number of columns you want.
$numItems = 30; // Number of rows in each column
// Open the first div. PLEASE put the CSS in a .css file; inline used for brevity
echo "<div style=\"width: 150px; display: inline-block\">";
// Main printing loop.
for($i = 0; $i < $numItems; $i++)
{
// If we've reached our last row, move over to a new div
if(!($i % $rows) && $i > 0)
{
echo "</div><div style=\"width: 150px; display: inline-block\">";
}
echo "<div>Cell $i</div>"; // Add a cell and your content
}
// Close the last div
echo "</div>";
?>