Script is not working

Comments

• TheMadExile

  November 2015 edited November 2015

  I'm assuming, by the use of the .char class, that you're using this with one of the Twine 1 vanilla story formats. If that's not the case, then quite a lot of this could be off. In the future, giving as many details as you think would be helpful would be useful—you were rather scant on details in this instance.
  
  The most serious issues:

  1. You could probably be doing this both easier and better via CSS transitions.
  2. When using querySelector()/querySelectorAll() you must use CSS selectors, so your current selector (char) is incorrect. To select elements containing the class char, the selector should be .char.
  3. The for...in loop does not work as you seem to think it does (it iterates the property names of an object). What you're trying to do with it would require the for...of loop (which iterates iterables), however, it's part of ES6, so you should not depend on it (it's too new). Just use a standard 3-expression for loop.
  4. Your current loop is broken and wouldn't work even if you were using the correct form.
  5. Using this to refer to the element in the event handlers is not advised as it isn't always set properly (using jQuery would help in that regard).

  
  As noted above, you'd probably be better served by using CSS transitions instead, for example:

  .passage .char {
  	/* The initial color and text-shadow. */
  	color: black;
  	text-shadow: none;
  
  	/* These transitions match those done by the script. */
  	-webkit-transition: color 1s step-end, text-shadow 1s step-end;
  	-moz-transition: color 1s step-end, text-shadow 1s step-end;
  	transition: color 1s step-end, text-shadow 1s step-end;
  }
  .passage .char:hover {
  	/* The color and text-shadow during hover (mouseover). */
  	color: red;
  	text-shadow: 5px 5px 1px #333;
  
  	/* These transitions match those done by the script. */
  	transition: unset;
  }
  

  You might need to swap the initial color and/or text-shadow with the hover versions. I'm unsure exactly what styles you were going for, but that should give you the general idea of how to do it without a script.
  
  However, if you're married to scripting it, then this should be close to what you need:

  postrender.bouger = function (content) {
  	var charElements = content.querySelectorAll(".char");
  	var changeStyle  = function (elem) {
  		elem.style.textShadow = (!elem.style.textShadow || elem.style.textShadow === "none") ? "5px 5px 1px #333" : "none";
  		elem.style.color      = elem.style.color === "red" ? "black" : "red";
  	};
  
  	for (var i = 0; i < charElements.length; ++i) {
  		charElements[i].onmouseover = function (evt) {
  			changeStyle(evt.target);
  		};
  		charElements[i].onmouseleave = function (evt) {
  			setTimeout(function () {
  				changeStyle(evt.target);
  			}, 1000);
  		};
  	}
  };
  

  I modified the textShadow styling a bit to be what I thought you were looking to do. Again, however, I'm unsure if it's exactly what you were going for.
  
  PS: Don't use both the CSS and the script. Choose one or the other.
• neiya

  November 2015 edited November 2015

  Thank you very much !
  
  I don't understand the difference between story formats, it's just the interface and the based css that is different isn't it ? That's why I think it was not important in that case.
  
  What I want to do is to have a blurred text (I use text-shadow for that) that become clear when hovering it. Actually I used a script because I wanted the :hover properties to stay few seconds after stopped hovering the letter, and I didn't know the css "step-end" value which does that very well, so thank you.
  
  Also, of course I was to fast and I didn't put enough details, sorry for that, but the thing is that the script I put works very well in a "normal" html page, so my question was more about why some scripts don't work with Twine ? I made a mistake on querySelectorAll(".char"), but I have fixed it still doesn't work and I still don't understand what's the problem.
  Anyway, now it doesn't matter because of course the css solution is far better.
  
  Thanks for your answer and the precious time you spent on it !
  
  Mathilde
  
  Edit : I don't see how to mark the question as answered ?
  
  
• TheMadExile

  November 2015

  neiya wrote: »

  I don't understand the difference between story formats, it's just the interface and the based css that is different isn't it ? That's why I think it was not important in that case.

  Only for the Twine 1 vanilla story formats is that true. Other Twine 1 story formats (and all of the core Twine 2 story formats so far) are different—very different in some cases. Even amongst the Twine 1 vanilla story formats there are differences. That's why it's important to know which story format you're using and to supply that information when you ask for help.
  
  

  neiya wrote: »

  Also, of course I was to fast and I didn't put enough details, sorry for that, but the thing is that the script I put works very well in a "normal" html page, so my question was more about why some scripts don't work with Twine ? I made a mistake on querySelectorAll(".char"), but I have fixed it still doesn't work and I still don't understand what's the problem.

  I outlined the major issues with the script in my last reply (and supplied a fixed version).
  
  Beyond that, story formats are JavaScript applications, not static web pages. You cannot expect code which works on a static page to necessarily work in an application. In particular to story formats:

  1. Scoping is more restrictive, which is why you cannot simply define a function in one script instance and use it in another. If you need to do that, you have to attach it to an object which exists in all scopes (the window object is often used for this, though some story formats supply objects specifically for that purpose).
  2. Passage content is not generally globally selectable because the entire passage content area is destroyed and rendered each time the player navigates passages (the sole exception being the Twine 1 story format Jonah). This bit bites most novices in the arse at least once.

  Those are the two major hurdles.
  
  

  neiya wrote: »

  Edit : I don't see how to mark the question as answered ?

  If you used Ask a Question, then there should be a button/link for that. If you used New Discussion, then there won't be.