AJAX

Urgent : Need Help !!!

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2007

Posts: 2

Reputation: adnan316 is an unknown quantity at this point

Solved Threads: 0

adnan316

Offline

Newbie Poster

Urgent : Need Help !!!

Aug 13th, 2007

Hello everyone.
I am new to this forum. i am stuck on this problem for quite some time and i hope i cud use some ur expertise on it !!!
here's the thing -
i have developed this web page which is like really long and i have divided it into pages ( sort of virtual ) using java script. Now each (of the virtual) page is linked to a tab. so when a particular tab is clicked the corresponding page is displayed. I had to do this cos the data is interlinked and hence i cant divide the page into different html files
The problem is that i now want to add drop downmenu's to the tab such that when any tab is clicked a menu is displayed and when someone clicks a title in that menu the corresponding page be displayed

i hope u have understood my problem
i am attaching a sample of the tabs .. if anyone wud like to see the actual page do let me know i'll upload it too

thanks in advance !!!

Attached Files

tabview1.zip (1.8 KB, 2 views)

•

Join Date: May 2005

Posts: 182

Reputation: alpha_foobar is an unknown quantity at this point

Solved Threads: 3

alpha_foobar alpha_foobar is offline

Offline

Junior Poster

Re: Urgent : Need Help !!!

Aug 13th, 2007

Hi, instead of a zip file - could you just post the code?

alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur

•

Join Date: Aug 2007

Posts: 2

Reputation: adnan316 is an unknown quantity at this point

Solved Threads: 0

adnan316

Offline

Newbie Poster

Re: Urgent : Need Help !!!

Aug 14th, 2007

sorry i didnt know i have to put the code anyways ...
here's the javascript

// <script>

// ----- Auxiliary -------------------------------------------------------------

function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

here's the html code

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<title>Tab-View Sample</title>

<link rel="stylesheet" type="text/css" href="tabview.css" />

<script type="text/javascript" src="tabview.js">

</script>

</head>
<body>

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">



<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>



<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">



<br />

<table>
<tr>
<td style="vertical-align: top;">Distributed form: </td>
<td>
<input type="text" name="first" />
<br />
<small>Note: the rest of the form is at the Tab 3.</small>
</td>
</tr>
</table>



</div>
</div>



<div class="Page">
<div class="Pad">

Tab2<br />Tab2<br />Tab2<br />Tab2<br />Tab2<br />Tab2<br />Tab2<br />Tab2<br />Tab2<br />Tab2<br />Tab2<br />



</div>
</div>

<div class="Page">
<div class="Pad">



<br />

<table>
<tr>
<td>Username: </td>
<td><input style="width: 120px;" type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input style="width: 120px;" type="password" name="password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>



</div>
</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>
</body>
</html>

and this is the css code

/* <style> */

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}

div.TabView div.Tabs a
{
float: left;
display: block;

width: 90px;
text-align: center;

height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid black;
border-bottom-width: 0;

text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: lightyellow;
}

div.TabView div.Pages
{
clear: both;
border: 1px solid #404040;
overflow: hidden;
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

hope u guys can help me out on it

thanks in advance !!!