Hidden Link in Sugarcube 2.21 & Twine 2.2.1

Question

Hi all,

I'm trying to follow the code to create a hidden link as set out in the Twine Cookbook but can't get it to work. I'm quite new to coding so it's possible I'm missing something obvious. The code provided in the cookbook is set out like this:

:: UserScript[script]       

 Hidden links that hide unless you're hovering over them:
            <span class="hides">[[A hidden link]]</span>
    */
    $('.hides')
        .addClass('hidden')
        .on('mouseenter', function () {
            $(this).removeClass('hidden');
        })
        .on('mouseleave', function () {
            $(this).addClass('hidden');
        });

:: UserStylesheet[stylesheet]
.hidden a {
    color: transparent;
}

I think I'm following the instructions correctly by putting the script part into the 'edit story javascript', the stylesheet into the 'edit story stylesheet' and the span class into the passage itself.

It's highly possible I'm getting myself confused and missing something obvious but any help would be greatly appreciated.

Many thanks!

Answer 1

That is not the entirety of the JavaScript provided in that cookbook example (which you should have linked).  Were you attempting to use just the code for links that hide unless you're hovering over them?

Assuming for now that you wanted all three features.  It should look like the following:

Story JavaScript

postdisplay['hidden-link-setup'] = function () {
	/*
		Hidden links that are always hidden:
			<span class="hidden">[[A hidden link]]</span>
	*/
	$('.hidden')
		.addClass('hidden');

	/*
		Hidden links that hide unless you're hovering over them:
			<span class="hides">[[A hidden link]]</span>
	*/
	$('.hides')
		.addClass('hidden')
		.on('mouseenter', function () {
			$(this).removeClass('hidden');
		})
		.on('mouseleave', function () {
			$(this).addClass('hidden');
		});

	/*
		Hidden links that reveal themselves when you hover over them:
			<span class="reveals">[[A hidden link]]</span>
	*/
	$('.reveals')
		.addClass('hidden')
		.one('mouseenter', function () {
			$(this).removeClass('hidden');
		});
};

Story Stylesheet

.hidden a {
	color: transparent;
}

 

Comments

Thanks very much for this. I will add in the complete code for all three features as it seems to be easier than taking out the code for the link to be hidden until the user hovers over it (which is what I attempted). Apologies for not linking directly to the cookbook- I did say that I was new to this.

---

If that's what you wanted, then you needed the following:

postdisplay['hidden-link-setup'] = function () {
	/*
		Hidden links that hide unless you're hovering over them:
			<span class="hides">[[A hidden link]]</span>
	*/
	$('.hides')
		.addClass('hidden')
		.on('mouseenter', function () {
			$(this).removeClass('hidden');
		})
		.on('mouseleave', function () {
			$(this).addClass('hidden');
		});
};