Script doesn't work

neiya

Hello!
I am new to Twine (I use 1.4), and I have a problem with a script.
My passages are linked with images like that :

[img[image-1][1]]

I want these images to be placed randomly in the page.
I use this script but it doesn't work : (it works fine in a "normal" html page)

var largeurEcran = (document.body.clientWidth);
var hauteurEcran = (document.body.clientHeight);

var symbole = document.getElementsByClassName("internalLink");

for (var i=0; i<symbole.length; i++) {
symbole[i].style.left = Math.floor((Math.random() * (largeurEcran - largeurEcran/1.5)) + largeurEcran/3) + "px";
symbole[i].style.top = Math.floor((Math.random() * (hauteurEcran - hauteurEcran/2)) + hauteurEcran/4) + "px";
}

In the css of course there's a position:absolute; on .internalLink
I also tried with the tag "img".

Thanks in advance!

Sharpe

It's midnight and I just returned from getting beat up at my Brazilian Jiu-Jitsu gym, but may I ask if you would be willing just to use the plain, regular random-selection macro built in to whatever story format you're using?

You also need to state which story format you're using, too. Sugarcane is the default.

In Sugarcane, this should work:

<<print either("[img[image-1]]", "[img[image-2]]", "[img[image-3]]")>>

neiya

Thank for your answer!

For the story format, I actually don't know which one I am using, but if you say Sugarcane is the default I suppose it is this one.

I think my post is not very clear, but what I want is not to display images randomly but to attribute to each image a random position (top - left) in the page with css and javascript.

greyelf

I believe your problem is one of timing. You need that script to be executed after the current Passage has been assembled or else the internalLink classed elements will not exist yet.

If you read the Twine Wiki page on Scripts there is a section about prerender and postrender which can be used to execute Javascript either before or after the passage has been rendered. If you want the script to only be executed for a single passage then you can use the passage() function to check, if you want it to be executed for a limited set of passages then you can assign a tag to those passages and use the tags() to check for that tag.

neiya

Thank you, that's exactly what I want to do.
But I don't understand how to use this "postrender" function. I did that but it doesn't work :

postrender.bouger = function() {

var largeurEcran = (document.body.clientWidth);
var hauteurEcran = (document.body.clientHeight);


var symbole = document.getElementsByClassName("internalLink");

for (var i=0; i<symbole.length; i++) {
symbole[i].style.left = Math.floor((Math.random() * (largeurEcran - largeurEcran/1.5)) + largeurEcran/3) + "px";
symbole[i].style.top = Math.floor((Math.random() * (hauteurEcran - hauteurEcran/2)) + hauteurEcran/4) + "px";
}
}

TheMadExile

During the execution of postrender task functions, the rendered elements are not yet on the page. You'll need to use querySelectorAll() on the rendering buffer to retrieve the list of elements to work on. For example:

postrender["bouger"] = function (content) {
	var largeurEcran = (document.body.clientWidth);
	var hauteurEcran = (document.body.clientHeight);
	var symbole = content.querySelectorAll(".internalLink");
	for (var i = 0; i < symbole.length; ++i) {
		symbole[i].style.left = Math.floor((Math.random() * (largeurEcran - largeurEcran / 1.5)) + largeurEcran / 3) + "px";
		symbole[i].style.top = Math.floor((Math.random() * (hauteurEcran - hauteurEcran / 2)) + hauteurEcran / 4) + "px";
	}
};

neiya

Thank you it works perfectly now !
But I just have one question, why is it :

postrender["bouger"] = function (content) {

and no ?

postrender.bouger = function (content) {

TheMadExile

Mostly because I generally tend to write task object names like that. The square bracket notation allows you to give your tasks a wider range of names than is possible with the dot notation. Basically, the dot notation only allows for names which are also valid identifiers, the square bracket notation has no such limitation. If you never intend to give tasks names which aren't also valid identifiers, then there's no particular reason to use the square bracket notation over the dot notation here.

TL;DR: Personal preference when using the task objects.