[SOLVED] Zebra Row Color <DIV>

This is a discussion on "[SOLVED] Zebra Row Color <DIV>" within the Web Page Design section. This forum, and the thread "[SOLVED] Zebra Row Color <DIV> are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Sep 28th, 2007, 07:08
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,612
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
[SOLVED] Zebra Row Color <DIV>

Code: Select all
<%
    RowCount = 0
    While ((Repeat1__numRows <> 0) AND (NOT rsCurrentSale.EOF))
    If (RowCount Mod 2)=0 Then RowColour = "#DEDEDE" Else RowColour = "#CDCDCD" 
    RowCount = RowCount + 1
%>        
<%
    Dim vTotal
    vTotal = rsCurrentSale("PPrice") * rsCurrentSale("SQuantity")
%>
<tr style="background-color:<%=RowColour%>">
    <td>
        <%=(rsCurrentSale.Fields.Item("PName").Value)%>
    </td>
    <td>
        <%=(rsCurrentSale.Fields.Item("SQuantity").Value)%>
    </td>
    <td>
        RM<%=(rsCurrentSale.Fields.Item("PPrice").Value)%>
    </td>
    <td>
        RM<%=vTotal%>
    </td>
</tr>
<% 
    Repeat1__index=Repeat1__index+1
    Repeat1__numRows=Repeat1__numRows-1
    rsCurrentSale.MoveNext()
    Wend
%>
I am just wondering if this zebra row color technique can be used in <div> elements to perform just like the table row.

I have not tested them in my css page but would glad if someone can give me a buzz of how to to do this in css page.

Thanks..
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Sep 28th, 2007, 12:38
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Zebra Row Color <DIV>

If you are displaying data, why use a div? The table element is what should be used in this case.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Sep 28th, 2007, 18:04
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Zebra Row Color <DIV>

If you were using PHP, I could help you
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Sep 29th, 2007, 02:09
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,612
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Re: Zebra Row Color <DIV>

Well, most of you encourage to use CSS and throw away the "table" things...

Thats why I am asking if this kind of code can be handle by CSS. I am using ASP by the way, and yes I am trying to display some data from my database to this "Zebra Row Color".

Well, that's mean CSS <div> cannot be use to display zebra row color huh?

Thanks.
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Sep 29th, 2007, 02:36
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Zebra Row Color <DIV>

Quote:
Originally Posted by monie View Post
Well, most of you encourage to use CSS and throw away the "table" things...
No ... we want people to start using the elements for what they were intended for. The table element was create to display tabular data .... not to help you lay out your site.

Quote:
Originally Posted by monie View Post
Well, that's mean CSS <div> cannot be use to display zebra row color huh?
It can be done but is the div element the proper element for the job? If you are displaying tabular data, then no.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Sep 29th, 2007, 02:50
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,612
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Re: Zebra Row Color <DIV>

Ok, I get the idea.

CSS for Layout!
Table for Tabular Data!

Thanks Karinne.
By the way, I like the new tag that you have under your name there! Does "Reputable Member" get one too?

Thanks again for the explaination above.
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Sep 29th, 2007, 02:52
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Zebra Row Color <DIV>

Quote:
Originally Posted by monie View Post
Ok, I get the idea.

CSS for Layout!
Table for Tabular Data!
Yes! see ... that wasn't so hard


Quote:
Originally Posted by monie View Post
By the way, I like the new tag that you have under your name there! Does "Reputable Member" get one too?
Thanks monie ... we're slowly migrating to the new skin! Man I can't wait for this to be over!

Reputable Members won't have one ... just people on staff, supermembers and the newsletter team

Quote:
Originally Posted by monie View Post
Thanks again for the explaination above.
No problem!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Sep 29th, 2007, 03:05
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,612
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Re: Zebra Row Color <DIV>

Quote:
Originally Posted by karinne View Post
Thanks monie ... we're slowly migrating to the new skin! Man I can't wait for this to be over!
Back to few years ago, when I started to join WebForumz, they are still using the blue color theme website, if you still remember, and after that I left WebForumz for a few years and back again with the current theme. It's been a long time and I just can't wait for the new theme. Good Luck then..

Quote:
Originally Posted by karinne View Post
Reputable Members won't have one ... just people on staff, supermembers and the newsletter team
I promise myself I will get one of that soon!
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #9  
Old Sep 29th, 2007, 09:35
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Zebra Row Color <DIV>

This is how i did it in php. If you can try and translate that to ASP somehow, it may be of some use as I no know nothing about ASP

PHP: Select all

echo "<table id='MyTable' class='style3'>\n";
echo 
"<tr><th>Name</th><th>Location</th><th>URL</th></tr>\n";
$z 0;
while(
$row=mysql_fetch_array($result))
    {
    
$name htmlentities($row['name']);
    
$location htmlentities($row['location']);
    
$url $row['url'];
 
    if(
$z 2==0)
    { 
//this means if there is a remainder
        
echo "<tr class='yellow'>\n";
 
$z++;
    }
     else
    { 
//if there isn't a remainder we will do the else
        
echo "<tr class='white'>\n";
 
$z++;
    }
     echo 
"<td class='left'>".$name."</td><td class='left'>".$location."</td><td class='right'><a href='".$row['url']."'>".DisplayURL($url)."</a></td>\n";
     echo 
"</tr>\n";
    }
//now let's close the table and be done with it
echo "</table>\n"
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #10  
Old Sep 29th, 2007, 10:32
Most Reputable Member
Join Date: May 2007
Location: UK
Age: 27
Posts: 1,111
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Zebra Row Color <DIV>

That seems unnecessarily complicated.

I would just add a class to every other row of the table:

Code: Select all
<tr class="alternateRow">...</tr>
If you prefer to avoid the extra markup, then you can use javascript to add these classes automatically. This is especially handy when you make repeated use of an effect.

Last edited by MikeHopley; Sep 29th, 2007 at 10:41.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #11  
Old Sep 29th, 2007, 10:49
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Zebra Row Color <DIV>

Quote:
Originally Posted by MikeHopley View Post
That seems unnecessarily complicated.

I would just add a class to every other row of the table:

Code: Select all
<tr class="alternateRow">...</tr>
If you prefer to avoid the extra markup, then you can use javascript to add these classes automatically. This is especially handy when you make repeated use of an effect.
I do have a class for the table rows but my example is connected to database and alternates the row colors. That's why it seems a lot of code

As for using JavaScript to do this, what if a user has JavaScript disabled in their browser?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #12  
Old Oct 1st, 2007, 05:34
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,612
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Re: Zebra Row Color <DIV>

Yeah... that is one thing we have to put in mind when dealing with javascript.
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #13  
Old Oct 1st, 2007, 11:43
Most Reputable Member
Join Date: May 2007
Location: UK
Age: 27
Posts: 1,111
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Zebra Row Color <DIV>

Quote:
Originally Posted by AdRock View Post
As for using JavaScript to do this, what if a user has JavaScript disabled in their browser?
Then the user will not get zebra colours. OH MY GOD NO!

Javascript should be used to enhance websites. Wherever possible, all content and important functions should remain accessible without javascript.

Most users will still get your pretty zebra colours. The others will still get the table.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #14  
Old Oct 1st, 2007, 12:05
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Zebra Row Color <DIV>

Quote:
Originally Posted by MikeHopley View Post
Then the user will not get zebra colours. OH MY GOD NO!

Javascript should be used to enhance websites. Wherever possible, all content and important functions should remain accessible without javascript.

Most users will still get your pretty zebra colours. The others will still get the table.
Too many people tend to forget that
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #15  
Old Oct 1st, 2007, 12:35
alexgeek's Avatar
Moderator

SuperMember
Join Date: Jul 2007
Location: Webforumz 24/7
Age: 15
Posts: 3,812
Blog Entries: 9
Thanks: 2
Thanked 2 Times in 2 Posts
Re: Zebra Row Color <DIV>

plus this:
January 94% 6%
Thats the amount of people that have javascript turned on and off.
Last Blog Entry: 3D Chess in your browser! (Mar 14th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #16  
Old Oct 2nd, 2007, 02:01
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,612
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Re: Zebra Row Color <DIV>

What is the point/purpose/advantage of turning off the javascript, by the way?
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #17  
Old Oct 2nd, 2007, 06:33
alexgeek's Avatar
Moderator