CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rushi
Rushi

Reputation: 21

jsfiddle code not working on my site

HTML:

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

CSS:

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

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

JS:

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);

This code from jsfiddle http://jsfiddle.net/Mp7R3/ is not working when I copy paste the code but it is working fine on jsfiddle .maybe I have some onLoad problem but I dont know how to solve it . I tried $(document).ready(function() but it didnt help .

Upvotes: 0

Views: 348

Answers (1)

Rofez
Rofez

Reputation: 221

Be sure you don't forget the script for calling jQuery in the <head> of your code:

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

You can also try to place the code at the bottom of your code so it's can run only if the full page is loaded.

I also write below the simplest page to make this code work (normally you should separate HTML, CSS and JS), so you can compare it with your own:

<!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>- That's Work!!! -</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 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);

    </script>
</html>

I hope it will help you!

Upvotes: 1

Related Questions