Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 861
  • Last Modified:

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

0
patilarvindg
Asked:
patilarvindg
  • 5
  • 2
1 Solution
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now