• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 554
  • Last Modified:

Pure css contextual help

Pure css contextual help

Hi all,

I have received a development specification that requires contextual help for each filed in a submission form.

I have performed several searches through google for a pure css solution without any luck (I have found solutions that include both css and javascript).

Before I implement a solution that uses javascript, do any CSS experts have any ideas for a pure css context help solution?

Thanks in advance... Andy

0
andycwk
Asked:
andycwk
  • 3
  • 3
  • 2
  • +1
2 Solutions
 
hujiCommented:
Andy,
What do you exactly mean by context help? Give an example please.
Thanks
Huji
0
 
smaccariCommented:
If by contextual help you mean make appear a box containing explanation about the current field, i don't see any possibility with pure CSS.
You will have to use JavaScript to position a DIV element and to make it show/disappear.
CSS will enable you to customize the appearance of your DIV, maybe its position, but won't enable you to make it appear on mouseover or focus on a specific field.
0
 
noamattdCommented:
smaccari is right.  CSS is only for design and layout, not content.  You can minimize the javascript required by only having it load the text into a div, and control the rest of it with css.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
andycwkAuthor Commented:
huji,
I have a div that appears on the page that has some help for the form section, at the bottom of this div is a further div/span that the contents of which will change depending on the active input field.
I was wondering if maybe a activeField:hover could effect the display settings of a different element.

smaccari, noamattd,
I had a feeling that CSS would not perform the actions that I desired, but I needed to know for sure before dismissing it.

I will wait to see if huji has anything further to say before I close the question and assign points.

Andy


0
 
smaccariCommented:
You can not change an element style with a CSS rule applied to another one.
The activeElement:hover rule will affect only the element being mouse overed.

The only way to do what you need is through JavaScript, with a mouseover event handler.
0
 
noamattdCommented:
andycwk,

If you want a div's content to be contextual depending on what field is active, you'll need to use javascript and the onfocus/onblur event handlers for each field.  Again, you can minimize the effort by having javascript just inject the content and letting your CSS take care of styling it.  If you feel like you'll be doing a lot of stuff like this and need to learn javascript I'd recommend picking up The Definitive Guide to Javascript : http://www.amazon.com/gp/product/1565923928/002-2537117-8544806?v=glance&n=283155

It's what I use and it's been a very useful book to learn from/use as a reference.
0
 
andycwkAuthor Commented:
Hi noamattd,

Thanks for your concern regarding my javascript capabilities... I already have sufficient skills to use javascript for the implementation ;)
0
 
noamattdCommented:
Then use them, my friend!  Use them well!
0
 
andycwkAuthor Commented:
hmm... Do I sence some hostility... never mind :P thanks for the help :)
0
 
hujiCommented:
>> huji, I have a div that appears on the....
I was away when all the discussion happened. I agree with the other people. With CSS (at least the version supported by current browsers) you can not affect other DIVs when an object is moused over (or mouse overed! I'm not sure which one is correct!) You need to use your javascript skills for that, and I reckon it is very easy for you to do that. However, we are here to help you, in case.
Huji
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now