</div> Wont Go Away

Question

Sugarcube 2, twine 2.


Hi! I'm currently trying to work on a project with Twine 2, and an issue came up when trying to use the <div class="something"> </div>. When playing the game, the </div> would be hanging around at the end of the passage and I'm not sure why. The html css picks it up as functional, though it reveals it. 

 

 

Here's what it looks like. 
 

<div class="pp"><div class="cent">WAKE UP</div>
<<timed 3s>><div class="pblue">
For a brief moment, the room was silent. There were no creeks, no low mechanical humming from the wiring of the lights; nothing. However, even while under normal circumstances one would often find themselves in, it was clear that there could never be such a thing as “complete silence”. Noise exists whether it is wanted or unwanted. Deaf, or not. It can exist within, and beyond the realms of the common man. But here, in the this <<linkreplace room.>>room. 

There was <<linkreplace nothing.>>nothing. 

<<linkreplace 'Summon Nick'>> You have summoned Nick.


<<timed 2s>>And then you heard it.
<<audio "ambience" play>>
<<timed 1s>>The @@.rumble;kicking,@@<</timed>> <<timed 1.5s>>@@.rumble; screaming,@@<</timed>> <<timed 2s>>@@.rumble; yearning,@@<</timed>> <<timed 2.5s>>@@.rumble; crawling,@@<</timed>> <<timed 3s>>@@.rumble; scratching,@@<</timed>> <<timed 3.5s>>@@.rumble; sobbing.@@
<<timed 3s>>
It was an eruption of noise, and complete and utter chaos of what you could only assume were centuries worth of pain. It was then that a tall scrawny looking man came from out of the walls, pressing his hands up against the once metallic structure, like it were a womb. The skin ruptured, and out came him, and a river of <<linkreplace blood.>>blood.

He gasps. Coughing out the blood in his lungs and jumping up with his hands out. His eyes were wide open, and his face frozen in <<linkreplace terror.>>terror.

<<timed 2s>>
<div class="typed-speed5-delay800">"WHERE AM I?"</div> <<timed 3s>>he cried out.
<div class="typed-speed5-delay800">"LET ME OUT!"</div><</timed>></div>
<<timed 7s>> <<replace "#egg">>

<div class="choice">[[Calm down.]]</div>
<div class="choice">[[Silence.]]</div><</replace>><</timed>><</timed>><</linkreplace>><</linkreplace>><</timed>><</timed>><</timed>>
<</linkreplace>><</linkreplace>><</linkreplace>><</timed>></div><span id="egg"></span>

 

 

 

the section: 

<<timed 2s>>
<div class="typed-speed5-delay800">"WHERE AM I?"</div> <<timed 3s>>he cried out.
<div class="typed-speed5-delay800">"LET ME OUT!"</div><</timed>></div>

 

is where it's occurring. Causing it to appear as so: 

https://puu.sh/zuNjy/062f1a9c52.png

I'm not sure if it's the <<timed>> that's causing </div> to appear? 

Answer 1

<div class="typed-speed5-delay800">"LET ME OUT!"</div><</timed>></div>

As you can see there is one </div> too much. Just delete the one you don't want to have and your problem should be fixed.

<div class="typed-speed5-delay800">"LET ME OUT!"</div><</timed>>

 

Comments

It did! Thanks!

Answer 2

When trying to solve an issue like this one it helps if you use indentation to visually structure your code so you can see where each (child) element starts and stops. It isn't always practical to do that within the Passage Editor itself, so you may want to cut-an-paste the offending code into a Text Editor (like Notepad if your using Windows)

The following is your first example after indentation:

<div class="pp">
	<div class="cent">WAKE UP</div>
	<<timed 3s>>
		<div class="pblue">
			For a brief moment, the room was silent. There were no creeks, no low mechanical humming from the wiring of the lights; nothing. However, even while under normal circumstances one would often find themselves in, it was clear that there could never be such a thing as “complete silence”. Noise exists whether it is wanted or unwanted. Deaf, or not. It can exist within, and beyond the realms of the common man. But here, in the this
	 		<<linkreplace room.>>
				room. 
				There was
				<<linkreplace nothing.>>
					nothing. 
					<<linkreplace 'Summon Nick'>>
						You have summoned Nick.
						<<timed 2s>>
							And then you heard it.
							<<audio "ambience" play>>
							<<timed 1s>>The @@.rumble;kicking,@@<</timed>>
							<<timed 1.5s>>@@.rumble; screaming,@@<</timed>>
							<<timed 2s>>@@.rumble; yearning,@@<</timed>>
							<<timed 2.5s>>@@.rumble; crawling,@@<</timed>>
							<<timed 3s>>@@.rumble; scratching,@@<</timed>>
							<<timed 3.5s>>@@.rumble; sobbing.@@
								<<timed 3s>>
									It was an eruption of noise, and complete and utter chaos of what you could only assume were centuries worth of pain. It was then that a tall scrawny looking man came from out of the walls, pressing his hands up against the once metallic structure, like it were a womb. The skin ruptured, and out came him, and a river of 
									<<linkreplace blood.>>
										blood.
										He gasps. Coughing out the blood in his lungs and jumping up with his hands out. His eyes were wide open, and his face frozen in
										<<linkreplace terror.>>
											terror.
											<<timed 2s>>
												<div class="typed-speed5-delay800">"WHERE AM I?"</div>
												<<timed 3s>>
													he cried out.
													<div class="typed-speed5-delay800">"LET ME OUT!"</div>
												<</timed>>

-> Issue: Invalid end div!						</div>

												<<timed 7s>>
													<<replace "#egg">>
														<div class="choice">[[Calm down.]]</div>
														<div class="choice">[[Silence.]]</div>
													<</replace>>
												<</timed>>
											<</timed>>
										<</linkreplace>>
									<</linkreplace>>
								<</timed>>
							<</timed>>
						<</timed>>
					<</linkreplace>>
				<</linkreplace>>
			<</linkreplace>>

-> Issue: Missing end div!

	<</timed>>
</div>
<span id="egg"></span>

... and I have marked where the offending end div tag is, and also where it should be!

There are also a number of cases where you aren't wrapping the String parameters to your macro calls within quotes.
 eg. <<linkreplace room.>> should be <<linkreplace "room.">> and the same goes for "blood" and "terror".

Opinion:I also believe there are structural issues with how you are embedding <<linkreplace>> and <<timed>> macros within each other, although I currently don't have the free time needed to design a better solution to achieve the same result. Ideally you should be able to the same thing (and have a cleaner implementation) by using a single timer combined with some <<append>> macros.

Comments

Haha, thank you for pointing out the indention issue, I'll definitely fix that the next time I post one of these again! And I fixed the quoteless string issue. I'm still learning the basics, and I'm trying out new techniques that seem to work with my current knowledge! But I'll look into <<append>>. 

The issue with placing the </div> below the <div class="choice"> .... </div> was that those were meant to create a different texture for the links. Positioning them outside of the border, and styling them to make it simple to use and locate. When the </div> goes beyond that, 

.pblue a {
   color: #0000FF;
  font-style: bold, underline;
    font-size: 20px; 
}

takes over, and messes with <div class="choice">. 
 

/* the main look of choice style*/
div.choice {
  border: black ridge .8em;
  opacity: 0.8;
  border-width: 4px;
  border-radius: 2em;
  padding: 5px;	
  /*  margin: 25px 150px 75px; */
  margin: 5px 150px 5px;
  position: relative;
  bottom: 25px;
  right: 150px;
  background-color: #737370;
  Font: cursive;
  Size: 24px;
  color: white;
}

I actually managed to fix the issue, and it's probably the dumbest thing I could think of that actually works. 

I just put <<timed 1000000s> </div> <</timed>>. (277 hours) 

The whole thing works, though granted it's ugly, but it works!!!!

---

Can't you just span the div a second time instead of creating this strange construction? That seems like a better option.

---

I just put <<timed 1000000s> </div> <</timed>>. (277 hours) 

While the above may seem to be working it is actually invalid HTML, and it is more likely that the web-browser is making allowances for your invalid structure, because you're not meant to interleave HTML elements.

/% INVALID interleaving of HTML elements. */
<elementA> <elementB> </elementA> </elementB>

/% VALID embedding of one HTML element within another.
<elementA> <elementB> </elementB> </elementA>

In the first of the above examples we are trying to close elementA before closing the embedded child elementB which is invalid.

If the web-browser is forgiving then it may close elementB for you but then in also needs to handle the extra </elementB> tag, which it may do by inserting an extra open <elementB> tag into the structure so it actually ends up looking like the following.

<elementA> <elementB> </elementB> </elementA> <elementB></elementB>

The above is also true when interleaving the open & close tags of HTML element with the open & close tags of macros, although this depends more on exactly what your code is doing.