I have the following code for integrating a categories menu with unlimited multi levels
<ul id="menu_mb_ul" class="nt_mb_menu">
<li class="menu-item menu-item-has-children only_icon_false">
<span class="nav_link_txt flex al_center">1 Category</span><span class="nav_link_icon ml__5"></span>
<ul class="sub-menu">
<li class="menu-item menu-item-has-children only_icon_false">
<span class="nav_link_txt flex al_center">2 Category</span><span class="nav_link_icon ml__5"></span>
<ul class="sub-sub-menu">
<li class="menu-item">
3 Category</li>
</ul>
</li>
</ul>
</li>
</ul>
My Php code is the following but it doesn't show me the third level categories. Where am I wrong?
function buildCategory2($parent, $category) {
$html = "";
if (isset($category['parent_cats'][$parent])) {
if (!isset($category['parent_cats'][$cat_id])) {
$html .= "<ul id='menu_mb_cat' class='nt_mb_menu'>\n";
}
else
{
$html .= "<ul id='menu_mb_cat' class='nt_mb_menu'>\n";
}
foreach ($category['parent_cats'][$parent] as $cat_id) {
if (!isset($category['parent_cats'][$cat_id])) {
$html .= "<li class='menu-item'>\n <a href='" . $category['categories'][$cat_id]['category_link'] . "'>" . $category['categories'][$cat_id]['category_name'] . "</a>\n</li> \n";
}
else
if (isset($category['parent_cats'][$cat_id])) {
$html .= "<li class='menu-item menu-item-has-children only_icon_false'>\n <a href='" . $category['categories'][$cat_id]['category_link'] . "'><span class='nav_link_txt flex al_center'>" . $category['categories'][$cat_id]['category_name'] . "</span><span class='nav_link_icon ml__5'></span></a> \n";
$html .= "<ul class='sub-menu'><li class='menu-item'><span class='nav_link_txt flex al_center'>".buildCategory($cat_id, $category)."</span></li>";
$html .= "</li>\n";
$html .= "</ul>\n";
}
}
$html .= "</ul> \n";
}
return $html;}
echo buildCategory2(0, $category);
I found the solution myself.
function buildCategory2($parent, $category) {
$html = "";
if (isset($category['parent_cats'][$parent])) {
$html .= " <ul id='menu_mb_ul' class='nt_mb_menu'>\n";
foreach ($category['parent_cats'][$parent] as $cat_id) {
if (!isset($category['parent_cats'][$cat_id])) {
$html .= "<li class='menu-item'>\n <a href='" . $category['categories'][$cat_id]['category_link'] . "'>" . $category['categories'][$cat_id]['category_name'] . "</a>\n</li> \n";
}
if (isset($category['parent_cats'][$cat_id])) {
$html .= "<li class='menu-item menu-item-has-children only_icon_false'>\n <a href='" . $category['categories'][$cat_id]['category_link'] . "'><span class='nav_link_txt flex al_center'>" . $category['categories'][$cat_id]['category_name'] . "</span><span class='nav_link_icon ml__5'></span></a><ul class='sub-menu'> \n";
$html .= "<li class='menu-item'>".buildCategory2($cat_id, $category)."</li>";
$html .= "</ul> \n";
$html .= "</li> \n";
}
}
$html .= "</ul> \n";
}
return $html; } echo buildCategory2(0, $category);
Related
im generating a bootstrap navbar using codeigniter, its working fine but i want the admin link to be aligned to the right. here is my code:
function get_menu ($array, $child = FALSE)
{
$CI =& get_instance();
$str = '';
if (count($array)) {
$str .= $child == FALSE ? '<ul class="nav navbar-left navbar-custom">' . PHP_EOL : '</ul>' . PHP_EOL;
foreach ($array as $item) {
$active = $CI->uri->segment(1) == $item['slug'] ? TRUE : FALSE;
if (isset($item['children']) && count($item['children'])) {
$str .= $active ? '<li class="dropdown active">' : '<li class="dropdown">';
$str .= '<a class="dropdown-toggle" data-toggle="dropdown" href="' . site_url(e($item['slug'])) . '">' . e($item['title']);
$str .= '<b class="caret"></b></a>' . PHP_EOL;
$str .= get_menu($item['children'], TRUE);
}
else {
$str .= $active ? '<li class="active">' : '<li>';
$str .= '' . e($item['title']) . '';
}
// Closing tags
$str .= '</li>' ;
}
//add dashboard link to the right of menu for login
$str .= '<li>' . '<p class="navbar-text navbar-right"><a
`href="admin/dashboard" class="navbar-link"> ADMIN</a></p></li>' . PHP_EOL;
$str .= '</ul>' . PHP_EOL;
}
im getting a navbar with required links but its all inline. any help is aappreciated. Cheers
This is because of where you are adding the navbar-right class. You have to add it to an ul element. Change your second to last string:
$str .= '<li>' . '<p class="navbar-text navbar-right"><a `href="admin/dashboard" class="navbar-link"> ADMIN</a></p></li>' . PHP_EOL;
To something along these lines:
<ul class="nav navbar-nav navbar-right">
<li> ADMIN</li>
</ul>
And do not add it inside of your current ul element, that will also not work; you need to close the navbar-left class then add the navbar-right.
Looking something like this:
UPDATE
I think I got it, you do not have the nav element around your navbar, and that is probably what is causing the issues with alignments...
<?php
function get_menu ($array, $child = FALSE)
{
$CI =& get_instance();
$str = '';
if (count($array)) {
$str .= $child == FALSE ? '<nav class="navbar navbar-default"> <ul class="nav navbar-nav navbar-custom">' . PHP_EOL; // create the <nav> element
foreach ($array as $item) {
$active = $CI->uri->segment(1) == $item['slug'] ? TRUE : FALSE;
if (isset($item['children']) && count($item['children'])) {
$str .= $active ? '<li class="dropdown active">' : '<li class="dropdown">';
$str .= '<a class="dropdown-toggle" data-toggle="dropdown" href="' . site_url(e($item['slug'])) . '">' . e($item['title']);
$str .= '<b class="caret"></b></a>' . PHP_EOL;
$str .= get_menu($item['children'], TRUE);
}
else {
$str .= $active ? '<li class="active">' : '<li>';
$str .= '' . e($item['title']) . '';
}
// Closing tags
$str .= '</li>' ;
}
$str .= '</ul>' . PHP_EOL;
//add dashboard link to the right of menu for login
$str .= '<ul class="nav navbar-nav navbar-right">
<li> ADMIN</li>
</ul>' . PHP_EOL;
// add the nav closing tag
$str .= '</nav>' . PHP_EOL;
}
?>
I have a folder containing images that I want to put inside a Bootstrap carousel. Instead of hardcode everything in my HTML, I thought to use PHP to scan the image files and create my carousel list dynamically.
After various attempts, my best achievement was having a carousel listing the names of my images (rather than the image themselves).
My code is below. I have two question about it:
(obviously) Why is it not working?
Is there a better way to separate such a long PHP function from the HTML code (like a call with include but that would work with functions)?
<div class="container-fluid">
<?php
$img_folder = './img/img_animazione/';
function carousel_loop($folder)
{
echo '<div id="myCarousel" class="carousel slide" data-ride="carousel">';
echo '<ol class="carousel-indicators">';
$i = -1;
$images = scandir($folder);
foreach($images as $image) {
$i++; //$i is the index of the current loop.
if ($i == 0) {
echo '<li data-target="#myCarousel" data-slide-to="' . $i . '" class="active"></li>';
} else {
echo '<li data-target="#myCarousel" data-slide-to="' . $i . '"</li>';
}
}
echo '</ol>';
echo '<div class="carousel-inner">';
foreach($images as $image) {
if ($image === reset($images)) {
echo '<div class="item active">';
echo '<img src="' . $image . '" alt="'. $image . '">';
echo '</div>';
} else {
echo '<div class="item">';
echo '<img src="' . $image . '" alt="'. $image . '">';
echo '</div>';
}
}
echo '</div>';
echo '<a class="left carousel-control" href="#myCarousel" data-slide="prev">';
echo '<span class="glyphicon glyphicon-chevron-left"></span>';
echo '<span class="sr-only">Previous</span>';
echo '</a>';
echo '<a class="right carousel-control" href="#myCarousel" data-slide="next">';
echo '<span class="glyphicon glyphicon-chevron-right"></span>';
echo '<span class="sr-only">Next</span>';
echo '</a>';
echo '</div>';
}
carousel_loop($img_folder);
?>
</div>
That's not the way to use functions. You can't echo like that from inside the function. You have to build up the HTML inside the function and return it. Then either just echo the function or assign what it returns to a variable.
So like this:
<?php
function carousel_loop($folder)
{
html = "";
html .= '<div id="myCarousel" class="carousel slide" data-ride="carousel">';
html .= '<ol class="carousel-indicators">';
$i = -1;
$images = scandir($folder);
foreach($images as $image) {
$i++; //$i is the index of the current loop.
if ($i == 0) {
html .= '<li data-target="#myCarousel" data-slide-to="' . $i . '" class="active"></li>';
} else {
html .= '<li data-target="#myCarousel" data-slide-to="' . $i . '"</li>';
}
}
html .= '</ol>';
html .= '<div class="carousel-inner">';
foreach($images as $image) {
if ($image === reset($images)) {
html .= '<div class="item active">';
html .= '<img src="' . $image . '" alt="'. $image . '">';
html .= '</div>';
} else {
html .= '<div class="item">';
html .= '<img src="' . $image . '" alt="'. $image . '">';
html .= '</div>';
}
}
html .= '</div>';
html .= '<a class="left carousel-control" href="#myCarousel" data-slide="prev">';
html .= '<span class="glyphicon glyphicon-chevron-left"></span>';
html .= '<span class="sr-only">Previous</span>';
html .= '</a>';
html .= '<a class="right carousel-control" href="#myCarousel" data-slide="next">';
html .= '<span class="glyphicon glyphicon-chevron-right"></span>';
html .= '<span class="sr-only">Next</span>';
html .= '</a>';
html .= '</div>';
return html;
}
?>
<div class="container-fluid">
<?php
$img_folder = './img/img_animazione/';
echo carousel_loop($img_folder);
?>
</div>
Thanks to #Abraham A. answer, I finally was able to come up with a working (still "dirt") solution. I'll post the code below. The problems in my initial code were:
Using echo within a function instead of returning a (very long) HTML string in the function and "echoing" it from outside.
<img src= obviously wants a source and not just a filename. My first attempt was <img src= . $image, the correct form is <img src= . $folder . DIRECTORY_SEPARATOR . $image
It seems like [scandir()][1] creates an array with all the filenames within a folder AND ".", ".." (current and parent folder) in it. I got rid of the latters via $allFiles = scandir($folder); $images = array_diff($allFiles, array('.', '..')); as suggested here.
My working code is this one now.
<?php
function carousel_loop($folder)
{
$html = "";
$html .= '<div id="myCarousel" class="carousel slide" data-ride="carousel">';
$html .= '<ol class="carousel-indicators">';
$i = -1;
$allFiles = scandir($folder); // list all files in folders
$images = array_diff($allFiles, array('.', '..')); // drop current and parent folder from array list (".", "..")
foreach($images as $image) {
$i++; //$i is the index of the current loop.
if ($i == 0) {
$html .= '<li data-target="#myCarousel" data-slide-to="' . $i . '" class="active"></li>';
} else {
$html .= '<li data-target="#myCarousel" data-slide-to="' . $i . '"></li>';
}
}
$html .= '</ol>';
$html .= '<div class="carousel-inner">';
foreach($images as $image) {
if ($image === reset($images)) {
$html .= '<div class="item active">';
$html .= '<img src="' . $folder . DIRECTORY_SEPARATOR . $image . '" alt="' . $image . '" style="width:100%;">';
$html .= '</div>';
} else {
$html .= '<div class="item">';
$html .= '<img src="' . $folder . DIRECTORY_SEPARATOR . $image . '" alt="' . $image . '" style="width:100%;">';
$html .= '</div>';
}
}
$html .= '</div>';
$html .= '<a class="left carousel-control" href="#myCarousel" data-slide="prev">';
$html .= '<span class="glyphicon glyphicon-chevron-left"></span>';
$html .= '<span class="sr-only">Previous</span>';
$html .= '</a>';
$html .= '<a class="right carousel-control" href="#myCarousel" data-slide="next">';
$html .= '<span class="glyphicon glyphicon-chevron-right"></span>';
$html .= '<span class="sr-only">Next</span>';
$html .= '</a>';
$html .= '</div>';
return $html;
}
?>
<div class="container">
<?php
$img_folder = './img/img_animazione';
echo carousel_loop($img_folder);
?>
</div>
i have a folder 'server' and inside of server i have anothers folders 'computer1' and 'computer2' and inside of computer1 i have more folder and inside of computer2 i have more folders too
So i have a sidebar and until now i put this to show the computer1 and computer2
<ul class="nav side-menu">
<?php
foreach (glob('server/sandro/*', GLOB_ONLYDIR)as$subfolder) {
echo '<li><a><i class="fa fa-home"></i>'. basename($subfolder) .'<span class="fa fa-chevron-down"></span></a>';
echo '<ul class="nav child_menu">';
echo '</ul>';
echo '</li>';
}
?>
</ul>
and well..it's result, but now i want to add inside of
echo '<ul class="nav child_menu">';
echo '</ul>';
the rest of subfolders that are inside of the computer1 and computer2
please, help-me.
Hi you have to use function and call function in itself
<ul class="nav side-menu">
<?php
function foldersList($folderName = NULL) {
$return = '';
foreach (glob('./server/sandro/' . $folderName . '*', GLOB_ONLYDIR) as $subfolder) {
// call function to check subfolders - don't forget write `/`
$subFolders = foldersList(basename($subfolder). '/');
$return .= '<li><a><i class="fa fa-home"></i>' . basename($subfolder) . '<span class="fa fa-chevron-down"></span></a>';
$return .= '<ul class="nav child_menu">';
// if subfolder exist add to return variable
$return .= $subFolders != '' ? $subFolders : '';
$return .= '</ul>';
$return .= '</li>';
}
return $return;
}
echo foldersList();
?>
</ul>
I want to ask something which I don't have any idea if its possible or not.
I will show you first as html to explain what I need.
<nav class="nav-categories">
<ul>
<li class="no-filter">
<strong>Category Name</strong> <span class="count">25</span>
</li>
<li class="no-filter">
<strong>Category Name</strong> <span class="count">25</span>
</li>
<li class="no-filter">
<strong>Category Name</strong> <span class="count">25</span>
</li>
<li class="no-filter">
<strong>Category Name</strong> <span class="count">25</span>
</li>
</ul>
<div class="hidden-content" id="hidden-categories">
<ul>
<li class="no-filter">
Category Name<span class="count">25</span>
</li>
<li class="no-filter">
Category Name<span class="count">25</span>
</li>
<li class="no-filter">
Category Name<span class="count">25</span>
</li>
<li class="no-filter">
Category Name<span class="count">25</span>
</li>
</ul>
</div>
<button class="category-toggle" data-action="content-toggle" data-target="#hidden-categories" data-more="Display More Categories" data-less="Display Less Categories">Display All Categories</button>
</nav>
As you see on the code above there are 2 <ul> elements two menus, but one is visible and one is hidden which I can display hidden-content by clicking on the button.
With the code below I can display all WordPress categories but would be nice to know if its possible to display the half of categories in the first div and the other half in hidden-content class.
<?php
$categories = get_categories();
echo '<nav class="nav-categories"><ul>';
foreach($categories as $category) {
echo '<li class="no-filter"><a href="' . get_category_link( $category->term_id ) . '">' . $category->name.'';
echo '<span class="count">' . $category->count . '</span>';
echo '</a></li>';
}
echo '</ul></nav>';
?>
Yes it is possible, and there are many ways to achieve this, probably the easiest and fastest is (this is extremely naive and I just added a few additions and modifications to your code, the concept is just find the index that is half the array length), this should work assuming your originally code works, if it doesn't then I'm sure you can understand the concept.
<?php
$categories = get_categories();
$firstNav = "";
$secondNav = "<div class="hidden-content" id="hidden-categories">";
echo '<nav class="nav-categories"><ul>';
$maxIndex = count($categories) - 1;
$half = floor($maxIndex / 2); //To get the middle of the array, or you can use ceil();
$curIndex = 0;
foreach($categories as $category) {
if ($curIndex <= $half) {
$firstHalf .= '<li class="no-filter"><a href="' . get_category_link( $category->term_id ) . '">' . $category->name.'';
$firstHalf .= '<span class="count">' . $category->count . '</span>';
$firstHalf .= '</a></li>';
}
else {
$secondHalf .= '<li class="no-filter"><a href="' . get_category_link( $category->term_id ) . '">' . $category->name.'';
$secondHalf .= '<span class="count">' . $category->count . '</span>';
$secondHalf .= '</a></li>';
}
$curIndex++;
}
$firstHalf .= "</ul>";
$secondHalf .= "</div>";
echo $firstHalf;
echo $secondHalf;
echo '</ul></nav>';
?>
I have an unordered list of social icons I would like to output, but am stumped on how I would I do it with my current function (use an array, $figure?) -
So my raw code is currently (which checks if a field is filled, and if so shows the icon on the front-end) -
<?php if ( get_post_meta( $post->ID, 'member_twitter', true ) ) { ?>
<li><i class="fa fa-twitter"></i></li>
<?php } if ( get_post_meta( $post->ID, 'member_facebook', true ) ) { ?>
<li><i class="fa fa-facebook"></i></li>
<?php } if ( get_post_meta( $post->ID, 'member_googleplus', true ) ) { ?>
<li><i class="fa fa-google-plus"></i></li>
<?php } ?>
Now I would like to insert these list items into the following (and looping through them) -
if ($layout_style == "style-one") {
$html .= "<div class='team-member'>";
$html .= "<h3 class='member-name'>$title</h3>";
$html .= "<div class='member-role'>$member_role</div>";
$html .= "<ul class='social-icons'>";
$html .= "</ul>";
$html .= "</div>";
}
Have tried a few unsuccessful ways already.
thanks
I think I know what you are asking for. Let me know if I missed the mark:
$socials = array(
array('twitter', 'Twitter', 'twitter'),
array('facebook', 'FaceBook', 'facebook'),
array('googleplus', 'Google Plus', 'google-plus'),
);
if ($layout_style == "style-one") {
$html .= "<div class='team-member'>";
$html .= "<h3 class='member-name'>$title</h3>";
$html .= "<div class='member-role'>$member_role</div>";
$html .= "<ul class='social-icons'>";
foreach ($socials as $social) {
if (get_post_meta($post->ID, 'member_' . $social[0], true)) {
$html .= "<li><i class=\"fa fa-" . $social[2] . "\"></i></li>";
}
}
$html .= "</ul>";
$html .= "</div>";
}