Re: [css-d] hover technique

[Mauricio Samy Silva]

> At 5/22/2007 10:15 AM, Mauricio Samy Silva wrote:
>>I hosted a test case showing a possible solution:
>>Please, look at:  http://www.maujor.com/temp/css-d/hover-effect.html
__

> Mauricio, this technique as you've used it here doesn't survive
> text-resizing, but it looks like that can probably be corrected by
> setting block heights in ems to prevent them from colliding.
> Paul
 __

Hi Paul,
Thank you for feedback.
Setting block heights in ems didn't works, but setting  in ems the top 
property for absolutely positioned blocks do.
I've fixed it.

Maurício Samy Silva
http://www.maujor.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] hover technique

[Paul Novitski]

At 5/22/2007 10:15 AM, Mauricio Samy Silva wrote:
>I hosted a test case showing a possible solution:
>Please, look at:  http://www.maujor.com/temp/css-d/hover-effect.html


Mauricio, this technique as you've used it here doesn't survive 
text-resizing, but it looks like that can probably be corrected by 
setting block heights in ems to prevent them from colliding.

Regards,

Paul
__

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] hover technique

[David Hucklesby]

On Tue, 22 May 2007 11:37:49 +0100, Terry O'Leary wrote:
> Hi all
>
> I have an  acting as a menu (so each  in the list is wrapped in 
> anachor), next
> to that I have a div containing a jumble of words.
>
> What i'd like to do is when I hover of the list item some text in the jumble 
> words
> change color so they stand out of the jumble, any body got a pure css 
> solution for
> this, i've included some example code below, i'm thinking some spans in the 
> jumbled
> words and some way of changing color on a:hover ?
>
>
Not with that markup, Terry. To use CSS you would need to put the
text to highlight inside the "A" element and use positioning on it -
the H4 element would make it invalid markup, and it would not degrade
gracefully, and likely be meaningless to screen readers.

A JavaScript solution seems possible. Try asking on a JavaScript
list, such as 

Cordially,
David
--


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] hover technique

[Mauricio Samy Silva]

From: "Terry O'Leary" <[EMAIL PROTECTED]>
> I have an  acting as a menu (so each  in the list is wrapped in
> anachor), next to that I have a div containing a jumble of words.
>
> What i'd like to do is when I hover of the list item some text in the 
> jumble
> words change color so they stand out of the jumble, any body got a pure 
> css
> solution for this, i've included some example code below, i'm thinking 
> some
> spans in the jumbled words and some way of changing color on a:hover ?

-
Hi Terry,
I hosted a test case showing a possible solution:
Please, look at:  http://www.maujor.com/temp/css-d/hover-effect.html

Hi all,
Comments on my solution will be appreciate.
Regards,

Maurício Samy Silva
http://www.maujor.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] hover technique

[Paul Novitski]

At 5/22/2007 03:37 AM, Terry O'Leary wrote:
>I have an  acting as a menu (so each  in the list is wrapped in
>anachor), next to that I have a div containing a jumble of words.
>
>What i'd like to do is when I hover of the list item some text in the jumble
>words change color so they stand out of the jumble, any body got a pure css
>solution for this, i've included some example code below, i'm thinking some
>spans in the jumbled words and some way of changing color on a:hover ?


Terry,

CSS :hover exerts its effect 'inward' in the DOM, that is, it's only 
the children and other descendants of the anchor element that can be 
affected by the event.

It's certainly possible to affect blocks of text that *look like* 
they're outside the anchor by way of absolute positioning -- see Eric 
Meyers' demo 'Pure CSS Popups' 
.

Here's an example from my own portfolio : 
hover over the images in the navigation menu and the corresponding 
sub-menu text brightens.  (If I reproduced this today I'd make it 
resizable, but it does illustrate the basic technique.)

Similarly in your case, I see all the 'popup' text as visible at all 
times and then change on hover, however if those words were 
positioned absolutely they wouldn't be part of one another's flow, therefore:

1) you'd have to pre-position each word as you would an image, 
planning in advance their respective sizes and positions;
2) if the words grew in size in response to hover, the word-wrap of 
the whole cluster wouldn't naturally change; and
3) to make it work with text-resizing you'd need to size the 
container for the word cloud in ems so that the wrap didn't need to 
change with text-resizing.

So I'm seeing this sort of markup:


 ANNUAL REPORTS
 DEDICATED TEAM FOR EACH PROJECT
 TYPESETTING
 

 NEW MEDIA
 CREATIVE
 CONCEPTS AND DESIGN DEVELOPMENT
 
 ...


Then position each of the text blobs absolutely (or relatively?) 
somewhere beneath or beside the list.

You could definitely pull it off if you could control the environment 
in which the word cloud sat.  It would be a little picky if you had 
to pre-measure each phrase in ems, but if the word cloud doesn't have 
to change frequently, that solution doesn't sound impractical.

Of course, using javascript you can make an event affect unrelated 
elements anywhere on the page, but personally I think it's cooler 
when we can pull this off without scripting.  One advantage of 
scripting it is that the markup would be more intuitively obvious -- 
the word cloud would be separate from the menu, each phrase in the 
cloud wrapped in a span linked by id or class with the menu item to 
which it belongs.

Regards,

Paul
__

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] hover technique

[Terry O'Leary]

Hi all

I have an  acting as a menu (so each  in the list is wrapped in
anachor), next to that I have a div containing a jumble of words.

What i'd like to do is when I hover of the list item some text in the jumble
words change color so they stand out of the jumble, any body got a pure css
solution for this, i've included some example code below, i'm thinking some
spans in the jumbled words and some way of changing color on a:hover ?




ANNUAL REPORTS
NEW MEDIA
BRANDING
CORPORATE COMMUNICATIONS




DEDICATED TEAM FOR EACH PROJECT // CREATIVE
CONCEPTS AND DESIGN DEVELOPMENT // TYPESETTING //
PROOFREADING // PROJECT, TIME AND COST MANAGEMENT
// PRINT MANAGEMENT, INCLUDING PASSING ON
PRESS // PHOTOGRAPHY, BOTH COMMISSIONED AND 
LIBRARY // ART DIRECTION //COPY WRITING //ARTWORK
// SOURCING AND IMPLEMENTING PHOTOGRAPHY
// WEB SITE BUILD AND MANAGEMENT WEB SITE
MAINTENANCE // WEB SITE HOSTING //CUSTOM-BUILT
CONTENT MANAGEMENT SYSTEMS IMAGE LIBRARIES
// SERVER STATISTICS // PDF AND HTML CONVERSION
FOR THE WEB // CORPORATE IDENTITY GUIDLINES
// IMPLEMENTATION THROUGHOUT CORPORATE
COMMUNICATIONS //ANIMATION AND INTERACTION

-- 
Regards

Terry O'Leary
Senior Web Developer @ Design Portfolio Marketing Services

~ Online Communities - www.unofficialfan.com
~Online dating community ? www.d8-m8.com
~ Widen your music www.hayseeddixies.com :: www.lil-chris.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/