?
Solved

Pure css contextual help

Posted on 2006-04-01
10
Medium Priority
?
551 Views
Last Modified: 2013-11-19
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
Comment
Question by:andycwk
  • 3
  • 3
  • 2
  • +1
10 Comments
 
LVL 14

Expert Comment

by:huji
ID: 16350143
Andy,
What do you exactly mean by context help? Give an example please.
Thanks
Huji
0
 
LVL 9

Accepted Solution

by:
smaccari earned 1000 total points
ID: 16355101
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
 
LVL 4

Assisted Solution

by:noamattd
noamattd earned 1000 total points
ID: 16355256
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Author Comment

by:andycwk
ID: 16358320
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
 
LVL 9

Expert Comment

by:smaccari
ID: 16358338
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
 
LVL 4

Expert Comment

by:noamattd
ID: 16359946
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
 
LVL 9

Author Comment

by:andycwk
ID: 16360039
Hi noamattd,

Thanks for your concern regarding my javascript capabilities... I already have sufficient skills to use javascript for the implementation ;)
0
 
LVL 4

Expert Comment

by:noamattd
ID: 16360962
Then use them, my friend!  Use them well!
0
 
LVL 9

Author Comment

by:andycwk
ID: 16361053
hmm... Do I sence some hostility... never mind :P thanks for the help :)
0
 
LVL 14

Expert Comment

by:huji
ID: 16362923
>> 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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question