So I want to be able to change a divs width every second by, but the code I am currently using doesn't seem to work
<script type="text/javascript">
$("#progress").css("width", "55%");
</script>
<div id="progress"></div>
I have set the 'progress' div to 1px in the css.
#progress {
position: relative;
background: url('prog1.jpg') repeat-x;
height: 100%;
border: 1px solid #145b8c;
border-radius: 5px;
margin-left: -1px;
margin-top: -1px;
width: 1px;
}
Any help would be appreciated.
There are 2 solutions.
Code:
$(function (){
$("#progress").css("width", "55%");
});
Your solution didn't work because sometimes the element wasn't loaded so it couldn't be changed. Document.ready is executed when whole document is loaded. When the code in ready event is executed you are sure that every html element is loaded.
To change the code every second you need use setInterval function
setInterval(function() {
// Do something every 1 second
}, 1000);
Example chaning with every second + 5px
$(function (){
var counter = 1;
setInterval(function() {
counter = (counter + 5) % 100;
$("#progress").css("width", counter + "%");
}, 1000);
});
Wrap your code in document ready handler
$(function(){
$("#progress").css("width", "55%");
});
I'm not sure how/where you are executing that jQuery code. If it's really as you specified, then by the time it executes, your div doesn't exist yet. Instead, try executing it after the document has loaded:
$(document).ready(function() {
$("#progress").css("width", "55%");
});
You can use that code into an onload function too or use the ready handler as the rest of friends commented.
Html:
<body onload="init()">
Javascript:
function init() {
$("#progress").css("width", "55%");
}
If I have understood the problem correctly then the answer is to add:
display:inline; to ID #progress
hope it helps..
This might be the solution: http://jsfiddle.net/balintbako/kNgg7/ (it stops at 100, but you can adjust that)
HTML
<div id="main">
<div id="progress"></div>
</div>
JS
function progress(speed) {
setInterval(function() {
$("#progress").animate({
width: "+=" + speed
});
if ($("#progress").width < 100) {
progress(speed);
}
}, 1000);
}
progress(1);
get the current width and updated it and Use setInterval and clearInterval
Refer this Answer: http://stackoverflow.com/questions/7164090/jquery-run-click-function-every-x-seconds
I also suggest Progressbar if its suits for you
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
