Home › Discussions › Campaign Portal Building › Clickable link revealing hidden pop-up textbox (like an Alert) - Campaign Portal Building Discussions on Obsidian Portal Community Forums
Clickable link revealing hidden pop-up textbox (like an Alert)
Had a cool idea to assist in one of the PbP's I am in. BUT, once again my long search (scouring the Internet) in how to carry it out has ended in OP not supporting the code. In this case it is the 'onclick' function using the {alert()} script. My thought was to have a hidden text box that would be exposed when clicking a hyperlink. Thus, allowing me to hide OOC comments inline with the actual story, including dice rolls. I was using 'title', but that really is limited to certain platforms, touchscreen devices NOT being one of those.
So TWO questions. First, has someone already composed a list of workable functions on Obsidian Portal. That would be a great resource.
Second, does someone have a workable alternative to my unworkable solution? This a clickable link, that would allow for a pop-up textbox, much like an Alert to pop up providing hidden text, that is workable on a touchscreen device (hence the need to be a clickable link, rather than a rollover). I would prefer inline code if possible.
So TWO questions. First, has someone already composed a list of workable functions on Obsidian Portal. That would be a great resource.
Second, does someone have a workable alternative to my unworkable solution? This a clickable link, that would allow for a pop-up textbox, much like an Alert to pop up providing hidden text, that is workable on a touchscreen device (hence the need to be a clickable link, rather than a rollover). I would prefer inline code if possible.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
This is the Hyperlink
The onclick html code is this:
Visible text
I remember checking it out, hovering over stuff, and a little "pop up" showing up.
No clue where I saw it. Might try searching the threads for "pop up" or "hover".
Unconquered Kingdoms, July 2016 CotM
In will try searching 'pop up' in the threads. That is something I hadn't considered.
Some oddities at the moment I haven't figure out yet: This doesn't work with spans, so it can't be placed in the midst of text/paragraphs, but has to be its own. Also once you lose focus it stops working until you click on something else, then it works again.
Anyway, CSS:
@.popupcontent {display: none; position: fixed; border: solid 1px black; padding: 1em; background: white; color: black;}
.popupbutton:active + .popupcontent {display: block;}@
Only the selectors and the display properties are really relevant for functionality, the rest is basic styling.
Then HTML on the page:
@Test
Test popup text.@
The ".popupbutton" class can then be styled to look however you want (like a normal link, a button, etc...)
Currently have a test up here: "Test":https://outremer.obsidianportal.com/wikis/test
EDIT: Scratch the bit about only working once. That was the case with IE but doesn't appear to be so on the iPhone.
My floating nav bar (as per here https://the-great-pendragon.obsidianportal.com/wikis/main-page ) has something along the lines of .navbar{right:25px; width:175px; top:36%;} in the CCS to get the position where I want it. But be warned it can do some odd things to the adventure log update section sometimes!
@top: 35%; left: 25%; width: 50%; z-index: 20;@
Should always be centered horizontally, and start about a third of the way down the screen (should look pretty good per the Rule of Thirds in visual composition).
Also, LOL @ "Scareder". :D Anyway, check out the test page again to see what this looks like.
EDIT: Tried it on a phone. Looks cramped in portrait, so I switched the width and left values to make it wider.
ALSO EDIT: Set a z-index so the sidebar wouldn't overlap it.
Unconquered Kingdoms, July 2016 CotM
Unconquered Kingdoms, July 2016 CotM
@.popupbutton:active, .popupbutton:hover + .popupcontent {display: block;}@
works even better! It makes it stay open until you click the screen again.
Unconquered Kingdoms, July 2016 CotM
By the way, you should be able to attach this an image too. Furthermore you can attach it to an link-tag. You have to set the url as "#", so as not to get a blank screen to open up.
@Button TextHELLO! Secret Content HERE!!!@
Unconquered Kingdoms, July 2016 CotM
They are among us!
XCom: Defiance - Campaign of the Month November 2016
CSS: @.popupcontent {display: none; position: fixed; border: solid 1px black; padding: 1em; background: white; color: black; top: 35%; left: 25%; width: 50%; z-index: 20;}
.popupbutton:active + .popupcontent {display: block;}@
HTML: @Test
Test popup text.@
Thanks,
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
Sorry for the bother!
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
*CSS*
/* TOOLTIP TEST */
.mobile-tooltip {
position: relative;
background: transparent;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: medium none;
}
.mobile-tooltip span {
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 280px;
margin-left: -127px;
padding: 10px;
border: 2px solid #CCC;
opacity: 0.9;
background-color: #DDD;
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius: 4px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
}
.mobile-tooltip:hover {
border: 0; /* IE6 fix */
cursor:help;
}
.mobile-tooltip:hover span {
visibility: visible;
}
.mobile-tooltip span:before, .mobile-tooltip span:after {
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-width: 8px 8px 0px;
border-style: solid solid none;
border-color: #DDD transparent -moz-use-text-color;
}
.mobile-tooltip span:before {
border-top-color: #CCC;
bottom: -8px;
}
.navy span {
color: #FFF;
text-shadow: 0px 1px 0px #000;
border-color: #161A1F;
background-color: #1E2227;
}
.navy span:after {
border-top-color: #1E2227;
}
.navy span:before {
border-top-color: #161A1F;
}
/* END TOOLTIP */
*HTML*
@Item TestLorem ipsum dolor sit amet, no oblique alienum invidunt mel. Eos an virtute equidem. Nibh quodsi moderatius no usu, eam timeam similique an. Quo quem phaedrum interesset ut, eum praesent voluptaria ei. Quo te animal euripidis. Eum ei labitur salutandi contentiones, in duo primis maiorum singulis, id vim quidam ceteros iudicabit.@
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
"CSS Test Page":https://dragon-age-requiem.obsidianportal.com/wikis/css-test
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
Unfortunately, inside a html table, it will only call the first popup, not additional popups.
You can see an example "here":https://morwindl.obsidianportal.com/wikis/test. The code for each little area is just cut and paste: first is raw, second is a textile table (no popups), third is HTML table (first only popup).
@
@
@|
|
|@
@
@
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
Looking at the page with Inspect Element shows that on the HTML based tabled on the second image you have two break tags which is likely botching the display. Many times this is caused with the Textile system still messing with things in the HTML you write. I would suggest trying to remove the return you have between the divs for those and see if it works. Sometimes little things like that can make a significant difference on OP.
Finally, if all else fails you could use some CSS and add additional classes to the divs so that you could make them appear to be inside of a table without actually needing the table in the first place. That route may be best since some things on OP just don't seem to want to pan out the way we may anticipate (due to not having access to the CSS, JS, etc that they run in the background on the site and being intimately familiar with it and what it will do).
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
*CSS*
/* TOOLTIP TEST */
.mobile-tooltip {
position: relative;
background: transparent;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: medium none;
}
.mobile-tooltip span {
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 280px;
margin-left: -127px;
padding: 10px;
border: 2px solid #CCC;
background-color: #DDD;
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius: 4px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
}
.mobile-tooltip:hover {
border: 0; /* IE6 fix */
cursor:help;
}
.mobile-tooltip:hover span {
visibility: visible;
}
.mobile-tooltip span:before, .mobile-tooltip span:after {
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-width: 8px 8px 0px;
border-style: solid solid none;
border-color: #DDD transparent -moz-use-text-color;
}
.mobile-tooltip span:before {
border-top-color: #CCC;
bottom: -8px;
}
/* END TOOLTIP */
*HTML*
@@
I think this might get it responding how you were overall trying to get, I tested it on my own page and it works fine in both a Textile Table and an HTML Table, but it has a different look than you were getting at originally. It also still has the issue for mobile users where when they click the item they will get pushed to the top of the page and have to scroll back down to see it (still haven't resolved that, but this is the tooltip I am developing to replace the one you are currently using so I will get it worked out sooner or later).
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
I had this on my agenda to give a try to, but I needed to finish a project bit of code out, when I encountered some oddity: I was right clicking to get something, and it gave me the image dialog box, and it occurred to me: with the code given above, it doesn't actually stop displaying the popup, it's just transparent. I couldn't mouse over the second item in the table and make it pop up, because it was behind the transparent first one. So I changed the CSS:
@.popupcontent {position: fixed; top: 10%; left:30%; z-index: 20;
background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/422340/StreamRecentUpdates.png');
background-size: contain;
padding: 1em;
color: #6d0808;
box-shadow:0 10px 10px 4px rgba(0,0,0,0.3);
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
.popupbutton:hover + .popupcontent,
.popupbutton:active + .popupcontent {
visibility:visible;
opacity:1;
transition-delay:0s;
}@
Instead of making it transparent, I just make it not display. No alterations to the HTML. Everything works as it should now.
I hope someone out there finds this handy.
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/