Wrox Programmer Forums

Need to download code?

View our list of code downloads.

| FAQ | Members List | Search | Today's Posts | Mark Forums Read
Classic ASP Basics For beginner programmers starting with "classic" ASP 3, pre-".NET." NOT for ASP.NET 1.0, 1.1, or 2.0
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Classic ASP Basics section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old June 20th, 2008, 04:52 AM
Registered User
 
Join Date: Feb 2007
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default Tabs in classic ASP?

Hi, I'm a total newbie to classic ASP as I'm a .NET developer and have recently started work with classic ASP. I would like to display a lot of information on one page, preferably through using tabs so the user can click between them. I have no idea how to do this in classic ASP, and this example I found was too advanced for me:

http://www.developerfusion.co.uk/show/4403/6/

Can anybody help / post some code if it can be done please?

Thanks
Dan
Reply With Quote
  #2 (permalink)  
Old June 20th, 2008, 02:29 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

Here's a simple-minded demo, all in HTML. You just use ASP code to fill in the content of any of the tab-bodies as desired.

Code:
<HTML> 
<HEAD> 
<STYLE> 
.thead { position: absolute; 
         height: 32; width: 100; 
         top: 80; 
         border-style: solid; border-color: black; 
     border-top-width: 1; border-left-width: 1; border-right-width: 1; border-bottom-width: 0; 
         background-color: lightyellow; 
         text-align: center; 
     z-index: 1; 
       } 
.tbody { position: absolute; 
         height: 400; width: 500; 
         top: 110; left: 20; 
         border-style: solid; border-color: black; 
     border-width: 1; 
         background-color: wheat; 
     visibility: hidden; 
         text-align: center; 
         z-index: 2; 
       } 
</STYLE> 
</HEAD> 
<BODY> 

<DIV style="top: 30; height: 30; left: 20; width: 500;"> 
<CENTER> 
<FORM Name="DummyForm"> 
<INPUT Type=Button Name="Left" Value="<<" DISABLED onClick="move(-1);"> 

<INPUT Type=Button Name="Right" Value=">>" onClick="move(1);"> 
</FORM> 

</CENTER> 
</DIV> 

<DIV ID="TAB1" class="thead" style="left: 20; background-color: wheat; z-index: 3" onClick="show(1);"> 
First 
</DIV> 
<DIV ID="TAB2" class="thead" style="left: 120;" onClick="show(2);"> 
Second 
</DIV> 
<DIV ID="TAB3" class="thead" style="left: 220;" onClick="show(3);"> 
Third 
</DIV> 
<DIV ID="TAB4" class="thead" style="left: 320;" onClick="show(4);"> 
Fourth 
</DIV> 
<DIV ID="TAB5" class="thead" style="left: 420;" onClick="show(5);"> 
Fifth 
</DIV> 
<DIV ID="BODY1" class="tbody" style="visibility: visible;"> 
<P> <P><H1>1 1 1 1</H1> 
</DIV> 
<DIV ID="BODY2" class="tbody"> 
<P> <P><H1>22 22 22</H1> 
</DIV> 
<DIV ID="BODY3" class="tbody"> 
<P> <P><H1>333 333 333</H1> 
</DIV> 
<DIV ID="BODY4" class="tbody"> 
<P> <P><H1>4444 4444</H1> 
</DIV> 
<DIV ID="BODY5" class="tbody"> 
<P> <P><H1>55555555</H1> 
</DIV> 


<SCRIPT Language="JavaScript"> 
var current = 1; 

function move( byWhat ) 
{ 
    current += byWhat; 
    if ( current < 1 ) current = 1; 
    if ( current > 5 ) current = 5; 
    show( current ); 
} 

function show( nwhich ) 
{ 
    current = nwhich; // so that you can mix the two kinds of clicks 
    for ( var dnum = 1; dnum <= 5; ++dnum ) 
    { 
        var dv = document.getElementById("BODY"+dnum); 
        dv.style.visibility = ( dnum == nwhich ? 'visible' : 'hidden' ); 
        var tp = document.getElementById("TAB"+dnum); 
        tp.style.backgroundColor = ( dnum == nwhich ? 'wheat' : 'lightyellow' ); 
    tp.style.zIndex = ( dnum == nwhich ? 3 : 1 ); 
    } 
    document.DummyForm.Left.disabled = ( current == 1 ); 
    document.DummyForm.Right.disabled = ( current == 5 ); 
} 
</SCRIPT> 

</BODY> 
</HTML>
Reply With Quote
  #3 (permalink)  
Old June 20th, 2008, 02:31 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

Incidentally, you *COULD* use this same technique with ASP.NET! Thus getting rid of all the heavyweight crap that the standard .NET tags foist onto you.

And if it's not obvious, you can improve the appearance of this thing tons by using style sheets and/or images for the tab tops.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
ASP Classic ab289 Classic ASP Basics 6 March 10th, 2008 02:53 PM
Threading in Classic ASP pcalixto Classic ASP Basics 2 January 10th, 2008 05:05 PM
Converting Classic Asp to Asp.Net 2.0 vikaspatyal ASP.NET 2.0 Professional 2 October 7th, 2007 06:33 PM
asp.net vs classic asp "URGENT" naeem_ul_hussan Classic ASP Professional 1 August 1st, 2007 03:14 PM
classic asp with asp.net on same iis bostonrose .NET Framework 2.0 6 January 10th, 2007 12:38 PM



All times are GMT -4. The time now is 03:55 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.