Monday, February 28, 2011

Using frameset and frames to create a header, table of contents and a content pane.

Using frameset and frames to create a header, table of contents and a content pane.

-------------------------------------------------
header
-------------------------------------------------
table of| content area
contents|
-------------------------------------------------


use the below html code to create a header, table of contents and a content pane. using frames is ideal as the the applications urls are displayed in the table of contents part and when clicked the application content will be displayed in the content area.

in the toc jsp wherever the application links are being displayed use the
<a href="#" target="contents"> This means open the url in the area specified by 'target' attribute which is our contents section.

<html>
<head>
<title>My Portal</title>
</head>
<FRAMESET ROWS="10%, *" border=0 spacing=0 frameborder=0 framespacing=0>
<FRAME SRC="<%=request.getContextPath()%>/header" NAME=TITLE border=0 marginwidth=0 marginheight=0 spacing=0 frameborder=0 framespacing=0/>
<FRAMESET ROWS="50%" COLS="18%,*" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
<FRAME SRC="<%=request.getContextPath()%>/toc" NAME=toc border=0 marginwidth=0 marginheight=0 spacing=0 frameborder=0 framespacing=0/>
<FRAME SRC="<%=request.getContextPath()%>/contents" NAME=contents border=0 marginwidth=0 marginheight=0 spacing=0 frameborder=0 framespacing=0/>
</FRAMESET>
</FRAMESET>
</html>

Refresh entire page content when using nested frames or framesets

In order to refresh the entire page contents when using nested frames or framesets i.e the equivalent of pressing F5 button in the browser, just add the below line to any html control like anchor, button, etc. This line of code can be at any nested frame level and it will refresh the entire page contents.

top.location.href=top.location.href


That line is cross browser compatible. Tested in IE6 and Firefox 3.6

<input type="button" value="Refresh" onclick="top.location.href=top.location.href"/>