Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Is it possible to use css to Alternate Row colors?

  1. #1
    Join Date
    Sep 2007
    Location
    Maui
    Posts
    602
    Thanks
    266
    Thanked 13 Times in 13 Posts

    Default Is it possible to use css to Alternate Row colors?

    I'm wondering if there exists yet an elegant method of using css to alternate row background colors. I know how to do it a few ways with tables but I am not fond of tables. I did Google it, but found nothing useful.

    Any one out there solved this problem yet? Thanks.

    PS. remember back when all search results had a "Last Updated" date on the websites? What happened to those dates? I found them very useful, but they just suddenly vanished, and on most sites there is no mention of when the info came out. You have to really dig for any indication of when something was written. This is a pet peeve of mine.

  2. #2
    Join Date
    Jul 2007
    Location
    Azerbaijan, Baku
    Posts
    144
    Thanks
    11
    Thanked 27 Times in 25 Posts

    Default

    I don't know with css.

    What about to give classes to divs?

    One of the examples is WordPress. Look at the comments. Some of them are classed, with 1,2 and etc. Then it gets, odd and even numbers.

  3. #3
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    I doubt we're on the same boat, I believe this ain't what you mean:
    HTML Code:
    <style type="text/css">
    .odd{background:#ffe;}
    .even{background:#eee;}
    </style>
    <ul>
    <li class="odd">Odd</li>
    <li class="even">Even</li>
    <li class="odd">Odd</li>
    <li class="even">Even</li>
    <li class="odd">Odd</li>
    <li class="even">Even</li>
    <li class="odd">Odd</li>
    <li class="even">Even</li>
    <li class="odd">Odd</li>
    <li class="even">Even</li>
    </ul>
    If it really is'nt what you're after for, please do rephrase.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  4. The Following User Says Thank You to rangana For This Useful Post:

    kuau (08-05-2008)

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    That's good rangana, but even divs will do nicely:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .odd{background:#ffe;}
    .even{background:#eee;}
    </style>
    
    </head>
    <body>
    <div class="odd">Odd</div>
    <div class="even">Even</div>
    <div class="odd">Odd</div>
    <div class="even">Even</div>
    <div class="odd">Odd</div>
    <div class="even">Even</div>
    <div class="odd">Odd</div>
    <div class="even">Even</div>
    <div class="odd">Odd</div>
    <div class="even">Even</div>
    </body>
    </html>
    However kuau, if you need columns in those rows, getting them to line up vertically can be difficult. But that's what tables generally are for, especially if you are presenting tabular data, like dates and times with event names or items with their prices and descriptions, that sort of thing.

    The biggest problem with tables are their drag on page load times. A well constructed table that accurately sets the width of its columns with the very first row, and has its:

    Code:
    table {
    table-layout: fixed;
    }
    set in the stylesheet will not have this problem.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    kuau (08-05-2008)

  7. #5
    Join Date
    Sep 2007
    Location
    Maui
    Posts
    602
    Thanks
    266
    Thanked 13 Times in 13 Posts

    Default

    Thanks! Oh, I thought it was bad form to use tables except to display spreadsheet-type data. So then, what is considered the best way to alternate rows in a table? I have seen it done with if statements, and also with ternary operators, and also with td definitions. I would really appreciate your (definitive) opinion.

    In the above examples of doing it with css, what if you don't know how many rows there will be? My particular application seems to always be presenting varying amounts of data through a while loop. Sometimes I don't need columns.

    Thank you very much.

    Also is there a summary somewhere of what the symbols mean in query strings (eg. %3 etc). Its hard to find things when you don't know what they're called.
    Last edited by kuau; 08-05-2008 at 10:06 PM. Reason: sp

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Using css is best because you can later change the style for the classes without editing your script. If your tables are being generated by a script, there are probably numbers involved that could be used to determine the class name of each row, or you could do a toggle (something like):

    Code:
    var cn = 'odd'
    something here that sets up a loop to write out the rows {
    write a row with class="' + cn + '"
    var cn = cn == 'odd'? 'even' : 'odd';
    }
    It would be similar in PHP, you would just need to use the proper syntax.

    To be more specific I would need to see the code that generates the rows.

    As to the other question, there would almost never be a %3 in a query, perhaps a %3e, or %3E, or %20 - that one's really common, it's a space.

    The % sign just means that the next two characters make up a hex code that corresponds to the character being escaped (certain characters don't do well in URLs). If you had a chart of characters with their hex codes, that would tell you. Generally you don't need to know, they just represent characters that are in the link. You can always decipher any given one by making up a little script, ex:

    Code:
    alert(unescape('%3e'));
    Here's a fairly good table of hex (and other, use the hex column) codes for common characters:

    http://en.wikipedia.org/wiki/ASCII#A...ble_characters
    Last edited by jscheuer1; 08-06-2008 at 05:24 PM. Reason: add link - later, spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    kuau (08-05-2008)

  10. #7
    Join Date
    Sep 2007
    Location
    Maui
    Posts
    602
    Thanks
    266
    Thanked 13 Times in 13 Posts

    Default

    Well, here is my code, but for some reason the drop-down list doesn't seem to produce the right day except the first time:

    Code:
    $today = date ('Y-m-d'); 
       if(isset($_GET['startdate']) && $_GET['startdate'] != ''){
    	   $day = date('w',strtotime($_GET['startdate']));
       } else {
    	 $day = date('w',strtotime($today));	
       }	
      ?>  
      <div id="ongoing">    
        <form action="/php/ongoing-new2.php" method="GET" name="SelectDay" class="datedrop">
        <span class="h1">ONGOING EVENTS For: </span> &nbsp; <select name="day" onChange="document.SelectDay.submit()" class="datedrop">    
        <option value=1 <?php if ($_GET['day'] =="1"){ echo " selected"; } ?> >MONDAY </option>
        <option value=2 <?php if ($_GET['day'] =="2"){ echo " selected"; } ?> >TUESDAY </option>
        <option value=3 <?php if ($_GET['day'] =="3"){ echo " selected"; } ?> >WEDNESDAY </option>
        <option value=4 <?php if ($_GET['day'] =="4"){ echo " selected"; } ?> >THURSDAY </option>
        <option value=5 <?php if ($_GET['day'] =="5"){ echo " selected"; } ?> >FRIDAY </option>
        <option value=6 <?php if ($_GET['day'] =="6"){ echo " selected"; } ?> >SATURDAY </option>
        <option value=0 <?php if ($_GET['day'] =="0"){ echo " selected"; } ?> >SUNDAY </option>
        </select> &nbsp; <input type="submit" value=" GO ">
        </form>
        <?php	    
        $sql = "SELECT DISTINCT event.event_id, ev_title, description, loc_id FROM event, recur WHERE event.event_id = recur.event_id 
    	        AND recur.`dayofweek` = '".$day."' AND event.ongoing > 0 ORDER by ev_title ";
    	$result = mysql_query($sql,$connection) or die("Couldn't execute $sql query. <br> mysql error: ".mysql_error()); 	
        while ($row = mysql_fetch_array($result)) 
        {
          $event_id    = $row[event_id];
          $ev_title    = $row[ev_title];
          $description = $row[description];
          $desc        =  substr($description, 0, 123);
          $loc_id      = $row[loc_id]; ?>
          <a href="/php/event-detail.php?event_id=<?php echo $event_id; ?>"><?php echo $ev_title; ?></a><br>
          <?php echo $desc; ?>...<a href="/php/event-detail.php?event_id=<?php echo $event_id; ?>">More</a><br>
        <?php } ?>
      </div><!--end ongoing
    I could even live without the alternating rows if the code would just work reliably. Thanks very much.

    Thanks for the info about the hex codes...that clears up a lot of mysteries for me.
    Last edited by kuau; 08-05-2008 at 10:08 PM. Reason: sp

  11. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Something like:

    PHP Code:
        <?php
        $cn  
    "odd";  
        
    $sql "SELECT DISTINCT event.event_id, ev_title, description, loc_id FROM event, recur WHERE event.event_id = recur.event_id 
                AND recur.`dayofweek` = '"
    .$day."' AND event.ongoing > 0 ORDER by ev_title ";
        
    $result mysql_query($sql,$connection) or die("Couldn't execute $sql query. <br> mysql error: ".mysql_error());     
        while (
    $row mysql_fetch_array($result)) 
        {
          
    $event_id    $row[event_id];
          
    $ev_title    $row[ev_title];
          
    $description $row[description];
          
    $desc        =  substr($description0123);
          
    $loc_id      $row[loc_id]; ?>
          <div class="<?php echo $cn?>"><a href="/php/event-detail.php?event_id=<?php echo $event_id?>"><?php echo $ev_title?></a><br>
          <?php echo $desc?>...<a href="/php/event-detail.php?event_id=<?php echo $event_id?>">More</a></div>
        <?php 
        
    if ($cn == "odd")
            
    $cn "even";
        else
            
    $cn "odd";
        }
        
    ?>
    Last edited by jscheuer1; 08-06-2008 at 05:21 PM. Reason: fix typo for strict syntax
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    kuau (08-06-2008)

  13. #9
    Join Date
    Sep 2007
    Location
    Maui
    Posts
    602
    Thanks
    266
    Thanked 13 Times in 13 Posts

    Default

    Dear John: That worked perfectly... and no tables! Exactly what I wanted ... thanks so much. You are the best.

  14. #10
    Join Date
    Oct 2008
    Posts
    15
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default Excellent

    I've been looking for a solution like this and this has to be the most elegant yet. So much so that I registered just to say thanks.

    Thanks!

    Robert

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •