Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 26

Thread: Problem with Drop Down Tabs

  1. #11
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  2. #12
    Join Date
    Sep 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #13
    Join Date
    Sep 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    HTML:

    Code:
    <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>

  4. #14
    Join Date
    Sep 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    CSS File:

    Code:
    .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:
    Code:
    //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?

  5. #15
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    .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.

  6. #16
    Join Date
    Sep 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok. I understood.

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

  7. #17
    Join Date
    Sep 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    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.
    Last edited by BNVSAJ; 09-05-2007 at 01:46 PM.

  8. #18
    Join Date
    Sep 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    No one is giving reply...

    Even DDAdmin Also... I feel very bad.

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

  9. #19
    Join Date
    Sep 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  10. #20
    Join Date
    Sep 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •