Hoping someone can help.
I'm building a wordpress site and as part of the design, I've got some 'feature panels' that I'd like to show.
There's a total of 4 li's in the list - but I'd only like to show 2 random ones on every page.
I can do it via CSS by showing / hiding each li based on the page's class - however I'm wondering whether there's a more elegant way of doing the same via PHP?
My HTML is here... I have no idea where to start with the PHP and it seems that I'm Googling the wrong keywords...
<ul id="featurePanels">
<li id="newBoatsPanel">
<h3><a href="#">New Boats<br />
<span>Text</span></a></h3>
</li>
<li id="brokeragePanel">
<h3><a href="#">Brokerage<br />
<span>Text</span></a></h3>
</li>
<li id="newsPanel">
<h3><a href="#">News<br />
<span>Text</span></a></h3>
</li>
<li id="partsPanel">
<h3><a href="#">Parts<br />
<span>Need text here</span></a></h3>
</li>
</ul>
Any pointers would be greatly appreciated.
Thank you.
<?php
$listItems = array(
'<li id="newBoatsPanel">your text here</li>',
'<li id="brokeragePanel">more text here</li>',
'<li id="newsPanel">text text text</li>',
'<li id="partsPanel">Need text here</li>'
);
shuffle($listItems); // shuffles (randomizes the order of the elements)
// print the list
echo '<ul id="featurePanels">' . $listItems[0] . $listItems[1] . '</ul>';
?>
You can use
preg_match_all('/\<li.*?\>.*?\</li\>/i',$html_string,$li_list)
in $li_list you will have an array of li's and now you can shuffle, random, splice, slice or whatever...
and at the end use implode to get the HTML.
Related
I would like to have an if/then argument for 2 classes (from the css) for a menu item. One where the menu item is blue if it is NOT the active page, and one where the menu item is red if it IS the active page. I have figured out the active page portion, now I am trying to figure out the if it is not active portion. I hope that makes sense. I have included a code snippit below.
<ul class="menu ul">
<li><a class="Blue <?php if($page =='home'){echo 'active';}?>" href="../index.php" >Home</a></li>
I have tried multiple variations, however I cannot figure it out. Thanks for your help!
Oleksandr is correct: It's better to have your links styles blue by default and overwrite it with the active class.
If you would want to give a hyperlink either one class or the other based on a simple condition, I would recommend this syntax:
<ul class="menu ul">
<li>
<a class="<?= $page == 'home' ? 'active' : 'Blue' ?>" href="../index.php" >Home</a>
</li>
</ul>
The example above uses the ternary operator and the echo shortcut syntax, and simply echoes one of two values based on the outcome of the condition.
as far as I understood you want to add different classes to link depending on $page variable.
for this i would recommend you to just use else statement
<ul class="menu ul">
<li><a class="<?php if($page =='home'){echo 'Blue';}else{echo 'Red';} ?>" href="../index.php" >Home</a></li>`
However it would be much better to check state of $page somewhere up (to not make spagetti code). And then echo only class in the a element.
<?php if($page =='home'){$menu_class='Blue';}else{$menu_class= 'Red';};?>
<ul class="menu ul">
<li><a class="<?php echo $menu_class; ?>" href="../index.php" >Home</a></li></pre>
In HTML we can create A single page site with smooth scrolling, and highlighted navigation links depending on which section is currently being viewed.To do the above in HTMl we
link to this point (e.g. from the top of the page), we link using the hash character (#) and the name of the destination anchor:
Go To Contact Form
The same I am Trying to Implement in PHp but I am facing Issues.
<div class="wrap">
<div class="main">
<div class="open-positions">
<?php
function readCSV($fileName) {
$rows = array();
$rows = file($fileName);
return $rows;
}
?>
<span><b>Available Positions: </b></span>
<ul>
<?php
$rows=readCSV('joinUs.csv');
$max = sizeof($rows);
for ($x=1; $x<$max; $x++) {
echo "<li> <a href='#".$rows[$x]."'>$rows[$x] |</a> </li>";
}
?>
</ul>
<div class="position" id="<?php print_r(readCSV('joinUs.csv')[1]);?>">
Job Descreption here
</div>
The Anchor Id seen while inspecting is Sr. Product Engineer and $rows[$x] is Sr. Product Engineer and both are same still Its not scrolling(from top of site on clicking the Click).
When I am hardcoding to Sr. Product Engineer it Its Working. It not working only in case of dynamic div id.While Inspecting in browser I am able to see correct div ID.
How to fix the above issue.
please let me know if any other clarification is required.
Attached is the ScreenShot
I was Requested in comment to post html source code also:
<span><b>Available Positions: </b></span>
<ul>
<li> <a href='#Sr. Product Engineer
'>Sr. Product Engineer
|</a> </li><li> <a href='#Quality Assurance Engineer
'>Quality Assurance Engineer
|</a> </li><li> <a href='#Frontend Javascript Engineer
'>Frontend Javascript Engineer
|</a> </li><li> <a href='#Business Development Manager
'>Business Development Manager
|</a> </li> </ul>
</div>
<div class="position" id="Sr. Product Engineer
">
<h2 class="position-title">Sr. Product Engineer
</h2>
<div class="section">
<p>
<span class="section-title"><b>This is what we have in mind for you, the Role:</b></span>
<span class="section-description">
You will be part of the tech team and will be working closely with founders
and design team on the core product. You will be working to build new features,
fix bugs and refactor things as necessary.
</span>
</p>
<p>
<ul class="section-list">
<li>Responsible for the tech architecture</li>
<li>Take ownership of things</li>
<li>Write simple/readable code which is testable, extendable, robust and highly scalable</li>
<li>Help getting new joinees upto speed with the product</li>
<li>Suggest new features, priorities tasks and see to their completion</li>
</ul>
</p>
</div>
Please help as in above source code you can see PHP generates the same ID in html.When I am hardcoding the id It working but without hardcoding its not working.
Use valid IDs without dots or spaces or any other special characters.
<a href='#SrProductEngineer'>Sr. Product Engineer</a>
<h3 id="SrProductEngineer">Sr. Product Engineer</h3>
To generate that dynamically with PHP:
<?php
$str = readCSV('joinUs.csv')[1];
$id = preg_replace('/[^A-Za-z0-9]/', '', $str); // Remove all characters except A-Z, a-z, 0-9
echo '' . $str . '';
echo '<h3 id="' . $id . '">' . $str . '</h3>';
?>
Inside the loop, just name the id's as
position_0, position_1, position_2
and then anchor them using
#position_0, #position_1, #position_2
I want to count the total number of items within an ordered list, i though this would be a fairly common question on Google but apparently not.
I have tried using PHP's count function but im not sure if it works for lists as it appears to be only relevant to PHP arrays.
echo '<p>' . count($TheList, 1) . '</p>';
The total of the list should appear in a paragraph within a Div lower down my page but it throws an error.
The list looks like this:
echo '<ul id="TheList" >';
echo '<li> peas </li>';
echo '<li> carrots </li>';
echo '<li> onions </li>';
echo '</ul>';
Really all i am trying to do is count how many items are in the unordered list.
If you're trying to count DOM elements, you should use an HTML parser. Here's an example with DOMDocument
$html = '<ul id="TheList">
<li> peas </li>
<li> carrots </li>
<li> onions </li>
</ul>';
$doc = new DOMDocument();
$doc->loadHTML($html);
print $doc->getElementsByTagName('li')->length;
OUTPUT:
3
This works even if the list items have attributes (ids, classes, etc...) or strange formats. Example:
$html = '<ul id="TheList">
<li > peas </li>
<li id="foo"> carrots </li>
<li class="bar"> onions </li>
</ul>';
Did you try using javaScript?
var theList = document.getElementById("TheList").getElementsByTagName("li");
var numberOfItems = theList.length;
if you're trying to process html code, you could try to do this:
function count_list($list){
$array = explode("</li>",$list);
return count($list)-1;
}
PHP is Server Side while HTML is presentation at Client Side.
If you generate those li elements from a PHP script, than you can just save the count when echoing the results and echo the Count of it everywhere you want.
I'm guessing you're not using some PHP script in order to generate and echo the list, therefore you can use JavaScript to help you solve this case.
JavaScript code:
<html>
<head>
<title></title>
</head>
<body>
<p id="TheList_Count">0</p>
<ul id="TheList">
<li> peas </li>
<li> carrots </li>
<li> onions </li>
</ul>
<script>
document.getElementById("TheList_Count").innerHTML = document.getElementById("TheList").children.length;
</script>
</body>
</html>
As others have pointed out, there are more appropriate ways to do this, but in the intrests of learning, here is a way you could use php to count the number of list items in a string of html code...
$liststring = "<ul id=\"TheList\" >"
. "<li> peas </li>"
. "<li> carrots </li>"
. "<li> onions </li>"
. "</ul>";
$numitems = substr_count($liststring, "<li>");
echo "<p>$numitems</p>";
echo $liststring;
I am trying to display something from my database on a bootstrap bar and I have no idea how to combine or implement the two. Ive made my bootstrap html's file a .php, was that the correct thing to do? Here's my code (ignore the filler words)
<ul class="nav nav-list well">
<li class="nav-header"></li>
<li class="active">HIT INFO</li>
<li>Linky link</li>
<li class="divider"></li>
<li>ANOTHER HIT INFO</li>
<li>ANOTHER LINKY LINK</li>
<li class="divider"></li>
<li>YET ANOTHER HIT</li>
<li>AAAAAnd another link</li>
</ul>
and this is the php i want to include (the code to making what i want to display is in the file)
<?php include 'one.php'; ?>
where "linky link" is, i want to display this but it didnt seem to work when i put that php right there. Another thing i want to do is when a link from the database gets displayed, it displays as a bootstrap button. i tried and am just not sure how to implement php code in my bootstrap code.
Print " <td>".$row['link'] . "</td></tr> ";
How would i add this bootstrap code to that so when a link from my database gets displayed, it gets displayed as this button
<i class="icon-heart icon-white"></i>Do this HIT!
Your code seems right to me except to your "<td> and <tr>" tag. You're not using it right.
Try this approach
In one.php
<?php
$links = array( 0 => array("url"=>"http://google.com","text"=>"Google") );
?>
In Menu
<?php include('one.php')?>
<ul>
<li>Menu one</li>
<?php foreach( $links as $link){ ?>
<li><a href="<?php print $link['url']?>"><?php print $link['text']?></li>
<?php } ?>
</ul>
Does anyone know how to edit/change Wordpress's wp_list_pages function in order to add classes to the ul and li items?
I'm trying to implement the new version of jquery.treeview which requires <li class="expandable"> and <ul style="display: none;"> on expandable lists and child ul's.
I've been messing around with this but it aint working too good in that it applies the 'expandable' class to all li's:
$pages = wp_list_pages('title_li=&echo=0' );
$pages = preg_replace('/class="/','class="expandable ', $pages); //note space on end of replacement string
//output
echo $pages;
And here is what the outputted html should look like:
<ul class="treeview" id="tree">
<li>Home</li>
<li class="expandable">Expand 1
<ul style="display: none;">
<li class="expandable">Expand 2_1
<ul style="display: none;">
<li>Expanded 3_1</li>
<li>Expanded 3_2</li>
<li>Expanded 3_3</li>
</ul>
</li>
<li class="expandable"><a href="#" >Expand 2_2</a>
<ul style="display: none;">
<li>Expanded 4_1</li>
<li>Expanded 4_2</li>
<li>Expanded 4_3</li>
</ul>
</li>
</ul>
Hope this makes sense and any help greatly appreciated, S.
I guess you are trying to activate a tree view on the page items. As this would require JavaScript you can simply add the class using JavaScript before initializing the tree view:
$("#tree li").addClass("expandable");
$("#tree").treeview();
If you also want to hide all ul elements you can use jQuery, too (not sure about the correct syntax):
$("#tree ul").hide();
Maybe this Plugin (Classy wp-List) helps. I haven't tried it yet but it says it will let you define a class for each page in the backend.
good luck.