Question 244015 in Html Question posted in
Some basic documentation can be found here.

HTML / CSS gets messed up due to JS – how to fade in letter by letter without destroying formatting

I would like to fade in a website letter by letter – but JS seems to mess up the formatting – can you tell what the error is in this code (see below) – i deployed the current version here – http://digitale-anamnese.com/results2.html – there you can see the problem.

Cheers,
Florian

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ihre Ergebnisse</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        .results-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            margin: 40px auto;
        }

        h1, h3 {
            color: #333;
        }

        p, ul {
            font-size: 16px;
            line-height: 1.6;
            color: #666;
        }

        a {
            color: #3498db;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        ul {
            list-style-type: none;
            padding-left: 0;
        }

        li {
            margin-bottom: 20px;
        }

        .highlight {
            font-weight: bold;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.querySelector('.results-container');
            const originalHTML = container.innerHTML;
            container.innerHTML = '';  // Clear the container

            let i = 0;

            function typeCharacter() {
                if (i < originalHTML.length) {
                    if (originalHTML[i] === "<") {
                        // If we encounter an opening tag, add the entire tag at once
                        const closingTagIndex = originalHTML.indexOf(">", i);
                        container.innerHTML += originalHTML.slice(i, closingTagIndex + 1);
                        i = closingTagIndex + 1;
                    } else if (originalHTML[i] === "&") {
                        // Handle HTML entities (like &nbsp;)
                        const entityEndIndex = originalHTML.indexOf(";", i);
                        container.innerHTML += originalHTML.slice(i, entityEndIndex + 1);
                        i = entityEndIndex + 1;
                    } else {
                        container.innerHTML += originalHTML[i];
                        i++;
                    }
                    setTimeout(typeCharacter, 10);  // Adjust this value to control typing speed
                }
            }

            typeCharacter();  // Start the typing effect
        });
    </script>
</head>
<body>

<div class="results-container">
    <h1>Diese Förderungen kommen in Frage</h1>

    <h3>Deutschland-Spezifische Förderungen</h3>
    <ul>
        <li>
            <span class="highlight">Zentrales Innovationsprogramm Mittelstand (ZIM)</span>
            <ul>
                <li><strong>Ziel:</strong> Förderung von Innovationsprojekten</li>
                <li><strong>Förderquote:</strong> Bis zu 45% der förderfähigen Kosten</li>
                <li><strong>Wichtige Kriterien:</strong> Innovationsgrad, Marktpotenzial, technologische Machbarkeit</li>
                <li><strong>Webseite:</strong> <a href="https://www.zim.de/ZIM/Navigation/DE/Home/home.html" target="_blank">ZIM Webseite</a></li>
            </ul>
        </li>
        <!-- ... Add other Deutschland-Spezifische Förderungen here ... -->

    </ul>

    <h3>EU-Förderungen</h3>
    <ul>
        <li>
            <span class="highlight">Horizon Europe</span>
            <ul>
                <li><strong>Ziel:</strong> Forschung und Innovation</li>
                <li><strong>Förderquote:</strong> In der Regel bis zu 100% der förderfähigen Kosten</li>
                <li><strong>Wichtige Kriterien:</strong> Wissenschaftliche Exzellenz, gesellschaftliche Relevanz, europäische Zusammenarbeit</li>
                <li><strong>Webseite:</strong> <a href="https://ec.europa.eu/info/horizon-europe_en" target="_blank">Horizon Europe Webseite</a></li>
            </ul>
        </li>
        <!-- ... Add other EU-Förderungen here ... -->

    </ul>

    <p>Diese Programme haben unterschiedliche Anforderungen, Fristen und Auswahlverfahren. Es ist daher ratsam, sich gründlich über die einzelnen Programme zu informieren und eventuell eine professionelle Beratung in Anspruch zu nehmen.</p>
</div>

</body>
</html>

This is what I tried – http://digitale-anamnese.com/results2.html
I expected formatting (h1 tags etc. / list format) to be intact but as you can see it´s kind of messed up.

KR

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As @RUKAclMortality pointed out, cloning did the trick :-)

            document.addEventListener('DOMContentLoaded', function() {
            const container = document.querySelector('.results-container');
            const clonedContainer = container.cloneNode(true); // Clone the container with all its content
            container.innerHTML = '';  // Clear the container

            function typeNode(node, targetContainer) {
                if (node.nodeType === Node.TEXT_NODE) {
                    // If it's a text node, type its content character by character
                    let i = 0;
                    function typeCharacter() {
                        if (i < node.nodeValue.length) {
                            targetContainer.append(node.nodeValue[i]);
                            i++;
                            setTimeout(typeCharacter, 10);
                        }
                    }
                    typeCharacter();
                } else if (node.nodeType === Node.ELEMENT_NODE) {
                    // If it's an element node, clone it without its children
                    const clonedNode = node.cloneNode(false);
                    targetContainer.appendChild(clonedNode);

                    // Recursively type the children of this node
                    let childIndex = 0;
                    function typeChild() {
                        if (childIndex < node.childNodes.length) {
                            typeNode(node.childNodes[childIndex], clonedNode);
                            childIndex++;
                            setTimeout(typeChild, 10);
                        }
                    }
                    typeChild();
                }
            }

            typeNode(clonedContainer, container);
        });
    </script>````

  2. 0

    Try this, I am using typed.min.js quite a handy library gives nice typing effect.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing Effect Website</title>
    <style>
    body {
        font-family: Arial, Helvetica, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 20px;
    }

    .results-container {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        max-width: 800px;
        margin: 40px auto;
    }

    h1, h3 {
        color: #333;
    }

    p, ul {
        font-size: 16px;
        line-height: 1.6;
        color: #666;
    }

    a {
        color: #3498db;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    ul {
        list-style-type: none;
        padding-left: 0;
    }

    li {
        margin-bottom: 20px;
    }

    .highlight {
        font-weight: bold;
    }
</style>
</head>
<body>
    <div class="results-container" id="typewriter-content">
    <h1>Diese Förderungen kommen in Frage</h1>

    <h3>Deutschland-Spezifische Förderungen</h3>
    <ul>
        <li>
            <span class="highlight">Zentrales Innovationsprogramm Mittelstand (ZIM)</span>
            <ul>
                <li><strong>Ziel:</strong> Förderung von Innovationsprojekten</li>
                <li><strong>Förderquote:</strong> Bis zu 45% der förderfähigen Kosten</li>
                <li><strong>Wichtige Kriterien:</strong> Innovationsgrad, Marktpotenzial, technologische Machbarkeit</li>
                <li><strong>Webseite:</strong> <a href="https://www.zim.de/ZIM/Navigation/DE/Home/home.html" target="_blank">ZIM Webseite</a></li>
            </ul>
        </li>
        <!-- ... Add other Deutschland-Spezifische Förderungen here ... -->

    </ul>

    <h3>EU-Förderungen</h3>
    <ul>
        <li>
            <span class="highlight">Horizon Europe</span>
            <ul>
                <li><strong>Ziel:</strong> Forschung und Innovation</li>
                <li><strong>Förderquote:</strong> In der Regel bis zu 100% der förderfähigen Kosten</li>
                <li><strong>Wichtige Kriterien:</strong> Wissenschaftliche Exzellenz, gesellschaftliche Relevanz, europäische Zusammenarbeit</li>
                <li><strong>Webseite:</strong> <a href="https://ec.europa.eu/info/horizon-europe_en" target="_blank">Horizon Europe Webseite</a></li>
            </ul>
        </li>
        <!-- ... Add other EU-Förderungen here ... -->

    </ul>

    <p>Diese Programme haben unterschiedliche Anforderungen, Fristen und Auswahlverfahren. Es ist daher ratsam, sich gründlich über die einzelnen Programme zu informieren und eventuell eine professionelle Beratung in Anspruch zu nehmen.</p>
</div>
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
    <script>
        const targetElement = document.getElementById("typewriter-content");
        const textToType = targetElement.innerHTML;

        targetElement.innerHTML = ''; // Clear the initial content

        const options = {
            strings: [textToType],
            typeSpeed: 10, // Adjust the speed (milliseconds per character) as needed
        };

        const typed = new Typed(targetElement, options);
    </script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search