Codes creating empty space at top of passages

iinasmuch

Hello again. I've been fiddling around with Twine, Harlowe and I've come across a problem. I'm putting a bunch of code at the top of each passage. While these codes are invisible, they do push the text down, resulting in a big empty space between the top of the browser and the beginning of the text. Here's a visual reference:



I thought that perhaps the macro nobr would help. I've used the following around the codes:

<nobr> Insert text </nobr>

As well as:

(nobr:) [Insert text]

The first one seems to do nothing whereas the second one comes back with an error saying that the macro nobr does not exist.

The following is basically what I've placed at the beginning of every passage:

<img src="images/grunge-background_c.png" width="1366" height="768" border="0" class="bgimg"/>
<div style="display: none;"><img src="!@#$" onerror="$('#nowplayingbirds').animate({volume: 0}, 0);" /></div>
<div style="display: none;"><img src="!@#$" onerror="$('#nowplayinglaughing').animate({volume: 0}, 0);"/></div>
<div style="display: none;"><img src="!@#$" onerror="$('#nowplayingdripping').animate({volume: 0}, 0);" /></div>
<div style="display: none;"><img src="!@#$" onerror="$('#nowplayingviolin').animate({volume: 0}, 0);" /></div>
<div style="display: none;"><img src="!@#$" onerror="$('#nowplayingcrying').animate({volume: 0}, 0);" /></div>
<div style="display: none;"><img src="!@#$" onerror="$('#nowplayingnight').animate({volume: 0}, 0);" /></div>

I know. It's a mess. The first line creates the background image. The rest control the volumes for the various sounds that I use throughout the story. I have all the sounds on loop in Javascript. I use these lines to silence, start, fade in, and fade out the sounds depending on the passage. If there's a simpler way of doing all of this, I'd appreciate hearing about it. Thank you!

InspectorCaracal

Harlowe has something specifically for compressing whitespace, which I use all the time for exactly what you're talking about.

Just put all of your code inside curly braces.

{ lots
of lines
of code
go here }

As for the sounds, it might be easier to have a single "play sounds" function which you can pass variables with the img hack, and those variables tell the function which sounds to start playing? I'm not sure, but it seems worth a try and would reduce that to just two lines.

iinasmuch

I've tried the curly braces. The starting brace doesn't appear but the ending one does as if it's not being reached, and it seems to "break" the one command. The first passage is set up so that none of the sounds are playing. When I insert the curly braces, the birds in particular start playing.

If you can help, how would I go about setting up this "play sounds" function?  :-[

InspectorCaracal

I'm no JS expert, but you would need to create a custom function in the Story Javascript page and then call that function from the img hack, instead of the music control directly. Something like....

<div style="display: none;"><img src="!@#$" onerror="playSound('birds');" /></div>

Maybe? And then in your playSound function, you check the variable and if it's birds, you stop all the other sounds and play the birds sound.

I'm assuming you know how to make JS functions but I realize this may be a false assumption. Unfortunately I can't help with that...

Regarding the curly braces: I tried it and got the same result as you, which is weird. But getting rid of the spaces and line breaks between the lines of code works.

p.s. I found this thread from before and that Music object code looks like a great place to start.

iinasmuch

I'm not familiar with making JS functions, but I'll learn somehow.

Getting rid of the spaces and line breaks seemed to help. Now I have to go through and edit all my passages to remove the spaces and line breaks in the coding.

Ooo, thank you! I'll check out that thread in a jiffy!  ;D