Solved

Setting form target to right frame

Posted on 2008-10-09
7
824 Views
Last Modified: 2011-10-19
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
Comment
Question by:patilarvindg
  • 5
  • 2
7 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 22684915
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
 

Author Comment

by:patilarvindg
ID: 22688304
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
 

Author Comment

by:patilarvindg
ID: 22688326
See shot attached
Firefox.JPG
Firefox.JPG
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:patilarvindg
ID: 22688336
IE6 screen shot
IE6.JPG
0
 

Author Comment

by:patilarvindg
ID: 22688606
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22688673
Great
0
 

Author Closing Comment

by:patilarvindg
ID: 31504787
Thnaks.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is the first of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article explains our test automation goals. Then rationale is given for the tools we use to a…
Java functions are among the best things for programmers to work with as Java sites can be very easy to read and prepare. Java especially simplifies many processes in the coding industry as it helps integrate many forms of technology and different d…
Viewers learn how to read error messages and identify possible mistakes that could cause hours of frustration. Coding is as much about debugging your code as it is about writing it. Define Error Message: Line Numbers: Type of Error: Break Down…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now