How can I add a css class to a randomly generated number.
example:
if the number is under 2000 add a css class named red to the div <div class="red">500</div>
if the number is over 2000 add a css class named blue to the div <div class="blue">2500</div>
There are many ways this could be done, but here's one simple one. If $rNum holds your randomly-generated number we can test whether it is less than or equal to 2000. If it is, we'll print "red", and if it's not we'll print "blue".
<p class="<?php print ( $rNum <= 2000 ) ? "red" : "blue" ; ?>">Hello World</p>
If you're new to PHP you may find the syntax of the ternary operator to be somewhat confusion. It's basically a simplified inline if-else statement. You can see more examples and read a short description online at php.net.
you can first generate the rand number, store it into a variable and then use if..else to add the class to div element, like below:
<?php $rand = rand($min,$max); ?>
<div class="<?php if ( $rand <= 2000 ) echo "red"; else echo "blue" ; ?>"><?php echo $rand; ?></div>
Alternatively, add an id element to this div tag, and then use Javascript to add the class.
Do you want to do this?
<div class="<?php echo ($number<2000)?'red':'blue'; ?>">
<?php echo $number ?>
</div>
Related
I'm building a webpage where data will be updated according to an external PHP array.
The words in those arrays should be printed as h1 tags inside 4 different div blocks which are under the "container" div.
My question is that how do I get those data from the PHP and print it in different classes in the HTML DOM without repeating PHP code for each and every div by calling out their class names separately..
php array:
<?php
$wrds=array("Home", "Buy", "Contact", "About");
?>
Html code:
<div class="container">
<div class="grid-item blue"></div>
<div class="grid-item red"></div>
<div class="grid-item orange"></div>
<div class="grid-item green"></div>
</div>
You can put the colors into an array also, which results in the following code for the list:
<?php
$wrds=array("Home", "Buy", "Contact", "About");
$colors=array("blue", "red", "orange", "green");
echo '<div class="container">';
$length = count($wrds);
for($i=0; $i<$length; ++$i) {
$color = $colors[$i];
$wrd = $wrds[$i];
echo "\t".'<div class="grid-item '.$color.'">'.$wrd.'</div>';
}
echo '</div>';
?>
The for($i=0; $i<$length; ++$i) is a for-loop. The for has three expressions as "arguments". The first expression sets $i to zero, the third expression increases $i by one in each repeat of the loop. The second expression is evaluated as a logical value. While the second expression is true, the loop is being repeated. The overall effect is to count from zero to one below the value of $length and to execute the loop body between the {..} for each value of $i.
I have my data being output to a span currently... this is how it looks:
Now, when i remove the span and place a div there i am given this output:
This is desired, but I want to set a height to my page and have the data show up in as little as 3 columns. How would I do this? I have searched everywhere online but can't seem to find anything that shows a solution.
I did read that some use javascript for the format but i am still clueless on even this option.
My desired output would look like this:
If you know how many items you want in a column then you can seperate them out into individual divs and then float those divs to the left to get them to be next to each other.
<div style='float:left'>
//Items go here
</div>
<div style='float:left'>
//Items go here
</div>
etc.
If you figure out how many items your query returned, say using mysql_num_rows() and divide by 3 you can tell how many to put in each column.
Also be sure to clear the floats afterwards, so like this:
<div style="clear:both"></div>
Sometimes this is necessary as there will be random issues if this is not put there.
What you are describing can be solved with styling only. You have several divs that must be displayed in columns. The easiest way is floating them to the left, and setting the width for 1/3 of the parent. If you want 4 columns, set the with to 1/4 of the parent, and so on.
<div class='sqlResult' style="float:left;width:33%;">
<a href='#'>$key</a>
</div>
Also as other answers mentioned, don't use duplicated ids. Always use classes. If you need to target each div individually, give it a unique id, such as "category_1", "category_2", and so on.
This should work
<table><tr>
<?php $count=0; $total=mysqli_stmt_num_rows($sql)-1; $idxcount=0; $limit=10; while($row = mysqli_fetch_array($sql)): $key = $row['Keyword_Name']; ?>
<?php if($count == 0){ echo '<td>';} ?>
<span>
<?php echo $key; ?>
</span>
<?php if($total == $idxcount): ?>
</td>
<?php elseif($count == $limit): ?>
</td>
<?php $count=0; else: $count++; ?>
<?php endif; $idxcount++; ?>
<?php endwhile; ?>
</tr></table>
I'm using Views 3 in Drupal 7 to output a list of fields and using a grouping field to generate separate lists. I need each of the groupings to have a unique ID attribute applied to the < ul > but they don't by default.
As far as I'm aware I would need to edit the views-view-list.tpl.php template but I don't know how to achieve a unique ID per iteration.
Can anyone help please?
easiest way I can think of off the top of my head...
<?php print $wrapper_prefix; ?>
<?php if (!empty($title)) : ?>
<h3><?php print $title; ?></h3>
<?php endif; ?>
<ul id="<?php echo uniqid(); ?>">
<?php foreach ($rows as $id => $row): ?>
<li class="<?php print $classes_array[$id]; ?>"><?php print $row; ?></li>
<?php endforeach; ?>
</ul>
<?php print $wrapper_suffix; ?>
that would go in your views-view-list.tpl.php file.
For future reference:
Put a div around everyting in view-views-list.tpl.php. You can (ab-)use the $title to generate unique (but consistent) id's.
Do it like this:
<?php $id = str_replace('FOR ALL UNWANTED CHARS','',$title); ?>
<div id="<?php print strtolower($id); ?>">
You can use the $view->dom_id variable. It is a unique id for that views instance.
In your .tpl.php file:
<?php print $view->dom_id; ?>
From comments in modules\views\theme\theme.inc:
<?php
// It is true that the DIV wrapper has classes denoting the name of the view
// and its display ID, but this is not enough to unequivocally match a view
// with its HTML, because one view may appear several times on the page. So
// we set up a hash with the current time, $dom_id, to issue a "unique" identifier for
// each view. This identifier is written to both Drupal.settings and the DIV
// wrapper.
?>
I am having trouble creating a solution that will target the end row of a MySQL query. Currently I have a foreach function that works through the query and displays each one as a div with the information inside:
<?php $residents = Resident::find_all();
foreach($residents as $resident): ?>
<div class="submenu">
<p class="menuitem submenuheader"><?php echo $resident->name; ?></p>
<img src="images/<?php echo $resident->image_path(); ?>" width="250" class="image" />
<p><?php echo $resident->info; ?></p>
</div>
.submenu currently has a bottom border. I need to remove this on the last row returned. I have looked at DESC LIMIT 1, however this requires another MySQL query and could make things very messy...
Addd this to your CSS:
.submenu:last-child { border-bottom: 0; }
Note: this is not supported by IE < 9.
You could switch to putting the border on the top of the element, and use the :first-child pseudo selector in CSS to remove it.
http://reference.sitepoint.com/css/pseudoclass-firstchild
The :last-child selector would be nice, but it's not supported in IE before version 9, so it's not a good idea to use it if you want compatibility.
If you separate your HTML and PHP a little this is easily achieved:
<?php
function echoBlock($resident,$pClass="menuitem submenuheader") {
echo "<div class=\"submenu\">\n<p class=\"$pClass\">\n";
echo $resident->name;
echo "</p>\n<img src=\"images/";
echo $resident->image_path();
echo "\" width=\"250\" class=\"image\" />\n<p>";
echo $resident->info;
echo "</p>\n</div>\n\n";
}
$residents = Resident::find_all();
$last=count($residents)-1;//2 element array last pos is 1
for ($i=0;$i<$last;$i++) {
echoBlock($residents[$i]);
}
echoBlock($residents[$last],"menuitem");
?>
echoBlock (which could easily be a method on a class) requires the calling code to know about the classes it uses, which isn't really separating intent but it does prevent the need for an if branch on every loop. That being said it would be less efficient but perhaps more usable to set it up as:
function echoBlock($resident,$isLast=false) {
$pClass="menuitem".($isLast?"":" submenuheader");
//...
Which then doesn't need the caller to know anything about what echoBlock does.
You could try and pop the array using array_pop(), to get the last value out of the array and then inputing it using the special class after the foreach loop.
What about
Instead of echo'ing each line one by one, create one big string in PHP, search for the last entry of "submenu" and change the class.
I want to change the classes on every third output from a query:
<?php
$style_classes = array('box','box','box no_right_margin');
$style_index = 0;
?>
I set this on the div:
<div <?php $k = $style_index%4; echo "class=$style_classes[$k]"; $style_index++; ?>>
On the third div I want the class to look like this:
<div class="box no_right_margin">
Right now it looks like:
<div class="box" no_right_margin>
You need to enclose the class names in quotes. Your script is actually outputting class=box no_right_margin. (I think the example you gave as the current output is not what the script is sending, but the view of the DOM from something like Firebug, which is showing the browser as only seeing the first class in the list)
So you could do this:
<div class="<?php $k = $style_index%4; echo $style_classes[$k]; $style_index++; ?>">
or even
<div class="<?php echo $style_classes[$style_index++ % 4]; ?>">
You should use %3 instead of %4, so you actually get indexes 0, 1 and 2.
And you need correct quotes in your HTML output:
<?php echo '<div class="' . $style_classes[$k++ % 3] . '">'; ?>
Else your browser (Safari?) would probably correct it with a " at the wrong place, as shown in your example. Btw, it's better style to use hyphens for CSS class names, not underscores (unlike IDs).