FacebookTwitter
Hatrack River Forum   
my profile login | search | faq | forum home

  next oldest topic   next newest topic
» Hatrack River Forum » Active Forums » Books, Films, Food and Culture » CSS help please

   
Author Topic: CSS help please
NdRa
Member
Member # 2295

- posted      Profile for NdRa   Email NdRa         Edit/Delete Post 
I can't figure out for the life of me how to do this. I'm assuming this is a simple problem a guru here at hatrack could help me with in a breeze.

So here is what I can't manage to do:
I have a column with a list on the left of the page. It list five states... california, arizona, etc. When you click on 'California,' there is a frame in the next column to the right that lists a bunch of cities to choose from. Now I want the color of 'california' to change to white and stay white while all the other state links stay the original color. When I decide to click on 'Arizona'instead, I would like 'california' to go back to the original color while only 'arizona' is now white. I would think this is a simple thing to do, but I am banging my head against the monitor over this.

This site under 'where to buy' does exactly what I want to do but with flash. Any help would be greatly appreciated. [Confused]
Posts: 1015 | Registered: Aug 2001  |  IP: Logged | Report this post to a Moderator
kaioshin00
Member
Member # 3740

- posted      Profile for kaioshin00   Email kaioshin00         Edit/Delete Post 
Hmm... Im not sure how to do this in HTML, but if you use php, you can store the name of the selected state in a variable and then use if-else statements for the colors.

But there's probably an easier solution that I don't know.
Posts: 2756 | Registered: Jul 2002  |  IP: Logged | Report this post to a Moderator
Bokonon
Member
Member # 480

- posted      Profile for Bokonon           Edit/Delete Post 
I don't think CSS can do this. Using JavaScript ought to work.

-Bok
Posts: 7021 | Registered: Nov 1999  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

- posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
Are the city lists separate pages (one per state)?

If so . . .
quote:
#selectedState {
properties here . . . .
}
If you're calling up the cities panes with javascript or the like, in the same function mutate the style on the appropriate state list item (each identified as appropriate, such as
code:
<li id="California"> . . California . . </li>
<li id="Nevada"> . . Nevada . . </li>
).
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

- posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
Oh, you said frame? Simple, don't use frames [Razz]

If you insist on using frames (again, I highly recommend against them, there're distinctly evil), the second solution can be used. Just change your bit that opens it in a new frame to use javascript and in the same function do as I described (if you need more detail, I can provide that).
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
NdRa
Member
Member # 2295

- posted      Profile for NdRa   Email NdRa         Edit/Delete Post 
Ah ok. Thanks for all your help folks. Must use frames as the clients are indeed evil. I am going to try to plug this in and see if it works:

<
code:
   <style>
a:link.menuLink {
	font-family: Arial, Helvetica, sans-serif;
	color: #4A543D;
	text-decoration: none;

}
a:visited.menuLink {
	color: #4A543D;
	text-decoration: none;
}
a:hover.menuLink {
	color: #CC9933;
	text-decoration: underline;
}
a:active.menuLink {
	color: #4A543D;
	text-decoration: none;
}

a:link.menuLinkStuck {
	font-family: Arial, Helvetica, sans-serif;
	color: #4A543D;
	text-decoration: underline;

}
a:visited.menuLinkStuck {
	color: #4A543D;
	text-decoration: underline;
}
a:hover.menuLinkStuck {
	color: #CC9933;
	text-decoration: underline;
}
a:active.menuLinkStuck {
	color: #4A543D;
	text-decoration: underline;
}

</style>


<Script language="JavaScript" type="text/JavaScript">

function ChangeToStuck(object o)
{
	o.class = "menuLinkStuck";
}

function ChangeToNormal(object o)
{
	o.class = "menuLink";
}
</script>

.
.
.

<a href="somewhere.html" class="menuLink" onClick="JavaScript:ChangeToStuck(this);">This is a Link</a>
Posts: 1015 | Registered: Aug 2001  |  IP: Logged | Report this post to a Moderator
NdRa
Member
Member # 2295

- posted      Profile for NdRa   Email NdRa         Edit/Delete Post 
Yay! I convinced the client that frames are just such a nuisance. I can do this however I want.
Posts: 1015 | Registered: Aug 2001  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

- posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
Yeah, that's the basics, I'd use a slightly more complex function, something like SelectNewState

code:
function SelectNewState(newState) {
    var allLis = document.getElementsByTagName("li");
    for (i = 0; i < allLis.length; i++) {
        if (allLis[i].className=='stateSelected') {
            allLis[i].className = '';
        }
    }
    newState.className = 'stateSelected';
}
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

- posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
[Big Grin] Yay!

<--- doesn't like frames.

I'd go with the pure CSS solution, having different pages as appropriate.
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
quidscribis
Member
Member # 5124

- posted      Profile for quidscribis   Email quidscribis         Edit/Delete Post 
Yeah, CSS is something I need to learn. And soon. Ugh. [Frown]

I'm using Dreamweaver. Any decent tutorials out there? I haven't found any yet. . .

[ December 21, 2004, 09:27 PM: Message edited by: quidscribis ]
Posts: 8355 | Registered: Apr 2003  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

- posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
Search for posts made with the word CSS in them by me (using my member number), and you'll find a lot of good links and advice.
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

- posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
Oh, and I generally like to code in dreamweaver by writing my html mostly by hand and just using the rendered view to see what's happening. I do use some dreamweaver capabilities, such as their windows for configuring css information, but I always look at the actual code they make.
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
quidscribis
Member
Member # 5124

- posted      Profile for quidscribis   Email quidscribis         Edit/Delete Post 
Admittedly, when I'm using Dreamweaver, I like having both the wysiwyg editor showing plus the code view. I figure I'll learn more that way.

Plus I just switched over from the dark side - FrontPage - so I'm redoing everything from scratch. I refuse to use bloated FrontPage code, so . . . I have a huge job in front of me. Did I mention that evil FrontPage crapped all over everything? [Wall Bash]

Ah well. Life moves on.

Thanks for the tips, fugu.
Posts: 8355 | Registered: Apr 2003  |  IP: Logged | Report this post to a Moderator
   

   Close Topic   Feature Topic   Move Topic   Delete Topic next oldest topic   next newest topic
- Printer-friendly view of this topic
Hop To:


Contact Us | Hatrack River Home Page

Copyright © 2008 Hatrack River Enterprises Inc. All rights reserved.
Reproduction in whole or in part without permission is prohibited.


Powered by Infopop Corporation
UBB.classic™ 6.7.2