On-Page Dictionary in CSS Only?

[redington]

I’m still relatively new to CSS. My experience with PHP is limited to a simple email form project about 12 years ago. My experience with JS is that I can copy others’ examples into my html.

I am developing a site for legal advice on a specific topic for a lower-lit audience. It is a simple 1 column wireframe and will have around 15 or 20 pages. I would love to have a static div box on the right (no problem for me to make the div and place it) so that if a user clicks on a legal term of art in the body of the text, that static div is populated with that term and its definition (predetermined). I think the set of terms would be limited to less than about 50.

I have no idea where to even get started with this idea. Will I have to use a backend database? Is there a way that I can do this only in CSS? If so, any ideas on how to start? I don’ t even know what to call what I’m looking for. Thanks for any help.

[redington]

One last question – is this idea just way over my untrained head?

[theacefes]

I would say no, that it’s not over your head ;) but you should probably iron out the basics of web markup before you try something like this. CSS is for layout – no text or content will be produced with it – it’s all about styling content. You could use PHP to help you populate that static box either with a text file that can be read line by line or with a database.

You may want to read up on the differences of CSS, HTML, and maybe Javascript and PHP and how they work together.

[redington]

Thanks – I do minimally understand how they work. I was thinking that with so few terms to define that I could create a class/id for each of them with “content” defined in the css to include their definition, then use some kind of script(?) to display that content. I wasn’t sure about if it was possible to handle it this way or not.

I created a faq with the checkbox hack and was using that as inspiration. I suppose I could use that hack and have the definition expand in-line with the other text, but that seems a bit less elegant to me.

[Mottie]

You could just include the definitions in the markup (using HTML5) by using the and/or tags (ref):

Definition: To define the meaning of a word, phrase or term.






Have you heard that HTML is the predominant markup language for Web pages?

Then style them however you want.

[redington]

Thanks – I’ll try to work it in!

[redington]

I found the following JS that I will incorporate:

Then use the following:

Click on a term in a pink box for its definition.





Term One.





Another Term

With some silly css like

 #example1div {

background-color: rgba(255,153,153,1);

position: absolute;

width: 12em;

top: 160px;

right: 13em;

margin: .2em;

padding: .5em;

}

.term {

color: rgba(153,51,0,1);

margin: .1em;

padding: .1em;

border: thin solid rgba(153,255,51,1);

background-color: rgba(255,51,204,1);

}

That way I can just incorporate the definition into the for each term as it comes up without having to mess with a database or php.

Are there any problems with this approach that should make me avoid it (other than the really ugly pink boxes with green borders)?

[Mottie]

Personally, I think a better idea would be to use a tooltip script. This simplifies your HTML markup and separates layout from function:

HTML

Hover on a term in a pink box for its definition.





Term One.





Another Term

​Code for the head of your document

Here is a basic demo of the code above. You would need to download the tooltip script and save the files to your site as well.

If you prefer a different tooltip script, there are a ton to choose from… the script shown above to initialize the tooltip will be slightly different.

[redington]

I thought about that approach and I think it would work well, but in this particular context I think it would be more helpful to be able to leave the definition visible while the user scrolls around, or allow them to cut & paste for printing or just print the page with the definition visible.

[Mottie]

Tooltips can be made “sticky” and remain open until the user closes them.

[Author]

Posts