/    Sign up×
Community /Pin to ProfileBookmark

Alternating dt/dd?

Copy linkTweet thisAlerts:
Dec 05.2007

Hi everyone,

I’ve been searching everywhere for an answer, but have yet to find one. My problem is this:

I’m drawing news feeds dynamically on a client’s site using iframes. The feeds come through as a definition list (dl), with the article titles as dt’s, and their source as dd’s. I’ve been able to alter the appearance of the list in a way that resembles a table, using the following:

[code=php]
dl.i_rss {
width:95%;
margin:5px auto;
border:1px solid #ADBED6;
}
dl.i_rss dt {
padding:10px 5px 5px 5px;
}
dl.i_rss dt a {
text-decoration:none;
font-size:12px;
font-weight:bold;
}
dl.i_rss dd {
border-bottom:1px solid #ADBED6;
margin-left:0;
padding:5px 5px 10px 5px;
}
dl.i_rss dd a {
text-decoration:none;
color:#999;
padding-right:15px;
}
dl.i_rss dd a:hover { color:#333; }
[/code]

A request has been made to have alternating rows in this “pseudo-table”, so I need to somehow target every other dt and associated dd, and give it a different background color. There are no unique classes or other identifiers passed, so I’m unsure how to do this. The standard table row i%2 technique isn’t working…

Here is how the list is coming through:

[code=php]
<dl class=”i_rss”>
<dt class=”rss_title”>…</dt>
<dd class=”rss_home”>…</dd>
<dt class=”rss_title”>…</dt>
<dd class=”rss_home”>…</dd>
<dt class=”rss_title”>…</dt>
<dd class=”rss_home”>…</dd>
</dl>
[/code]

Any suggestions?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebnerdDec 05.2007 — There is a pseudo class [b]nth-child[/b] that works in some CSS 3 browsers.

<i>
</i>.i_rss dd:nth-child(odd){background-color:green}

Copy linkTweet thisAlerts:
@xixaoauthorDec 05.2007 — There is a pseudo class [b]nth-child[/b] that works in some CSS 3 browsers.

<i>
</i>.i_rss dd:nth-child(odd){background-color:green}

[/QUOTE]
Thank you for the suggestion. Unfortunately, I'm not able to get it to work. The W3C articles seem to suggest that this targets table rows, which are not being used in this case. Can anyone confirm this?
Copy linkTweet thisAlerts:
@mrhooDec 05.2007 — look at the [B]length [/B]of the container.getElementsByTagName('dt') as you create new dts and dds. Use that with the modulo operator to assign a class or style to each dt and dl.
Copy linkTweet thisAlerts:
@xixaoauthorDec 05.2007 — look at the [B]length [/B]of the container.getElementsByTagName('dt') as you create new dts and dds. Use that with the modulo operator to assign a class or style to each dt and dl.[/QUOTE]
I'm able to detect the number of elements this way, but the styles are not applying.

[code=php]
 function foo() {
items = document.getElementsByTagName("dt");
for(var i=0;i<items.length;i++) {
if(i%2==0) items[i].bgColor = "#EFF6FF";
}
}

window.onload = foo;
[/code]

Using if(i%2==0) alert(i) instead gives me alerts counting up all the even numbers, so I know it's finding everything okay. Is this a lost cause?
Copy linkTweet thisAlerts:
@xixaoauthorDec 05.2007 — I guess it might help to use proper syntax, lol.

if(i%2==0) items[i].style.backgroundColor = "#EFF6FF";



Problem solved ?
×

Success!

Help @xixao spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...