patilarvindg
asked on
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,
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 "Hello" </a></li>
<li><a href="hi.htm" target="contentArea">Print "Hi" </a></li>
</ul>
<p> </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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ASKER
IE6 screen shot
IE6.JPG
IE6.JPG
ASKER
Got it working.
Used following style for the page.
<style type="text/css">
html,body { width:100%; height:100%; padding:0px; margin:0px; }
</style>
Used following style for the page.
<style type="text/css">
html,body { width:100%; height:100%; padding:0px; margin:0px; }
</style>
Great
ASKER
Thnaks.
ASKER
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"><
Could you please see what is wrong in it?
Thanks.