Maintaining the integrity of HTML and CSS while implementing JavaScript can be challenging, especially when trying to achieve a fade-in effect letter by letter

Question

Maintaining the integrity of HTML and CSS while implementing JavaScript can be challenging, especially when trying to achieve a fade-in effect letter by letter

I am attempting to create a fade-in effect on a website letter by letter, but I seem to be running into formatting issues with JavaScript. Can anyone spot the error in this code (see below)? You can view the current version deployed here - - where you can see the problem.

Thanks, Florian

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Results</title>
    <style>
        /* CSS styles here */
    </style>
    <script>
        // JavaScript script here
    </script>
</head>
<body>

<div class="results-container">
    <!-- HTML content here -->
</div>

</body>
</html>

This is what I have attempted - I expected the formatting (h1 tags etc. / list format) to remain intact, but as you can see, it appears to be messed up.

Best Regards

javascript html css fadein

Answer 1

Answer №1

According to @RUKAclMortality, the solution was cloning :-)

        document.addEventListener('DOMContentLoaded', function() {
            const container = document.querySelector('.results-container');
            const clonedContainer = container.cloneNode(true); // Make a copy of the container along with its content
            container.innerHTML = '';  // Empty the container

            function typeNode(node, targetContainer) {
                if (node.nodeType === Node.TEXT_NODE) {
                    // If it's a text node, print each character one by one
                    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);

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

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

Answer 2

According to @RUKAclMortality, the solution was cloning :-)

        document.addEventListener('DOMContentLoaded', function() {
            const container = document.querySelector('.results-container');
            const clonedContainer = container.cloneNode(true); // Make a copy of the container along with its content
            container.innerHTML = '';  // Empty the container

            function typeNode(node, targetContainer) {
                if (node.nodeType === Node.TEXT_NODE) {
                    // If it's a text node, print each character one by one
                    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);

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

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

Answer 3

Answer №2

Check out this cool library called typed.min.js for a neat typing effect!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create a Typing Effect on Your Website</title>
    <style>
    /* CSS Styles Go Here */
</style>
</head>
<body>
    <div class="results-container" id="typewriter-content">
        <h1>Experience the Magic of Typing Effect!</h1>

        <h3>Funding Opportunities in Germany</h3>
        <ul>
            <li>
                <span class="highlight">Central Innovation Program for SMEs (ZIM)</span>
                <ul>
                    <li><strong>Objective:</strong> Funding innovation projects</li>
                    <li><strong>Funding Rate:</strong> Up to 45% of eligible costs</li>
                    <li><strong>Key Criteria:</strong> Innovation level, market potential, technological feasibility</li>
                    <li><strong>Website:</strong> <a href="https://www.zim.de/ZIM/Navigation/DE/Home/home.html" target="_blank">ZIM Website</a></li>
                </ul>
            </li>
            <!-- ... Add other funding opportunities in Germany here ... -->

        </ul>

        <h3>EU Funding Programs</h3>
        <ul>
            <li>
                <span class="highlight">Horizon Europe</span>
                <ul>
                    <li><strong>Objective:</strong> Research and innovation</li>
                    <li><strong>Funding Rate:</strong> Typically up to 100% of eligible costs</li>
                    <li><strong>Key Criteria:</strong> Scientific excellence, societal relevance, European collaboration</li>
                    <li><strong>Website:</strong> <a href="https://ec.europa.eu/info/horizon-europe_en" target="_blank">Horizon Europe Website</a></li>
                </ul>
            </li>
            <!-- ... Add other EU funding programs here ... -->

        </ul>

        <p>These programs have different requirements, deadlines, and selection processes. It's advisable to thoroughly research each program and consider seeking professional advice.</p>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
    <script>
        // JavaScript code for typing effect
    </script>
</body>
</html>

Answer 4

Check out this cool library called typed.min.js for a neat typing effect!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create a Typing Effect on Your Website</title>
    <style>
    /* CSS Styles Go Here */
</style>
</head>
<body>
    <div class="results-container" id="typewriter-content">
        <h1>Experience the Magic of Typing Effect!</h1>

        <h3>Funding Opportunities in Germany</h3>
        <ul>
            <li>
                <span class="highlight">Central Innovation Program for SMEs (ZIM)</span>
                <ul>
                    <li><strong>Objective:</strong> Funding innovation projects</li>
                    <li><strong>Funding Rate:</strong> Up to 45% of eligible costs</li>
                    <li><strong>Key Criteria:</strong> Innovation level, market potential, technological feasibility</li>
                    <li><strong>Website:</strong> <a href="https://www.zim.de/ZIM/Navigation/DE/Home/home.html" target="_blank">ZIM Website</a></li>
                </ul>
            </li>
            <!-- ... Add other funding opportunities in Germany here ... -->

        </ul>

        <h3>EU Funding Programs</h3>
        <ul>
            <li>
                <span class="highlight">Horizon Europe</span>
                <ul>
                    <li><strong>Objective:</strong> Research and innovation</li>
                    <li><strong>Funding Rate:</strong> Typically up to 100% of eligible costs</li>
                    <li><strong>Key Criteria:</strong> Scientific excellence, societal relevance, European collaboration</li>
                    <li><strong>Website:</strong> <a href="https://ec.europa.eu/info/horizon-europe_en" target="_blank">Horizon Europe Website</a></li>
                </ul>
            </li>
            <!-- ... Add other EU funding programs here ... -->

        </ul>

        <p>These programs have different requirements, deadlines, and selection processes. It's advisable to thoroughly research each program and consider seeking professional advice.</p>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
    <script>
        // JavaScript code for typing effect
    </script>
</body>
</html>

Maintaining the integrity of HTML and CSS while implementing JavaScript can be challenging, especially when trying to achieve a fade-in effect letter by letter

Answer №1

Answer №2

Similar questions

There was an error: TypeError - The function collectionGroup cannot be called on the object _firebase__WEBPACK_IMPORTED_MODULE_10__.usersCollection.doc

How can I set a variable to the input value within the class of a different Component in React?

A guide to crafting a cross design using only CSS

Steps for Adding a class or Id to an Ext.Msg.alert box

Is there a way to arrange an array based on the product or quotient of two values?

Why isn't the sticky element moving up along with its sibling element when scrolling?

Error: The function setDarkTheme is not defined

Submitting a form automatically in React Native using Redux

Choose and save data found between line breaks into a list

Creating an Engaging Data Visualization: Blending Candlestick Insights with Line Graphs

I am trying to verify my code, but the messages are not displaying under the username. They only appear under the password field. I am not sure where I have made a mistake

The v-for loop seems to only update the last element instead of all of them, which is incorrect

Should alert boxes and loading windows be called from Controllers or Services?

Why does ng-checked fail to function properly in AngularJS?

Finding the text content of a div element using react testing library

Struggling to upload a file with multer in a Node.js and Angular.js app

Can I install more than one instance of Framework7 on the same device?

Implement an onscroll event that dynamically changes the background color to highlight each phase individually

Unable to update the color of material icon using document.getElementById(item) method

Utilizing the power of AWS Lambda in conjunction with moment JS to generate unique