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!

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

Sheets, like in Excel 1

Status
Not open for further replies.

enemigo

Programmer
Jul 13, 2001
13
NO
Anyone know if it's possible to create sheets on a webpage, like in Excel. You know, the tabs at the bottom... With js or asp?

Thnx
Knut
 
try using this in ie5+ or ns6 and youll see how you can do it with javascript.

you should be able to apply these principles to your problem

good luck

rob

Code:
<html>
<head><title>sheets</title>
</head>

<body>
<div id=&quot;sheet1&quot; style=&quot;position:absolute; left:20px; top:40px; width:300px; height:300px; border:1px solid #000000;&quot;><br>Sheet One</div>
<div id=&quot;sheet2&quot; style=&quot;position:absolute; left:20px; top:40px; width:300px; height:300px; border:1px solid #000000; background-color:#aaaaaa; visibility:hidden;&quot;><br>Sheet Two</div>
<div id=&quot;tab1&quot; style=&quot;position:absolute; left:20px; top:10px; width:150px; height:30px; border:1px solid #ff0000; cursor:hand;&quot; onclick=&quot;document.getElementById('sheet2').style.visibility='hidden'; document.getElementById('sheet1').style.visibility='visible';&quot;>Tab One</div>
<div id=&quot;tab2&quot; style=&quot;position:absolute; left:170px; top:10px; width:150px; height:30px; border:1px solid #ff0000; cursor:hand;&quot; onclick=&quot;document.getElementById('sheet1').style.visibility='hidden'; document.getElementById('sheet2').style.visibility='visible';&quot;>Tab Two</div>

</body>
</html>
 
crazyboy - that's great!

Now, all I've got to do is figure out a use for it :)

Hmmm - maybe I could set up a site selling books ...
One by one, the penguins steal my sanity. X-)
 
Is it possible to show a different website in each of the sheets? I'mean, can I show altavista.com on one sheet and yahoo.com on the other?

K
 
Hmm now your getting slightly more tricky but the answer is stil yes. If you stick an iframe into each of the divs and point them at the relevent pages with a bit of luck......

I modified the code i gave you a bit. Basically the divs are bigger and ive added iframe or inline frame tags. These work like normal frames except in the position you place them. try the new code below in ie5+ or ns6 and you'll see what i mean.

hope this helps

rob
Code:
<html>
<head><title>sheets</title>
</head>

<body>
<div id=&quot;sheet1&quot; style=&quot;position:absolute; left:20px; top:40px; width:800px; height:600px; border:1px solid #000000;&quot;><iframe name=&quot;altavista&quot; src=&quot;[URL unfurl="true"]http://www.altavista.com&quot;[/URL] width=&quot;800&quot; hight=&quot;600&quot;>some comment for version 4 browsers</iframe></div>
<div id=&quot;sheet2&quot; style=&quot;position:absolute; left:20px; top:40px; width:800px; height:600px; border:1px solid #000000; background-color:#aaaaaa; visibility:hidden;&quot;><iframe name=&quot;yahoo&quot; src=&quot;[URL unfurl="true"]http://www.yahoo.com&quot;[/URL] width=&quot;800&quot; height=&quot;600&quot;>some comment here for version 4 browsers like y dont you go and get a better one!!</iframe></div>
<div id=&quot;tab1&quot; style=&quot;position:absolute; left:20px; top:10px; width:150px; height:30px; border:1px solid #ff0000; cursor:hand;&quot; onclick=&quot;document.getElementById('sheet2').style.visibility='hidden'; document.getElementById('sheet1').style.visibility='visible';&quot;>Tab One</div>
<div id=&quot;tab2&quot; style=&quot;position:absolute; left:170px; top:10px; width:150px; height:30px; border:1px solid #ff0000; cursor:hand;&quot; onclick=&quot;document.getElementById('sheet1').style.visibility='hidden'; document.getElementById('sheet2').style.visibility='visible';&quot;>Tab Two</div>

</body>
</html>
 
Thanks for great help!!

Naturally, I've encountered a new problem. The sheets stop functioning after I've executed a <form> on either of the sheets. Anyone know a solution for this?

If you search on altavista, the results drops all frames, but that don't matter, cause I ain't using altavista on the sheets.

K
 
Sorry, my bad!! Just a minor f.up when altering this...

Thnx
Knut
 
all you need to do is to put a target in your form tag like this.

<form name=&quot;form1&quot; action=&quot;formhandler.asp&quot; method=&quot;post&quot; target=&quot;_self&quot;>

this will direct the form handling page to the iframe and not the browser window.

rob
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top