Link to home
Start Free TrialLog in
Avatar of sammySeltzer
sammySeltzerFlag for United States of America

asked on

Adding menu page to existing page

Hello all,

Please take a look at the link below:

http://keniginc.com/frtop.asp

You can see from this link that there are 3 pages within this file (code is attached below).

The first page called displays tabbed control starting with General Info on left and ending with Project Estimates on far right.

The second page called frcont01.htm ("left" frame) contains links and displays information on the left side of the screen.

The third page called main.htm ("space" frame) is the display window.

When you click on any of the tabbed controls above the data displays in the "space" frame.

When you click on any of the links on the "left" frame, details display in the "space" frame - hence it is the display window.

What I am lacking now, and I need your help on this, is to add another page that will be on top of the tabbed controls.

This page will display pulldown menus.

So the layout will be thus:

------------------Pulldown menu ppage------------------

----------------Tabbed controls page---------------------

|left frame  (on left) |       "space" frame (on right)|
|                             |                                         |
|                             |                                         |
|                             |                                         |

Here is the code that does all of the stuff I described above except, it doesn't have the pulldown menu page.

Please let me know if any further info/explanation is needed.

Thanks in advance.

<!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" xml:lang="en" lang="en">
<head>
<title>Transportation Planning</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">

/******************************************************************************
* Styles for the tabbed displays.                                             *
******************************************************************************/

/*-----------------------------------------------------------------------------
  Note: The border-radius property is a proposed feature for CSS3 which creates
        rounded corners. Mozilla/Netscape browsers currently support this
        feature via the proprietary -moz-border-radius property. Both are
        defined here. Browsers that support neither should simply ignore them.
-----------------------------------------------------------------------------*/

div.tabBox {}

div.tabArea {
  font-size: 80%;
  font-weight: bold;
  padding: 0px 0px 3px 0px;
}

a.tab {
  background-color: beige;
  border: 2px solid #000000;
  border-bottom-width: 0px;
  border-color: #f0d0ff #b090e0 #b090e0 #f0d0ff;
  -moz-border-radius: .75em .75em 0em 0em;
  border-radius-topleft: .75em;
  border-radius-topright: .75em;
  padding: 2px 1em 2px 1em;
  position: relative;
  text-decoration: none;
  top: 0px;
  z-index: 100;
}

a.tab, a.tab:visited {
  color: #8060b0;
}

a.tab:hover {
  background-color: #a080d0;
  border-color: #c0a0f0 #8060b0 #8060b0 #c0a0f0;
  color: #ffe0ff;
}

a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
  background-color: #9070c0;
  border-color: #b090e0 #7050a0 #7050a0 #b090e0;
  color: #ffe0ff;
}

a.tab.activeTab {
  padding-bottom: 4px;
  top: 1px;
  z-index: 102;
}

div.tabMain {
  background-color: #9070c0;
  border: 2px solid #000000;
  border-color: #b090e0 #7050a0 #7050a0 #b090e0;
  -moz-border-radius: 0em .5em .5em 0em;
  border-radius-topright: .5em;
  border-radius-bottomright: .5em;
  padding: .5em;
  position: relative;
  z-index: 101;
}

div.tabIframeWrapper {
  width: 100%;
}

iframe.tabContent {
  background-color: #9070c0;
  border: 1px solid #000000;
  border-color: #7050a0 #b090e0 #b090e0 #7050a0;
  width: 100%;
  height: 1ex;
}

/******************************************************************************
* Additional styles.                                                          *
******************************************************************************/

h4#title {
  background-color: #503080;
  border: 1px solid #000000;
  border-color: #7050a0 #b090e0 #b090e0 #7050a0;
  color: #d0b0ff;
  font-weight: bold;
  margin-top: 0em;
  margin-bottom: .5em;
  padding: 2px .5em 2px .5em;
}

</style>
</head>
<body bgcolor="beige">
<div class="tabBox" style="float:right;">
  <div class="tabArea" nowrap>
    <a class="tab" href="genInfo.asp" target="space">General Info</a>
    <a class="tab" href="Funding.asp" target="space">Funding</a>
    <a class="tab" href="ProjectBudget.asp" target="space">Project Budget</a>
    <a class="tab" href="Contracts.asp" target="space">Contracts</a>
    <a class="tab" href="PMExpenditure.asp" target="space">PM Expenditure</a>
    <a class="tab" href="SubProjects.asp" target="space">Sub-Projects</a>
    <a class="tab" href="Issues.asp" target="space">Issues</a>
    <a class="tab" href="ProjectEstimates.asp" target="space">Project Estimates</a>
  </div>
  <div class="tabMain">
    <h4 id="title">Transportion Planning</h4>
  </div>
</div>
<div width="100%">
<iframe id="left" name="left" width="50%" height="90%"
        src="frcont01.htm" align=left style="top:0;"></iframe>
<iframe id="space" name="space" width="50%" height="90%"
        src="main.htm" align=right style="top:0;"></iframe>
</div>

</body>
</html>
Avatar of rdivilbiss
rdivilbiss
Flag of United States of America image

You need to switch from iframes, to frames

<frameset rows="64,*">
      <frame name="top" scrolling="no" noresize target="contents" src="topmenu.htm">
      <frameset cols="150,*">
            <frame name="left" target="main" src="frcont01.htm">
            <frame name="main" src="main.htm">
      </frameset>
</frameset>
Avatar of Jimmy_Lau
Jimmy_Lau

You can use frames with your current page. Although I would follow rdivilbiss idea and use pure frames instead of iframes, since I dont want to mess with your code, lets try a hybrid and use both.

Create a new page and copy the following code:

 <html>
<head>
<title>Your Title Here</title>
</head>
<frameset rows="*,360">
      <frame name="main" src="new_page.htm">
      <frame name="footer" src="yourupperpagehere.htm">
      <noframes>
      <body>

      <p>This page uses frames, but your browser doesn't support them.</p>

      </body>
      </noframes>
</frameset>
</html>


Just replace yourupperpagehere.htm with your page, that would be "frtop.asp"  (or http://keniginc.com/frtop.asp if its a different domain).
Do the same with new_page.htm which would be page that holds the pulldown menues.
Avatar of sammySeltzer

ASKER

I  was using frames before, then I switched to iframes.

The reason I switched to iframes was because I was having a hell of a time passing values from the "left" frame to the tabbed controls (frtop.asp).

Someone advised me to switch to iframes so he could help me implement that task.

I did and he "disappeared"

I guess switching back won't hurt.

Can I get any of you guy's assistance with this?

I will increase the points, that's not the problem.
Passing variables between frames shouldn't be a problem.  And of course we will help.

You can skip frames altogether and use divides.

The layout you are after will be relatively simple using divides.  Are you using any server side script?

Rod
hi Rod,

sorry to sound dumb but I have not used divides before.

Yes, I am using server side code.

Please take a look at the original one I had with frames.

http://keniginc.com/project_tracking/frameset.htm

From the menu, mouse over INPUT menu, then mouse over Projects then click on Project Tracking...

A dropdown menu appears on the "left" frame.

Select any option from the dropdown menu, links ( some several links) appear at the bottom of the same "left" frame.

Click on any of the links, details of the that recordID is displayed on the display window called "space" frame.

Now comes my big headache.

If you click on any of the tabbed controls, I will like the some data related to that recordID or any recordID on the displayed links to display on of the tabbed controls.

For this to work, I have got to find a way to pass an Id from the "left" frame to any of the tabbed controls.

I am really stumped there.

I really don't know how to approach it so far.

Your help will indeed be appreciated.

Looking at it....will take some time.
I believe it.

My biggest area of need so far is to be able to pass values (ID) from "left" frame to any of the tabbed pages.

Thanks Rod
Based on what you have and what you are trying to accomplish, I would make the links target the parent (_top or _parent) page and make all the pages ASP.

Then: all pages have access to projectNumber or any other parameters you are passing.

So. In you tab control page you can do this....

<div class="tabBox" style="float:right;">
  <div class="tabArea" nowrap>
    <a class="tab" target="space">General Info</a>
    <a class="tab" href="simulation.htm?projectNumber=<%=request.querystring("projectNumber")%>" target="space">Funding</a>

In your frames page:

<iframe id="navig" name="navig" src="HorizontalFramesNavigation.htm?projectNumber=<%=request.querystring("projectNumber")%>" style="width:100%;height:45px; scrollbar-face-color:beige; scrolling:no;"></iframe>
<iframe name="topright" id="topright" src="frtop.asp?projectNumber=<%=request.querystring("projectNumber")%>" style="width:100%;height:65px;"></iframe>
<iframe id="left" name="left" src="frcont01.htm?projectNumber=<%=request.querystring("projectNumber")%>" style="float:left;width:350px;height:450px"></iframe>
<div style="float:right;width:400px;height:450px">
<iframe name="space" id="space" src="main.htm?projectNumber=<%=request.querystring("projectNumber")%>" style="width:400px;height:450px"></iframe>

It is going to require some rewriting on some of the pages, but I can't think of a simpler way at this point.

The good news is if all the links are targeting the _top page your navigation is simpler.  There is not enough information in the other frames to really slow down the page reloads.

Rod
Sorry Rod, we got kicked out of the office by security. They do that every night after 5pm.

You said:
>>Based on what you have and what you are trying to accomplish, I would make the links target >>the parent (_top or _parent) page and make all the pages ASP.

Yes, all the pages are going to be asp, no doubt.

I am just trying to establish a process flow.

For instance, you indicated that the links should be made to target the parent.

Which links are we talking about?

The tabbed pages links or the links on "left" frame dropdowns?

You said:
>>So. In you tab control page you can do this....

<div class="tabBox" style="float:right;">
  <div class="tabArea" nowrap>
    <a class="tab" target="space">General Info</a>
    <a class="tab" href="simulation.htm?projectNumber=<%=request.querystring("projectNumber")%>" target="space">Funding</a>


Ok, I understand that one now.

You said:

>>In your frames page:

....

Why are we using querystring in those frames also?

I am not asking this because you are wrong; I am asking because I don't understand why we are doing it.

Just a few clarifications, when you select an option from the dropdown in the "left" frame, and the records with links are displayed at the bottom of the page, if you click on any of the links, the details are displayed in the "space" (main.htm) frame. This is the bit of code that does that:


<div align="left">
<table>
<tr>
<td><%=RS("projectNumber")%></td><td><table width='1' border=1 bordercolor='silver' cellspacing='0' cellpadding=0><tr><td width='1'>|</td></tr></table><td><div align="left"><a style='text-decoration:none' target="space" class="more" href="genInfo.asp?projectNumber=<%=RS("ProjectNumber")%>">
<%=RS("projectName")%></a></div></td>
</tr>
</table>

Obviously, this is not all of it.

Then we use querystring to pick up the value passed to that page.

This is precisely where my head is spinning because I just keep thinking that something similar needs to be done to each of the tab control pages in frtop.asp but I can't think of a way to do that and pass the value as a hidden form because obviously, we don't want the links displayed on "left" frame also.

>>The good news is if all the links are targeting the _top page your navigation is simpler.  There >>is not enough information in the other frames to really slow down the page reloads.

Still confused as to what you mean here, sorry.
hi Rod,

can you please assist me in some aspect of this?

My biggest hangup is the tab control pages.

Thanks, Rod
>Why are we using querystring in those frames also?

"because I was having a hell of a time passing values from the "left" frame to the tabbed controls"

So you have the values you need in the other frames.

Normally when using frames your hyperlink targets a particular frame and does not affect other pages.  Since you need to pass a value to other frames, we can send the value on the querystring to the parent page.

Since the parent page loads the sub pages, each subpage can be called with the querystring values, so the links can be dynamically modified.  This means we end up reloading the parent page and the sub pages on each link, but since your pages are not large, this should not be a noticable problem to a user.

In the frames page, instead of specifying frcont01.htm as one of the subpages you would specify

frcont01.asp?<%=request.querystring%>

In that sub page you can make any hyperlinks dynamic as necessary by

<a href="whatever.asp?projectnumber=<%request.querystring("projectNumber")%>">link</a>.

If we do not send the link with the querystring to the parent page, we can not retrieve it in the sub pages where it is needed.
Thanks for the quick response.

Just before I start to try to implement your suggestion, can you please take one more look at this link:

http://keniginc.com/project_tracking/frameset.htm

From the menu, mouse over INPUT menu, then mouse over Projects then click on Project Tracking...

A dropdown menu appears on the "left" frame.

Select any option from the dropdown menu, links ( some have several links) appear at the bottom of the same "left" frame.

Click on any of the links, details of the that projectNumber is displayed on the display window called "space" frame.

You can see that I have the values that I need.

What I need to know now is that once the "left" frame is populated, and the "space" frame is populated, we would like to be able to click on any of the tabs and have *whatever* ID is in the "space" frame to be accessible by any of the tabs.

I have already changed the pages to asp like you sugggested.

I need serious help with implementing your suggestion.

Thanks for all the assistance.
Hi all,

Is there someone who can assist me with this, please, please?
This is perfectly what I am looking for.

Can I get the source codes, please?

kenny at keniginc dot com.

Thank you so very much
ASKER CERTIFIED SOLUTION
Avatar of rdivilbiss
rdivilbiss
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
top page Q_21387245top.asp

<table border="1" cellpadding="0" style="border-collapse: collapse" width="600" id="table1" bgcolor="#CCCCFF" bordercolor="#800080">
      <tr>
            <td align="center" width="75"><font size="2" color="#800080"><a target="_parent" href="Q_21387245frame.asp?pn=<%=session("pn")%>&tab=1">General</a></font></td>
            <td align="center" width="75"><font size="2" color="#800080"><a target="_parent" href="Q_21387245frame.asp?pn=<%=session("pn")%>&tab=2">Funding</a></font></td>
            <td align="center" width="75"><font size="2" color="#800080"><a target="_parent" href="Q_21387245frame.asp?pn=<%=session("pn")%>&tab=3">Budget</a></font></td>
            <td align="center" width="75"><font size="2" color="#800080"><a target="_parent" href="Q_21387245frame.asp?pn=<%=session("pn")%>&tab=4">Contracts</a></font></td>
            <td align="center" width="75"><font size="2" color="#800080"><a target="_parent" href="Q_21387245frame.asp?pn=<%=session("pn")%>&tab=5">Expenditures</a></font></td>
            <td align="center" width="75"><font size="2" color="#800080"><a target="_parent" href="Q_21387245frame.asp?pn=<%=session("pn")%>&tab=6">Sub Projects</a></font></td>
            <td align="center" width="75"><font size="2" color="#800080"><a target="_parent" href="Q_21387245frame.asp?pn=<%=session("pn")%>&tab=7">Issues</a></font></td>
            <td align="center" width="75"><font size="2" color="#800080"><a target="_parent" href="Q_21387245frame.asp?pn=<%=session("pn")%>&tab=8">Estimates</a></font></td>
      </tr>
</table>
left page = Q_21387245left.asp

<select name="projGroup" onChange="alert('example');">
<OPTION value="3"  >Water & Sewer</OPTION>
<OPTION value="2" SELECTED >Transportation</OPTION>
<OPTION value="7"  >Purchasing</OPTION>
<OPTION value="4"  >PM/CM</OPTION>
<OPTION value="6"  >N/A</OPTION>
<OPTION value="1"  >Facilities</OPTION>
<OPTION value="5"  >ECD</OPTION>
</select>
<b>Project Name</b>+

<p>L001&nbsp;|&nbsp;<a target="_parent" href="Q_21387245frame.asp?pn=L001">Merk\Miles Closure Landfill (Closure)</a></p>
<p>L002&nbsp;|&nbsp;<a target="_parent" href="Q_21387245frame.asp?pn=L002">Morgan Falls Landfill (Closure)</a></p>

right page: Q_21387245right.asp

<%
Dim message

if session("tab")<>"" then
      select case CInt(session("tab"))
            case 2 message="funding"
            case 3 message="budget"
            case 4 message="contracts"
            case 5 message="expenditures"
            case 6 message="sub-projects"
            case 7 message="issues"
            case 8 message="estimates"
            case else message="general"
      end select
end if      
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
</head>

<body>
<% if session("pn")="" then %>
&lt;-- Please select a project
<% else %>
This is the <%=message%> page for project <%=session("pn")%>
<% end if %>
</body>

</html>
wow!!!

amazing fast brain.

Thanks so much for taking the time to do this, thank you.

Do you by chance have Q_21387245frame.asp?

Thank you for all the time you took to do this.
Q_21387245frame.asp

<%
if request.querystring("pn") = "" then
  session("pn")=""
  session("tab")=""
else  
      session("pn")=request.querystring("pn")
      session("tab")=request.querystring("tab")
end if      
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
<!--
#topright {
      position: relative;
      float: left;
      clear: left;
      }
#space {
      position: absolute;
      float: right;
      top:100;
      }      
-->
</style>
</head>
<body>
<iframe id="navig" name="navig" src="Q_21387245nav.asp" width="100%" height="50"></iframe>
<iframe name="topright" id="topright" src="Q_21387245top.asp" width="100%" height="50"></iframe>
<iframe id="left" name="left" src="Q_21387245left.asp" width="45%" height="400"></iframe>
<iframe name="space" id="space" src="Q_21387245right.asp" width="50%" height="400"></iframe>
</body>
</html>
Is this file = Q_21387245frame.asp, same as Q_21387245nav.asp?
No.  Q_21387245nav.asp

<head>
<meta http-equiv="Content-Language" content="en-us">
</head>

<table border="1" cellpadding="2" style="border-collapse: collapse" width="400" id="table1" bordercolor="#000000">
      <tr>
            <td align="center" width="133">Input</td>
            <td align="center" width="133">Update</td>
            <td align="center" width="133">Reports</td>
      </tr>
</table>
Thank you very much, Rod
You're welcome.

You should replace the top two frames with divides.  It will look a lot better.
I know you did mention this earlier in the thread but I still don't know what that is or how to do it.
hi Rod,

I know that I have closed this thread.

However, if you want to continue to assist and you want me to open a new thread, I will but I still some questions as I am putting together the codes you have sent.

For instance, on the link I provided earlier where the sample application I am working is located, if you select an option from the dropdown menu on the "left" frame, and mouse over any of the links displayed on the "frame", you notice that there is a file called genInfo.asp, something like: genInfo.asp?projNumber=L001 or something like that, and if you click on it, it displays more details on "space" frame.

Do I need to copy the code that does this from genInfo.asp to  the  Q_2138724frame.asp?

getInfo.asp would be used for Q_2138724right.asp, but may need slight alterations.  e.g. getInfo.asp is looking for ?projectNumber=L9999

so request.querystring("projectNumber") would be replaced with session("pn").  

or

in the case statement you could call getInfo.asp, (if you call a different page for the different tabs, so indicate in the code.)

if session("tab")<>"" then
      select case CInt(session("tab"))
            case 2 server.execute("getInfo.asp?projectNumber="&session("pn"))
            case 3 server.execute("getInfo.asp?projectNumber="&session("pn"))
            case 4 server.execute("getInfo.asp?projectNumber="&session("pn"))
            case 5 server.execute("getInfo.asp?projectNumber="&session("pn"))
            case 6 server.execute("getInfo.asp?projectNumber="&session("pn"))
            case 7 server.execute("getInfo.asp?projectNumber="&session("pn"))
            case 8 server.execute("getInfo.asp?projectNumber="&session("pn"))
            case else server.execute("getInfo.asp?projectNumber="&session("pn"))
      end select
end if
<%
if request.querystring("pn") = "" then
  session("pn")=""
  session("tab")=""
else  
      session("pn")=request.querystring("pn")
      session("tab")=request.querystring("tab")
end if      
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
<!--
#topright {
      position: relative;
      float: left;
      clear: left;
      }
#space {
      position: absolute;
      float: right;
      top:100;
      }      
-->
</style>
</head>
<body>
<div id="navig"><!-- #include file="Q_21387245nav.asp"--></div>
<div id="topright"><!--#include file="Q_21387245top.asp"--></div>
<iframe id="left" name="left" src="Q_21387245left.asp" width="45%" height="400"></iframe>
<iframe name="space" id="space" src="Q_21387245right.asp" width="50%" height="400"></iframe>
</body>
</html>
I can't explain to you how appreciative I am of your assistance.

I didn't get back to this last night because I wanted to see how far I could go trying to tie all of these together.

I am making some progress but I still have many questions.

As I indicated yesterday, I will have no problem opening up a new thread to continue this discussion if you wish.

First, one of the problems I am having now is making sure that the dropdown on the "left" frame loads on that frame.

Recall that dropdown loads from selecting INPUT -> PRojects -> Project Tracking...

By default, several records appear on "left" frame grayed out.

When you select Project Tracking... from INPUT menu at top of page, you are loading a file called projtracking.asp. This file loads (dropdwon menu) in "left" frame. That is how the .js menu file was designed.

Since I started using the Q_21387245frame.asp with include files, dropdown menu is now loading in a blank window.


There are more issues that I am facing.

Most of them may be tied to this problem. Let's see if this can be resolved first.

Thanks again for your time and expert assistance, Rod
>Since I started using the Q_21387245frame.asp with include files, dropdown menu is now loading in a blank window.

The target for the link from the INPUT menu calling projtracking.asp should be left.

>I will have no problem opening up a new thread to continue this discussion if you wish.

Each question should have its own thread according to the MA.  Follow-ups are always a grey area, but I think we've covered the original questions, and there are other experts here who can help if I'm not around.

I imagine the problems remaining, can be much lowere point questions, but you will have to explain where you are at when you ask the new questions.

Rod
I will do that.
Thanks very much for all the assistance.

When I post it, if you happen to see it and you have time, your assistance will be much appreciated as well.
Of course, but I actually have a few clients (hard to believe) and occasionally won't be around, LOL.