By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,214 Members | 2,099 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,214 IT Pros & Developers. It's quick & easy.

how is this done?? (select obj cool effect..)

P: n/a
http://www.msnbc.msn.com/id/16673873/site/newsweek/

pls scroll down, on the left, near the middle, there is a select object
above which it says "Newsweek Business Directory".. how do they get the
alternate background colors on the list?

(I looked @ src code, couldn't find "<select" )

thank you..
Jan 18 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
maya wrote:
http://www.msnbc.msn.com/id/16673873/site/newsweek/

pls scroll down, on the left, near the middle, there is a select object
above which it says "Newsweek Business Directory".. how do they get the
alternate background colors on the list?

(I looked @ src code, couldn't find "<select" )
Firefox's DOM Inspector shows a SELECT in the DOM tree, so some script
must be putting it there.
Jan 18 '07 #2

P: n/a
Harlan Messinger wrote:
maya wrote:
>http://www.msnbc.msn.com/id/16673873/site/newsweek/

pls scroll down, on the left, near the middle, there is a select
object above which it says "Newsweek Business Directory".. how do
they get the alternate background colors on the list?

(I looked @ src code, couldn't find "<select" )

Firefox's DOM Inspector shows a SELECT in the DOM tree, so some script
must be putting it there.
this means what?? is there a way of finding out how it's done? I've
seen it on other websites too..

thank you..

Jan 18 '07 #3

P: n/a
maya wrote:
http://www.msnbc.msn.com/id/16673873/site/newsweek/

pls scroll down, on the left, near the middle, there is a select object
above which it says "Newsweek Business Directory".. how do they get the
alternate background colors on the list?

(I looked @ src code, couldn't find "<select" )

thank you..
maya,

Go to
http://cache.directorym.com/creative...f=1246&group=3
which will display just the list you are interested in (the main page
embeds it in an iframe).

View the source. Search for 'baselist' which is the id of a select
statement generated by JavaScript.

The JavaScript opens a div, inserts an H2 (empty), opens a select list,
adds an end-option tag, closes the select list, and closes the div.
This creates a totally empty select list.

Next in the source you will see another script called (<script
src="script.aspx?affiliate=1246&b=True&bp=18&sourc e=89"
type="text/javascript">)

If you overlap-splice the src= value to the URL you are looking at, you
get
http://cache.directorym.com/creative...p=18&source=89

Go there. You are looking at the JavaScript source. [I did all this
with Firefox 2...]

Scroll to the bottom, past all of the x = y stuff, and you will see the
code that does the work, adding options to the empty select list. I
didn't examine it in detail, but the result is that odd numbered options
retain the background-color inherited from the cascade (transparent),
while even numbered options are given a different background-color via a
style= attribute inserted into the document.

In case the user has JavaScript turned off, there's a <noscriptversion
which skips the select list and just displays the links, without the
odd-even highlighting.

But, if you are patient, CSS3 will apparently be adding selectors for
odd and even children (see
http://www.w3.org/TR/2005/WD-css3-se...h-child-pseudo)
so that this can be done without JavaScript.

Chris Beall
Jan 21 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.