0

I am working on a glossary of words, with explanatory texts made invisible behind keywords, made invisible with {visibility:hidden; opacity:0;} but I noticed keywords are hidden from Find in any browser.

I also learned that hidden text is no good to html-readers, so the disabled cannot use this glossary. So users can not Search and Find and the blind can have no profit of it. All in all, no good.

So what I want to make: the same keyword div, the explanatory text aside in a very small font-size with the same color as the background, with overflow:hidden and when I click on that keyword the (a moment before) unreadable text popup in all glory. But I do not like to have the explanatory texts twice, i.e. one time hidden and one time ready for the popup. How to do that?

So with a click on the keyword, the attributes of the class change, from one class to another? Can that be done?

Here is an example of one entry I have (class x is used to close popup):

CSS:

.w { font-size: .75em;
     line-height:1.2em; 
     height:27px;
     background-color:#f2f3f4;
     margin-right:2px;
     margin-bottom:6px;
     outline:0px; 
     cursor:pointer;
     padding:7px;
     width:170px;
     display:inline-block;
     vertical-align: middle; 
     text-align:left; 
     border: .5px solid #f2f3f4; 
     }
.ov {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.6);
     transition: opacity 1000ms;
     visibility: hidden;
     opacity: 0;
     }
.ov:target { 
     visibility:visible;
     opacity: 1;
     }
.tt {
     position:absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 33px;
     padding-left:40px;
     background: #fff;
     border-radius: 10px;
     width: 70%;
     height:auto;
     max-height:80%;
     transition: all 1s ease-in-out;
     font-family: "basr"; 
     font-size:.85em; 
     line-height:1.5em; 
     text-align:left; 
     outline:0px; 
     overflow:auto;
     }
 .x { 
     cursor:pointer; 
     position: absolute;
     top: 8px;
     right: 13px;
     font-size: 15px;
     font-family:"arial";
     text-decoration: none;
     }
  p3 {
     font-family:"chunk";
     font-size:2em;
     color:#c33;
     margin-right:.5em;
     margin-left:-.5em;
     vertical-align:4px;
     line-height:1.4em;
     }

HTML:

<a class=w href=#232>Ahti</a><div class=ov id=232><div class=tt><a class=x href=#>×</a><p3>Ahti</p3> (Fins) De Finse god van het water, afgebeeld als een oude man en hulp van de vissers; zijn vrouw heet Vellamo. Ook een naam van Lemminkaïnen, die de draak van kennis wordt genoemd in de Kalevala.</div></div>

Fred
  • 1
  • 3
  • I don't understand your question entirely. Do you want to change a class when clicking on the word "Ahti", or what is it you desire? Or do you mean you don't want to have the text ready in HTML, but it has to be generated when the popup shows? In that case, you can use javascript html(); – Rubenxfd Jul 14 '17 at 09:43
  • Yes, when one would click on Ahti, that Ahti and the description become visible in a sort of popup, as it is now. But not like it is now, with visibility:hidden, just with change of font-size and colour. I have not figured out myself how to get such a transformation with css. Probably I need JS for it, but as I am no programmer at all, I have to ask and beg and see what you guys have to help me. Thanks for that – Fred Jul 14 '17 at 11:30
  • If have made a fiddle for you. Please check if this is what you mean. The description is added when someone clicks on 'Ahti' and is removed when they click the 'x'. https://jsfiddle.net/z3mz5x97/ – Rubenxfd Jul 14 '17 at 13:21
  • Nice work, but we still remain with invisible text, which is ignored by html-readers. I am now studying this page [link](https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript?rq=1) but cannot find a way to toggle, nor how to find a result which opens after it is found. Perhaps I should ignore the html-readers, I will post a pdf after the database is ready, but perhaps you can help me how to search with javascript in invisible text? That would be a nice workaround. Perhaps skip this altogether and focus on "Search" in the bulk of the invisible text? – Fred Jul 14 '17 at 14:40
  • What do you mean by HTML-readers? Also, what do you mean by searching 'invisible text'? Is this the HTML code you made invisible with `visibility:hidden`? If so, this text still exists and should be searchable with jQuery: `var wantedText = $("div:contains(Ahti)")`; – Rubenxfd Jul 17 '17 at 08:08

0 Answers0