•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 361,864 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,561 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 628 | Replies: 2
 |
•
•
Join Date: Aug 2007
Posts: 2
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Urgent : Need Help !!! 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 !!!
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 !!!
•
•
Join Date: May 2005
Location: Wellington, New Zealand
Posts: 182
Reputation:
Rep Power: 4
Solved Threads: 3
Junior Poster
Hi, instead of a zip file - could you just post the code?
•
•
Join Date: Aug 2007
Posts: 2
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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: </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: </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>
<!-- *** 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 !!!
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: </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: </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>
<!-- *** 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 !!!
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- pls heeeeeeeeelp its urgent. (C)
- Urgent! (C++)
- URGENT: Need help on I/O code! (Java)
- Urgent help (Networking Hardware Configuration)
- Homepage keeps switching back to a porn site (Web Browsers)
- Importing SQL Script File - Urgent !! (Database Design)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Links list
- Next Thread: picture change
