Urgent : Need Help !!!

Question

adnan316 0 Newbie Poster

17 Years Ago

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 !!!

javascript

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

tabview1.zip (1.81 KB)

2 Contributors
2 Replies
136 Views
1 Day Discussion Span
Latest Post 17 Years Ago Latest Post by adnan316

alpha_foobar 5 Junior Poster

17 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

adnan316 0 Newbie Poster · Answer 1 · 2007-08-14T10:41:45+00:00

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">


<!-- *** Tabs ************************************************************** -->


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


<!-- *** Pages ************************************************************* -->


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


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


<!-- *** Page1 Start *** -->


<br />


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


<!-- *** Page1 End ***** -->


</div>
</div>


<!-- *** Page2 Start *** -->


<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 />


<!-- *** Page2 End ***** -->


</div>
</div>


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


<!-- *** Page3 Start *** -->


<br />


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


<!-- *** Page3 End ***** -->


</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 !!!