PDA

View Full Version : Problem with Drop Down Tabs



BNVSAJ
09-04-2007, 05:47 AM
When there are more number of main menus, it is displaying them in multiple rows rather than a single row. I want all of my menu's on single row. What should I have to do in order to place them on a single row instead of multiple rows?

Please help me.

Thanks in Advance.

ddadmin
09-04-2007, 05:50 AM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

BNVSAJ
09-04-2007, 06:09 AM
Link for the script is : http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

Reply Urgent

ddadmin
09-04-2007, 07:46 AM
Can you elaborate what you mean by:


I want all of my menu's on single row.

Sounds like a CSS issue.

BNVSAJ
09-04-2007, 07:59 AM
When there are more menu items, it is displaying some of them in one row, and remaining in other row. No problem even if the horizontal scrollbar is displayed, all the menu's should be placed on a single bar(row).

Thank you for your reply.

I used width:auto also. But no use.

ddadmin
09-04-2007, 08:31 AM
About the only way to force items within a CSS menu to all stay on one line is to give the menu itself an explicit width that is long enough toaccommodate all the items, such as "900px" or some other pixel value.

BNVSAJ
09-04-2007, 12:39 PM
Isn't there any other way?

Because if we use this way, we may have to face some problems.

I'm generating all this code from a JSP page dynamically. I don't know the number of menu items. How can I decide it's width? Please help me.

BNVSAJ
09-04-2007, 12:46 PM
Another Problem is I wrote Code as



<div id="Menu" class="bluetabs">
<ul>

<li><a rel="Module" link=""><span>Module</span></a></li>

<li><a rel="Task" link=""><span>Task</span></a></li>

<li><a rel="Issue" link=""><span>Issue</span></a></li>

<li><a rel="Work Order" link=""><span>Work Order</span></a></li>

<li><a rel="Clarification" link=""><span>Clarification</span></a></li>

<li><a rel="Solution" link=""><span>Solution</span></a></li>

<li><a rel="Time Sheet" link=""><span>Time Sheet</span></a></li>

<li><a rel="Special Alerts" link=""><span>Special Alerts</span></a></li>

<li><a rel="Attachments" link=""><span>Attachments</span></a></li>

<li><a rel="Defects" link=""><span>Defects</span></a></li>

<li><a rel="WBS" link=""><span>WBS</span></a></li>

</ul>
</div>

<div id="Module" class="dropmenudiv_b">

<a href="/Project/Module/addModule.jsp?MenuName=Add&RecordStatus=Add Record">Add New Module</a>

<a href="/Project/Module/ModuleFind.jsp?Found=&MenuName=Modify&RecordStatus=Select Record&CallingMenu=Modify">Modify Module</a>

<a href="/Project/Module/ModuleFind.jsp?MenuName=View&RecordStatus=Select Record&CallingMenu=View">View Module</a>

</div>



And the script is :
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("PTS_Menu", 0)
</script>



And all CSS, js Files are imported properly.
But it is displaying Just MenuBar and the drop down menus are not visible. The drop down menus are displayed as normal links.

ddadmin
09-04-2007, 09:29 PM
Isn't there any other way?

Because if we use this way, we may have to face some problems.

I'm generating all this code from a JSP page dynamically. I don't know the number of menu items. How can I decide it's width? Please help me.

Hmmm if you can't give the menu an explicit pixel width, the way browsers are designed, content that span more than one line will always spill over to the next.


And all CSS, js Files are imported properly.
But it is displaying Just MenuBar and the drop down menus are not visible. The drop down menus are displayed as normal links.

I think a URL to your problem page would be helpful.

BNVSAJ
09-05-2007, 04:58 AM
Sorry,
URL can't be provided. Please try to solve it without that URL.
Complete code is given.

ddadmin
09-05-2007, 06:01 AM
The code you posted isn't complete, because it's only the HTML portion of it, missing the CSS and JS files. With regards to the drop downs being displayed as normal links, usually the only culprit is if you haven't referenced the externsl .css file on your page correctly, or that you've edited in a way that removes the styling for the drop downs.

BNVSAJ
09-05-2007, 06:17 AM
No one is giving reply.... :(

I haven't changed the CSS file at all.

If the reference is not perfect, then it won't display even the menu bar with main menu items.

Now, I will give you full code of the page.

Help me. I'm getting late regarding this topic. First thanks to DDAdmin.

BNVSAJ
09-05-2007, 06:31 AM
HTML:



<html>
<head>
<meta http-equiv="msthemecompatible" content="no">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<link rel="stylesheet" type="text/css" href="C:/bluetabs.css">
<link rel="stylesheet" type="text/css" href="C:/ddcolortabs.css">
<link rel="stylesheet" type="text/css" href="C:/glowtabs.css">
<link rel="stylesheet" type="text/css" href="C:/halfmoontabs.css">
<link rel="stylesheet" type="text/css" href="C:/slidingdoors.css">
<SCRIPT language=JavaScript src="C:/dropdowntabs.js"></SCRIPT>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("PTS_Menu", 0)
</script>
</head>
<BODY TEXT=#000000 VLINK=#000000 ALINK=#000000 LINK=#000000
LEFTMARGIN=0 TOPMARGIN=0 MARGINHEIGHT="0" MARGINWIDTH="0">
<link rel="stylesheet" type="text/css" href="/TestProject/StyleSheets/Blue_Verdana_XSmall.css">
<DIV id=TBDownLevelDiv datafld='' UserGroupName=''></DIV>
<SCRIPT language=JavaScript src="/TestProject/ScriptFiles/toolbar.js"></SCRIPT>
<!--<SCRIPT language=JavaScript src="/TestProject/ScriptFiles/global.js"></SCRIPT>-->


<div id="PTS_Menu" class="bluetabs">
<ul>

<li><a rel="Module" link="http://www.tutorialsforu.com/">Module</a></li>

<li><a rel="Task" link="http://www.tutorialsforu.com/">Task</a></li>

<li><a rel="Issue" link="http://www.tutorialsforu.com/">Issue</a></li>

<li><a rel="Work Order" link="http://www.tutorialsforu.com/">Work Order</a></li>

<li><a rel="Clarification" link="http://www.tutorialsforu.com/">Clarification</a></li>

<li><a rel="Solution" link="http://www.tutorialsforu.com/">Solution</a></li>

<li><a rel="Time Sheet" link="http://www.tutorialsforu.com/">Time Sheet</a></li>

<li><a rel="Special Alerts" link="http://www.tutorialsforu.com/">Special Alerts</a></li>

<li><a rel="Attachments" link="http://www.tutorialsforu.com/">Attachments</a></li>

<li><a rel="Defects" link="http://www.tutorialsforu.com/">Defects</a></li>

<li><a rel="WBS" link="http://www.tutorialsforu.com/">WBS</a></li>

</ul>
</div>

<div id="Work Order" class="dropmenudiv_b">

<a href="/TestProject/WorkOrder/Jsp/WOAssignmentUtility.jsp">WO Batch Assignment</a>

<a href="/TestProject/Issue/Jsp/ViewIssue.jsp?MenuName=WorkOrders&IssueID=&IssueDescription=&RecordAdded=&WorkOrdersExists=&RecordFound=&Modify=False&Updated=">Create Work Order</a>

<a href="/TestProject/WorkOrder/Jsp/ViewWorkOrder.jsp?MenuName=WorkOrders&RecordFound=&RecordModified=&Modify=True">Modify Work Order</a>

<a href="/TestProject/WorkOrder/Jsp/ViewWorkOrder.jsp?MenuName=WorkOrders&RecordFound=&RecordModified=">View Work Order</a>

</div>

<div id="Time Sheet" class="dropmenudiv_b">

<a href="/TestProject/TimeSheet/TimeSheetFind.jsp?RecordStatus=Select Record&MenuName=Modify&CallingMenu=Modify">Modify Time Sheet</a>

<a href="/TestProject/TimeSheet/TSSelectionCriteria.jsp?MenuName=View&RecordStatus=Select Record&CallingMenu=View">View Time Sheet</a>

<a href="/TestProject/TimeSheet/AddTimeSheet.jsp?MenuName=Add&RecordStatus=Add Record">Add Time Sheet</a>

</div>

<div id="Attachments" class="dropmenudiv_b">

<a href="/TestProject/AttachmentMenu/ViewAttachment.jsp?MenuName=View&RecordStatus=View Record&CallingMenu=ViewAttachment">View Attachment</a>

<a href="/TestProject/AttachmentMenu/addAttachment.jsp?MenuName=Add&RecordStatus=Add Record&CallingMenu=AddAttachment">Add Attachment</a>

</div>

<div id="Defects" class="dropmenudiv_b">

<a href="/TestProject/Defect/Jsp/LogDefects.jsp?MenuName=Add&RecordStatus=Add Record">Log Defect</a>

<a href="/TestProject/Defect/Jsp/DefectFind.jsp?MenuName=Modify&RecordStatus=Select Record">Modify/View Defect</a>

<a href="/TestProject/Report/ReportFind.jsp?MethodName=getDefectsReport()&Title=Defects Report&SubTitle=None&ExcelSheet=True&PDF=False&ShowLink=Child&Arguments=ClientID^ProjectID^StartDate^EndDate^IssueID^WOID^DefectCategory^DefectType^DefectStatus^&ObjectID=Report&v=10100000001&Access=0">Defects Report</a>

</div>

<div id="WBS" class="dropmenudiv_b">

<a href="/TestProject/Status/ReportFile.jsp?Title=Systems Information&MethodName=getWMSProjectInfo()&SubTitle=None&ExcelSheet=True&PDF=False&Arguments=ClientID^ProjectID^&ObjectID=Report&ShowLink=Parent">View WBS</a>

</div>

<div id="Solution" class="dropmenudiv_b">

<a href="/TestProject/Problem/Jsp/AddSolutionForProblem.jsp?Found=&Modify=&Number=0&MenuName=Solutions&ReturnFlag=FALSE">Add New Solution</a>

</div>

<div id="Special Alerts" class="dropmenudiv_b">

<a href="/TestProject/SpecialAlert/SpecialAlert.jsp?MenuName=SpecialAlert&CallingMenu=Add">Add Special Alert</a>

<a href="/TestProject/SpecialAlert/SpecialAlertFind.jsp?Number=0&Modify=&MenuName=SpecialAlertd&CallingMenu=Modify">Modify Special Alert</a>

<a href="/TestProject/SpecialAlert/SpecialAlertFind.jsp?Normal=&MenuName=SpecialAlert&CallingMenu=View">View Special Alert</a>

</div>

<div id="Task" class="dropmenudiv_b">

<a href="/TestProject/Task/AddTask.jsp?MenuName=Add&RecordStatus=Add Record">Add New Task</a>

<a href="/TestProject/Task/TaskFind.jsp?Found=&MenuName=Modify&RecordStatus=Select Record&CallingMenu=Modify">Modify Task</a>

<a href="/TestProject/Task/TaskFind.jsp?MenuName=View&RecordStatus=Select Record&CallingMenu=View">View Task</a>

</div>

<div id="Clarification" class="dropmenudiv_b">

<a href="/TestProject/servlet/TestProject.Problem.AddProblemController?hddField=setMaxProblemID&WOLIFormStatus=no&MenuName=Problems&RecordAdded=&IssueID=0&WOID=0&WOLI=0&ModuleID=&TaskID=">Raise Clarification</a>

<a href="/TestProject/Problem/Jsp/ModifyProblem.jsp?Found=&Modify=&Number=0&MenuName=Problems&ReturnFlag=FALSE&CallingMenu=Modify">Modify Clarification</a>

<a href="/TestProject/Problem/Jsp/ModifyProblem.jsp?Found=&Modify=&Number=0&MenuName=Problems&ReturnFlag=FALSE&CallingMenu=View">View Clarification</a>

</div>

<div id="Module" class="dropmenudiv_b">

<a href="/TestProject/Module/addModule.jsp?MenuName=Add&RecordStatus=Add Record">Add New Module</a>

<a href="/TestProject/Module/ModuleFind.jsp?Found=&MenuName=Modify&RecordStatus=Select Record&CallingMenu=Modify">Modify Module</a>

<a href="/TestProject/Module/ModuleFind.jsp?MenuName=View&RecordStatus=Select Record&CallingMenu=View">View Module</a>

</div>

<div id="Issue" class="dropmenudiv_b">

<a href="/TestProject/Issue/Jsp/AddIssue.jsp?Add=YES&MenuName=Issues&IssueID=&TypeOfOperation=AddNewIssue">Add New Issue</a>

<a href="/TestProject/Issue/Jsp/ViewIssue.jsp?Normal=&MenuName=Issues&RecordFound=&Modify=True&Updated=">Modify Issue</a>

<a href="/TestProject/Issue/Jsp/ViewIssue.jsp?Normal=&MenuName=Issues&RecordFound=&Modify=False&Updated=">View Issue</a>

</div>

</BODY>
</html>

BNVSAJ
09-05-2007, 06:32 AM
CSS File:



.bluetabs{
border-bottom: 1px solid gray;
}

.bluetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.bluetabs li{
display: inline;
margin: 0;
}

.bluetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(media/bluetab.gif) top left repeat-x; /*THEME CHANGE HERE*/
}

.bluetabs li a:visited{
color: #2d2b2b;
}

.bluetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.bluetabs li.selected{
}

.bluetabs li.selected a{ /*selected main tab style */
background-image: url(media/bluetabactive.gif); /*THEME CHANGE HERE*/
border-bottom-color: white;
}

.bluetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_b{
position:absolute;
top: 0;
border: 1px solid #918d8d; /*THEME CHANGE HERE*/
border-width: 0 1px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #918d8d; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
color: black;
}

* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color: #edf3f3;
}



JavaScript File:


//Drop Down Tabs Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Created: May 16th, 07'

var tabdropdown={
disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableiframeshim: 1, //1 or 0, for true or false

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
if (this.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
if (obj2.parentNode.className.indexOf("default")==-1) //if tab isn't a default selected one
obj2.parentNode.className="selected"
obj.visibility="visible"
}
else if (e.type=="click")
obj.visibility="hidden"
},

iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.standardbody.scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
this.dropmenuobj.firstlink.style.borderTopWidth=(edgeoffset==0)? 0 : "1px" //Add 1px top border to menu if dropping up
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null){ //hide previous menu
this.dropmenuobj.style.visibility="hidden" //hide menu
if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
if (this.previousmenuitem.parentNode.className.indexOf("default")==-1) //If the tab isn't a default selected one
this.previousmenuitem.parentNode.className=""
}
}
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
this.showhide(this.dropmenuobj.style, e, obj)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
this.positionshim() //call iframe shim function
}
},

contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
},

dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu(obj2)
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu(obj2)
},

delayhidemenu:function(obj2){
this.delayhide=setTimeout(function(){tabdropdown.dropmenuobj.style.visibility='hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''},this.disappeardelay) //hide menu
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

positionshim:function(){ //display iframe shim function
if (this.enableiframeshim && typeof this.shimobject!="undefined"){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
this.shimobject.style.left=this.dropmenuobj.style.left
this.shimobject.style.top=this.dropmenuobj.style.top
}
this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
}
},

hideshim:function(){
if (this.enableiframeshim && typeof this.shimobject!="undefined")
this.shimobject.style.display='none'
},

isSelected:function(menuurl){
var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
return (tabdropdown.currentpageurl==menuurl)
},

init:function(menuid, dselected){
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var menuitems=document.getElementById(menuid).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName("a")[0]
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
tabdropdown.dropit(this, event, this.getAttribute("rel"))
}
}
if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[i].href)){
menuitems[i].parentNode.className+=" selected default"
var setalready=true
}
else if (parseInt(dselected)==i)
menuitems[i].parentNode.className+=" selected default"
}
}

}



Above, Complete code is given. I can't explain more than this. Is there any body to help me?

ddadmin
09-05-2007, 08:29 AM
Regarding the menu items overflowing to the next line, as mentioned, about the only way is to get the menu a width large enough to fit everything on one line:


.bluetabs{
border-bottom: 1px solid gray;
width: 1000px;
}

If you can't do this, I'm not sure there is any other way.

Regarding the drop down tabs not being styled, unless you provide a link to a sample page online, unfortunately it's difficult to help you out. The code you provided above reference local files on your harddrive, among other problems, that none of us have access to. Try saving all the code you provided above onto a blank page and try to load it up to see what I'm talking about.

BNVSAJ
09-05-2007, 09:57 AM
Ok. I understood.

Link for the online page is: http://www.tutorialsforu.com/A.html

BNVSAJ
09-05-2007, 12:56 PM
Hello DD Admin,

you are the only person who is giving reply. I already posted the web link. Please solve it. Waiting for your reply.
It is also displaying an error message as: document.getElemenyByID(...) is null or not an object.

I think that is the problem. I haven't made any moifications to it. But I don't know why this error has been occured.

It is displaying that JavaScript Error always.
:(

BNVSAJ
09-05-2007, 02:01 PM
No one is giving reply... :(

Even DDAdmin Also... I feel very bad.

In such a good site, nobody is there to help me.

BNVSAJ
09-05-2007, 02:20 PM
Which ever script I use (downloaded from DynamicDrive) is displaying an error message as " 'document.getElementById(...)' is null or not an object."
How can I solve this error. It doesn't mean that those scripts are not working. They are not working on my system. How can I solve it?

BNVSAJ
09-05-2007, 04:06 PM
I will give you much more explanation regarding my problem as I understood what's the problem is.

My Menu id is : Menu

It wrote as

<div id="Menu" class="bluetabs">
.
.
.
.
</div>

Script is :
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("Menu", 1)
</script>


Error is at the line in dropdowntabs.js:

var menuitems=document.getElementById(menuid).getElementsByTagName("a")
and here, the getElementById(menu) function is returning a null value. As it is not working, and the <div> tag id is constatn, I changed the line as

var menuitems=document.getElementById("Menu").getElementsByTagName("a"). Still it is not working. i.e., it is returning null instead of returning that Element as an Object.


Solve it.

Thanks in Advance:cool:

ddadmin
09-05-2007, 08:41 PM
Since your Tab menu carries the ID Test_Menu, that's what you should enter inside the script in the HEAD section of your page:


<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("Test_Menu", 0)
</script>

BNVSAJ
09-06-2007, 04:38 AM
No, in the above post, I used Menu as Menu ID(main <div> tag id). So, I used the same ID in the script tag in HEAD section.

ddadmin
09-06-2007, 07:11 AM
Hmm seems you've updated the page with the new ID. Another problem I see is the location of:


<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("Test_Menu", 0)
</script>

on your page. It needs to be defined after the HTML for the menu, not before, so:



<DIV id=TBDownLevelDiv datafld='' UserGroupName=''></DIV>

<div id="Test_Menu" class="bluetabs">
<ul>
<li><a href="http://www.microsoft.com/" rel="Microsoft">Microsoft</a></li>
<li><a href="http://www.java.sun.com/" rel="Java">Java</a></li>
</ul>
</div>

<div id="Microsoft" class="dropmenudiv_b">
<a href="http://microsoft.com/downloads/">Downloads</a>

<a href="http://microsoft.com/surface/">Surface</a>
<a href="http://microsoft.com/en/">English</a>
</div>
<div id="Java" class="dropmenudiv_b">
<a href="http://javaa.com">Javaa </a>
<a href="http://kickjava.com">Kick Java </a>
<a href="http://javaalmanac.com">Java Almanac </a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("Test_Menu", 0)
</script>

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice:

BNVSAJ
09-06-2007, 08:57 AM
Problem Solved...... :)

No problem with the code I wrote.

Once again, Thank you DD Admin... :)

Still one problem wasn't rectified. That is length. I used display:inline; also. But no use.

Help me regarding it.

BNVSAJ
09-06-2007, 11:32 AM
I used white-space:nowrap and the width problem also solved. But when use white-space:nowrap, the first menu is not displaying properly. How do I solve this?

BNVSAJ
09-08-2007, 11:16 AM
Sorry, it is just for testing. When I tried to test, I got some problems. So I posted the problem. And if I wish to use it for my personal use or for web, I am sure that I will add your credit notice. It's not a problem for me at all.

Any way thank you for identifying it and reporting it. All it is just by mistake.

Inline means in the source or in the preview? Please give reply. meanwhile, i will see your terms of use once again.