javascript - How to display a unordered list with unique bullets based on condition? -


i generating list sql server, filtering based on new , old records , displaying them in respective categories on webpage. want show unique list bullets old , new records. im getting mashup of every record each category on top of eachother. icons list items coming twitter bootstrap css, using glyphicons. new records have popover displays on hover. list-generating code

foreach($resultarray $category_name => $items) {     echo '<h3>'. $category_name.'</h3><ul>'; foreach($items $itemid => $itemdetails)     {     ?>     <li class="<?php if(strtotime($itemdetails['posted']) > (strtotime('-30   days'))){echo 'icon-star';} else {echo '';} ?>" data-content="this item new on corkboard. check out!" data-original-title="new item">     <?php  echo '<a href="newgenview.php?id='.$itemid.'">'.$itemdetails['name'].' - '.$itemdetails['description'].'</a>';     ?>     </li> <?php }//foreach echo '</ul>'; }//foreach ?> 

and, have these script tags:

<script type="text/javascript" src="assets/js/bootstrap-popover.js"></script>  <script type="text/javascript"> $(document).ready(function() {     $(this).popover(options); }); </script> 

any ideas or other ways solution?

  • don't forget bootstrap-tooltip.js, required popover.
  • only add data-content attributes new <li>.
  • the selector popover should <li>s , remove parameter options, if don't initialize it.
  • i move icons <i> in bootstrap description.
  • i've added styling rules.

the final html be:

<!doctype html> <html> <head>     <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">     <style type='text/css'>         ul { list-style: none inside none; margin: 0; }         li { display: inline; }     </style>     <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>     <script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>     <script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>     <script type='text/javascript'>         $(document).ready(function() { $('li').popover(); });     </script> </head> <body>     <h3>category_name</h3>     <ul>         <li>             <i class="icon-minus"></i>             <a href="newgenview.php?id=1">name1 - description1</a><br />         </li>         <li data-content="this item new on corkboard. check out!" data-original-title="new item">             <i class="icon-star"></i>             <a href="newgenview.php?id=2">name2 - description2</a><br />         </li>     </ul> </body> </html> 

also see this example.


Comments

Popular posts from this blog

django - How can I change user group without delete record -

java - Need to add SOAP security token -

java - EclipseLink JPA Object is not a known entity type -