Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Help debugging this HTML please

Hey!

I'm still pretty new to Twine and teaching myself basic HTML and CSS. Wondering why this piece of code isn't working? Have tried debugging myself to no avail.

<div class="fade-in four"><i><span class="zuberitext">"Character A speech"</span></i></div>
<div class="fade-in five"><b>"Character B speech"</b></div>
<div class="fade-in six"><i><span class="zuberitext">Character A speech
<div class="fade-in seven">More of the same speech from Character A
<div class="fade-in eight">End of the same speech from Character A" </span></i></div>

<div class="fade-in nine">Do you passage? Or do you think passage?</div>

I removed the particulars of the story just to give an idea of the passage shape. The classes I have are a timed fade in for text and particular colour for Character A's speech.

Any ideas greatly appreciated, cheers!

Comments

  • edited March 2017
    you need to state the name and full version number of the story format you are using, as answers can be different for each one. Also please use the code tag when posting your example - it's the C on the editor bar.

    The HTML in your example is structurally invalid as it is missing a number of end tags and seems to have a div element (block) contained within a span element (inline) but I am assuming that is due to you cut-n-pasting selected parts of a greater whole.

    Your have not supplied the related CSS you are using to implement the time based fade-in effect, it is difficult to help debug something without knowing what that something is.
  • Hi! I'm using Twine version 2.0.8 and Harlowe 1.1.1. Thanks, I'll use the code tag in the future. :)

    I think you're right about the HTML being invalid and the issue being with the div and span elements. This is the whole of the HTML for the passage if that helps:
    <div class="fade-in one"><b>"Character b speech"</b></div>
    <div class="fade-in two"><i><span class="zuberitext">"Character A speech,"</span></i></div>
    <div class="fade-in three"><b>"Character B speech"</b></div>
    <div class="fade-in four"><i><span class="zuberitext">"Character A speech"</span></i></div>
    <div class="fade-in five"><b>"Character B speech"</b></div>
    <div class="fade-in six"><i><span class="zuberitext">"Character A speech.
    <div class="fade-in seven">Same speech from Character A
    <div class="fade-in eight">More of the same speech from Character A" </span></i></div>
    
    <div class="fade-in nine">Do you [[Choice A|Passage A]]? Or do you think [[Choice B|Passage B]]?</div>
    


    Here is the CSS for the time based fade-in effect:
    @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @-o-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    
    .fade-in {
    	opacity: 0;
    
    	-webkit-animation: fadeIn ease-in 1;
    	     -o-animation: fadeIn ease-in 1;
    	        animation: fadeIn ease-in 1;
    
    	-webkit-animation-fill-mode: forwards;
    	     -o-animation-fill-mode: forwards;
    	        animation-fill-mode: forwards;
    
    	-webkit-animation-duration: 2s;
    	     -o-animation-duration: 2s;
    	        animation-duration: 2s;
    }
    
    .fade-in.one {
    	-webkit-animation-delay: 1s;
    	     -o-animation-delay: 1s;
    	        animation-delay: 1s;
    }
    .fade-in.two {
    	-webkit-animation-delay: 4s;
    	     -o-animation-delay: 4s;
    	        animation-delay: 4s;
    }
    

    The subsequent fade-ins (three - nine) have animation-delays which increase 4 seconds with each.

    Thanks!
  • dontpanic wrote: »
    [...] I think you're right about the HTML being invalid and the issue being with the div and span elements. [...]

    Like greyelf said, a lot of your tags aren't closed and you have a span element running through a bunch of div elements, which is probably causing a lot of problems.
    <div class="fade-in one"><b>"Character b speech"</b></div>
    <div class="fade-in two"><i><span class="zuberitext">"Character A speech,"</span></i></div>
    <div class="fade-in three"><b>"Character B speech"</b></div>
    <div class="fade-in four"><i><span class="zuberitext">"Character A speech"</span></i></div>
    <div class="fade-in five"><b>"Character B speech"</b></div>
    <!--problems start here-->
    <div class="fade-in six"><!--this is not closed--><i><!--this is closed later, like the span.  probably not helping--><span class="zuberitext"><!--this span is running through the next couple divs, which is weird and probably not doing what you want it to-->"Character A speech.
    <div class="fade-in seven"><!--not closed-->Same speech from Character A
    <div class="fade-in eight">More of the same speech from Character A" </span></i></div>
    
    <div class="fade-in nine">Do you [[Choice A|Passage A]]? Or do you think [[Choice B|Passage B]]?</div>
    


    The CSS looks okay.

    If fixing the HTML doesn't help, I think we need you to describe what's happening that isn't right. Is the animation messed up? The formatting?
  • Thanks everyone! Fixing the HTML by closing the tags and moving the order of them inline really helped. Looks like it's all good now. :)
  • edited April 2017
    Two points.

    To debug html tags and css properties, use Inspect Element that comes with the browser by right clicking on a page after it is loaded. It tells you exactly how the browser rendered your code, and

    try to do this with your code
    <div class="fade-in one">\
    	<b>\
    		"Character b speech"\
    	</b>\
    </div>
    

    The indent is going to help a lot tracking any tags. by default HTML ignore spaces and tabs in the beginning of the line.
Sign In or Register to comment.