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 parameteroptions
, 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
Post a Comment