|
JavaScript - Drop Down Menu Issue
New to Javascript and been reading a lot of tutorials on the various things im trying to do with my website. One thing i cant figure out is my my menu doesnt dropdown as I want to have sublinks. I know this all has to do with my style.css. Here is the code I have, cant figure out where I got this wrong.
[CODE] .menu {width:100%; height:67px; background:url(images/tail-menu.gif) 0 0 repeat-x #f00;} .menu li {float:left; font-size:1.333em; line-height:1.5em; text-transform:uppercase;} .menu li a {display:block; padding:21px 27px 22px 27px; color:#818080;} .menu li .active, .menu li a:hover {color:#fffefe; background:#f31301;} .menu .last-item a {padding:21px 32px 22px 27px; } .menu li span {width:100%; height:67px; background:url(images/tail-menu.gif); no-repeat center top;float: left} .menu li span.subhover {background-position: center bottom; cursor: pointer;} .menu li ul.subnav {list-style: none; position: absolute; left:0; top:35px; background:#f31301; margin:0; padding:0; width:170px;float:left; display:none; border: 1px solid #111} .menu li ul.subnav li{margin:0; padding:0; border-top: 1px solid #252525; border-bottom: 1px solid #444; clear: both; width: 100%;} [CODE] Any help is greatly appreciated. Similar TutorialsHi all I'm a real newbie to Java script, I've literally been teaching myself for about 2 days now, but I've come across a bit of a problem which I'm sure is easy to fix so I was hoping for some pointers. Heres the problem: What I'm trying to do is create a document which allows you to select a size of box from a drop down menu, and then select a size of product to go into the box on a second drop down. The products on the second drop down menu will be allocated based on the box size that you've selected to make sure that you can only choose products which will fit in the box you've selected. In order to do this I've set up a 2D array, which lists each product and which boxes they will fit in using 0 for no and 1 for yes. When you select a box size from the drop down a value appears in a text box next to it (1, 2, 3, or 4) and what I need to do is use the number which appears in this text box to pull data from the array to populate the next drop down list. i.e. If option 2 appears from the first drop down selection then the second drop down should be populated with data from column 2 of array (In this example 1212, 1515, and 2020 would be shown in the second drop down) Im having trouble with the Java script to pull the values from the html text box in order to manipulate the array. If you look at the function 'top_biochill_addOption_list()' you will see that the second drop is populated here from row [itop2][3] of the array, which means the second drop down is permenantly populated as if option 3 had been selected from the first drop down. I need to get the value selected from the first drop down as a variable and replace the '3' in the above statement with that variable to get this to work but I have no idea how to go about that. Hopefully all will become clear when you see the code. As I say, I am very new to Javascript so I'm sure this code is probably messy and inefficient, but with that in mind I'd appreciate replies being in simplified terms so I can understand what you're getting at, or if anything gets re-written then a brief explaination of whats going on would be handy so I can understand what the code is actually doing! Thanks Code:
<html>
<head>
<script type="text/javascript">
var linebreak = "<br />";
//Code to prints out the current product matrix
function print_top_biochill_list(){
var topx=0
var topy=0
for (topi=0;topi<top_biochill.length;topi++)
{
document.write(top_biochill[topx][topy]+" "+top_biochill[topx][topy+1]+" "+top_biochill[topx][topy+2]+" "+top_biochill[topx][topy+3]+" "+top_biochill[topx][topy+4]+"<br />");
var topx=topx+1;}}
//Code to create Drop Down Menu to select top Biochill
function top_biochill_addOption(selectbox,text,value ){
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);}
//Code to populate Top Biochill Drop Down Menu based on which size EPS is selected
function top_biochill_addOption_list(selectbox){
var itop2=0
for (var itop=0; itop < top_biochill.length;++itop){
if (top_biochill[itop2][3]==1){
top_biochill_addOption(document.top_biochill_drop_list.top_biochill_list, top_biochill[itop][0], top_biochill[itop][0]);
itop2=itop2+1
}}}
function addtop_biochill(){
}
</script>
</head>
<body onLoad="addtop_biochill();top_biochill_addOption_list()";>
<script type="text/javascript">
//Creates an array to describe top biochill
var top_biochill = new Array();
{
//0=Name, 1=EPS10, 2=EPS15, 3=EPS30, 4=EPS45
top_biochill[0] = new Array(1212,1,1,1,1 );
top_biochill[1] = new Array(1515,1,1,1,1 );
top_biochill[2] = new Array(2020,0,1,1,1 );
top_biochill[3] = new Array(3015,0,0,1,1 );
top_biochill[4] = new Array(3020,0,0,0,1 );
top_biochill[5] = new Array(3040,0,0,0,1 );
}
//Runs the prints the matrix code
print_top_biochill_list();
</script>
<!--Select EPS Size Drop Down Menu-->
<form name="box_size" onsubmit="CheckForm()">
<select name="box_size_jump_menu" onchange="document.box_size.EPSshowvalue.value=this.value">
<option value=0>Please select a Box Size</option>
<option value=1>EPS 10</option>
<option value=2>EPS 15</option>
<option value=3>EPS 30</option>
<option value=4>EPS 45</option>
</select>
<input type="number" name="EPSshowvalue">
<script type="text/javascript">
top_biochill_addOption_list();
</script>
</form>
<!--Select Top Biochill Drop Down Menu-->
<FORM name="top_biochill_drop_list" onsubmit="CheckForm()">
<SELECT NAME="top_biochill_list" onchange="document.top_biochill_drop_list.top_biochill_showvalue.value=this.value">
<Option value="" >Select Biochill</option>
</SELECT>
<input type="text" name="top_biochill_showvalue"><br>
</form>
</body>
</html>
Hello I have several issues with my multilevel drop down menu The First issue is : the page has 2 iframes (one has the horizontal multilevel drop down menu on the top) the below iframe has my site address Now, when i hover over the menu it does not open or expand but when i open just the menu without any iframes it does This clearly means that the menu is not coming out of the iframe Please help me bring it on top of everything of the page Note: i have placed the menu in one iframe and a page opens below it in another iframe. The Second issue is : I want the navigation bar that is the multilevel drop down menu to be editable Which means i have a blog and a forum on my site but my visitor wants that the blog should not appear there and another link to play games should be there and hence he/she can edit it And please also try to make it work on cookies so that the user info and preferences are saved in cookies and whenever he/she comes back they see the page their way. For you: I would like to tell you that IdeaLab has launched a Twitter Advertising, Widget and Search platform and the first 1000 people are getting $100 go to tweetup.com Please help me, it will be really appreciable. Thank you very much in advance! I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it... I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same.... My live demo is here! Thank you for any help and/or advice in advance, Best Regards, Tim ? how would i make it for a menu so you could press it and it would go down to click on a link.
I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code: var NoOffFirstLineMenus=7; // Number of first level items var LowBgColor='white'; // Background color when mouse is not over var LowSubBgColor='white'; // Background color when mouse is not over on subs var HighBgColor='black'; // Background color when mouse is over var HighSubBgColor='black'; // Background color when mouse is over on subs var FontLowColor='black'; // Font color when mouse is not over var FontSubLowColor='black'; // Font color subs when mouse is not over var FontHighColor='white'; // Font color when mouse is over var FontSubHighColor='white'; // Font color subs when mouse is over var BorderColor='black'; // Border color var BorderSubColor='black'; // Border color for subs var BorderWidth=1; // Border width var BorderBtwnElmnts=1; // Border between elements 1 or 0 var FontFamily="arial,comic sans ms,technical" // Font family menu items var FontSize=9; // Font size menu items var FontBold=1; // Bold menu items 1 or 0 var FontItalic=0; // Italic menu items 1 or 0 var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right' var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right' var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static var ChildOverlap=.2; // horizontal overlap child/ parent var ChildVerticalOverlap=.2; // vertical overlap child/ parent var StartTop=05; // Menu offset x coordinate var StartLeft=05; // Menu offset y coordinate var VerCorrect=0; // Multiple frames y correction var HorCorrect=0; // Multiple frames x correction var LeftPaddng=3; // Left padding var TopPaddng=2; // Top padding var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL var MenuFramesVertical=1; // Frames in cols or rows 1 or 0 var DissapearDelay=1000; // delay before menu folds in var TakeOverBgColor=1; // Menu frame takes over background color subitem frame var FirstLineFrame='navig'; // Frame where first level appears var SecLineFrame='space'; // Frame where sub levels appear var DocTargetFrame='space'; // Frame where target documents appear var TargetLoc=''; // span id for relative positioning var HideTop=0; // Hide first level when loading new document 1 or 0 var MenuWrap=1; // enables/ disables menu wrap 1 or 0 var RightToLeft=0; // enables/ disables right to left unfold 1 or 0 var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover var WebMasterCheck=0; // menu tree checking on or off 1 or 0 var ShowArrow=1; // Uses arrow gifs when 1 var KeepHilite=1; // Keep selected path highligthed var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height function BeforeStart(){return} function AfterBuild(){return} function BeforeFirstOpen(){return} function AfterCloseAll(){return} // Menu tree // MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width); // For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg" Menu1=new Array("Home","","",3); Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150); Menu1_2=new Array("Acknow","Acknowledgement.htm","",0); Menu1_3=new Array("Prayer","Prayer.htm","",0); Menu2=new Array("About Us","","",4); Menu2_1=new Array("Debra","bio.htm","",0,20,150); Menu2_2=new Array("Seamus","Seamus.htm","",0); Menu2_3=new Array("Locations","location.htm","",0); Menu2_4=new Array("Contact Us","contact.htm","",0); Menu3=new Array("Services","","",7); Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150); Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0); Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0); Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0); Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0); Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0); Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0); Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0); Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0); Menu6=new Array("Articles","","",3); Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150); Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0); Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0); Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0); I presently have a drop down menu in one of my sites. I wish to break it down one more time so that it opens up on the side. However, not being a javascript expert I cannot figure out how to do it. I assume it is something within the coding that needs to be changed, or even a new section added. I have included the coding, please can someone point me in the right direction. Thank you so much! Monica CODE: var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; </SCRIPT> <script type='text/javascript'> $(function() { $('#nav-drop').droppy(); }); SDDM: #sddm { margin: 0; padding: 0; z-index: 300} #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: 14px Arial, Helvetica, sans-serif} #sddm li a { display: block; margin: 0 1px 0 0; padding: 2px 6px; width: 95px; background: ##333366; color: #FFFFFF; text-align: center; text-decoration: none} #sddm li a:hover { background: #9F8469} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #333366; border: 1px solid #FFFFFF} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #333366; color: #FFFFFF; font: 14px Arial, Helvetica, sans-serif} #sddm div a:hover { background: #9F8469; color: #FFFFFF} .style12 { color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } HTML: <tr> <td height="21" colspan="3" bgcolor="#333366"> <ul id="sddm"> <li><a href="index.html" class="style18">HOME</a></li> <li><a href="about_us.html" class="style18">ABOUT US</a></li> <li><a href="criminal_law.html" class="style18" onmouseover="mopen('m2')" onmouseout="mclosetime()">CRIMINAL LAW </a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="driving-impared_offences.html">Driving/Impaired Offences</a> <a href="drug_related_chages.html">Drug Related Charges</a> <a href="bail_hearing.html">Bail Hearing</a> <a href="fraud_theft.html">Fraud/Theft</a> <a href="assault.html">Assault</a> would like to break this assault button down to 4 more options <a href="domestic_violence.html">Domestic Violence</a> <a href="break_enter_robbery.html">Break & Enter/Robbery</a> <a href="weapons_offences.html">Weapons Offences</a> <a href="fail_to_comply.html">Fail to Comply</a> </div> </li> <li><a href="family_law.html" class="style18" onmouseover="mopen('m3')" onmouseout="mclosetime()">FAMILY LAW</a> <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="family_law_divorce.html">Divorce</a> <a href="family_law_custody_access.html">Custody and Access</a> <a href="child_spousal_support.html">Child/Spousal Support</a> <a href="division_of_property.html">Division of Property</a> <a href="restraining_orders.html">Restraining Orders</a> <a href="cas_matters.html">CAS Matters</a> <a href="paternity.html">Paternity</a> <a href="adoptions.html">Adoptions</a> <a href="premarital_cohapitation_separtion_agreements.html">Premarital/Cohabitation/Separation Agreements</a> </div> </li> <li><a href="civil.html" class="style18" onmouseover="mopen('m4')" onmouseout="mclosetime()">CIVIL LITIGATION</a> <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="personal_injury.html">Personal Injury</a> <a href="wrongful_dismissal.html">Wrongful Dismissal</a> <a href="contract_disputes.html">Contract Disputes</a> <a href="property_issue_discrepancies.html">Property/Issue Discrepancies</a> <a href="tax_matters.html">Tax Matters</a> </div> </li> <li><a href="wills.html" class="style18" onmouseover="mopen('m5')" onmouseout="mclosetime()">WILLS & ESTATES</a> <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="wills.html">Wills</a> <a href="power_of_sale.html">Power of Sale</a> <a href="power_of_attorney.html">Power of Attorney</a> </div> </li> <li><a href="administrative_law.html" class="style18" onmouseover="mopen('m6')" onmouseout="mclosetime()">ADMINISTRATIVE LAW</a> <div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="board_tribunals.html">Board Tribunals</a> <a href="omb.html">OMB</a> <a href="rental_housing.html">Rental Housing</a> <a href="licensing_tribunals.html">Licensing Tribunals</a> <a href="ministry_challenges.html">Ministry Challenges</a> <a href="consent_compassion_board.html">Consent and Compassion Board</a> <a href="wsib.html">WSIB</a> <a href="fisco.html">FISCO</a> <a href="human_rights_commission.html">Human Rights Commission</a> <a href="conversation_review_board.html">Conservation Review Board</a> </div> </li> <li><a href="resources.html" class="style18">RESOURCES</a></li> <li><a href="contact_us.html" class="style18">CONTACT US</a></li> </ul> Can anyone tell me how or point me to a tutorial which shows how to go about coding a drop down menu "without a button", where i can store all my links. Thanks I have some Javascript code for a drop-down menu. The code works fine (will show below) but I was wondering how to turn off one of them? I have a total of 8 icons that have drop-down menus, but I only need 6 of them to do so. If I make any sort of change to the code, it makes all the icons change color when the mouse is hovered over, instead of drop-downs. It seems to be an "all or nothing" situation. Can someone show me how to "turn off" just one of the icons (say the "news" one), so a drop-down doesn't appear? Thank you very much. Code: <script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="javascript">
function init() {
if (TransMenu.isSupported()) {
TransMenu.initialize();
menu1.onactivate = function() { document.getElementById("news").className = "hover"; };
menu1.ondeactivate = function() { document.getElementById("news").className = ""; };
menu2.onactivate = function() { document.getElementById("raceresults").className = "hover"; };
menu2.ondeactivate = function() { document.getElementById("raceresults").className = ""; };
}
}
</script>
<tr><td>
<a href="http://www.littlevalleyspeedway.com/test/news.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','http://www.littlevalleyspeedway.com/test/layout/nav_news_on.jpg',1)" id="news"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_news_off.jpg" border="0" name="news" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" />
<a href="http://www.littlevalleyspeedway.com/test/race_results.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navraceresults','','http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_on.jpg',1)" id="raceresults"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_off.jpg" border="0" name="navraceresults" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" />
</td></tr>
<script language="javascript">
if (TransMenu.isSupported()) {
var ms = new TransMenuSet(TransMenu.direction.down, 1, 0, TransMenu.reference.bottomLeft);
var menu1 = ms.addMenu(document.getElementById("news"));
menu1.addItem();
var menu2 = ms.addMenu(document.getElementById("raceresults"));
menu2.addItem();
TransMenu.renderAll();
}
</script>
Any help would be much appreciated!! I'm trying to make a simple drop down menu for the last item in the menu copied here. I've tried multiple free code on the web without success. <li><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><span>After Show Music</span></a></li> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="keywords" content="RF, producer, engineer, studio, touring, tours, live, managment, sound, mixing, editing, digital recording. Tony Levin Band, Tony Levin, Jerry Marotta, Larry Fast, Pete Levin, Jesse Gress, Todd Rundgren, Bill Bruford, Earthworks, Earthworks Underground Orchestra, BLUE, Joe Jackson, Lance Hoppen, Larry Hoppen, John Hall, Orleans, President Bill Clinton, ETHEL, ABBA's Arrival, ABBA the Tour, Anna Cheek, Jim Weider, The Band, Robbie Dupree, David Sancious, Woodstock, Water's of Eden, BLUE nights, Pieces of the Sun, Resonator, LIARS DVD, Jesse Gress, John Ferenzik, Prairie Prince, Kasim Sulton, Michael Urbano, The Band 3, Joey Eppard, Chris Gartman, Joe Stote, UKZ, Stickmen, Adrian Belew, Stickmen,Adrian Belew Power Trio, Julie Slick, Brian Slick, After Show Music, aftershowmusic.com.. "> <meta name="description" content="Audio engineer, producer, manager RF's home page. His tour schedule, latest news, audio samples, discography, photos, live sound, contact information. Gear used including Roland Digital Mixer, Bose Radiator Speakers, Byerdynamic microphones, Shure, Apple computers, MacIntosh, Logic. Ongoing work with Tony Levin, Todd Rundgren Tour Dates, The ABBA Tour Dates, Bearsville Theatre, The Band 3, ABBA the Tour, Stickmen, UKZ, Adrian Belew, ..."> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>drop down menu help</title> <link href="style2.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } --> </script> </head> <body> <table align="center" cellpadding="10" cellspacing="10" bordercolor="#B5A642" border="0" bgcolor="#444400"> <tr> <td align="right" width="120" border="0"> <div id="tabs"> <ul> <li></li> <li><a href="index.htm"><span>Home</span></a></li> <li><a href="rlive.html"><span>Live</span></a></li> <li><a href="rdisc.html"><span>Discography</span></a></li> <li><a href="rpress.html"><span>Press</span></a></li> <li><a href="rarch.html"><span>Photos</span></a></li> <li><a href="toursataglance.html"><span>Tours</span></a></li> <li><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><span>After Show Music</span></a></li> </ul> </div> </td> </tr> <td> <table align="center" cellpadding="10" cellspacing="10" bordercolor="#B5A642" border="0" bgcolor="#444400"> <tr> <td><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><img src="n140899968868_3330.jpg" width="200" height="183" border="2"></a> <br> <br> </td> <td> </td> <td><a href="MVI_4144AVI.html" target="MVI_4144.AVI" onClick="window.open('','MVI_4144.AVI', config='width=320, height=255, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')"><img src="LiveMix.jpg" alt="RF Live Mix pic click for video" width="320" height="240" border="1"></a> </td> </tr> <br> <br> </table> <table align="center" cellpadding="0" cellspacing="5" bgcolor="#444400" bordercolor="#B5A642" border="0" height="0"> <tr> <td bgcolor="#B5A642" align="left" width="680"><b><i>Robert Frazza's</i> Latest Tour Details:</b></td> </tr> <!-- <tr> <td align="left" border="0" cellpadding="10" cellspacing="10"> <br> <b>Stick Men</b> March 2010 <br> <b>Tony Levin, Pat Mastelotto, and Michael Bernier</b> <br> <br> Mar 2 - Mexico City -Show <br> Mar 3 - Mexico City Show # 2 ( I've asked Val to verify local promoter!) <br> Mar 5 - Santiago Chile Show <br> Mar 7 - Cordoba Show <br> Mar 8 - Possible TLev clinic offer pending in Buenes Aires for + dollars (If so travel from Cordoba to BA; if not travel to Montevideo) <br> Mar 10 - Montevideo Show <br> Mar 11 - Rosario Argentina - Show <br> Mar 12 - Buenes Aires TBA - Show <br> Mar 14 - Caracas Show <br> </td> </tr> --> <tr> <td align="left" border="0" cellpadding="10" cellspacing="10"> <br> <b>Eddie Jobson's UK – November</b> 2009 <br><br> <i>w/ Edddie Jobson, Marco Minnemann, Greg Howe, Tony Levin, & John Wetton </i> <br> Nov. 3 - Studio Club - Krakow <br> Nov. 4 - Palladium - Warsaw <br> Nov. 5 - Filharmonia Pomorska - Bydgoszcz <br> <br> <i>w/ Edddie Jobson, Marco Minnemann, Greg Howe, Ric Fierabracci, & Adrian Belew </i> <br> Nov. 9 - Philharmonic Hall - Perm <br> Nov.10 - B1 Maximum Club - Moscow <br> <br> <i>w /Edddie Jobson, Marco Minnemann, Greg Howe, & Ric Fierabracci </i> <br> <strike>Nov. 11 - Crossroads Live Club - Rome</strike> <br> </td> </tr> <tr> <td align="left" border="0" cellpadding="10" cellspacing="10"> <br> </td> </tr> </table> <table align="center" cellpadding="3" cellspacing="3" bordercolor="B5A642" border="0" height="25"> <tr> <br> <br> <td span class="contact"><a href="mailto:jen@robertfrazza.com" class="contact">Ashokan Talent Group</a>™ PO Box 676 - Woodstock, NY 12498 <a href="mailto:rfrazza@yahoo.com" class="contact">robert@robertfrazza.com</a> <br> This web site ia a: <a href="mailto:nesbproject@yahoo.com" class="contact">NorthEast SoundBase project</a>™ <br> <script language="JavaScript1.2"> document.write("This web site was last modified on: ", document.lastModified); </script> </span> </td> </tr> </table> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-11025875-1"); pageTracker._trackPageview(); } catch(err) {}</script> </td> </tr> </table> </body> </html> This is the css -style2.css body,td,th { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } body { background-color: #FFFFFF; } a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } a:link { text-decoration: none; color: #997700; font-weight: bold; } a:visited { text-decoration: none; color: #005588; font-weight: bold; } a:hover { text-decoration: none; color: #005588; font-weight: bold; } a:active { text-decoration: none; color: #000000; } .tba { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; font-weight: bold; } .contact { text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; font-weight: normal; text-align: center; } a.contact { text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; font-weight: normal; text-align: center; } a.contact:hover { text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #858585; font-weight: normal; text-align: center; } /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ #tabs { float:left; width:100%; font-size:93%; line-height:normal; border-bottom:1px solid #666; margin-bottom:1em; /*margin between menu and rest of page*/ overflow:hidden; } #tabs ul { margin:0; padding:10px 10px 0 0px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url("left.png") no-repeat left top; margin:0; padding:0 0 0 6px; text-decoration:none; } #tabs a span { float:left; display:block; background:url("right.png") no-repeat right top; padding:6px 15px 4px 6px; margin-right:2px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } Having trouble with Nested Side Bar menu. I got the coding reference from here and tried to alter it for my profile. http://www.dynamicdrive.com/style/cs...side_bar_menu/ I know there are easier ways to create menus like this with flash, but Im trying to learn with CSS,HTML, JAVASCRIPT.If there is anyone that can help me find an easier solution in how to do menus i would like to take your advice, Basically I wanted to change the image on the button that receives the mouse-over. Then, when i place my mouse over the second button just sits idle with no sub-menu employed. Only the first button receives the commands to employ the sub-menu. This is my Code. ********************************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="4thcss.css"> <script src="4thport.js" type="text/javascript"> </script> <title>Ruddy's Portfolio</title> </head> <body> <div id="container"> <div id="containerbackground"> </div> <div id="header"> </div> <div id="headertitles"> <a href="https://www.google.com">CSS</a> <a href="https://www.google.com">PHP</a> <a href="https://www.google.com">HTML</a> <a href="https://www.google.com">JAVASCRIPT</a> <a href="https://www.google.com">MySQL</a> </div> <div id="content"> <p>Hello, this is my website page!<br> Everything done here is by my <br>creative influence.<br> I Hope that you enjoy!</p> </div> ********************************************************** ********************************************************** <div id="yellowbutton"> <div class="sidebarmenu"> <ul id="sidebarmenu1"> <li><a href="#"></a> <ul> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> </ul> </li> </ul> </div> </div> <div id="redbutton"> <div class="sidebarmenu"> <ul id="sidebarmenu1"> <li><a href="#"></a> <ul> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> </ul> </li> </ul> </div> </div> ********************************************************** ********************************************************** <div id="footer"> <div id="footernotes"> <p> A Website by Ruddy J. Woel</p> </div></div> </div> </body> </html> CSS******************************************************* body { background-image:url(Pictures/forest2.jpg); z-index:-1; } #container { width: 860px; margin: 0 auto; height:700px; } #containerbackground { background:#ffff99; position:absolute; top:32px; width:800px; height:700px; opacity:0.8; } #header { background:#009900; position:absolute; top:2px; width:800px; height:29px; opacity:0.8; } #headertitles { position:absolute; top:1px; padding-left:20px; font-size:28px; color:#FFFFFF; font-family:Geneva, Arial, Helvetica, sans-serif; word-spacing:65px; opacity:0.9; } #content { position:absolute; top:70px; left:280px; font-size:16px; font-family:Verdana, Arial, Helvetica, sans-serif; opacity:0.8 } #yellowbutton { position:absolute; top:200px; left:260px; } .sidebarmenu ul{ margin: 0px; padding: 0px; list-style-type:none; font: 18px Verdana; width: 196px; /*main menu width*/ } .sidebarmenu ul li{ position:relative; width:197px; /*sub menu item widths*/ } /* Top level menu links style */ .sidebarmenu ul li a{ display: block; overflow: auto; /*force hasLayout in IE7 */ color: white; text-decoration: none; padding: 6px; height:22px; } .sidebarmenu ul, .sidebarmenu ul li a:visited, .sidebarmenu{ background-image:url(Pictures/yellowbutton.gif); /*background of tabs (default state)*/ } .sidebarmenu ul li a:visited{ color: white; } /*Sub level menu items */ .sidebarmenu ul li ul,.sidebarmenu ul li ul a:visited{ background-image:url(Pictures/menudrop.gif); position: absolute; width: 175px; /*Sub Menu Items width */ top: 0; visibility: hidden; } #redbutton { position:absolute; top:235px; left:260px; z-index:1; } a { text-decoration:none; color:#FFFFFF; word-spacing:40px; } #footer { background-color:#000000; position:absolute; top:733px; height:20px; width:800px; z-index:0; opacity:0.8; } #footernotes { margin-top:-10px; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:14px; z-index:1; color:#FFFFFF; } JAVASCRIPT************************************************* var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas function initsidebarmenu(){ for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle" if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item else //else if this is a sub level submenu (ul) ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.display="block" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.display="none" } } for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars ultags[t].style.visibility="visible" ultags[t].style.display="none" } } } if (window.addEventListener) window.addEventListener("load", initsidebarmenu, false) else if (window.attachEvent) window.attachEvent("onload", initsidebarmenu) ******************************************************* Thank you for your time! Hi Could you help me please. I am trying to make this drop down menu work in Internet Explorer 7 by inserting the Javascript. I'm obviously doing something wrong. Please be gentle with me I'm a bit of a newcomer to this: HTML and Javascript included below. <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> <link href="dropdownmenu.css" rel="stylesheet" type="text/css" /> </head> <body> <ul class="nav"> <li><a href="/home/">Home </a></li> <li><a href="/products/">Products </a> <ul> <li><a href="/products/silverback/">Silverback </a></li> <li><a href="/products/fontdeck/">Font Deck </a></li> </ul> </li> <li><a href="/services/">Services </a> <ul> <li><a href="/services/design/">Design </a></li> <li><a href="/services/development/">Development </a></li> <li><a href="/services/ consultancy/">Consultancy </a></li> </ul> </li> <li><a href="/contact/">Contact Us </a></li> </ul> </body> </html> Hi, Please look at the following drop-down menu: http://www.w3schools.com/JS/tryit.as...yjs_selectmenu 1. How can I set it so the pages open in the parent frame (instead of the same frame)? 2. How can I set it so the pages open in a new window? Regards Rain Lover Here is the JS I used for a drop down nav bar from DW8. I need the cursor to become a hand when you scroll over one of the menu items. Can someone tell me what and where to change this. File attached...
Hi Everyone, I'm trying to put a drop-down menu onto my website, but desperately need some help; I'd be so grateful if someone could offer some assistance. If you click on this link to see the webpage, http://www.ambersupplies.co.uk/newsite/pageone.htm you'll see the drop down menu, and the two problems I'm having with it. Please don't take any notice of the menu content; I'll be styling it all when these problems are sorted. Firstly, you'll see that the external drop down list is lying within the table (with the red background) when it should appear outside. I've obviously missed a closing table or td tag somewhere, but can't find it. Secondly, the drop down menu should appear on mouseover, and disappear on mouseout; which it does, but as you can see, when the page is firstly or reloaded, the menu is showing. I didn't write this drop-down menu code, I copied it from this page with the intention of styling it to my own webpage: http://www.w3schools.com/DHTML/tryit...rydhtml_menu10, perhaps this will give someone a clue. Can anyone shed a bit of light on this for me, please? I'd be really grateful for any help whatsoever. Many thanks in advance. Graham Hi Everyone, Could someone please help? I'm rewriting our website at present, and am quite ok with HTML and CSS, but am not particularly au fait with Javascript. Here's the page I'm having a bit of trouble with: http://www.ambersupplies.co.uk/thomas/miscellaneous.htm If you look at the long button marked 'Diagnostics', you'll see it has an arrow and initiates a drop-down menu on mouse-over. My problem is that I wish to further subdivide the three items on the sub-menu, ie, Visual to become sub-menued into Dermatoscope and Penlight. In other words, the Visual button initiates another drop-down menu on mouse-over. Basically, therefore, I'm trying to expand the Javascript to make this happen, but I just don't seem to able to. I'd be so very grateful for any help anyone can offer. Graham i have done dropdown menu dynamic using php in which data fetched from database(mysql).now i've to do that if i'll choose any option from dropdown menu that particular item's rate will also fetch from data base and display in a text box.that value can also be changed.plzz help me .give some idea.
I have a script that was a little of mine and a little of cut and paste, i dont know why its not working. You can take the whole thing and create an html page, there are no images. Thank you for any help.... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript in use for textarea</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
// iMouseDown represents the current mouse button state: up or down
/*
lMouseState represents the previous mouse button state so that we can
check for button clicks and button releases:
if(iMouseDown && !lMouseState) // button just clicked!
if(!iMouseDown && lMouseState) // button just released!
*/
var mouseOffset = null;
var iMouseDown = false;
var lMouseState = false;
var dragObject = null;
// Demo 0 variables
var DragDrops = [];
var curTarget = null;
var lastTarget = null;
var dragHelper = null;
var tempDiv = null;
var rootParent = null;
var rootSibling = null;
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
function CreateDragContainer(){
/*
Create a new "Container Instance" so that items from one "Set" can not
be dragged into items from another "Set"
*/
var cDrag = DragDrops.length;
DragDrops[cDrag] = [];
/*
Each item passed to this function should be a "container". Store each
of these items in our current container
*/
for(var i=0; i<arguments.length; i++){
var cObj = arguments[i];
DragDrops[cDrag].push(cObj);
cObj.setAttribute('DropObj', cDrag);
/*
Every top level item in these containers should be draggable. Do this
by setting the DragObj attribute on each item and then later checking
this attribute in the mouseMove function
*/
for(var j=0; j<cObj.childNodes.length; j++){
// Firefox puts in lots of #text nodes...skip these
if(cObj.childNodes[j].nodeName=='#text') continue;
cObj.childNodes[j].setAttribute('DragObj', cDrag);
}
}
}
function mouseMove(ev){
ev = ev || window.event;
/*
We are setting target to whatever item the mouse is currently on
Firefox uses event.target here, MSIE uses event.srcElement
*/
var target = ev.target || ev.srcElement;
var mousePos = mouseCoords(ev);
// mouseOut event - fires if the item the mouse is on has changed
if(lastTarget && (target!==lastTarget)){
// reset the classname for the target element
var origClass = lastTarget.getAttribute('origClass');
if(origClass) lastTarget.className = origClass;
}
/*
dragObj is the grouping our item is in (set from the createDragContainer function).
if the item is not in a grouping we ignore it since it can't be dragged with this
script.
*/
var dragObj = target.getAttribute('DragObj');
// if the mouse was moved over an element that is draggable
if(dragObj!=null){
if(target!=lastTarget){
var oClass = target.getAttribute('overClass');
if(oClass){
target.setAttribute('origClass', target.className);
target.className = oClass;
}
}
// if the user is just starting to drag the element
if(iMouseDown && !lMouseState){
// mouseDown target
curTarget = target;
// Record the mouse x and y offset for the element
rootParent = curTarget.parentNode;
rootSibling = curTarget.nextSibling;
mouseOffset = getMouseOffset(target, ev);
for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]);
dragHelper.appendChild(curTarget.cloneNode(true));
dragHelper.style.display = 'block';
// set the class on our helper DIV if necessary
var dragClass = curTarget.getAttribute('dragClass');
if(dragClass){
dragHelper.firstChild.className = dragClass;
}
dragHelper.firstChild.removeAttribute('DragObj');
/*
Record the current position of all drag/drop targets related
to the element. We do this here so that we do not have to do
it on the general mouse move event which fires when the mouse
moves even 1 pixel. If we don't do this here the script
would run much slower.
*/
var dragConts = DragDrops[dragObj];
/*
first record the width/height of our drag item. Then hide it since
it is going to (potentially) be moved out of its parent.
*/
curTarget.setAttribute('startWidth', parseInt(curTarget.offsetWidth));
curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight));
curTarget.style.display = 'none';
// loop through each possible drop container
for(var i=0; i<dragConts.length; i++){
with(dragConts[i]){
var pos = getPosition(dragConts[i]);
setAttribute('startWidth', parseInt(offsetWidth));
setAttribute('startHeight', parseInt(offsetHeight));
setAttribute('startLeft', pos.x);
setAttribute('startTop', pos.y);
}
// loop through each child element of each container
for(var j=0; j<dragConts[i].childNodes.length; j++){
with(dragConts[i].childNodes[j]){
if((nodeName=='#text') || (dragConts[i].childNodes[j]==curTarget)) continue;
var pos = getPosition(dragConts[i].childNodes[j]);
// save the width, height and position of each element
setAttribute('startWidth', parseInt(offsetWidth));
setAttribute('startHeight', parseInt(offsetHeight));
setAttribute('startLeft', pos.x);
setAttribute('startTop', pos.y);
}
}
}
}
}
if(curTarget){
// move our helper div to wherever the mouse is (adjusted by mouseOffset)
dragHelper.style.top = mousePos.y - mouseOffset.y;
dragHelper.style.left = mousePos.x - mouseOffset.x;
var dragConts = DragDrops[curTarget.getAttribute('DragObj')];
var activeCont = null;
var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2);
var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);
for(var i=0; i<dragConts.length; i++){
with(dragConts[i]){
if(((getAttribute('startLeft')) < xPos) &&
((getAttribute('startTop')) < yPos) &&
((getAttribute('startLeft') + getAttribute('startWidth')) > xPos) &&
((getAttribute('startTop') + getAttribute('startHeight')) > yPos)){
/*
our target is inside of our container so save the container into
the activeCont variable and then exit the loop since we no longer
need to check the rest of the containers
*/
activeCont = dragConts[i];
// exit the for loop
break;
}
}
}
if(activeCont){
var beforeNode = null;
for(var i=activeCont.childNodes.length-1; i>=0; i--){
with(activeCont.childNodes[i]){
if(nodeName=='#text') continue;
// if the current item is "After" the item being dragged
if(
curTarget != activeCont.childNodes[i] &&
((getAttribute('startLeft') + getAttribute('startWidth')) > xPos) &&
((getAttribute('startTop') + getAttribute('startHeight')) > yPos)){
beforeNode = activeCont.childNodes[i];
}
}
}
// the item being dragged belongs before another item
if(beforeNode){
if(beforeNode!=curTarget.nextSibling){
activeCont.insertBefore(curTarget, beforeNode);
}
} else {
if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){
activeCont.appendChild(curTarget);
}
}
// make our drag item visible
if(curTarget.style.display!=''){
curTarget.style.display = '';
}
} else {
if(curTarget.style.display!='none'){
curTarget.style.display = 'none';
}
}
}
lMouseState = iMouseDown;
// mouseMove target
lastTarget = target;
lMouseState = iMouseDown;
return false;
}
function mouseUp(ev){
if(curTarget){
// hide our helper object - it is no longer needed
dragHelper.style.display = 'none';
if(curTarget.style.display == 'none'){
if(rootSibling){
rootParent.insertBefore(curTarget, rootSibling);
} else {
rootParent.appendChild(curTarget);
}
}
// make sure the drag item is visible
curTarget.style.display = '';
}
curTarget = null;
iMouseDown = false;
}
function mouseDown(){
iMouseDown = true;
if(lastTarget){
return false;
}
}
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
window.onload = function(){
// Create our helper object that will show the item while dragging
dragHelper = document.createElement('DIV');
dragHelper.style.cssText = 'position:absolute;display:none;';
CreateDragContainer(
document.getElementById('DragContainer1'),
document.getElementById('DragContainer2'),
document.getElementById('DragContainer3')
);
document.body.appendChild(dragHelper);
}
</script>
<style type="text/css">
* {
padding:0px;
margin:0px;
}
#DragContainer1 { float:left;
width:200px;
padding:8px;
background-color:#FF0000;
height:600px;
}
#DragContainer3 { float:right;
width:200px;
padding:8px;
background-color:#000000;
height:600px;
}
#DragContainer2 { margin-right:215px;
margin-left:215px;
padding:8px;
background-color:#CCCCCC;
height:600px;
}
.linebox {
width:150px;
height:50px;
border:1px solid #FFFFFF;
background-color:#006600;
}
.linebox h1 {
font-family:"Myriad Pro";
font-size:12px;
}
</style>
</head>
<body>
<div id="DragContainer1">
<div class="linebox" id="Item1" overClass="OverDragBox" dragClass="DragDragBox"><h1>Box 1</h1></div>
<div class="linebox" id="Item2" overClass="OverDragBox" dragClass="DragDragBox"><h1>Box 2</h1></div>
<div class="linebox" id="Item3" overClass="OverDragBox" dragClass="DragDragBox"><h1>Box 3</h1></div>
</div>
<div id="DragContainer3">
<div class="linebox" id="Item4" overClass="OverDragBox" dragClass="DragDragBox"><h1>Box 4</h1></div>
<div class="linebox" id="Item5" overClass="OverDragBox" dragClass="DragDragBox"><h1>Box 5</h1></div>
<div class="linebox" id="Item6" overClass="OverDragBox" dragClass="DragDragBox"><h1>Box 6</h1></div>
</div>
<div id="DragContainer2">
<div class="linebox" id="Item7" overClass="OverDragBox" dragClass="DragDragBox"><h1>Box 7</h1></div>
<div class="linebox" id="Item8" overClass="OverDragBox" dragClass="DragDragBox"><h1>Box 8</h1></div>
<div class="linebox" id="Item9" overClass="OverDragBox" dragClass="DragDragBox"><h1>Box 9</h1></div>
</div>
</body>
</html>
Hi, I'm trying to edit a script that allows multiple drop downs, and simply adds a table depending on the answers (ready for form submittion) this works 100% in firefox, but falls over in IE.... this is the code Code: <script type="text/javascript">
function f (sel) {
var d = document, dv;
if (d.getElementById) {
for (var ii=0; ii < sel.options.length; ii++) {
dv = d.getElementById(sel.options[ii].value);
if(dv) dv.style.display = sel.options[ii].selected? "block": "none";
}
}
}
function convf (sl) {
if (sl.selectedIndex==1) {
var disp = document.getElementById('yesc');
disp.style.display='block';
} else {
var disp = document.getElementById('yesc');
disp.style.display='none';
}
}
</script>
<!--[if IE]>
<script type="text/javascript">
function f(sel){
var d=document, dv;
if(d.getElementById){
for(var ii=0; ii<sel.options.length; ii++){
dv=d.getElementById(sel.options[ii].text);
if(dv)
dv.style.display=sel.options[ii].selected?"block":"none";
}
}
}
</script>
<![endif]--> <script type="text/javascript">
function showhide()
{
var radi = document.getElementById('radio1');
var row1 = document.getElementById('one');
var row2 = document.getElementById('two');
if (radi.checked == true) {
row1.style.display = '';
row2.style.display = 'none';
}
else {
row1.style.display = 'none';
row2.style.display = '';
}
}
</script>
any ideas why this wont work? http://www.engtechjobs.co.uk/candreg.php My problem is in the drop down menus for site names, we have hundreds of sites and unfortunately the menu is not sorted 0-1 then A-Z and I would love it to be sorted like that. I have tried to do my homework and understand java / javascript but I just can't stand it and I feel it is too complicated for me. The good news is I used to be a good ASP/vbscript programmer about 12 years ago so I have the "common sense" of understanding how to apply something similar on other pages, because I have lots of drop down menus that I need to sort. I need your help in the attached file please. I need someone to simply highlight for me where in the javascript is fetching the site names from the DB and what needs to be added to sort them. Please identify it inside the file by either different color or bold font. Once I see it i will be able to figure out how to apply it in general to the other menus in the other pages. Thank you in advance. hey im newish to javascript. ive completely handwritten this script, based on a working drop down menu script i had. this new script is supposed to incorporate the menu 'rolling' down. this is based on pixel increment by time. problems with the code: doesnt work at all with ie, only FF can only open one menu item per refresh of page when you go to click on a menu sub-item the menu disappears as soon as your mouse leaves the first header link. didnt have any of these problems with the basic drop down menu this is based on. so heres the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div, a, ul, li, body, {padding:0;margin:0; text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
li {font-size: 15px;}
body{margin:0;}
#container {width:800px; margin: 0 auto; font-family:Tahoma, Geneva, sans-serif;}
.drop {overflow: hidden; width: 180px; height: 20px; float: left; background: #f1f1f1; display: block; list-style:none; padding: 5px 10px; opacity: 0.9; filter: alpha(opacity=90); border-bottom: 1px solid blue;margin: 0;}
.menuItemHolder {width: 200px; height: 20px; float:left;}
.topLi {margin-bottom: 10px; text-align: center; font-size: 16px;}
.relDiv {border: 1px solid green; background: blue; color: #fff;}
#nav-container {height: 30px; margin: 0;}
/*THIS BIT SHOULD BE UNCOVERED IF USING 6 MENU ITEMS, (instead of 5)*/
.menuItemHolder {width: 160px;}
.drop {width: 140px;}
</style>
<script type="text/javascript">
height=20; //set initial height of top menu links
var timer_is_on=0; //set timer value to 0 (off)
function dropper(dropN)
{
menu = document.getElementById(dropN); //select menu to open
var links=menu.innerHTML; //select link holder
numLinks=(links.split("</li>").length-1); //calculate number of links in each link holder
height++; //increase value of height by '1' each time
maxHeight=10+(numLinks*18); //calculate height of expanded Li holder
if (height<=maxHeight) //code to run if menu is fully extended
{
menu.style.height=height+"px"; //reformat for pixel declaration
menu.style.position = "absolute"; //change menu to absolutely positioned
setTimeout("dropper("+dropN+")",10); //call function from within itself after 10 miliseconds
}
else
{
}
}
function doTimer(dropN)
{
if (!timer_is_on) //check if timer is set, if not, set it and redirect
{
timer_is_on=1;
dropper(dropN); //redirect to the function to bring the menu down
}
}
function backup(dropN)
{
menu = document.getElementById(dropN); //select menu to close
menu.style.height = '20px'; //change to closed height (height of first link only)
height=20; //change height variable back to 20
var timer_is_on=0; //reset time set variable to 0
}
</script>
</head>
<body>
<div id="nav-container">
<div class="menuItemHolder">
<ul id="1" class="drop" onMouseOver="doTimer('1');" onMouseOut="backup('1');">
<li class="topLi"><a href="#">Top bit</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
</ul>
</div>
<div class="menuItemHolder">
<ul id="2" class="drop" onMouseOver="doTimer('2');" onMouseOut="backup('2');">
<li class="topLi"><a href="#" class="topLi">Longer Top bit</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 2</a></li>
</ul>
</div>
</body>
</html>
any help much appreciated |
|||||||