Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem with getting a javascript code to work in jquery.

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


    Code:
    <!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>




    jquery file (jqueryjavascript.js):

    (was too long for this window to cut and paste, but you can find it at:

    http://www.hesslerdesign.com/blog/wp...y-1.4.1.min.js




    javascript file (javascript.js):

    Code:
    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):

    Code:
    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!
    Last edited by VIPStephan; 11-27-2011 at 10:56 AM. Reason: wrapped code BB tags

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,037
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    See:- *** WARNING: Questions posted here will be deleted! ***.

    You will not get any reply in this forum which is intended to be used only to
    post a completed (working) script for showcasing/benefit of others.


    Please post in the right forum (JavaScript Frameworks) , and before you do so read MUST READ- How to post a JavaScript question! and the forum posting guidelines about the use of code tags.

    It is your responsibility to die() if necessary….. - PHP Manual

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Moved to correct forum


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •