Previous Message
Next Message

Best Way to Show/Hide Text

Sent by Jon Wynacht on 14 March 2006 17:05


Hi,

Sorry...I was too specific about everything and too general about  
what kind of feedback I was looking for ;-(

See my replies inline.

Thanks,

Jon

On Mar 14, 2006, at 9:16 AM, Els wrote:

> Jon Wynacht wrote:
>
>> I'm wondering if there is a definitive way to show/hide text
>> using JavaScript and CSS. I'm working on a project which
>> involves a map with various states that are linked. When a
>> state is clicked content appears which is relevant to that
>> state. Click another state, the old content is hidden and the
>> new content appears.
>>
>> You can see what I've come up with here:
>>
>> http://www.bicyclingbeyondcitylimits.com/new/excerpts.html
>>
>> Obviously this doesn't work so well as the positioning is not
>> correct.
>
> How do you mean 'not correct' ? Is it in the wrong place? where do  
> you want it to appear?

It should be centered with the map, the white boxes matching on left  
and right edges. I can get this to happen on Safari but not with IE  
and FF for Windows.

>> I'm using the same CSS for each <div/> of content:
>>
>> #ca
>> {
>> background-color: #FFFFFF;
>> width: 480px;
>> position: absolute;
>> top: 515px;
>> left: 378px;
>> visibility: hidden;
>> z-index: 100;
>> padding: 10px;
>> }
>>
>> I'm then using JavaScript to show/hide the layers.
>>
>> Any suggestions to obtain cross-browser positioning bliss?
>
> It's currently showing the same in Windows IE, Opera and FF here.

Yup. I'd like to have it appear the same for all (most!) popular  
browsers. Looking for hints or tips

> Another suggestion though: let the text 'click on a state...' only  
> appear if JS is enabled. That way nobody needs to try and click  
> while nothing happens :-)

Yup. I will definitely degrade that functionality. Thanks!
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
Previous Message
Next Message

Message thread: