...

View Full Version : Drop down with JS & CSS won't work



dreamsonthefly
01-23-2009, 05:29 AM
I have a css and js for my website, when I preview it, it seems to work however when I publish it...it does not work. I really appreciate any assistance on this one as my head hurts and my eyes are bulging out trying to find and repair the problem..


Thanks so much in advance.



CSS code named uploaded to hstrial-rprice on homestead and published
Named in Notepad: symphonycode.css


.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 14px arial;
border-bottom: 0px solid darkgoldenrod;
list-style-type: none;
margin-bottom: 0;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

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

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid black;
/*border-bottom: none;*/
background-color: #785a14; /* first level menu */
color: white;
}

.basictab li a:visited{
color: white;
}

.basictab li a:hover{
background-color: #3E3535; /*Grey29 */
color: white;
}

.basictab li a:active{
color: white; /*white */
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #820000;
color: white;
}

.submenustyle{
padding: 2px 1px;
font: 13px arial;
border: 0px solid black;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}

* html .submenustyle{ /*IE only width definition*/
width: 100%;
}

.submenustyle a{
border-right: 0px solid white;
padding: 1px 5px;
background: white; /*suthers added*/
color: #820000;
text-decoration: none;
}

.submenustyle a:hover{
background-color: #CCCCCC; /* was #6D7B8D; */
}




Javacript code named symphonycode.js uploaded to hstrial-rprice on homestead and published




var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}

function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}

function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}


function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}

function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}

Here is what I have under the insert html element at HS

<ul id="maintab" class="basictab">
<li rel="Home"><a href="http://www.dreamsonthefly.com/index.html">Home</a><li>

<li rel="Owyhee River"<a href="http://www.dreamsonthefly.com/owyhee.html">Owyhee River</a>
</li>

<li rel="Steelhead"><a href="#">Steelhead</a></li>
<li rel="Rates"><a href="#">Rates</a><li>
<li rel="Bass"><a href="#">Bass</a></li>
<li rel="Wilderness"><a href="#">Wilderness</a></li>
<li rel="Flies"><a href="#">Flies</a></li>
<p>
<li rel="Our Guides"><a href="#">Our Guides</a></li>
<li rel="Corporate Trips"><a href="#">Corporate Trips</a></li>
<li rel="Education"><a href="#">Education</a></li>
<li rel="Blog"><a href="#">Blog</a></li>
<li rel="Contact Us"><a href="#">Contact Us</a></li>
<li rel="Trip Planning"><a href="#">Trip Planning</a></li>
</P></ul>

<div id="Home" class="submenustyle">
</div>

<div id="Steelhead" class="submenustyle">

<a href="http://www.dreamsonthefly.com/Granderonde.html">Grande Ronde</a>
<a href="http://www.dreamsonthefly.com/faqssteel.html">Faq's About Steelhead</a>
</div>


<div id="Smallmouth Bass" class="submenustyle">
<a href="http://www.dreamsonthefly.com/bass.html">Why Smallmouth Bass on a Fly</a>
<a href="http://www.dreamsonthefly.com/bass.html">Smallmouth on the Grande Ronde</a>
<a href="http://www.dreamsonthefly.com/bassl.html">Smallmouth Bass on Other Rivers</a>
</div>

<div id="Rates" class="submenustyle">
<a href="http://www.dreamsonthefly.com/singlerates.html">Single Day Guide Rates for Trout</a>
<a href="http://www.dreamsonthefly.com/multidayrates.html">Multi-day Guided Trips f</a>
</div>


<div id="Wilderness" class="submenustyle">
<a href="http://www.dreamsonthefly.com/wilderness.html">A Quiet Walk with the Wilderness</a>
<a href="http://www.dreamsonthefly.com/diamond.html">Diamond D Ranch</a>
</div>

<div id="Flies" class="submenustyle">
<a href="http://www.dreamsonthefly.com/flies.html">About Dave Tucker's Flies</a>
<a href="http://www.dreamsonthefly.com/allflyinfo.html"Steelhead Flies</a>
<a href="http://www.dreamsonthefly.com/troutflies.html">Trout Flies</a>
<a href="http://www.dreamsonthefly.com/atlanticsalmonflies.html">Beautiful Atlantic Salmon Flies</a>
</div>


<div id="Our Guides" class="submenustyle">
<a href="http://www.dreamsonthefly.com/newguides.html">About Dave Tucker</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About Rhonda Price</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About John Schaeffer</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About Zach Mayhew</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About our camp crew</a>
</div>

<div id="Corporate Trips" class="submenustyle">
<a href="http://www.dreamsonthefly.com/corporatepackages.html">Team Building</a>
<a href="http://www.dreamsonthefly.com/corporatepackages.html">Customer Incentives</a>
<a href="http://www.dreamsonthefly.com/corporatepackages.html">Employee Incentives</a>
</div>

<div id="Education" class="submenustyle">
<a href="http://www.dreamsonthefly.com/education.html">Knots</a>
<a href="http://www.dreamsonthefly.com/education.html">The Great Release</a>
<a href="http://www.dreamsonthefly.com/education.html">Ettiquite on the Water</a>
</div>

<div id="Blog" class="submenustyle">
<a href="http://dreamsonthefly.blogspot.com">Where are We, What are We Doing?</a>
</div>

<div id="Contact Us" class="submenustyle">
<a href="http://www.dreamsonthefly.com/comments.html">Contact Us</a>
<a href="http://www.dreamsonthefly.com/comments.html">Guest Book</a>
<a href="http://www.dreamsonthefly.com/comments.html">Sign Up for Our Newsletter</a>
</div>

<div id="Trip Planning" class="submenustyle">
<a href="http://www.travelstoremaker.com/cgit/porch?agentid=dreamsonthefly">Easy Airline Reservations </a>
<a href="http://www.flybook.com/">Make Your Guide Reservations Here</a>
<a href="http://www.dreamsonthefly.com/">What You Need to Bring</a>
</div>

<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
</script>


Here is what I have in the advanced tab in the page properties for the site.

<link rel="stylesheet" type="text/css" href="http://www.dreamsonthefly.com/symphonycode.css" />

<script type="text/javascript" src="http://www.dreamsonthefly.com/symphonycode.js">
/***********************************************
* 2 level Horizontal Tab Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum