Would using font-size:0; work too?
or would that not be the appropriate code structure to use.
As I know, you have said to use this:
text-indent:-99em;
That was an old method that was used but I think some browsers ignore it.
Or it can be overridden in a userās custom stylesheet
such asā¦
* a {font-size: 1em;}
That will cause you the least headaches
-99em is not a magic number, it could be -999em
2 Likes
Just donāt make it -9em, because the intention here is to push the element far away to the left, so that it doesnāt appear on the screen. The more 9ās you use the better. Iāve usually seen -9999em used, because that properly handles more situations than -999em, and isnāt as stupidly large as -99999999em which might break due to max-number limits.
1 Like
No you are missing the point altogether.
The js is adding the activated class to an element in the document. If the class was added to playbutton itself then the css would be as per the original. However in the revised code the activated class was added to .wrap instead so the css must change in order to target the required element.
1 Like
Iāve never had any problems with -999
With the avg userās base font @ 16px that = 15,984px
That puts the hidden text on avg at least 14,000 px off the screen
Of course there could be issues with a widescreen TV monitor, but the display would be larger too. Should be similar results, just on a larger scale.
2 Likes
When using emās thereās no trouble, but some people fail and use px instead.
-999px doesnāt give enough safety, so using -9999 as the number helps to keep things safe regardless of whether em or px are used.
1 Like
What are your thoughts on using visibility:hidden, or opacity: 0; to hide the text?
.linkse a:nth-of-type(8) {
visibility:hidden;
}
.linkse a:nth-of-type(8) {
opacity: 0;
}
I understand thereās a difference between the 2, but if one would be used, which one would be used in this circumstance?
Which would be enabled for screen readers?
visibility:hidden, or opacity: 0;
I just found this:
opacity: 0; wonāt hide content from screen readers, though itāll hide content from sighted users and partially sighted users. Itās like displaying a white text on a white background (or transparent
Thereās some good details on the techniques to use, and why, over at the page about Invisible content just for Screen Readers
3 Likes
If the javascript works as is, why would I need @Paul_Wilkins to help me with it, if it already works?
You will need @Paul_Wilkins to help you with the JS but this gets it working with the css and html I posted
Good one - Iām glad to know that the scripting code is flexible enough to work without much modification.
What do I need to adjust in this code?
So it works like this?
Two key differences that I notice are that the first code doesnāt clear the initial image, and it doesnāt start playing the player.
Do you want it to start playing the player like the second code?
Yes.
It looks like the title element is not being hidden when itās supposed to be.
Thatās because some of the CSS with a greater specificity is overruling other CSS to hide it.
.title {
display: none
}
.inactive .title {
display: block;
}
Solution: delete that inactive style declaration, and move its display declaration to the .title block instead.
Itās already set like this:
.title {
display: none;
}
.inactive .title {
display: block;
}
Which is faulty and not working, because you are asking for my help.
Do what I said and it will work. Delete the inactive declaration, and replace the title declaration with the block one instead.
Here:
.inactive .title {
display: none;
display: block;
}
You are obviously failing to understand.
Replace the following code:
.title {
display: none;
}
.inactive .title {
display: block;
}
With only this code:
.title {
display: block;
}
and it works as is shown at https://jsfiddle.net/pmw57/ffvkbLjw/70/
Yay.
How do you get the audio to play?
Start after you open it?