I created three columns and three rows using li; I want to display one member in every li order by id.
<li> // Style: margin-bottom:10px;
Show first member result here...
</li>
<li class="middle_li"> // Style: margin:0px 10px 10px;
Show second member result here...
</li>
<li> // Style: margin-bottom:10px;
Show third member result here...
</li>
<li> // Style: margin-bottom:10px;
Show first member result here...
</li>
<li class="middle_li"> // Style: margin:0px 10px 10px;
Show second member result here...
</li>
<li> // Style: margin-bottom:10px;
Show third member result here...
</li>
<li> // Style: margin-bottom:10px;
Show first member result here...
</li>
<li class="middle_li"> // Style: margin:0px 10px 10px;
Show second member result here...
</li>
<li> // Style: margin-bottom:10px;
Show third member result here...
</li>
My PHP code:
<?php
require 'initialize.inc.php'; // Classes: connection & members
echo '<ul>';
$members = $member->display_members();
foreach ($members as $member)
{
$html_ouput = '<li>';
$html_ouput .= 'Show member result here...';
$html_ouput .= '</li>';
echo $html_output;
}
echo '</ul>';
?>
This php code display nine results. Three columns three rows but how can I give every second li row a class middle? Any modification in my php code? I don't want to use javascript.
You need to concatenate the string to output
try this:
<?php
require 'initialize.inc.php'; // Classes: connection & members
echo '<ul>';
$members = $member->display_members();
$i = 0;
foreach ($members as $member)
{
$html_ouput = '';
$i++;
if($i == 1)
$html_ouput .= '<li>';
else{
$i = 0;
$html_ouput .= '<li class="middle">';
}
$html_ouput .= 'Show member result here...';
$html_ouput .= '</li>';
echo $html_output;
}
echo '</ul>';
?>
What about this:
<?php
require 'initialize.inc.php'; // Classes: connection & members
echo '<ul>';
$members = $member->display_members();
$i = 0;
foreach ($members as $member)
{
$html_ouput = ($i % 3 == 1 ? '<li class="middle">' : '<li>');
$html_ouput .= 'Show member result here...';
$html_ouput .= '</li>';
echo $html_output;
$i++;
}
echo '</ul>';
?>
Add a counter in the for each loop and test to see if the counter is divisible by 2... If it is then its an even number. If it is an even number add the class="middle".
Related
I have a php code that display all categories of my store, the only problem with this code is give me this structure: ul > li > ul > li. I want to be able to change in css for example the Parent Category to have the color red and Child Category to have the color blue.
I try to use something like:
.sidebar.sidebar-additional ul li:first-child {color: red;}
but is not okay, both texts Parent Category and Child Category have the same red color.
What I can do be able to select both texts separately?
function categoryLoop($id){
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$categories = $objectManager->create('Magento\Catalog\Model\Category')->load($id);
if($categories->hasChildren()){
echo '<ul>';
$subcategories = explode(',', $categories->getChildren());
foreach ($subcategories as $category) {
$subcategory = $objectManager->create('Magento\Catalog\Model\Category')->load($category);
echo '<li>';
echo $subcategory->getName();
echo "</li>";
if($subcategory->hasChildren()){ categoryLoop($category); }
}
echo "</ul>";
}
}
The html output is:
<ul>
<li>Parent Category</li>
<ul>
<li>Child Category 1</li>
<li>Child Category 2</li>
<li>Child Category 3</li>
</ul>
</li>
</ul>
Thank you
There are two ways to get this done:
1. CSS
Style the parent as red and the children to blue.
.container > ul > li {
color: blue;
}
.container > ul > li > ul > li {
color: red;
}
2. PHP
Output the parent with some predefined class, and children also with a different class:
<?php
$output = "";
foreach($groups as $group){
$output .= "<ul class='parent'>"; // <---- add class here
foreach($parent as $key => $category){
$children = get_children($key);
$output .= "<li>" . $category . "</li>";
if(count($children) > 0){
$output .= "<ul class='child'>"; // <---- add class here
foreach($children as $key2 => category2){
$output .= "<li>" . $category2 . "</li>";
}
$output .= "</ul>";
}
}
}
Then with CSS:
.parent {
color: blue;
}
.child {
color: red;
}
The code you provided should change like this:
function categoryLoop($id, $is_sub = false){
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$categories = $objectManager->create('Magento\Catalog\Model\Category')->load($id);
if($categories->hasChildren()){
echo '<ul' . (($is_sub) ? ' class="category_children"' : '') . '>';
$subcategories = explode(',', $categories->getChildren());
foreach ($subcategories as $category) {
$subcategory = $objectManager->create('Magento\Catalog\Model\Category')->load($category);
echo '<li>';
echo $subcategory->getName();
echo "</li>";
if($subcategory->hasChildren()){ categoryLoop($category, true); }
}
echo "</ul>";
}
}
And then:
.sidebar.sidebar-additional ul li {
color: blue;
}
.sidebar.sidebar-additional ul.category_children li {
color: red;
}
You can set all li to red, and then target the li you want to be blue, by specifically selecting those that are nested within two ul
ul li {
color: red;
}
ul ul li {
color: blue;
}
<ul>
<li>Parent Category
<ul>
<li>Child Category 1</li>
<li>Child Category 2</li>
<li>Child Category 3</li>
</ul>
</li>
</ul>
you can use the direct child selector ul > li which selects only the direct child and not the lower childs
ul > li {
/*the first level*/
}
ul > li > ul > li{
/*the second level*/
}
Alternatively:
function categoryLoop($id){
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$categories = $objectManager->create('Magento\Catalog\Model\Category')->load($id);
if($categories->hasChildren()){
echo '<ul class="second_level">';
$subcategories = explode(',', $categories->getChildren());
foreach ($subcategories as $category) {
$subcategory = $objectManager->create('Magento\Catalog\Model\Category')->load($category);
echo '<li>';
echo $subcategory->getName();
echo "</li>";
if($subcategory->hasChildren()){ categoryLoop($category); }
}
echo "</ul>";
}
}
CSS
ul > li {color: red}
ul.second_level > li {color: blue}
I have this recursive function:
function recursive($arrays, $out) {
if (is_array($arrays)){
//$out .= "<ul>";
foreach($arrays as $parent => $data) {
//if parent is empty
if ($parent === '') {
$out = recursive($data, $out);
continue;
}
$out .= "<li>";
if (is_array($data)){
$out .= ' <a href="#" class="dropdown-toggle active" data-toggle="dropdown">';$out .= $parent;
}
else
{ $directory =explode("#", $parent)[0];$paname = explode("#", $parent[1]; $link = 'http://127.0.0.1/ocos/index.php?module='.$directory.'/'.$paname;
$out .= '<a href="'.$link.'">'; $out .= $data;
}
if (is_array($data)){
$out .= '<b class="caret"></b></a>';
}
else
{
$out .= "</a>";
}
if (is_array($data)){
$out .= "<ul class='dropdown-menu'>";
$out = recursive($data, $out);
$out .= "</ul></li>";
}
else
{
$out .= "</li>";
}
}
}
return $out;
}
In the menu bar I have a dropdown menu with parent calledoperation and with a child page called aro and aro have another child page called aro document list so all I wanna is that when I'm in aro document list make the parent operation active with green color to make the user know in which part of the menu he is in. Thank u in advance
I think you're making it too complicated. Is the below what you need? When you click on a,b or c the parent will get a green background.
$("li").on("click", function() {
var grandparent = $(this).parent("ul").parent("li");
if (grandparent.length > 0) {
grandparent.css("background", "green");
}
});
ul {
padding: 0;
list-style: none;
background: white;
}
li {
cursor: pointer;
}
.operations {
display: flex;
}
.operations li {
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="operations">
<li>1</li>
<li>2</li>
<li>3
<ul class="aro">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
i have a to show tags onto my view page from controller. I would like to show 5 tags per row ,currently with my below code its showing 1 tag per row. please help me how to do this?
$query = $this->tagsmodel->fetch_all_tags($postnumbers, $offset);
if (is_array($query))
{
foreach ($query as $row)
{
$content = substr(strip_tags($row->tags_name), 0, 180);
echo '<div class="parent" id='.$row->tags_id.'>';
echo '<a class="tagsbtn" href="" >'.$content.'</a>';
echo '</div>';
}
}
Currently i am getting output like this
$count=0;
$query = $this->tagsmodel->fetch_all_tags($postnumbers, $offset);
if (is_array($query))
{
foreach ($query as $row)
{
$count++;
$content = substr(strip_tags($row->tags_name), 0, 180);
echo '<div class="parent" style='float:left;' id='.$row->tags_id.'>';
echo '<a class="tagsbtn" href="" >'.$content.'</a>';
echo '</div>';
if($count%5==0) {
echo "<div style='clear:both'></div>";
}
}
}
so now it will display 5 divs per row
You can do with using css
.main {
width : 400px;
}
.main .parent{
float : left;
margin-right : 10px;
}
Adjust the width as per you will get 5 tags in row.
echo "<div class='main'>";
foreach ($query as $row)
{
$content = substr(strip_tags($row->tags_name), 0, 180);
echo '<div class="parent" id='.$row->tags_id.'>';
echo '<a class="tagsbtn" href="" >'.$content.'</a>';
echo '</div>';
}
echo '</div>';
Try to set floating for your div style="float: left;":
foreach ($query as $row)
{
$content = substr(strip_tags($row->tags_name), 0, 180);
echo '<div class="parent" id='.$row->tags_id.' style="float: left;">';
echo '<a class="tagsbtn" href="" >'.$content.'</a>';
echo '</div>';
}
You can use Kasyx solution but you won't be able to control the number of tags displayed on each row. By default, it will fill your div and break to a new line each time the width of displayed tags will be to large.
Use a counter in the loop to control the exact number of tags displayed. You may need to set a fixed width for your div and/or play with the overflow.
Your DOM should looks like
<div id="main">
<div class="rowdiv">
<div class="parent"><a ... >foo</a></div>
<div class="parent"><a ... >bar</a></div>
...
</div>
and the css properties :
.parent { float : left, ...} .rowdiv{ clear : both, ...}
The only thing you have to do is to use modulo in your loop and create a new "rowdiv" each 5 iteration.
PHP
echo '<ul>';
foreach ($query as $row)
{
$content = substr(strip_tags($row->tags_name), 0, 180);
echo '<li id="'.$row->tags_id.'">';
echo '<a class="tagsbtn" href="#">'.$content.'</a>';
echo '</li>';
}
echo '</ul>';
CSS
ul {style-list-type:none}
ul li {display:block;float:left
ul li:nth-child(5n+1) {clear:left}
Update
This will allow your tag to have dynamic width
New Working Example
jsFiddle
i'm developing a php project in which i'm getting the list from the database and i need to display this data in html in 3 columns and 10 rows and add a button "more" in the end
<?php foreach ($items as $item) { ?>
<ul>
<li><a href="<?php echo $item['href']; ?>" >
<?php echo $item['name']; ?></a></li>
</ul>
<?php } ?>
I want it to be displayed as-
item1 item2 item3
item4 item5 item6
.
.
.
.
Maximum 10 rows
last row will be
item item "more" - only if there are more items in the list
"more" is just a link which will take me to some other page
Thanks for any help.
Add display:inline to li and use pseudo class to break it
ul{
margin:0
}
li{
display:inline
}
li:nth-child(3n):after {
content:"\A";
white-space:pre;
}
Script (To display more link)
$('#moreli').toggle($("li").size() > 6);
This enables the more link after 6 list items, you can change the count in the script.
Note: Reduce the list items to check the effect
DEMO UPDATED
<style>
.row {
width:100%;
float:left;
}
.item {
width:100px;
float:left;
}
</style>
<?php
//*** your array of items
$items = array("item1", "item2", "item3", "item4","item5", "item6", "item7", "item8", "item9", "item10");
$numItems = sizeof($items);
//*** max number of rows
$maxRows = 10;
$maxItems = 3 * $maxRows;
echo '<div class="row">';
for ($i=0; $i<$numItems;$i++) {
echo '<div class="item">'.$items[$i].'</div>';
if (($i+1) % 3 == 0) {
//*** if divisible by 3, close row
echo '</div><div class="row">';
}
if ($i == $numItems) {
//*** last item reached, close div
echo '</div>';
}
if ($i+1 >= $maxItems ) {
//*** max 10 row, add more button.
echo '</div><input type="submit" value="Add More">';
return;
}
}
?>
Try to use this:
<?php
$count=0;
foreach ($items as $item) { ?>
<ul class="col3">
<li>
<?php if($count > 9) { ?>
More</li></ul>
<?php break;
} else{ ?>
<a href="<?php echo $item['href']; ?>" >
<?php echo $item['name'];
$count=$count+1;
?></a>
<?php } ?>
</li>
</ul>
<?php } ?>
and following css for it
.col3
{
margin-left:-3%;
}
.cols3 li
{
width:30%;
margin-left:3%;
display:inline-block;
vertical-align:top;
}
.cols3 li a
{
display:block;
}
i am working on one project, where i need to display products from mysql table using php.
My design is like that, 5 products display in one row and so on.
So if there is 7 products in table, it should be 2 rows.
first row 5 products
second row 2 products
I am using <UL> and <LI> to display product and row like
<UL>
<li>first</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
</ul>
<UL>
<li>6th</li>
<li>7th</li>
</ul>
I am wondering how to use foreach loop to get code like above.
If i use forloop with 5 increment i am unable to get products from table and display their name.
Thanks
echo '<ul>';
foreach ($yourResultSet as $index=>$data) {
echo '<li>' . YourOutput . '</li>';
if ($index % 5 == 0) {
echo "</ul><ul>";
}
}
echo '</ul>';
<ul>
<?php $i = 0; ?>
<?php while($row = mysql_fetch_array($result)): /* Used to loop through a resultset*/ ?>
echo "<li>".$row['data'].</li>";
<?php
$i++; // Increment by one every loop
if($i == 5){ // We've hit the fifth iteration
echo '</ul><ul>'; // Close the UL and open a new UL
$i = 0; // Set $i back to 0 and continue looping
}
endwhile;
?>
</ul>
Try that.
your best way of achieving this is to have your <li>'s have a specific width so that five of them fit in the parent container and that the following two or however many you have will drop to the next line.
<style>
#container {
width: 350px;
background: red;
padding:0;
margin: 0;
}
#list li
{
display: inline-block;
width: 50px;
height: 50px;
list-style-type: none;
background:blue;
margin: 2px;
padding: 0;
}
</style>
<div id="container">
<ul id="list">
<?php
while($row = mysql_fetch_array($result))
{
echo '<li>' . $row['data'] . '</li>';
}
?>
</ul>
</div>
You'll need to play with the sizes a bit but everything should work, and it you have 11 products this should do 2 rows of 5 and a third row of 1 product.