Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Tabbed Frame

Status
Not open for further replies.
Joelo

Joelo

MIS
Joined
Sep 27, 2003
Messages
61
I would like to create my ASP page with 5 tabbed frames.... Just like the one in this forum

Please could anybody help me out on how to do it.


Thanks for your help in advance.
 
Sort by date Sort by votes
The tabs here are simply images hat are links. Eachpage has the same structure for the header and so as you click on the images it appears that your tabbing, but basically your just clicking a link for a new page.

-T

01000111 01101111 01110100 00100000 01000011 01101111 01100110 01100110 01100101 01100101 00111111
The never-completed website:
 
Upvote 0 Downvote
How can I do Like wise in my ASP page......Is it possible?
 
Upvote 0 Downvote
The easiest way would be to just createthe images for your tabs, write the header for the page, then include that header in each page, displaying the tabs dependant on which page it is included in.
Something like this:
Code: 
[b]tabheader.inc[/b]
Function ShowTabs(pagename)
   Response.Write "<div>"

   'select case dependant on the pagename that was passed
   'fr each page show the appropriate selected image and then linked deselected images for others
   Select Case pagename
      Case "forum.asp"
         %>
         <img src="images/forum_selected.gif" />
         <a href="search.asp"><img src="images/search.gif" /></a>
         <a href="faqs.asp"><img src="images/faqs.gif" /></a>
         <A href="links.asp"><img src="images/links.gif" /></a>
         <%
      Case "search.asp"
         %>
         <a href="forum.asp"><img src="images/forum.gif" /></a>
         <img src="images/search_selected.gif" />
         <a href="faqs.asp"><img src="images/faqs.gif" /></a>
         <A href="links.asp"><img src="images/links.gif" /></a>
         <%
      Case "faqs.asp"
         'etc
      Case "links.asp"
         'etc
   End Select
End Function

Then you would just include this file in each file you want to display the bar in and call the function with the page name as an argument.

This is a little simplified and depends kind of heavily on your image creation skills, another possibility would be to simply make it in CSS:
Code: 
[b]css portion[/b]
.tab_header{
   border-bottom: 4px solid #666699;
}
.tab{
   background-color: #ddddee;
   color: #666699;
   margin-left: 3px;
   margin-right: 3px;
   border-color: #666699;
   border-width: 1px;
   padding:2px;
}
.tab_selected{
   background-color: #666699;
   color: #ffffff;
   margin-left: 3px;
   margin-right: 3px;
   padding:2px;
}

[b]The include written with CSS instead of images[/b]
Function ShowTabs(pagename)
   Response.Write "<div>"

   'select case dependant on the pagename that was passed
   'fr each page show the appropriate selected image and then linked deselected images for others
   Select Case pagename
      Case "forum.asp"
         %>
         <div class="tab_header">
         <span class="tab_selected">Forum</span>
         <a class="tab" href="search.asp">Search</a>
         <a class="tab" href="search.asp">Faqs</a>
         <a class="tab" href="search.asp">Links</a>
         </div>
         <%
      Case "search.asp"
         %>
         <div class="tab_header">
         <a class="tab" href="forum.asp">Forum</a>
         <span class="tab_selected">Search</span>
         <a class="tab" href="search.asp">Faqs</a>
         <a class="tab" href="search.asp">Links</a>
         </div>
         <%
      Case "faqs.asp"
         'etc
      Case "links.asp"
         'etc
   End Select
End Function

I threw together a quick sample of the CSS method because I wanted to see how it looked, I think it's actually a nice little bar for being written in les than 5 minutes :P
Code: 
[b]Name this whatever you want, just a sample[/b]
<html><style>

.tab_header{
   border-bottom: 4px solid #666699;
}
.tab{
   background-color: #ddddee;
   color: #666699;
   margin-left: 3px;
   margin-right: 3px;
   border-color: #666699;
   border-width: 1px;
   padding:2px;
}
.tab_selected{
   background-color: #666699;
   color: #ffffff;
   margin-left: 3px;
   margin-right: 3px;
   padding:2px;
}

</style><body>
<%
Dim addy
addy = Request.ServerVariables("SCRIPT_NAME") & "?page="

Select Case Request.QueryString("page")
	Case "forum"
	%>
	<div class="tab_header">
		<span class="tab_selected">Forum</span>
		<a class="tab" href="<%=addy%>search">Search</a>
		<a class="tab" href="<%=addy%>faqs">FAQs</a>
		<a class="tab" href="<%=addy%>links">Links</a>
	</div>
	<%		
	Case "search"
	%>
	<div class="tab_header">
		<a class="tab" href="<%=addy%>forum">Forum</a>
		<span class="tab_selected">Search</span>
		<a class="tab" href="<%=addy%>faqs">FAQs</a>
		<a class="tab" href="<%=addy%>links">Links</a>
	</div>
	<%		
	Case "faqs"
	%>
	<div class="tab_header">
		<a class="tab" href="<%=addy%>forum">Forum</a>
		<a class="tab" href="<%=addy%>search">Search</a>
		<span class="tab_selected">FAQs</span>
		<a class="tab" href="<%=addy%>links">Links</a>
	</div>
	<%		
	Case "links"
	%>
	<div class="tab_header">
		<a class="tab" href="<%=addy%>forum">Forum</a>
		<a class="tab" href="<%=addy%>search">Search</a>
		<a class="tab" href="<%=addy%>faqs">FAQs</a>
		<span class="tab_selected">Links</span>
	</div>
	<%		
	Case Else
	%>
	<div class="tab_header">
		<span class="tab_selected">Forum</span>
		<a class="tab" href="<%=addy%>search">Search</a>
		<a class="tab" href="<%=addy%>faqs">FAQs</a>
		<a class="tab" href="<%=addy%>links">Links</a>
	</div>
	<%		
End Select
%>

</body></html>

Hope that helps,
-T

01000111 01101111 01110100 00100000 01000011 01101111 01100110 01100110 01100101 01100101 00111111
The never-completed website:
 
Upvote 0 Downvote
Please is it possible to have these 5 tabbed frames display list of info related to the main asp page?
 
Upvote 0 Downvote
?
These don't create tabbed frames, each page is seperate and they would just include the file that displays the tab bar. that way you could just alter the tabv bar and make as many or few links as you wanted, or change the links in one place so that they change across all your pages.

-T

01000111 01101111 01110100 00100000 01000011 01101111 01100110 01100110 01100101 01100101 00111111
The never-completed website:
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

saltym
  • Locked
  • Question Question
asp frames and Firefox
Replies
4
Views
310
saltym
saltym
huobaji
  • Locked
  • Question Question
pass link to a frame
Replies
3
Views
153
tsuji
tsuji
jon24422531
  • Locked
  • Question Question
Open an Emailed link in a Frame
Replies
2
Views
119
jon24422531
jon24422531
lexx2gee
  • Locked
  • Question Question
Redirecting from an I frame
Replies
1
Views
147
nickdel
nickdel
JackD4ME
  • Locked
  • Question Question
Tabbed Browsing Cookies
Replies
1
Views
53
rac2
rac2

Part and Inventory Search

Sponsor

Back
Top