My website is experiencing issues with incorporating jsfiddle code

Question

My website is experiencing issues with incorporating jsfiddle code

Snippet:

<div id="container">
<div id="bar">
</div>
</div>

CSS Style:

#container {
width: 20px;
height: 150px;
position: relative;

}
#bar {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
bottom: 0px;
}

Javascript Logic:

function Bar(element) {
this.barEl = element;
this.progress = 100;
}

Bar.prototype.setProgress = function (p) {
if(p >= 0) {
    this.progress = p;
    this.barEl.style.height = this.progress + "%";
}
}

var barObj = new Bar(document.getElementById('bar'));
setInterval(function () {
barObj.setProgress(barObj.progress - 10);
}, 1000);

The code snippet can be viewed on jsfiddle here. The code is not functioning correctly when copied and pasted, which may be due to an onLoad issue. Attempting to use $(document).ready(function() was unsuccessful in solving the problem.

javascript jquery html css

Answer 1

Answer №1

Make sure to include the jQuery script in the <head> section of your code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Alternatively, you can place the code at the end of your document so it only runs once the entire page has loaded.

Below is a basic example demonstrating how to incorporate this code (typically, HTML, CSS, and JS should be separated), which you can compare with your own implementation:

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <title>- It Works!!! -</title>

        <style>

        #container {
            width: 20px;
            height: 150px;
            position: relative;   
        }

        #bar {
            width: 100%;
            height: 100%;
            background-color: red;
            position: absolute;
            bottom: 0px;
        }

        </style>

    </head>
    <body>
        <div id="container">
            <div id="bar">
            </div>
        </div>
    </body>

    <script type="text/javascript">
        function ProgressBar(element) {
            this.barEl = element;
            this.progress = 100;
        }

        ProgressBar.prototype.setProgress = function (p) {
            if(p >= 0) {
                this.progress = p;
                this.barEl.style.height = this.progress + "%";
            }
        }

        var progressBar = new ProgressBar(document.getElementById('bar'));
        setInterval(function () {
                progressBar.setProgress(progressBar.progress - 10);
        }, 1000);

    </script>
</html>

I trust this guide will assist you!

Answer 2

Make sure to include the jQuery script in the <head> section of your code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Alternatively, you can place the code at the end of your document so it only runs once the entire page has loaded.

Below is a basic example demonstrating how to incorporate this code (typically, HTML, CSS, and JS should be separated), which you can compare with your own implementation:

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <title>- It Works!!! -</title>

        <style>

        #container {
            width: 20px;
            height: 150px;
            position: relative;   
        }

        #bar {
            width: 100%;
            height: 100%;
            background-color: red;
            position: absolute;
            bottom: 0px;
        }

        </style>

    </head>
    <body>
        <div id="container">
            <div id="bar">
            </div>
        </div>
    </body>

    <script type="text/javascript">
        function ProgressBar(element) {
            this.barEl = element;
            this.progress = 100;
        }

        ProgressBar.prototype.setProgress = function (p) {
            if(p >= 0) {
                this.progress = p;
                this.barEl.style.height = this.progress + "%";
            }
        }

        var progressBar = new ProgressBar(document.getElementById('bar'));
        setInterval(function () {
                progressBar.setProgress(progressBar.progress - 10);
        }, 1000);

    </script>
</html>

I trust this guide will assist you!

My website is experiencing issues with incorporating jsfiddle code

Answer №1

Similar questions

The Angular routing feature seems to be malfunctioning

Issues with React's useState hook not updating properly

Unable to render nested HTML tag in simple React.JS component

Sending a Thunk to the store using Typescript

Does this CSS identifier align with the specifications?

Creating columns of equal height using Bootstrap 3 and flexbox

Angular's observable function is not providing a complete response

I keep receiving an error message that says "The MIME type 'application/json' is not executable." Can anyone explain why this is happening?

Having trouble with Select2 functionality within a modal in Bootstrap version 4.6.0?

Generate visual representations using Google charts and JSON data

Vue snapshot testing is encountering a failure with the error message "TypeError: Cannot read property of undefined"

ERROR: Unable to use import statement outside a module in REACT-APP

The reference to the jQuery object is void

Retrieving JSON data in array by making an AngularJS resource call

What is the best way to swap out elements in my string with those from an array?

Using Regular Expressions in JavaScript to verify if an element from an array is contained within a string

The Autocomplete component from MUI is alerting me to provide a unique key for every child element being passed

Utilizing XMLHttpRequest in JavaScript to interact with Elasticsearch

Guide to developing a personalized useReducer with integrated decision-making and event activation

Shadows with pixel art style in Threejs