Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
[SugarCube] Is there an equivalent in SugarCube to Harlowe's "link:" changer
Hey ho,
I am trying to rewrite one of my projects I started in Harlowe into SugarCube and am wondering if there is anything in SugarCube like Harlowe's link-replace changers? I especially used the "link:" and the "link-reveal" changer.
Here is an example out of Harlowe:
I am trying to rewrite one of my projects I started in Harlowe into SugarCube and am wondering if there is anything in SugarCube like Harlowe's link-replace changers? I especially used the "link:" and the "link-reveal" changer.
Here is an example out of Harlowe:
<p align="center">(Link: "show me something")[random text]</p>
Comments
(link:) / (link-replace:):
Using HTML markup: Using the custom styles markup:
(link-reveal:):
Due to an issue I just noticed*, it's easier to simply do something similar to the above at the moment.
Using HTML markup: Using the custom styles markup:
* Ideally, you should be able to do something like the following: But there's currently an order-of-operations issue which prevents that from working as it should. It will be fixed for the next release.
Thanks again.
IIRC, SugarCube's default font size, in either major version, should be a bit smaller than Harlowe's to begin with, so that's especially puzzling.
If you don't mind me asking, which versions of SugarCube are you using and did you see this in a particular browser or desktop-vs-mobile?
Yes, but just the links I used your suggested code on. The simple passages links "..." stay the same.
I changed the font-size already to get a more comfortable look out of SugarCube. For Desktop-Monitor it is set to 1.2em and for Mobile-Devices to 2em for now.
I use a media query like this to check on which device the website is run:
I still use SugarCube 1.0.34, didn't get around to change yet.
I tested it in a few browser and got interesting results.
In the desktop-versions of chrome and firefox the font is bigger, but in the IE (who would have guessed) it isn't.
On my mobile I only have firefox installed just now and there the font-size of all links was still the same.
Weird. Any ideas?
As I noted previously, there's nothing within the examples which should affect font size. The <<click>> macro creates an anchor (<a>) element and there's absolutely nothing special about a <span> with an ID.
Inspecting the elements in question with Firefox's and/or Chrome's developer tools is probably your best bet in determining where the mystery font sizing is coming from.
Do you have any other <<click>> macros and do they have the same issue? If not, try adding something like the following: If that's larger as well, then at a guess, you've probably improperly styled anchors or something—or perhaps accidentally overridden an internal style.
I don't have any, and the test returned the normal font-size. I will check it with the dev tools.
But I have another questions about the link and link-reveal constructions in SugarCube. Is there a possibility that the text that appears after the click isn't displayed directly after the position of the link-text but at a certain point in the passage?
For example (I know the code is nonsense, I just put it in to mark the link-text and the text that should appear after the click):
This is a <<click "test">><</click>> phrase.
Some other text that lingers around
<<text-that-appears-after-the-click>>Some new text appears<</text>>
Example: Or, to make it look right when the insertion point is between two lines:
Nice, worked, I just noticed that if I use <<append>> I can open the inserted text over and over again as if I would paste it in the browser over and over again.
And I have a direct follow-up question:
Is it possible to use something like "onclick" to close the inserted text on the second click again?
So you could use the link to open and close the section over and over again?
<<click "What is this?">> <<script>>$('#spoiler').toggle()<</script>> <</click>> <span id="spoiler" style="display:none;">THIS IS SPARTA!</span>worked perfectly, thanks a lot.
I would like to have a few hide/show links that influence each other. For example: I have three links that are able to show/hide a certain element (in this case text) if you click on them. What I want is, if one element is already displayed and you click on another link (so not the one that initially opened the already displayed element) the one that is already displayed will be hidden again while the new element shows up.
Here is an example of such a passage without the above built into it, just with the hide/show solution of TheMadExile. I hope that helps to illustrate what I have and what I want to build into.
<<click "What is this?">> <<script>>$('#spoiler1').toggle()<</script>> <</click>> <span id="spoiler1" style="display:none;">THIS IS SPARTA!</span> <<click "Is this something else?">> <<script>>$('#spoiler2').toggle()<</script>> <</click>> <span id="spoiler2" style="display:none;">THIS IS SPARTA!</span> <<click "Cookies on the dancefloor?">> <<script>>$('#spoiler3').toggle()<</script>> <</click>> <span id="spoiler3" style="display:none;">THIS IS SPARTA!</span>I'd suggest something like the following.
First. Use kebab-case naming scheme for the ID attribute value, so that you may leverage the [attr|=value] attribute selector—e.g. spoiler-*: spoiler-1, spoiler-2, spoiler-omgwtfbbq.
Second. A style using the kebab-case attribute selector so that you don't need the style attribute in most cases:
[id|="spoiler"] { display: none; }Third. The code:
<<link "What is this?">> <<script>> $('[id|="spoiler"]').hide(); $('#spoiler-1').show(); <</script>> <</link>> <span id="spoiler-1">ALFA</span> <<link "Is this something else?">> <<script>> $('[id|="spoiler"]').hide(); $('#spoiler-2').show(); <</script>> <</link>> <span id="spoiler-2">BRAVO</span> <<link "Cookies on the dancefloor?">> <<script>> $('[id|="spoiler"]').hide(); $('#spoiler-3').show(); <</script>> <</link>> <span id="spoiler-3">CHARLIE</span>Additionally, if you needed multiple independent spoiler text groups within the same passage, then you'd simply add a secondary bit to the kebab-cased IDs—no change to the style. For example:
<<link "What?">> <<script>> $('[id|="spoiler-group1"]').hide(); $('#spoiler-group1-1').show(); <</script>> <</link>> <span id="spoiler-group1-1">GROUP 1: 1</span> <<link "Who?">> <<script>> $('[id|="spoiler-group1"]').hide(); $('#spoiler-group1-2').show(); <</script>> <</link>> <span id="spoiler-group1-2">GROUP 1: 2</span> <<link "When?">> <<script>> $('[id|="spoiler-group2"]').hide(); $('#spoiler-group2-1').show(); <</script>> <</link>> <span id="spoiler-group2-1">GROUP 2: 1</span> <<link "How?">> <<script>> $('[id|="spoiler-group2"]').hide(); $('#spoiler-group2-2').show(); <</script>> <</link>> <span id="spoiler-group2-2">GROUP 2: 2</span>I never read anything about this kebab-style possibilty in CSS. I'll have to check that out.
Another question:
Is it possible to combine this code with the functionality to just click on the same link again to hide the element it displayed? This way the user can either close the element her/himself or it gets closed by itself when another link is clicked.
<<link "What is this?">> <<script>> $('[id|="spoiler"]') .not('#spoiler-1') .hide() .end() .filter('#spoiler-1') .toggle(); <</script>> <</link>> <span id="spoiler-1">ALFA</span> <<link "Is this something else?">> <<script>> $('[id|="spoiler"]') .not('#spoiler-2') .hide() .end() .filter('#spoiler-2') .toggle(); <</script>> <</link>> <span id="spoiler-2">BRAVO</span>And the multi-group version:
<<link "What?">> <<script>> $('[id|="spoiler-group1"]') .not('#spoiler-group1-1') .hide() .end() .filter('#spoiler-group1-1') .toggle(); <</script>> <</link>> <span id="spoiler-group1-1">GROUP 1: 1</span> <<link "Who?">> <<script>> $('[id|="spoiler-group1"]') .not('#spoiler-group1-2') .hide() .end() .filter('#spoiler-group1-2') .toggle(); <</script>> <</link>> <span id="spoiler-group1-2">GROUP 1: 2</span> <<link "When?">> <<script>> $('[id|="spoiler-group2"]') .not('#spoiler-group2-1') .hide() .end() .filter('#spoiler-group2-1') .toggle(); <</script>> <</link>> <span id="spoiler-group2-1">GROUP 2: 1</span> <<link "How?">> <<script>> $('[id|="spoiler-group2"]') .not('#spoiler-group2-2') .hide() .end() .filter('#spoiler-group2-2') .toggle(); <</script>> <</link>> <span id="spoiler-group2-2">GROUP 2: 2</span>Though, honestly, if you're going to be using these a lot, you're probably better off making them into widgets or macros.
Here are some examples of widgets: (goes into their own widget-tagged passage)
/* <<accordian "id" "linkText">> Usage: <<accordian "1" "What is this?">>\ <div id="spoiler-1">ALFA</div> <<accordian "2" "Is this something else?">>\ <div id="spoiler-2">BRAVO</div> <<accordian "3" "Cookies on the dancefloor?">>\ <div id="spoiler-3">CHARLIE</div> */ <<widget "accordian">>\ <<link $args[1]>> <<script>> var kebabId = State.variables.args[0]; $('[id|="spoiler"]') .not('#spoiler-' + kebabId) .hide() .end() .filter('#spoiler-' + kebabId) .toggle(); <</script>> <</link>>\ <</widget>> /* <<accordiangroup "groupId" "id" "linkText">> Usage: <<accordiangroup "group1" "1" "What?">>\ <div id="spoiler-group1-1">GROUP 1: 1</div> <<accordiangroup "group1" "2" "Who?">>\ <div id="spoiler-group1-2">GROUP 1: 2</div> <<accordiangroup "group2" "1" "When?">>\ <div id="spoiler-group2-1">GROUP 2: 1</div> <<accordiangroup "group2" "2" "How?">>\ <div id="spoiler-group2-2">GROUP 2: 2</div> */ <<widget "accordiangroup">>\ <<link $args[2]>> <<script>> var groupId = 'spoiler-' + State.variables.args[0], kebabId = State.variables.args[1]; $('[id|="' + groupId + '"]') .not('#' + groupId + '-' + kebabId) .hide() .end() .filter('#' + groupId + '-' + kebabId) .toggle(); <</script>> <</link>>\ <</widget>>I'll check that out. I have to admit I avoided the widget topic up till now, because I feel a little bit scared like a small kid in the code world, but maybe it's time.
Also, I just switched to SugarCube 2.9 and checked out the new macros.
They are awesome, I like them a lot. Of course, they brought up the question if I could use the nice transition effect also in your suggested hide/show widget. Is this possible?
I tried to implement this option by placing transition-styles in CSS connected to the kebab-style ID and also targeted the ID directly, but it didn't work:
[id|="spoiler"] { display: none; transition: opacity .4s ease-in; transition-property: opacity; transition-duration: 0.4s; transition-timing-function: ease-in; transition-delay: 0s; } ODER #spoiler-1 { transition: opacity .4s ease-in; transition-property: opacity; transition-duration: 0.4s; transition-timing-function: ease-in; transition-delay: 0s; }Assuming you're using something out of the last set of examples. Try the following:
FIND ALL: REPLACE WITH:
I'll keep that in mind.
Again, works perfectly, thank you.