Re: [css-d] CSS onclick event?
Wow - a lot of you responded :) Thanks so much! Let me see what I can say about this... 1) I'm trying to avoid javascript solutions at all costs - I'd love for this to work in CSS-only. I've been playing with the idea for a lng time and I've partially gotten it to work (got it to work *great* in Firefox, but IE (of course!) and ::gasp:: Opera aren't playing nice) so I have more playtime on it to try and figure it out. 2) I've made tabbed sites before using different classes for things, so when the page switches the tab will switch as well. However, what I'm trying to do here is make it *all on one page*. No loading of new documents as you click through the tabs - just one page. 3) I did try the a:focus thing, and it didn't work, either. Now, since I've been playing with this, I can explain better what's going on, I think. I *did* look at Stu Nicholl's stuff (as well as that pmob sute) to get some ideas. They are *close* to what I want, but no cigar. I think Stu was the one that did the closest version of what I wanted: a smaller container with nav/tabbed links on the side, and content on the right. The container is set with overflow:hidden so the *lng* page of content looks like one short page (as anything set below it is invisible). The nav links basically lead to anchored links within the document. So when you click on the 2nd link, the anchor tag pulls up the 2nd area of content into the viewable area of the window - making it *appear* that the end user has switched pages, but you're really still on the same page. What I did to keep the tabbed area the same color once clicked was to place a colored bar *over* the link in question with some positioning - so it gives the illusion of tabs with sticky colors. (Hope that makes sense!) My problems have been this: Firefox requires the use of position:fixed to keep the menu in the same place on the page (if I don't use it, then as the links jump through the content, the menu scrolls up and disappears). *But* this screws things up in IE...*and* in Opera 7 8. I've found a way to make it work in Opera - but I've also discovered that my solution renders the links useless - I guess there's a bug in Opera9 that renders anchored links within a document useless when they are placed in a container with overflow:hidden. I'm starting to wonder if I could hide this fact by making it overflow:auto (which works, but adds a scrollbar) and somehow hiding the scrollbar with z-indexing or something. But I'm thinking that's a bit too complicated :) Anyway - this is just a big experiment for me - I'm only playing around, but I do love challenges. If you all would like to see what I've done so far: http://www.foolishvisions.com/test/tabbed/index6.html This does *exactly* what I want it to do in Firefox. Now, if you view that in IE6 and/or Opera (I'm gradually working my way backwards and eventually to the Mac) you'll see what I mean about the sidebar menu shifting. Just keep in mind (if you *do* come up with suggestions for me, which would be muchly appreciated!) that this is me just playing around...nothing more :) But thanks for your assistance so far! I do appreciate it! ~Shelly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS onclick event?
Here's an odd one...and this is purely for theoretical purposes. I was just wondering if there was any possible way to have a link remain one color until another one is clicked upon, using *only* CSS. For example, if you had a UL list comprised of 5 links, would it be possible to hover over Link1, have the background color change, and when you clicked on it, it would *remain* the background color...until you clicked on Link 2? (Then Link 1 would revert back to the normal state, while Link 2 remained the hover color?) Does this make sense? Maybe if I put it in the context of a tabbed menu - where whatever section you were on, the tab corresponding to it would pop out - all without switching pages or using a script. I was just wondering if it was too weird an idea...just not possible. ~Shelly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS onclick event?
On 5/17/06, Design Groups [EMAIL PROTECTED] wrote:
Here's an odd one...and this is purely for theoretical purposes.
I was just wondering if there was any possible way to have a link remain
one color until another one is clicked upon, using *only* CSS.
a:active { color:whatever; }
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS onclick event?
Christian Montoya wrote:
a:active { color:whatever; }
Yes, but that only works when you click the button (or mouse down).
When you unclick and move away, the color doesn't remain behind, it
reverts to the visited color. What I'm looking for is the active
state to stay, until another link is clicked.
~Shelly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS onclick event?
i think your best bet is javascript. javascript could change the css class of the tab and won't change it again until something else is clicked, in which case you take the active class away from the original one and apply it to the newly activated one. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS onclick event?
On 5/17/06, Design Groups [EMAIL PROTECTED] wrote:
Christian Montoya wrote:
a:active { color:whatever; }
Yes, but that only works when you click the button (or mouse down).
When you unclick and move away, the color doesn't remain behind, it
reverts to the visited color. What I'm looking for is the active
state to stay, until another link is clicked.
~Shelly
___
I usually use a class (.active{background-color:pink; color:red;} for example)
and then if I am on page X then give this link the .active class. We
use a middle-ware for this (ColdFusion, usually), but I am sure JS can
be used. Or hard code the pages for this.
HTH
--
Tom Livingston
Senior Multimedia Artist
Media Logic
www.mlinc.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS onclick event?
Design Groups wrote: Here's an odd one...and this is purely for theoretical purposes. I was just wondering if there was any possible way to have a link remain one color until another one is clicked upon, using *only* CSS. For example, if you had a UL list comprised of 5 links, would it be possible to hover over Link1, have the background color change, and when you clicked on it, it would *remain* the background Shelly, I may be missing something here, but clicking on Link1 should load a new document isn't? --- Regards, Thierry | www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS onclick event?
Christian Montoya wrote:
On 5/17/06, Design Groups [EMAIL PROTECTED] wrote:
Here's an odd one...and this is purely for theoretical purposes.
I was just wondering if there was any possible way to have a link
remain one color until another one is clicked upon, using *only* CSS.
a:active { color:whatever; }
a:active,a:focus { color:whatever; }
---
Regards,
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS onclick event?
On 5/17/06, Design Groups [EMAIL PROTECTED] wrote:
Christian Montoya wrote:
a:active { color:whatever; }
Yes, but that only works when you click the button (or mouse down).
When you unclick and move away, the color doesn't remain behind, it
reverts to the visited color. What I'm looking for is the active
state to stay, until another link is clicked.
Stu has managed to work around that issue. I don't have time to dig
for an example, but he has pure CSS examples where the link stays
clicked. I think if the link is href=# it works... someone please find
an example: http://cssplay.co.uk/
Also I think Thierry has it right, a:active, a:focus.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
