In Wordpress, I'm looking for some way to add a "last" and a "first" class to list items inside Wordpress widgets. The HTML could look like this:
<div class="widget-area">
<ul >
<li class="widget_recent_comments">
<h3 class="widget-title">Recent comments</h3>
<ul id="recentcomments">
<li class="recentcomments">Comment 1</li>
<li class="recentcomments">Comment 2</li>
<li class="recentcomments">Comment 3</li>
<li class="recentcomments">Comment 4</li>
</ul>
</li>
<li class="widget_my_links">
<h3 class="widget-title">My links</h3>
<ul id="my-links">
<li class="item">Link 1</li>
<li class="item">Link 2</li>
<li class="item">Link 3</li>
<li class="item">Link 4</li>
<li class="item">Link 5</li>
</ul>
</li>
</ul></div>
In this example above i'd like to have first/last classes added to the li with "Comment 1", "Comment 4", "Link 1" and "Link 5".
Is there an easy workaround for this? (I don't want to do this with javascript)
Thank you.
I'm guessing these lists are generated in a loop. So what you could do, is create a variable before you go into the loop, and set it's value to 1 ($i = 1). Than at the end of the loop, add one up ($i++). Now, where you want the first/last class to appear, you can do
<?php if($i == 1):
echo ' first';
elseif( $i == $number_of_items )
echo 'last';
endif;
?>
At $i == $number_of_items, you are comparing the max with the current, so you know you have the last if the statement is true.
Hope this answers your question.
Well the first-item is easy, just use
ul#my-list li:first-child {
/* special styles */
}
It's not adding a class, but you can still style it. There is not a similar css rule for :last-child unfortunately
Related
I want to change the output of the Drupal 7 menu structure which is like:
<?php print render($primary_nav); ?>
outputs:
<ul class="menu nav navbar-nav">
<li class="first expanded">
<a title="" href="lorem">Lorem</a>
<ul class="menu nav">
<li class="first leaf"><a title="" href="/lorem">Lorem</a></li>
<li class="leaf"><a title="" href="/ipsum">Ipsum</a></li>
</ul>
</li>
<li class="leaf"><a title="" href="/dolor">Dolor</a></li>
<li class="expanded"><a title="" href="/sit">Sit</a>
<ul class="menu nav">
<li class="first leaf"><a title="" href="/sit">Amet</a></li>
<li class="leaf"><a title="" href="/consectetur">Consectetur</a></li>
</ul>
</li>
</ul>
how could I have instead of the ul and li the menu rendered with divs.
Thanks
I feel curious... why do you want to do so?
I guess you should try to make a modified copy of 'render' function and call it instead.
EDIT
The print "function" in PHP just outputs the argument received. I guess you should define your own php function, namely print_menu_as_div:
function print_menu_as_div($primary_nav) {
$htmlCode = '<div class="myOwnMenuClass">';
...
/*Generate your HTML code here to display your
menu items and append to $htmlCode*/
...
$htmlCode .= '</div>';
return $htmlCode;
}
Then instad of:
<?php print render($primary_nav); ?>
write:
<?php print print_menu_as_div($primary_nav); ?>
Hope it helps ;)
I have a database which stores a hierarchy of foods.
Category(id_cat,name_cat);
his_low_cat(id_cat,id_low_cat);
A category can have 0..n low category. If it had no lower category I do a id_cat,-1 field in his_low_cat.
I do not know if it's possible but I would like to show it in a kind of "pulldown menu"
(if you have any other idea on how to show a full hierarchy please suggest it)
Like this :
echo " <div id=\"menu\">
<ul class=\"niveau1\">
<li class=\"sousmenu\">Food
<ul class=\"niveau2\">
<li class=\"sousmenu\">Sous menu 1.1
<ul class=\"niveau3\">
<li>Sous sous menu 1.1.1</li>
</ul>
</li>
<li>Sous menu 1.2</li>
</ul>
</li>
</ul>
</div>";
My first cat is "food" and then it derives into 4 lowers categories, which derive themselves in more.
The problem is that it must be dynamic and load field from my database.
The goal would be to be able to catch the clicked value and use it in another .php
How would I do this?
Recursion is definitely the way to go with this problem, I've coded up this solution:
<?php
function nestElements($elements, $depth=0)
{
foreach($elements as $elementName=>$element)
{
echo str_repeat("\t", $depth).'<ul class="niveau'.($depth+1).'">'."\n";
if(is_array($element))
{
echo str_repeat("\t", $depth+1)."<li class=\"sousmenu\">${elementName}\n";
nestElements($element, $depth+2);
echo str_repeat("\t", $depth+1)."</li>\n";
}
else
{
echo str_repeat("\t", $depth+1)."<li class=\"sousmenu\">${elementName}</li>\n";
}
echo str_repeat("\t", $depth)."</ul>\n";
}
}
nestElements(array("Food"=>array("Meat"=>array("Poultry"=>array("Chicken"=>"Meat/Poultry/Chicken"), "Beef"=>array("Hamburgers"=>"Meat/Beef/Hamburgers", "Steak"=>"Meat/Beef/Steak")), "Dairy"=>array("Cow"=>"Dairy/Cow", "Sheep"=>"Dairy/Sheep")), "name"=>"url"));
?>
Testing with this:
<?php
nestElements(array("Food"=>array("Meat"=>array("Poultry"=>array("Chicken"=>"Meat/Poultry/Chicken"), "Beef"=>array("Hamburgers"=>"Meat/Beef/Hamburgers", "Steak"=>"Meat/Beef/Steak")), "Dairy"=>array("Cow"=>"Dairy/Cow", "Sheep"=>"Dairy/Sheep")), "name"=>"url"));
?>
Results in:
<ul class="niveau1">
<li class="sousmenu">Food</li>
<ul class="niveau2">
<li class="sousmenu">Meat</li>
<ul class="niveau3">
<li class="sousmenu">Poultry</li>
<ul class="niveau4">
<li class="sousmenu">Chicken</li>
</ul>
</ul>
<ul class="niveau3">
<li class="sousmenu">Beef</li>
<ul class="niveau4">
<li class="sousmenu">Hamburgers</li>
</ul>
<ul class="niveau4">
<li class="sousmenu">Steak</li>
</ul>
</ul>
</ul>
<ul class="niveau2">
<li class="sousmenu">Dairy</li>
<ul class="niveau3">
<li class="sousmenu">Cow</li>
</ul>
<ul class="niveau3">
<li class="sousmenu">Sheep</li>
</ul>
</ul>
</ul>
<ul class="niveau1">
<li class="sousmenu">name</li>
</ul>
To parse it you'd have to make a mod_rewrite which redirects to index.php?r=TheURL and from their, explode the r parameter using "/" as the delimeter, then you have a list of menus and submenus that the clicked link was from. By adding another parameter the url coul be automatically generated.
Edit: Fixed problem with original code output seen below
<li class="sousmenu">Sheep</li>
<li class="sousmenu">Sheep</li>
To generate the array:
<?php
function genArray(&$targetArray, $parentID=null){
$res=(is_null($parentID))?mysql_query("SELECT * FROM categorie WHERE id_cat NOT IN (SELECT id_low_cat FROM hislowcat) ORDER BY id_cat DESC;"):mysql_query("SELECT *, (SELECT name_cat FROM categorie WHERE id_cat= '".$parentID ."') AS name_cat FROM hislowcat WHERE id_cat= '" .$parentID ."'");
if(!is_null($parentID) && !mysql_num_rows($res))
{
$res3=mysql_query("SELECT name_cat FROM categorie WHERE id_cat='${parentID}';");
$row3=mysql_fetch_array($res3);
$targetArray[$row3['name_cat']]=$row3['name_cat'];
return;
}
while(($row=mysql_fetch_array($res)))
{
//echo $row->name_cat;
if(is_null($parentID))
{
if(!isset($targetArray[$row['name_cat']]))
{
$targetArray[$row['name_cat']]=array();
}
genArray($targetArray[$row['name_cat']], $row['id_cat']);
}
else
{
genArray($targetArray[$row['name_cat']], $row['id_low_cat']);
}
}
}
$array=array();
genArray($array);
print_r($array);
?>
Notice how $targetArray is set up as a reference, this way we can treat it one-dimensionally.
I´m starting in PHP, cause I´m designer, not programer. I´m having a problem when I try to set a menu highlighted if you click any of the child options. Maybe the code will be more clear than me...
<ul class="menu">
<li><a href="link-1.php" <?php if ($page == '/link-1.php') { ?>class="active"<?php } ?>>LINK 1</a></li>
<li>
LINK DUMMY
<ul class="sub_menu">
<li>LINK 2</li>
<li>LINK 3</li>
<li>LINK 4</li>
<li>LINK 5</li>
</ul>
</li>
<li><a href="link-6.php" <?php if ($page == '/link-6.php') { ?>class="active"<?php } ?>>LINK 6</a></li>
<li><a href="link-7.php" <?php if ($page == '/link-7.php') { ?>class="active"<?php } ?>>LINK 7</a></li>
</ul>
So if you hover LINK DUMMY you´ll see LINK 2, LINK 3, LINK 4, LINK 5, but what I need is to fix LINK DUMMY if you click any of it childs (LINK 2 to LINK 5) using class="active".
Any help is really appreciated.
TIA!
In your "Dummy Link" anchor, use:
if ($page == '/link-2.php' || $page == '/link-3.php' || $page == '/link-4.php' || $page == '/link-5.php') {
echo "class='active'";
}
<?php $linkOnePages=array('/link-2.php','/link-3.php','/link-4.php', '/link-5.php');?>
<ul class="menu">
<li><a href="link-1.php" <?php if(in_array($page, $linkOnePages)) { ?>class="active"<?php } ?>>LINK 1</a></li>
<li> ....
heres how my html is
<ul class="navigation">
<li>Home</li>
<li>About us</li>
</ul>
as you can see the content of "about us" page is loaded in to index.php.
now i want to change active page link on nav bar different style.
please do help me. i hope this question is clear.
to add a class to a particular item based on selection;
<ul class="navigation">
<li <?php if(!isset($_GET['content'])) { echo 'class="active"'; } ?>>Home</li>
<li <?php if(isset($_GET['content']) && $_GET['content']=='about') { echo 'class="active"'; } ?>>About us</li>
</ul>
I have the following HTML output;
<ul>
<li>Test 1</li>
<li>Test 2.</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
<li>Test 7</li>
</ul>
What I need to do, is display the same HTML, but with only the first 4 <li> tags, i.e.
<ul>
<li>Test 1</li>
<li>Test 2.</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
Is there an easy way I can do this in PHP?
Thanks
EDIT:
The data is coming from:
$data = $product->getDescription();
It is stored in the DB as the HTML content, I am currently displaying it using the above code;
Thanks
Umm yes..
Depending on where the data is coming from, I am going to assume it is a db of some sort and you have it in an array():
$databasevalue = array(); //stuff from database goes here / dragons
echo "<ul>";
for ( $counter = 0; $counter < 4; $counter ++) {
echo "<li>".$databasevalue[$counter]."</li>";
}
echo "</ul>";
Can't offer more without better question details.
How is data coming from ?
If this data comes from an array you can slice it with array_slice function
$list = array_slice($input, 0, 4);
// $list now only having first 4 item.
<?php
echo '<ul>' . PHP_EOL;
for ($i = 1; $i <= 4; $i++)
{
echo '<li>' . $i . '</li>' . PHP_EOL;
}
echo '<ul>' . PHP_EOL;
?>
Outputs:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<ul>
Someone else answered with a good one (requires SimpleXMLElement, PHP5) but has been deleted:
<?php
$data = '<ul>
<li>Test 1</li>
<li>Test 2.</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
<li>Test 7</li>
</ul>';
$ul = new SimpleXMLElement($data);
$li = $ul->li;
echo '<ul>'.PHP_EOL;
for($i = 0 ; $i < 4 ; $i++)
{
echo '<li>'.$li[$i].'</li>'.PHP_EOL;
}
echo '</ul>'.PHP_EOL;
?>
if you're using database, you should use "LIMIT" in your SQL, otherwise array_slice will do the job.
don't forget: documentation is your best friend (especially in php)