Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Convert document.observe to function 1

Status
Not open for further replies.
cumap

cumap

IS-IT--Management
Joined
Jul 9, 2007
Messages
268
Location
US
Hello,

I'm stripping this js script out so that it can work in my specific case that is to have a 'pretend' progress bar before a next code comes in. However, I don't know how to call this because the Progressive bar script is automatically activate when loaded
Code: 
<span id="element6">[ Loading Progress Bar ]</span>
                <script type="text/javascript">
                    function progressLoad() {
                
                        document.getElementById('element6').style.display='';
						// second manual example : multicolor (and take all other default paramters)
                        manualPB2 = new JS_BRAMUS.jsProgressBar(
                                    $('element6'),
                                    100,
                                    {
                
                                        barImage	: Array(
                                            'images/bramus/percentImage_back4.png',
                                            'images/bramus/percentImage_back3.png',
                                            'images/bramus/percentImage_back2.png',
                                            'images/bramus/percentImage_back1.png'
                                        ),
                
                                        onTick : function(pbObj) {
                
                                            switch(pbObj.getPercentage()) {
                
                                                case 100:
                                                    callme();
                                                    //alert('Progressbar full at 100% ... maybe do a redirect or sth like that here?');
                                                break;
                
                                            }
                
                                            return true;
                                        }
                                    }
                                );
                    }, false);
                </script>

How can I change the document.observe('dom:loaded', function() to a function so that I can call to when needed?

thanks!
 
Sort by date Sort by votes
Hi

cumap said:
How can I change the document.observe('dom:loaded', function() to a function so that I can call to when needed?
Click to expand...
And where is that piece of code ?

Please remove the extra indentation from the code when posting it.

Feherke.
 
Upvote 0 Downvote
sorry about the indentations... and very sorry about the posting mistaken. As you can see, the function above is what I'd like to have instead of the original
Code: 
<script type="text/javascript">
document.observe('dom:loaded', function() {

// second manual example : multicolor (and take all other default paramters)
manualPB2 = new JS_BRAMUS.jsProgressBar(
$('element6'),
100,
{

barImage	: Array(
'images/bramus/percentImage_back4.png',
'images/bramus/percentImage_back3.png',
'images/bramus/percentImage_back2.png',
'images/bramus/percentImage_back1.png'
),

onTick : function(pbObj) {

switch(pbObj.getPercentage()) {

case 100:
callme();
//alert('Progressbar full at 100% ... maybe do a redirect or sth like that here?');
break;
}
return true;
}
}
);
}, false);
</script>

so when I have something like a form to fill out the call for the progressBar to launch when submitted before the result actually displayed.
 
Upvote 0 Downvote
In short, I DON'T want to progress bar to load everytime the page onload. ONLY when form is submitted.
 
Upvote 0 Downvote
Hi

Not sure, where you want this progress bar to appear ? On the page containing the [tt]form[/tt] or on the page containing the results after submitting the [tt]form[/tt] ?

In the first case the best you can do is this :
JavaScript: 
function moveit()
{
  manualPB2 = new JS_BRAMUS.jsProgressBar(
    $('element6'),
    100,
    {
      barImage    : Array(
        'images/bramus/percentImage_back4.png',
        'images/bramus/percentImage_back3.png',
        'images/bramus/percentImage_back2.png',
        'images/bramus/percentImage_back1.png'
      ),
      onTick : function(pbObj) {
        switch(pbObj.getPercentage()) {
          case 100:
            callme();
            //alert('Progressbar full at 100% ... maybe do a redirect or sth like that here?');
          break;
        }
        return true;
      }
    }
  );
}
HTML: 
<form action="" onsubmit="setTimeout(moveit,0)">
</form>
Of course, if your progress bar was previously hidden and [tt]JS_BRAMUS.jsProgressBar()[/tt] not sets it to visible automatically, you will have to do it.

Note, that there is no way to ensure that the progress bar will appear before the document is released.

( Indentation is a good thing, I only asked to remove the extra indentation. :-) )

Feherke.
 
Upvote 0 Downvote
:-) I'd like to have everything in one page from the form to fill out, then the progress bar appears giving a illusion that the requested information is processing, then a result is given after all. By doing so, I have functions to hide (display:'none') each particular step by its own div ID.

The step I'm having now when onSubmit is validation() and have function progressBar() located right on the bottom of the function validation() itself.

I'll test yours out and hopefully it works

thanks!
 
Upvote 0 Downvote
Hi

cumap said:
I'd like to have everything in one page from the form to fill out, then the progress bar appears giving a illusion that the requested information is processing, then a result is given after all.
Click to expand...
That sounds like AJAX, so [tt]onsubmit[/tt] JavaScript would :
[ul]
[li]stop the submitting[/li]
[li]send the [tt]form[/tt] data with [tt]xmlHTTLRequest()[/tt][/li]
[li]process the received data[/li]
[li]update the current document[/li]
[/ul]
This way your progress bar will stay on while the data exchange will happen. Even more, you will be able to step the progress bar progressively as the response will be received.

More about AJAX in forum1600.

Feherke.
 
Upvote 0 Downvote
It's not running.
Code: 
<!-- jsProgressBarHandler prerequisites : prototype.js -->
<script type="text/javascript" src="includes/js/prototype/prototype.js"></script>

<!-- jsProgressBarHandler core -->
<script type="text/javascript" src="includes/js/bramus/jsProgressBarHandler.js"></script>

<script language="javascript">
<!--

function getValidate() {
	
	document.getsave.no_of_label.style.background='#ffffff';
	document.getsave.cost_per_roll.style.background='#ffffff';
	document.getsave.length_per_roll.style.background='#ffffff';
	document.getsave.roll_width.style.background='#ffffff';
	document.getsave.no_of_label.style.color='#000000';
	document.getsave.cost_per_roll.style.color='#000000';
	document.getsave.length_per_roll.style.color='#000000';
	document.getsave.roll_width.style.color='#000000';

	if (document.getsave.no_of_label.selectedIndex==0) 
	{
		alert( "Choose Number of Label per month!" );
		document.getsave.no_of_label.style.background='#FF6600';
		document.getsave.no_of_label.style.color='#ffffff';
		document.getsave.no_of_label.focus();
		return false;
	}
	if (document.getsave.cost_per_roll.value=="") 
	{
		alert("Empty Value of Cost/Roll!");
		document.getsave.cost_per_roll.style.background='#FF6600';
		document.getsave.cost_per_roll.style.color='#ffffff';
		document.getsave.cost_per_roll.focus();
		return false;
	} 
	if (isNaN(document.getsave.cost_per_roll.value)) {
		alert ( "Cost/Roll must be a number!" );
		document.getsave.cost_per_roll.style.background='#FF6600';
		document.getsave.cost_per_roll.style.color='#ffffff';
		document.getsave.cost_per_roll.focus();
		return false;
	}
	if (document.getsave.length_per_roll.selectedIndex==0) 
	{
		alert( "Choose Length per Roll!" );
		document.getsave.length_per_roll.style.background='#FF6600';
		document.getsave.length_per_roll.style.color='#ffffff';
		document.getsave.length_per_roll.focus();
		return false;
	}
	if (document.getsave.roll_width.selectedIndex==0) 
	{
		alert( "Choose Roll Width!" );
		document.getsave.roll_width.style.background='#FF6600';
		document.getsave.roll_width.style.color='#ffffff';
		document.getsave.roll_width.focus();
		return false;
	}
	setTimeout(progressLoad,0);
}
function invisible() {
	document.getElementById('element6').style.display='none';
	calcSavings();
}

function calcSavings() {
	var labelpermonth = document.getsave.no_of_label.value;
	var costperroll = document.getsave.cost_per_roll.value;
	var rolllength = document.getsave.length_per_roll.value;
	var rollwidth = document.getsave.roll_width.value;
	//calc number of roll(s) per month and round up to a whole number
	var rolls_per_month = labelpermonth / rolllength;
	//calc cost per foot ($)
	var cost_per_ft = costperroll / rolllength;
	var tcost;
	if (cost_per_ft >= 1) {
		tcost = "$"+cost_per_ft;
	} else {
		tcost = (cost_per_ft.toFixed(2)*100)+"&cent;";
	}
	//calc other cost per month ($)
	var cost_per_month = rolls_per_month * costperroll;
	//get our discount rate
	var our_savings_rate=0;
	var str_savings_rate="";
	switch (rollwidth) {
		case '4': 
			our_savings_rate = 0.663333;
			str_savings_rate = "66";
			break;
		case '3': 
			our_savings_rate = 0.5700;
			str_savings_rate = "57";
			break;
		case '2': 
			our_savings_rate = 0.436667;
			str_savings_rate = "44";
			break;
		case '1': 
			our_savings_rate = 0.3300;
			str_savings_rate = "33";
			break;			
	}
	//compare our savings rate to others'
	var oursavings = 1 - (our_savings_rate / cost_per_ft) 
	//calc our monthly savings value
	var total_monthly_savings = (oursavings * cost_per_month);
	if (total_monthly_savings < 0) {
		switchdisplay2();
		return false;
	} else {
		switchdisplay();
	}
	//print to page
	document.getElementById('ourRate').innerHTML = str_savings_rate;
	document.getElementById('labelpermonth').innerHTML = labelpermonth;
	document.getElementById('othercost').innerHTML = cost_per_month.toFixed(2);
	document.getElementById('tcost').innerHTML = tcost;
	document.getElementById('youSave').innerHTML = total_monthly_savings.toFixed(2);

	switchdisplay();
}

function switchdisplay() {
	document.getElementById('result').style.display = '';
	document.getElementById('result').style.visibility = 'visible';
	document.getElementById('getform').style.display = 'none';
	document.getElementById('getform').style.visibility = 'hidden';
	document.getElementById('gethelp').style.display = 'none';
	document.getElementById('gethelp').style.visibility = 'hidden';
	document.getElementById('element6').style.display='none';
}

function switchdisplay2() {
	document.getElementById('result').style.display = 'none';
	document.getElementById('result').style.visibility = 'hidden';
	document.getElementById('getform').style.display = 'none';
	document.getElementById('getform').style.visibility = 'hidden';
	document.getElementById('gethelp').style.display = '';
	document.getElementById('gethelp').style.visibility = 'visible';
	document.getElementById('element6').style.display='none';
}

function display() {
	document.getElementById('getform').style.visibility = 'visible';
	document.getElementById('getform').style.display = '';
	document.getElementById('result').style.display = 'none';
	document.getElementById('result').style.visibility = 'hidden';
	document.getElementById('gethelp').style.display = 'none';
	document.getElementById('gethelp').style.visibility = 'hidden';
	document.getElementById('element6').style.display='none';
	
	document.getsave.no_of_label.style.background='#ffffff';
	document.getsave.cost_per_roll.style.background='#ffffff';
	document.getsave.length_per_roll.style.background='#ffffff';
}
-->
</script>

<style type="text/css">
.normtxt {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
}
.normtxt2 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
	.normtxt2 a {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
		text-decoration: none;
		color:#0155a9;
		font-weight:600;
	}
	.normtxt2 a:hover {
		text-decoration: underline;
		color:#0155a9;
		font-weight:600;
	}
.headertxt {
	font-family:Geneva, Arial, Helvetica, sans-serif; 
	font-size:15px; 
	font-weight:bold
}
input.btn {
  color:#ffffff;
  font: bold 84% 'trebuchet ms',helvetica,sans-serif;
  background-color:#0066CC;
  border:1px solid;
  border-color: #696 #363 #363 #696;
}
input.btnhov {
  color:#333333;
  background-color:#1380ee;
  border-color: #696 #363 #363 #696;
}

</style>

<body onLoad="display();">
<table width="100%" bgcolor="#ffffff" align="center" cellpadding="2" style="padding:5px"><tr><td align="center">
    <table width="650" align="center" border="0">
        <tr>
            <td valign="top" style="padding-top:20px">
                <span id="element6">[ Loading Progress Bar ]</span>
                <script language="javascript">
                    function progressLoad() {
                
                        document.getElementById('element6').style.display='';
						document.getElementById('result').style.display = 'none';
						document.getElementById('result').style.visibility = 'hidden';
						document.getElementById('getform').style.display = 'none';
						document.getElementById('getform').style.visibility = 'hidden';
						document.getElementById('gethelp').style.display = 'none';
						document.getElementById('gethelp').style.visibility = 'hidden';
						document.getElementById('element6').style.display='none';
						// second manual example : multicolor (and take all other default paramters)
                        manualPB2 = new JS_BRAMUS.jsProgressBar(
                                    $('element6'),
                                    100,
                                    {
                
                                        barImage	: Array(
                                            'images/bramus/percentImage_back4.png',
                                            'images/bramus/percentImage_back3.png',
                                            'images/bramus/percentImage_back2.png',
                                            'images/bramus/percentImage_back1.png'
                                        ),
                
                                        onTick : function(pbObj) {
                
                                            switch(pbObj.getPercentage()) {
                
                                                case 100:
                                                    invisible();
                                                    //alert('Progressbar full at 100% ... maybe do a redirect or sth like that here?');
                                                break;
                
                                            }
                
                                            return true;
                                        }
                                    }
                                );
                    }, false);
                </script>
            </td>     
        </tr>
    </table>
<div id="gethelp" style="display:none; visibility:hidden">
    <table width="650" align="center" border="0">
        <tr>
            <td valign="top" style="padding-top:20px">
            <div style="color:#000000; border:0px solid #336666; background:url(uploads/template/calc_bg3.jpg) no-repeat; background-color:#0066CC; padding:5px; width:640px; height:30px; overflow:hidden">
                <table align="center" cellpadding="0" width="100%" style="padding:5px 0 0 2px">
                    <tr>
                        <td align="center" class="headertxt" style="color:#ffffff">
                            Please contact our service representative at <b style="font-size:16px">1-800-MAT-DADY</b> for more information.
                        </td>
                    </tr>
                </table>
            </div>	
            </td>     
        </tr>
    </table>
</div>

<div id="result" style="display:none; visibility:hidden">    
    <table width="450" align="center" bgcolor="#ffffff" border="0">
    	<tr>
        	<td colspan="2" style="font-family:Geneva, Arial, Helvetica, sans-serif; font-size:19px; color:#003366; font-weight:bold; padding-bottom:5px; border-bottom:1px solid #999999">
            	SignsLabelsTags Cost Saving Calculator
            </td>
        </tr><tr>
            <td valign="top" style="padding-top:20px">
            <div style="color:#000000; border:0px solid #336666; background:url(uploads/template/calc_bg2.jpg) no-repeat; background-color:#0066CC; padding:5px; width:212px; height:70px; overflow:hidden">
                <table align="center" cellpadding="0" width="100%" style="padding:5px 0 0 2px">
                    <tr>
                        <td align="left" class="headertxt" style="color:#ffffff" nowrap="nowrap">Potential Savings:</td>
                    </tr><tr>
                        <td align="left" class="headertxt" style="color:#ffffff" nowrap="nowrap"><span id="ourRate"> </span>% or $<span id="youSave"> </span> /month</td>
                    </tr><tr>
                        <td align="left" class="normtxt2" style="color:#ffffff; font-weight:800" nowrap>compared to your current plan.</td>
                    </tr>
                </table> 
            </div>    
            </td><td width="270" valign="top" class="normtxt" style="padding:33px 0 0 10px; color:#777777; line-height:17px; font-weight:700">        
                Want to learn more?<BR />
                Call a sales advisor<BR />
                1-800-MAT-DADY
            </td>     
    	</tr>
    </table><BR />
    <table width="450" align="center" bgcolor="#ffffff">    
        <tr>
        	<td align="left" class="headertxt" style="color:#333333; border-bottom:1px solid #666">
            	Detailed Summary
            </td>
        </tr><tr>
            <td align="left" nowrap="nowrap" class="normtxt" style="color:#666666">
            	<font color="#003366" style="font-weight:800">Your current plan:</font><BR />
                <span id="labelpermonth"> </span> (labels/month) x <span id="tcost"> </span> (avg cost/ft) = $<span id="othercost"> </span> /month<BR />
            </td>
        </tr><Tr>
        	<td align="right" class="normtxt2"><BR /><BR /><a href="getSave.html">Try Again</a></td>
        </Tr>
    </table>
</div>
<div id="getform" style="display:block; visibility:visible">
    <table width="450">
    	<tr>
        	<td style="font-family:Geneva, Arial, Helvetica, sans-serif; font-size:19px; color:#003366; font-weight:bold; padding-bottom:5px; border-bottom:1px solid #999999">
            	SignsLabelsTags Cost Saving Calculator
            </td>
        </tr><tr>
        	<td style="color:#999999; font-weight:600; line-height:16px; padding:10px 0 10px 0" class="normtxt2" align="left">
            	<img src="/uploads/product/calc_pix.jpg" align="left" />The SignsLabelsTags low price of color prints makes it more affordable to print color everyday.  Tell us what you pay today and compare your current per-page prices with one of the SignsLabelsTags flexible pricing plans.  Find out how much you could save printing color everyday.
            </td>
        </tr><tr>
        	<td style="font-family:Geneva, Arial, Helvetica, sans-serif; font-size:18px; color:#0d4f92; font-weight:300; padding-bottom:5px">
            	Tell us a bit about your current monthly usage:
            </td>
        </tr>
    </table>
    <form name="getsave" id="getsave">
    <div style="color:#000000; border:0px solid #336666; background:url(uploads/template/calc_bg.jpg) no-repeat; background-color:#0066CC; padding:10px; width:430px; height:257px; overflow:hidden">
    <table width="450" cellpadding="0" border="0">  
        <tr>
            <td align="left" nowrap="nowrap" class="normtxt" style="color:#e0e0e0; font-weight:600; padding-left:15px">
            	<div style="height:8px"> </div>
                <div style="margin-bottom:7px">Average monthly print volume:</div>
                <select name="no_of_label">
                    <option value=""><- Select -></option>
                    <option value="300">300 labels</option>
                    <option value="400">400 labels</option>
                    <option value="500">500 labels</option>
                    <option value="600">600 labels</option>
                    <option value="700">700 labels</option>
                    <option value="800">800 labels</option>
                    <option value="900">900 labels</option>
                    <option value="1000">1000 labels</option>
                    <option value="2000">2000 labels</option>
                    <option value="3000">3000 labels</option>
                </select>
            </td>
        </tr><tr>    
            <td align="left" nowrap="nowrap" class="normtxt" style="color:#e0e0e0; font-weight:600; padding-left:15px">
            	<BR /><div style="margin-bottom:7px">Price you currently pay for each roll:</div>
                <input type="text" name="cost_per_roll" maxlength="7" size="7" />
            </td>
        </tr><tr>
            <td align="left" nowrap="nowrap" class="normtxt" style="color:#e0e0e0; font-weight:600; padding-left:15px">
            	<BR /><div style="margin-bottom:7px">Length of each roll (feet):</div>
                <select name="length_per_roll">
                    <option value=""><- Select -></option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="150">150</option>
                </select>
            </td>
        </tr><tr>
            <td align="left" nowrap="nowrap" class="normtxt" style="color:#e0e0e0; font-weight:600; padding-left:15px">
            	<BR /><div style="margin-bottom:7px">Width of the roll (inch):</div>
                <select name="roll_width">
                    <option value=""><- Select -></option>
                    <option value="1">1&quot;</option>
                    <option value="2">2&quot;</option>
                    <option value="3">3&quot;</option>
                    <option value="4">4&quot;</option>
                </select><BR /><BR />
            </td>
        </tr>
    </table>
    </div>
    <div style="height:5px"> </div>
    <table width="450" align="center" cellpadding="0" cellspacing="0"><tr><td width="100%" align="right">
        <input type="button" class="btn" value="Get Result" style="padding:2px" onClick="getValidate();" onMouseOver="this.className='btn btnhov'" onMouseOut="this.className='btn'" />
    </td></tr></table> 
    </form>
</div>    
</td></tr></table>
</body>
</html>

Above is the whole script, please have a look and help pointing out what am I missing or screwing up here. Thanks!
 
Upvote 0 Downvote
Hi

You have extra "[tt], false);[/tt]" at the end of line 247 :
Code: 
[COLOR=white gray] 243 [/color]                                            return true;
[COLOR=white gray] 244 [/color]                                        }
[COLOR=white gray] 245 [/color]                                    }
[COLOR=white gray] 246 [/color]                                );
[COLOR=red gray] 247 [/color]                    }[s][red], false);[/red][/s]
[COLOR=white gray] 248 [/color]                </script>
[COLOR=white gray] 249 [/color]            </td>     
[COLOR=white gray] 250 [/color]        </tr>
[COLOR=white gray] 251 [/color]    </table>

Feherke.
 
Upvote 0 Downvote
you're right, removed that false made the function proceed to the next step. However, the progress bar doesn't display at all. Instead, I have a blank page for a moment then the result appeared. What particular hidden or visible style that prohibit the progress bar to display, can you tell?
 
Upvote 0 Downvote
Nevermind, it shown now. I forgot a line that hide the span ID of the progress bar. Fixed now! thank you for the help. You've always come through for me. Keep up the good work! :-)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
coldbohemia
  • Locked
  • Question Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
902
coldbohemia
coldbohemia
jomat
  • Locked
  • Question Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb
Rayj0000
  • Locked
  • Question Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
855
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top