techker Posted January 10, 2014 Share Posted January 10, 2014 Hey guys i have a script that has accordian content but i would like it to have odd and even colors? <div id="va-accordion" class="va-container"> <div class="va-wrapper"> <?php while($info = mysql_fetch_array($result)){?> <div class="va-slice va-slice-1"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="2" valign="top"><img src="images/recent3.jpg" width="160" height="140" ></td> <td valign="top"> <h3 class="va-title"> <? echo $info['Make'] ?> <? echo $info['Model'] ?> <? echo $info['Year'] ?></h3></td> </tr> <tr> <td valign="top"> </td> </tr> </table> <div class="va-content"> <p><div class="bubble"><? echo $info['Retail_price']?>$</p> <? echo "<span class='echo_short'>".$info['Description_short_FR']."</span>"; ?> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="16%"><img src="images/recent3.jpg" width="126" height="120" ></td> <td width="84%"><img src="images/recent3.jpg" width="126" height="120" ></td> </tr> </table> </div> </div> </div> <? } ?> </div></div> i tried: .odd{ color:red; } .even{ color:blue; } <script type="text/javascript"> $(function(){ $(".va-slice div.post:odd").addClass('odd'); $(".va-slice div.post:even").addClass('even'); }); </script> Link to comment https://forums.phpfreaks.com/topic/285274-oddeven-colors/ Share on other sites More sharing options...
kicken Posted January 10, 2014 Share Posted January 10, 2014 CSS3 provides a pseudo-selector for this called :nth-child. If you want something that works on much older browsers then you'll need to have your PHP code generate alternating class names, the most common method of which is using the modulus operator. eg: $class = $rowNum%2?'odd':'even'; While you could apply the effect after the affect with jQuery (as you tried) it is unnecessary to involve Javascript in something such as this. Link to comment https://forums.phpfreaks.com/topic/285274-oddeven-colors/#findComment-1464791 Share on other sites More sharing options...
techker Posted January 11, 2014 Author Share Posted January 11, 2014 so how would i call the php in the wrapper? Link to comment https://forums.phpfreaks.com/topic/285274-oddeven-colors/#findComment-1464796 Share on other sites More sharing options...
techker Posted January 12, 2014 Author Share Posted January 12, 2014 bump please? Link to comment https://forums.phpfreaks.com/topic/285274-oddeven-colors/#findComment-1464892 Share on other sites More sharing options...
Psycho Posted January 12, 2014 Share Posted January 12, 2014 so how would i call the php in the wrapper? You don't. You add the logic in the PHP page that is called so those classes are already in the page when it loads. Or, if the wrapper is a PHP page, then you would have to show how the page is built. Link to comment https://forums.phpfreaks.com/topic/285274-oddeven-colors/#findComment-1464893 Share on other sites More sharing options...
techker Posted January 12, 2014 Author Share Posted January 12, 2014 but you see where im confused is that i have no table?it's all css..the only table i have is when i expand the accordion to see the content.but that part don't need any colours.. its the <div class="va-slice va-slice-1"> that should be on odd change colours.. Link to comment https://forums.phpfreaks.com/topic/285274-oddeven-colors/#findComment-1464920 Share on other sites More sharing options...
kicken Posted January 12, 2014 Share Posted January 12, 2014 but you see where im confused is that i have no table?Nobody said anything about tables. You either generate even/odd class names and apply them like any other class, or you use the :nth-child selector. Link to comment https://forums.phpfreaks.com/topic/285274-oddeven-colors/#findComment-1464959 Share on other sites More sharing options...
techker Posted January 12, 2014 Author Share Posted January 12, 2014 ok i got it..lol so i added in my css .va-slice-1:nth-child(odd) { background:#CCC; } .va-slice-1:nth-child(even) { background:#999; } works great! Link to comment https://forums.phpfreaks.com/topic/285274-oddeven-colors/#findComment-1464968 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.