That is what the CSS I was hoping would work when I was playing around with it yesterday, but I figured out why the ":active" component was not behaving how I thought it would: it is missing a JavaScript component.
When I peeked at your Custom CSS, I saw that you have the animation still listed under the .splash section, but since the CSS I proposed wont work anyway, that's moot.
When I get a free moment this week, I'll see if I can did around on the web to see if there is a solution that uses solely HTML and CSS. The "onclick" idea I had would only work with utilizing JavaScript (which is disabled on OP).
This is a total shot in the dark (as I haven't tested it at all), but if you make the splash a clickable link (html a tag) that "targets" the splash, then I think you can use the "target" css class instead of "active", and it will stay "targeted" and allow the animation to finish even after releasing the click.
I played around with that and could not get it to work. I feel like the :target function must be blacklisted like JS, <label>, and <input> is.
I just do not think this can be done without JS since CSS doesn't have any interactions with "onclick" funtions. There is a workaround in HTML by coding the image as the label of a checkbox, so when the image is clicked, you can alter how the toggle state of the checkbox is displayed...but OP doesn't let you mess with input HTML.
@gastoff, looks like "target" doesn't work because "id" is not currently an allowed attribute on OP. So the a tag has nothing to target because the ids are stripped out. I'm going to look into what the dangers of allowing "id" might be. I can't think of any offhand, but since it wasn't allowed originally, I'm wary of what I might be missing.
Alternatively, here's an idea that might work...
Have the popup div be expanded to fill the entire screen.
Wrap the popup div in an a tag and use the "hover" css to make it visible (display:block?).
Then non-hover css on the same a tag should have it be display:none.
So then as long as the visitor's cursor is on the popup (which spans the entire screen), the popup image will be showing (display:block). (I don't think this will work for ipad/phone visitors, but they just wouldn't see the popup at all because display:none from non-hover, so no big deal.)
Then, to make the "click to go away" work, setup the css animation as a "focus" on the same a tag.
When the visitor "clicks" that gives focus to the a tag.
Then at the end of the animation (100%) change the a tag to display:none, so the visitor is no longer "hovering" and the page will then automatically switch to use the non-hover css (display:none). so the image stays hidden. (Otherwise, when the visitor clicks something else, and takes the focus away from the a tag, the image will pop back up to full opacity because the visitor will still be hovering over the "opacity 0%, but still display:block a tag that fills the screen").
I played with pieces of this, like the hover to run the animation, but I didn't put it altogether, so I don't know if it will 100% work or not.
@gastoff, actually, I don't think that's going to work because the image will never show...it will always be initially hidden and never "hovered".
Instead, you can do this...
Normal (non-hover, non-focus) has the animation.
Hover has animation-play-state: paused;
Focus has animation-play-state: running;
Then if the image spans the screen, it will be "hovered" and so then will be "paused". When the visitor clicks it will change to "focused" and will start running again. Then it will finish and be "normal" (non-hovered, non-focused) and the animation will be done so it won't run again.
Something like this:
.animation-test { animation: splashlogo 2s linear 0s forwards; }
I think the "id" and/or "input" blocking is because you can use HTML <input> to create form fields. Unscrupulous users could create form fields that collect user data maybe?
On a related note, I love your animation play state work around! Unfortunately, giving an element ":focus" on click isn't inherent, but I figured out how to make it work!
The image has to be an <a> element so it is treated like a link, then you just add an jQuery to the element.
HTML
(Uplodaded as an image because the forums runs in to errors when I try to add the "onclick" command...)
I just tried this in my test campaign, and the "onclick" is stripped out, so that's not needed, since the page doesn't even see it. I think the "<a>" tag should just by default grab focus when it's clicked. I also added something after the "#" like "href="#test"", otherwise I think it tries to jump to the top of the page (if you're not already there).
That explanation makes sense for HTML "input" tags, but the "id" attribute is just a way of uniquely identifying an HTML element. So it seems like "id" should be safe to allow.
You're right, the onclick is unnecessary. The real ticket was setting it to <a> tag and making sure there is some form of an href in place so focus can be grabbed.
That is exactly what I was hoping for! Thanks to you both for figuring that out. It was so far above my head I am sure I never would have gotten it. Sweet!
Now I can make a feature art piece for the most important characters in the game on each character page. You can see it in practice here:
Hmm. There is still a bit of a problem. I put the animation with different character images on their respective pages. And if you go to an individual page and click on the character it will play properly. But only that first one. After that it doesn't always play right if you go to another character page or try to reload the page you are on. It plays through the animation before you get to the page or pauses at about 25% opacity for some reason.
@HumAnnoyd, yeah, I see what you're saying. The "hover" isn't kicking in right away, and so some of the animation starts to play before it "pauses".
One option is to maybe change the "5%" to be a "50%", so it has an entire second (50% of 2 seconds) to show the image without fading it.
The other option is to wait a couple days for me to add the "id" exception, and then we can try out the "target" idea and see if that works better for this. (We try not to deploy on the weekend if we don't have to.)
I think I will exercise some patients and wait for the target idea. Thanks again for all the help. I am very excited to add more pics like that to all my characters. It will give me a new project to play with.
The image is loading quickly on the page, before page registers that it is being "hovered", so it is playing through part of the animation before the hover kicks in and pauses things. You might be able to just add a 2s animation delay to resolve this.
Um. OK. I tried what you suggested (I think. It was a bit over my head) but it didn't work. Which probably means I am not quite understanding what you mean. Here is the code I had before:
@HumAnnoyd, notice that this should work just the way you want when you first come the page from somewhere else. However, once you click the image and it fades away, the url changes from:
So if you "refresh" the page, the image will start fading immediately with no click needed. You'll need to go to the page again from a link or delete the "#splash-id" from the url in the browser to make the image stay in place. Just mentioning in case you tried "refresh" and saw that it immediately started fading.
@thaen thanks so much. That works like I want it to. I really appreciate you figuring this out. I don't think I would have been able to do it at all without your help! Now I have a ton of comic pages to make! :D
Awesome! Glad you're happy! But @gastoff did all the hard work...and I'd say I kind of cheated, since I changed the source code to make this work (by making "id" an allowed attribute). : )
@thaen well that seems very Kobiashi-Maru of you. :D
@gastoff thanks for all the help! I am pleased with how it is looking on my site and I am thinking of a few possible new ways to use it in the future. So thanks to you both!
Comments
That is what the CSS I was hoping would work when I was playing around with it yesterday, but I figured out why the ":active" component was not behaving how I thought it would: it is missing a JavaScript component.
When I peeked at your Custom CSS, I saw that you have the animation still listed under the .splash section, but since the CSS I proposed wont work anyway, that's moot.
When I get a free moment this week, I'll see if I can did around on the web to see if there is a solution that uses solely HTML and CSS. The "onclick" idea I had would only work with utilizing JavaScript (which is disabled on OP).
This is a total shot in the dark (as I haven't tested it at all), but if you make the splash a clickable link (html a tag) that "targets" the splash, then I think you can use the "target" css class instead of "active", and it will stay "targeted" and allow the animation to finish even after releasing the click.
An example of "target" in action:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_tab
Obsidian Portal Developer
@thaen
I played around with that and could not get it to work. I feel like the :target function must be blacklisted like JS, <label>, and <input> is.
I just do not think this can be done without JS since CSS doesn't have any interactions with "onclick" funtions. There is a workaround in HTML by coding the image as the label of a checkbox, so when the image is clicked, you can alter how the toggle state of the checkbox is displayed...but OP doesn't let you mess with input HTML.
@gastoff, looks like "target" doesn't work because "id" is not currently an allowed attribute on OP. So the a tag has nothing to target because the ids are stripped out. I'm going to look into what the dangers of allowing "id" might be. I can't think of any offhand, but since it wasn't allowed originally, I'm wary of what I might be missing.
Alternatively, here's an idea that might work...
Have the popup div be expanded to fill the entire screen.
Wrap the popup div in an a tag and use the "hover" css to make it visible (display:block?).
Then non-hover css on the same a tag should have it be display:none.
So then as long as the visitor's cursor is on the popup (which spans the entire screen), the popup image will be showing (display:block). (I don't think this will work for ipad/phone visitors, but they just wouldn't see the popup at all because display:none from non-hover, so no big deal.)
Then, to make the "click to go away" work, setup the css animation as a "focus" on the same a tag.
When the visitor "clicks" that gives focus to the a tag.
Then at the end of the animation (100%) change the a tag to display:none, so the visitor is no longer "hovering" and the page will then automatically switch to use the non-hover css (display:none). so the image stays hidden. (Otherwise, when the visitor clicks something else, and takes the focus away from the a tag, the image will pop back up to full opacity because the visitor will still be hovering over the "opacity 0%, but still display:block a tag that fills the screen").
I played with pieces of this, like the hover to run the animation, but I didn't put it altogether, so I don't know if it will 100% work or not.
Obsidian Portal Developer
@gastoff, actually, I don't think that's going to work because the image will never show...it will always be initially hidden and never "hovered".
Instead, you can do this...
Normal (non-hover, non-focus) has the animation.
Hover has animation-play-state: paused;
Focus has animation-play-state: running;
Then if the image spans the screen, it will be "hovered" and so then will be "paused". When the visitor clicks it will change to "focused" and will start running again. Then it will finish and be "normal" (non-hovered, non-focused) and the animation will be done so it won't run again.
Something like this:
Obsidian Portal Developer
@thaen (and @HumAnnoyed, we have a solution!)
I think the "id" and/or "input" blocking is because you can use HTML <input> to create form fields. Unscrupulous users could create form fields that collect user data maybe?
On a related note, I love your animation play state work around! Unfortunately, giving an element ":focus" on click isn't inherent, but I figured out how to make it work!
The image has to be an <a> element so it is treated like a link, then you just add an jQuery to the element.
HTML
(Uplodaded as an image because the forums runs in to errors when I try to add the "onclick" command...)
CSS:
@gastoff, that's awesome about the solution!
I just tried this in my test campaign, and the "onclick" is stripped out, so that's not needed, since the page doesn't even see it. I think the "<a>" tag should just by default grab focus when it's clicked. I also added something after the "#" like "href="#test"", otherwise I think it tries to jump to the top of the page (if you're not already there).
That explanation makes sense for HTML "input" tags, but the "id" attribute is just a way of uniquely identifying an HTML element. So it seems like "id" should be safe to allow.
https://www.w3schools.com/tags/att_id.asp
Obsidian Portal Developer
@thaen
You're right, the onclick is unnecessary. The real ticket was setting it to <a> tag and making sure there is some form of an href in place so focus can be grabbed.
Teamwork Makes the Dream Work!
Huzzah! : )
Obsidian Portal Developer
That is exactly what I was hoping for! Thanks to you both for figuring that out. It was so far above my head I am sure I never would have gotten it. Sweet!
Now I can make a feature art piece for the most important characters in the game on each character page. You can see it in practice here:
https://fate-accelerated-the-emerald-city.obsidianportal.com/characters/jack-youngblood
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Hmm. There is still a bit of a problem. I put the animation with different character images on their respective pages. And if you go to an individual page and click on the character it will play properly. But only that first one. After that it doesn't always play right if you go to another character page or try to reload the page you are on. It plays through the animation before you get to the page or pauses at about 25% opacity for some reason.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
@HumAnnoyd, yeah, I see what you're saying. The "hover" isn't kicking in right away, and so some of the animation starts to play before it "pauses".
One option is to maybe change the "5%" to be a "50%", so it has an entire second (50% of 2 seconds) to show the image without fading it.
The other option is to wait a couple days for me to add the "id" exception, and then we can try out the "target" idea and see if that works better for this. (We try not to deploy on the weekend if we don't have to.)
Obsidian Portal Developer
I think I will exercise some patients and wait for the target idea. Thanks again for all the help. I am very excited to add more pics like that to all my characters. It will give me a new project to play with.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
The image is loading quickly on the page, before page registers that it is being "hovered", so it is playing through part of the animation before the hover kicks in and pauses things. You might be able to just add a 2s animation delay to resolve this.
@gastoff, @HumAnnoyd, the "id" attribute is now allowed, so "target" now works.
I think you might be able to get rid of the "focus" and "hover" entries, and just apply the animation directly to "splash:target".
Then make the "<a>" tag point to the id of the splash div.
Obsidian Portal Developer
Um. OK. I tried what you suggested (I think. It was a bit over my head) but it didn't work. Which probably means I am not quite understanding what you mean. Here is the code I had before:
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
And here is the code on the character page I am using:
ARGH. Actually it won't let me post that code. It keeps sending me to a broken Captha OVL with no way to prove I am human.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Change your HTML from this:
<a class="splash" href="#"> <br />
<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/95840/assets/1123157/DFA_JackYoungbloodComic001.5.jpg?1603477565" /><br />
</a>
To this:
<a id='splash-id' class="splash" href="#splash-id"> <br />
<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/95840/assets/1123157/DFA_JackYoungbloodComic001.5.jpg?1603477565" /><br />
</a>
The differences are the addition of the "id" and the adding of that "id" to the "href".
Then change your CSS to this:
That differences are the "paused" moved to be on the ".splash" directly, and the "hover" section was deleted, and the "focus" was changed to "target".
Obsidian Portal Developer
@HumAnnoyd, notice that this should work just the way you want when you first come the page from somewhere else. However, once you click the image and it fades away, the url changes from:
https://fate-accelerated-the-emerald-city.obsidianportal.com/characters/jack-youngblood
to:
https://fate-accelerated-the-emerald-city.obsidianportal.com/characters/jack-youngblood#splash-id
So if you "refresh" the page, the image will start fading immediately with no click needed. You'll need to go to the page again from a link or delete the "#splash-id" from the url in the browser to make the image stay in place. Just mentioning in case you tried "refresh" and saw that it immediately started fading.
Obsidian Portal Developer
@thaen thanks so much. That works like I want it to. I really appreciate you figuring this out. I don't think I would have been able to do it at all without your help! Now I have a ton of comic pages to make! :D
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Awesome! Glad you're happy! But @gastoff did all the hard work...and I'd say I kind of cheated, since I changed the source code to make this work (by making "id" an allowed attribute). : )
Obsidian Portal Developer
@thaen well that seems very Kobiashi-Maru of you. :D
@gastoff thanks for all the help! I am pleased with how it is looking on my site and I am thinking of a few possible new ways to use it in the future. So thanks to you both!
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Haha! I love that!
Obsidian Portal Developer