Setting form target to right frame

Hi,
I have two frames (left, right). I want to show progress bar popup in the right frame, when I click a link in the left frame. Currently progress bar pop up is appearing in the left frame.
How do I target it to the right frame?

Thanks,
index.html
----------------------------------------------------
<html>
<head>
<title>Progress Bar </title>
</head>
          <frameset cols="15%,85%" frameborder='1'>
               <frame src="./leftFrame.html" name='listArea'>
               <frame src="./hello.htm" name='contentArea'>
          </frameset>
</html>
 
leftFrame.html
------------------------------------------------------------------------
<html>
<style>
<!--
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>
 
<SCRIPT LANGUAGE="JavaScript">
 
// This code controls Progress bar behaviour
 
 window.onload = setupFunc;
 
 function setupFunc() {
   document.getElementsByTagName('body')[0].onclick = clickFunc;
 }
 
 
 function clickFunc(eventData) {
   var clickedElement = (window.event) ? event.srcElement : eventData.target;
   if (clickedElement.tagName.toUpperCase() == 'BUTTON' || clickedElement.tagName.toUpperCase() == 'A' || clickedElement.parentNode.tagName.toUpperCase() == 'A'
     || (clickedElement.tagName.toUpperCase() == 'INPUT' && (clickedElement.type.toUpperCase() == 'BUTTON' || clickedElement.type.toUpperCase() == 'SUBMIT'))) {
     CallJS('Demo()');
   }
 }
 
//Progress Bar script- by Todd King (tking@igpp.ucla.edu)
//Modified by JavaScript Kit for NS6, ability to specify duration
//Visit JavaScript Kit (http://javascriptkit.com) for script
 
var duration=10 // Specify duration of progress bar in seconds
var _progressWidth = 50;	// Display width of progress bar.
 
var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||"
var _progressEnd = 5;
var _progressAt = 0;
 
 
// Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
	// Initialize state variables
	_progressEnd = end;
	_progressAt = 0;
 
	// Move layer to center of window to show
	if (document.all) {	// Internet Explorer
		progress.className = 'show';
		progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
		progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2);
	} else if (document.layers) {	// Netscape
		document.progress.visibility = true;
		document.progress.left = (window.innerWidth/2) - 100+"px";
		document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px";
	} else if (document.getElementById) {	// Netscape 6+
		document.getElementById("progress").className = 'show';
		document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px";
		document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px";
	}
 
	ProgressUpdate();	// Initialize bar
}
 
// Hide the progress layer
function ProgressDestroy() {
	// Move off screen to hide
	if (document.all) {	// Internet Explorer
		progress.className = 'hide';
	} else if (document.layers) {	// Netscape
		document.progress.visibility = false;
	} else if (document.getElementById) {	// Netscape 6+
		document.getElementById("progress").className = 'hide';
	}
}
 
// Increment the progress dialog one step
function ProgressStepIt() {
	_progressAt++;
	if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
	ProgressUpdate();
}
 
// Update the progress dialog with the current state
function ProgressUpdate() {
	var n = (_progressWidth / _progressEnd) * _progressAt;
	if (document.all) {	// Internet Explorer
		var bar = dialog.bar;
 	} else if (document.layers) {	// Netscape
		var bar = document.layers["progress"].document.forms["dialog"].bar;
		n = n * 0.55;	// characters are larger
	} else if (document.getElementById){
                var bar=document.getElementById("bar")
        }
	var temp = _progressBar.substring(0, n);
	bar.value = temp;
}
 
// Demonstrate a use of the progress dialog.
function Demo() {
	ProgressCreate(10);
	window.setTimeout("Click()", 100);
}
 
function Click() {
	if(_progressAt >= _progressEnd) {
		ProgressDestroy();
		return;
	}
	ProgressStepIt();
	window.setTimeout("Click()", (duration-1)*1000/10);
}
 
function CallJS(jsStr) { //v2.0
  return eval(jsStr)
}
 
 
// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
	document.write("<FORM name=dialog id=dialog target=\"contentArea\">");
	document.write("<TABLE border=2  bgcolor=\"#FFFFCC\">");
	document.write("<TR><TD ALIGN=\"center\">");
	document.write("Please wait. Charts are being loaded.<BR>");
	document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\"");
	if(document.all||document.getElementById) 	// Microsoft, NS6
		document.write(" bar.style=\"color:navy;\">");
	else	// Netscape
		document.write(">");
	document.write("</TD></TR>");
	document.write("</TABLE>");
	document.write("</FORM>");
document.write("</span>");
ProgressDestroy();	// Hides
</script>
 
 
 
<body>
 
<ul>
	<li><a href="hello.htm" target="contentArea">Print &quot;Hello&quot; </a></li>
	<li><a href="hi.htm" target="contentArea">Print &quot;Hi&quot; </a></li>
</ul>
<p>&nbsp;</p>
 
</body>
 
</html>
 
 
hello.htm
----------------------------------------------------
<!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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello</title>
<style type="text/css">
.style1 {
	text-align: center;
	font-size: xx-large;
}
</style>
</head>
<body>
<p class="style1">Hello</p>
</body>
</html>
 
 
 
hi.html
---------------------------------------------------
<!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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello</title>
<style type="text/css">
.style1 {
	text-align: center;
	font-size: xx-large;
}
</style>
</head>
<body>
<p class="style1">Hi</p>
</body>
</html>

Open in new window

patilarvindgAsked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
Without changing the script, I could do this.
I think you might want something else
index.html:
<html>
<head>
<title>Progress Bar </title>
</head>
          <frameset cols="15%,85%" frameborder='1'>
               <frame src="./leftFrame.html" name='listArea'>
               <frame src="./content.html" name='contentArea'>
          </frameset>
</html>
 
leftframe.html
 
<html>
 
<SCRIPT LANGUAGE="JavaScript">
 
// This code controls Progress bar behaviour
 
 window.onload = setupFunc;
 
 function setupFunc() {
   document.getElementsByTagName('body')[0].onclick = clickFunc;
 }
 
 
 function clickFunc(eventData) {
   var clickedElement = (window.event) ? event.srcElement : eventData.target;
   if (clickedElement.tagName.toUpperCase() == 'BUTTON' || clickedElement.tagName.toUpperCase() == 'A' || clickedElement.parentNode.tagName.toUpperCase() == 'A'
     || (clickedElement.tagName.toUpperCase() == 'INPUT' && (clickedElement.type.toUpperCase() == 'BUTTON' || clickedElement.type.toUpperCase() == 'SUBMIT'))) {
     top.contentArea.CallJS('Demo()');
   }
 }
 
</script>
 
 
 
<body>
 
<ul>
        <li><a href="hello.html" target="contentAreaIframe">Print &quot;Hello&quot; </a></li>
        <li><a href="hi.html" target="contentAreaIframe">Print &quot;Hi&quot; </a></li>
</ul>
<p> </p>
 
</body>
 
</html>
 
 
content.html
 
<!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>
<style>
<!--
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello</title>
<script>
//Progress Bar script- by Todd King (tking@igpp.ucla.edu)
//Modified by JavaScript Kit for NS6, ability to specify duration
//Visit JavaScript Kit (http://javascriptkit.com) for script
 
var duration=10 // Specify duration of progress bar in seconds
var _progressWidth = 50;        // Display width of progress bar.
 
var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||"
var _progressEnd = 5;
var _progressAt = 0;
 
 
// Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
        // Initialize state variables
        _progressEnd = end;
        _progressAt = 0;
 
        // Move layer to center of window to show
        if (document.all) {     // Internet Explorer
                progress.className = 'show';
                progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
                progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2);
        } else if (document.layers) {   // Netscape
                document.progress.visibility = true;
                document.progress.left = (window.innerWidth/2) - 100+"px";
                document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px";
        } else if (document.getElementById) {   // Netscape 6+
                document.getElementById("progress").className = 'show';
                document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px";
                document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px";
        }
 
        ProgressUpdate();       // Initialize bar
}
 
// Hide the progress layer
function ProgressDestroy() {
        // Move off screen to hide
        if (document.all) {     // Internet Explorer
                progress.className = 'hide';
        } else if (document.layers) {   // Netscape
                document.progress.visibility = false;
        } else if (document.getElementById) {   // Netscape 6+
                document.getElementById("progress").className = 'hide';
        }
}
 
// Increment the progress dialog one step
function ProgressStepIt() {
        _progressAt++;
        if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
        ProgressUpdate();
}
 
// Update the progress dialog with the current state
function ProgressUpdate() {
        var n = (_progressWidth / _progressEnd) * _progressAt;
        if (document.all) {     // Internet Explorer
                var bar = dialog.bar;
        } else if (document.layers) {   // Netscape
                var bar = document.layers["progress"].document.forms["dialog"].bar;
                n = n * 0.55;   // characters are larger
        } else if (document.getElementById){
                var bar=document.getElementById("bar")
        }
        var temp = _progressBar.substring(0, n);
        bar.value = temp;
}
 
// Demonstrate a use of the progress dialog.
function Demo() {
        ProgressCreate(10);
        window.setTimeout("Click()", 100);
}
 
function Click() {
        if(_progressAt >= _progressEnd) {
                ProgressDestroy();
                return;
        }
        ProgressStepIt();
        window.setTimeout("Click()", (duration-1)*1000/10);
}
 
function CallJS(jsStr) { //v2.0
  return eval(jsStr)
}
 
 
// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
        document.write("<FORM name=dialog id=dialog target=\"contentArea\">");
        document.write("<TABLE border=2  bgcolor=\"#FFFFCC\">");
        document.write("<TR><TD ALIGN=\"center\">");
        document.write("Please wait. Charts are being loaded.<BR>");
        document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\"");
        if(document.all||document.getElementById)       // Microsoft, NS6
                document.write(" bar.style=\"color:navy;\">");
        else    // Netscape
                document.write(">");
        document.write("</TD></TR>");
        document.write("</TABLE>");
        document.write("</FORM>");
document.write("</span>");
ProgressDestroy();      // Hides
 
</script>
<style type="text/css">
.style1 {
        text-align: center;
        font-size: xx-large;
}
</style>
</head>
<body>
<iframe style="width:100%; height:100%" name="contentAreaIframe"></iframe>
</body>
</html>

Open in new window

0
 
patilarvindgAuthor Commented:
Hi mplungjan:

Thanks for your response.
I am still having some difficulty in showing the content in the right frame:

1. In IE browser content of the frame is cutting from the top and the progress bar is also cutting from the top. (Please se attached screen shots)

2. In Firefox, a frame with 100% width and ~20% height is appearing with the frame border.
I want frame with 100% height and without the border. (Please see attached screen shot)
I have Iframe defined with 100% height.
<iframe style="width:100%; height:100%" name="contentAreaIframe"></iframe>

Could you please see what is wrong in it?
 
Thanks.
0
 
patilarvindgAuthor Commented:
See shot attached
Firefox.JPG
Firefox.JPG
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
patilarvindgAuthor Commented:
IE6 screen shot
IE6.JPG
0
 
patilarvindgAuthor Commented:
Got it working.
Used following style for the page.
<style type="text/css">
html,body { width:100%; height:100%; padding:0px; margin:0px; }
</style>
0
 
Michel PlungjanIT ExpertCommented:
Great
0
 
patilarvindgAuthor Commented:
Thnaks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.