Forums
This topic is locked
javascript doesnt seem to work in jquery
Posted 26 Nov 2011 14:34:12
1
has voted
26 Nov 2011 14:34:12 amina mahdi posted:
the issue is, im trying to get a progress bar to work in my jquery page. I have 1 javascript sourcefile, one jquery source file, one css file, and then ofcourse the jquery file, where ive reference to the other files inside this file. Basically, im trying to use collapsible bars, and when you click on them, you get a progress bar which you can alter (the percentage complete) on the actual page. Ive got it working in the first collapsible bar, but when i try to get anotherone on the page, the progress bar isnt interactable for the user.
Dunno if what ive said makes sense, but if you save each of the files individually you might be able to see what im talking about.
Jquery/ html file (theprogtestbar1.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript/CSS Progress Bar</title>
<link rel="stylesheet" type="text/css" href="cssstyle.css" />
<script type="text/javascript" src="jqueryjavascript.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<!-- jQuery files and CSS -->
<link rel="stylesheet" href="code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="c">
<h3>I'm a header</h3>
<div id="container">
<div id="progress-bar">
<div id="status"></div>
</div>
<div id="entry-field">
<label for="enter_value">Progress Percent:</label>
<input type="text" name="enter_value" id="enter_value" value="50" onkeypress="return entsub(event);" maxlength="3" /><label> %</label>
</div>
<div id="submit-button">
<input type="submit" name="btn-submit" id="btn-submit" onclick="updateProgress();" value="Update Progress" />
</div>
<div id="error" style="display:none;">
<p>Please enter a value between 0 and 100.</p>
</div>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="c">
<h3>second go</h3>
<div id="container">
<div id="progress-bar">
<div id="status"></div>
</div>
<div id="entry-field">
<label for="enter_value">Progress Percent:</label>
<input type="text" name="enter_value" id="enter_value" value="20" onkeypress="return entsub(event);" maxlength="3" /><label> %</label>
</div>
<div id="submit-button">
<input type="submit" name="btn-submit" id="btn-submit" onclick="updateProgress();" value="Update Progress" />
</div>
<div id="error" style="display:none;">
<p>Please enter a value between 0 and 100.</p>
</div>
</div>
</div>
</body>
</html>
jquery file (jqueryjavascript.js):
(was too long for this window to cut and paste, but you can find it at:
www.hesslerdesign.com/blog/wp-content/uploads/2010/08/progress_bar/js/jquery-1.4.1.min.js
javascript file (javascript.js):
function updateProgress() {
var lStatus = getElementDiv('status');
var lEntryField = getElementDiv('enter_value');
var lEntryFieldValue = lEntryField.value;
if ((lEntryFieldValue <= 100) && (lEntryFieldValue >= 0)) {
var lPercent_str = ''+lEntryFieldValue+'%';
$(lStatus).animate( { width: lPercent_str }, 500);
showError(false);
} else {
showError(true);
}
}
function showError(pWhatWay_bol) {
var lErrorDiv = getElementDiv('error');
if (pWhatWay_bol) {
lErrorDiv.style.display = "block";
} else {
lErrorDiv.style.display = "none";
}
}
function entsub(event) {
if (event && event.which == 13) {
updateProgress();
} else {
//return true;
return numbersonly(this, event);
}
}
function getElementDiv(pID_str) {
var lDiv = document.getElementById(pID_str);
if (!lDiv) {
lDiv = window.getElementById(pID_str);
}
return lDiv;
}
function numbersonly(myfield, e, dec) {
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key==null) || (key==0) || (key==8) ||
(key==9) || (key==13) || (key==27) )
return true;
// numbers
else if ((("0123456789"
.indexOf(keychar) > -1))return true;
// decimal point jump
else if (dec && (keychar == "."
){
myfield.form.elements[dec].focus();
return false;
}
else
return false;
}
css file (cssstyle.css):
html body {margin:0px; padding:0px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#1c1c1c;}
label {font-size:12px;}
#container {width:300px; height:170px; margin:0 auto; margin-top:16px;}
#progress-bar {border:1px solid #bebebe; background:url(../images/progress_bg.gif) repeat-x; width:100%; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}
#status {background:#06c url(../images/status_bg.gif) repeat-x; width:50%; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}
#error {padding:20px; background:#FFDCDC; border-color:#F1BABA #D8A7A7 #D8A7A7 #F1BABA; border-style:solid; border-width:1px; width:220px; text-align:center; margin:0 auto; margin-top:16px;}
#error p {font-size:11px; color:#cc2424; margin:0px;}
#enter_value {width:30px; background:url(../images/input_field_bg.gif) repeat-x; border:1px solid #BEBEBE; padding:3px; text-align:center; font-size:12px;}
#entry-field, #submit-button {margin:0 auto; text-align:center;}
#entry-field {margin:14px 0px;}
#btn-submit {}
i would really appreciate any help with this, and thanks in advance!
Replies
Replied 26 Nov 2011 14:54:02
26 Nov 2011 14:54:02 amina mahdi replied:
reposting coz i forgot the code tags
the issue is, im trying to get a progress bar to work in my jquery page. I have 1 javascript sourcefile, one jquery source file, one css file, and then ofcourse the jquery file, where ive reference to the other files inside this file.
Basically, im trying to use collapsible bars, and when you click on them, you get a progress bar which you can alter (the percentage complete) on the actual page. Ive got it working in the first collapsible bar, but when i try to get anotherone on the page, the progress bar isnt interactable for the user.
Dunno if what ive said makes sense, but if you save each of the files individually you might be able to see what im talking about.
i would really appreciate any help with this, and thanks in advance!
the issue is, im trying to get a progress bar to work in my jquery page. I have 1 javascript sourcefile, one jquery source file, one css file, and then ofcourse the jquery file, where ive reference to the other files inside this file.
Basically, im trying to use collapsible bars, and when you click on them, you get a progress bar which you can alter (the percentage complete) on the actual page. Ive got it working in the first collapsible bar, but when i try to get anotherone on the page, the progress bar isnt interactable for the user.
Dunno if what ive said makes sense, but if you save each of the files individually you might be able to see what im talking about.
[B][U]Jquery/ html file (theprogtestbar1.html):[/U][/B]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript/CSS Progress Bar</title>
<link rel="stylesheet" type="text/css" href="cssstyle.css" />
<script type="text/javascript" src="jqueryjavascript.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<!-- jQuery files and CSS -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="c">
<h3>I'm a header</h3>
<div id="container">
<div id="progress-bar">
<div id="status"></div>
</div>
<div id="entry-field">
<label for="enter_value">Progress Percent:</label>
<input type="text" name="enter_value" id="enter_value" value="50" onkeypress="return entsub(event);" maxlength="3" /><label> %</label>
</div>
<div id="submit-button">
<input type="submit" name="btn-submit" id="btn-submit" onclick="updateProgress();" value="Update Progress" />
</div>
<div id="error" style="display:none;">
<p>Please enter a value between 0 and 100.</p>
</div>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="c">
<h3>second go</h3>
<div id="container">
<div id="progress-bar">
<div id="status"></div>
</div>
<div id="entry-field">
<label for="enter_value">Progress Percent:</label>
<input type="text" name="enter_value" id="enter_value" value="20" onkeypress="return entsub(event);" maxlength="3" /><label> %</label>
</div>
<div id="submit-button">
<input type="submit" name="btn-submit" id="btn-submit" onclick="updateProgress();" value="Update Progress" />
</div>
<div id="error" style="display:none;">
<p>Please enter a value between 0 and 100.</p>
</div>
</div>
</div>
</body>
</html>
[U][B]jquery file (jqueryjavascript.js):[/B][/U]
(was too long for this window to cut and paste, but you can find it at:
http://www.hesslerdesign.com/blog/wp-content/uploads/2010/08/progress_bar/js/jquery-1.4.1.min.js
[U][B]javascript file (javascript.js):[/B][/U]
function updateProgress() {
var lStatus = getElementDiv('status');
var lEntryField = getElementDiv('enter_value');
var lEntryFieldValue = lEntryField.value;
if ((lEntryFieldValue <= 100) && (lEntryFieldValue >= 0)) {
var lPercent_str = ''+lEntryFieldValue+'%';
$(lStatus).animate( { width: lPercent_str }, 500);
showError(false);
} else {
showError(true);
}
}
function showError(pWhatWay_bol) {
var lErrorDiv = getElementDiv('error');
if (pWhatWay_bol) {
lErrorDiv.style.display = "block";
} else {
lErrorDiv.style.display = "none";
}
}
function entsub(event) {
if (event && event.which == 13) {
updateProgress();
} else {
//return true;
return numbersonly(this, event);
}
}
function getElementDiv(pID_str) {
var lDiv = document.getElementById(pID_str);
if (!lDiv) {
lDiv = window.getElementById(pID_str);
}
return lDiv;
}
function numbersonly(myfield, e, dec) {
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key==null) || (key==0) || (key==8) ||
(key==9) || (key==13) || (key==27) )
return true;
// numbers
else if ((("0123456789").indexOf(keychar) > -1))
return true;
// decimal point jump
else if (dec && (keychar == "."))
{
myfield.form.elements[dec].focus();
return false;
}
else
return false;
}
[B][U]css file (cssstyle.css):[/U][/B]
html body {margin:0px; padding:0px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#1c1c1c;}
label {font-size:12px;}
#container {width:300px; height:170px; margin:0 auto; margin-top:16px;}
#progress-bar {border:1px solid #bebebe; background:url(../images/progress_bg.gif) repeat-x; width:100%; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}
#status {background:#06c url(../images/status_bg.gif) repeat-x; width:50%; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}
#error {padding:20px; background:#FFDCDC; border-color:#F1BABA #D8A7A7 #D8A7A7 #F1BABA; border-style:solid; border-width:1px; width:220px; text-align:center; margin:0 auto; margin-top:16px;}
#error p {font-size:11px; color:#cc2424; margin:0px;}
#enter_value {width:30px; background:url(../images/input_field_bg.gif) repeat-x; border:1px solid #BEBEBE; padding:3px; text-align:center; font-size:12px;}
#entry-field, #submit-button {margin:0 auto; text-align:center;}
#entry-field {margin:14px 0px;}
#btn-submit {}
i would really appreciate any help with this, and thanks in advance!