|
JavaScript - Drop Down Menu - Currency Converter
Hi,
I need to create a currency converter using a drop down menu. Firstly i needed to do a regular expressions check to make sure only numerics are entered and I got that. The one thing im pretty confused on is how to do the calculations in the actual function. Ive popped the code below, and if anyone could give me some hints on how to get the data from the drop down menu and calculate it properly that would be awesome. Thanks. -oh and i know all my coding is here but i think its relevent that you can view it all. Code: <html>
<head>
<style type ="text/css">
@import url(style.css);
</style>
<script type="text/javascript">
function convert()
{
var OK = true;
var inDollar= document.getElementById('dollars').value;
var regex= /^\d{1,}$/;
if (!regex.test(inDollar))
{
OK=false;
alert('Australian Dollars must be entered as numeric with no decimal places');
}
return OK;
var rate= country.conversion.value;
if (document.getElementByID('conversion').selectedIndex == 0)
{
var rate= country.conversion.value;
var convert = inDollar*rate;
alert('$'+inDollar+' converts to'+rate+' US Dollars');
}
if (document.getElementByID('conversion').selectedIndex == 1)
{
var rate= country.conversion.value;
var convert = inDollar*rate;
alert('$'+inDollar+' converts to'+rate+' Euro');
}
if (document.getElementByID('conversion').selectedIndex == 2)
{
var rate= country.conversion.value;
var convert = inDollar*rate;
alert('$'+inDollar+' converts to'+rate+' Yuan');
}
if (document.getElementByID('conversion').selectedIndex == 3)
{
var rate= country.conversion.value;
var convert = inDollar*rate;
alert('$'+inDollar+' converts to'+rate+' Yen');
}
}
</script>
</head>
<body>
<h1>Currency Page</h1>
<form>
Australian Dollars:<input type="text" name="dollars" id="dollars" />
<br />
Convert to:
<select id='conversion' name='country'>
<option value=".73">US Dollars</option>
<option value=".62">Euro</option>
<option value="5.8">Chinese Yuan</option>
<option value="78.5">Japanese Yen</option>
</select>
<br />
<input type="button" value="Convert" onClick="convert()" />
</form>
</body>
</html>
I can only seem to find really complicated ones online, nothing simple which i think this is. Thanks Similar TutorialsHi I have the following currency converter code which works fine, but I need to make it possible for someone else to edit the euro price using a visual editor such as contribute. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language='javascript'>
exchRate = 1.13;
function getUKP(price) {
document.write('(£' + Math.round(price / exchRate) + ')');
}
</script>
</head>
<body>
<strong>€526</strong> <script type="text/javascript">getUKP('526');</script><br /><br />
<strong>€1999</strong> <script type="text/javascript">getUKP('1999');</script>
</body>
</html>
This code requires someone to change the figure in the javascript as well as the html. I guess I need to somehow automatically pick up the numeric characters only from the html which appear on the same line of code... or perhaps there's an easier way.? Any help would be much appreciated. Thanks Hey guys. I am in an introductory computer science class and I am having trouble writing JavaScript code for a currency converter. I can get it to where it spits out numbers, but its always the same numbers. I think there's something wrong in the calculations part of my code but I can't figure it out. I am posting it below, and any help would be greatly appreciated. Thank you. <html> <head> <title>CURRENCY CONVERTER</title> <script language="JavaScript"> function converting() { with (document.conversions) { if (unit[1].selected) { var result = eval(unit.value*0.974); convertedValue.value = result; } // end if if (unit[2].selected) { var result = eval(unit[2].value*0.492); convertedValue.value = result; } // end if if (unit[3].selected) { var result = eval(unit[3].value*0.706); convertedValue.value = result; } // end if } // end with } // end function converting </script> </head> <form name = "conversions"> <table border=6 bgcolor ="yellow"> <tr> <td><font color="red" size=6>Enter amount in U.S. $:</font></td> <td><input type="text" name="inUnit" size = 4></td> </tr> <tr> <td><font color="red" size=6>Select target unit:</font> <td><select name="unit"> <option value="Select Currency" selected>Choose one... <option value="1">Canadian Dollars <option value="2">British Pounds <option value="3">Euros </select> <td><input type="button" value="Convert" onclick="converting()"> </tr> <tr> <td><font color="green" size=6>Converted Value:</font> <td><input type="text" name="convertedValue" size = 4> <td><input type="reset" value="Reset"> </tr> </table> </form> </body> </html> 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.
Hi all, I have a problem about my converter.Why when I'm clicking on the keypad displayed in the form,it doesn't display the result.But when clicking on the keypad on the keyboard,it works?.Plz help me with this trouble.Here are my code. <-html-> <html> <head> <title>Currency Converter</title> <link rel="stylesheet" href="../css/cal.css" type="text/css" > <script type="text/javascript" src="../cal.js"></script> </head> <body> <h2>Currency Converter<h2> <table id="table1"> <form id="currconverter"> <tr> <td>Convert<br>from:</td> <td><input type="text" id="amount" value="" size="17" onChange="convertCurr()"></td> <td> <select id="from_select"> <option value="GBP" selected="selected">Pound Sterling</option> <option value="USD">US Dollar</option> <option value="MUR">Mauritian RS</option> <option value="EUR">Euro</option> <option value="JPY">Yen</option> </select> </td> </tr> <tr> <td>Convert<br>to:</td> <td><input type="text" id="result" value="" size="17" readonly="readonly" onchange="convertCurr();"></td> <td> <select id="to_select"> <option value="GBP">Pound Sterling</option> <option value="USD">US Dollar</option> <option value="MUR" selected="selected">Mauritian RS</option> <option value="EUR">Euro</option> <option value="JPY">Yen</option> </select> </td> </tr> </form> </table> <br> <table cellpadding="0" cellspacing="5" border="1" align="center" bgcolor="AABBCC"> <form name="cal"> <tr> <td><input type="button" value="7" onClick="currconverter.amount.value += '7'"></td> <td><input type="button" value="8" onClick="currconverter.amount.value += '8'"></td> <td><input type="button" value="9" onClick="currconverter.amount.value += '9'"></td> </tr> <tr> <td><input type="button" value="4" onClick="currconverter.amount.value += '4'"></td> <td><input type="button" value="5" onClick="currconverter.amount.value += '5'"></td> <td><input type="button" value="6" onClick="currconverter.amount.value += '6'"></td> </tr> <tr> <td><input type="button" value="1" onClick="currconverter.amount.value += '1'"></td> <td><input type="button" value="2" onClick="currconverter.amount.value += '2'"></td> <td><input type="button" value="3" onClick="currconverter.amount.value += '3'"></td> </tr> <tr> <td><input type="button" value="0" onClick="currconverter.amount.value += '0'"></td> <td><input type="button" value="." onClick="currconverter.amount.value += '.'"></td> <td><input type="reset" value="C" OnClick="currconverter.amount.value = ''"></td> </tr> </form> </table> </body> </html> <-javascript-> function convertCurr() { var amount = parseFloat(document.getElementById("amount").value); var form = document.getElementById("currConverter"); var fromSelect = document.getElementById("from_select"); var toSelect = document.getElementById("to_select"); var result= document.getElementById("result"); var currencyTo = []; switch (fromSelect.value) { case "GBP": currencyTo = [1, 1.61, 46.91, 1.23, 128.89]; break; case "USD": currencyTo = [1.62, 1, 28.90, 0.76, 79.84]; break; case "MUR": currencyTo = [1.02, 0.03, 1, 0.03, 0.00]; break; case "EUR": currencyTo = [0.81, 1.31, 38.01, 1, 104.47]; break; case "JPY": currencyTo = [0.01, 1.25, 0.00, 0.96, 1]; break; default: alert("It broke."); } result.value = (amount * currencyTo[toSelect.selectedIndex]).toFixed(2); } Hello, I've been reading my JS book, have done a 'Degrees Converter' which converts fahrenheit into centigrade. There is a prompt box which automatically loads when the website is loaded. I am pressuming this is because I have my script in the body. I have a question if anybody could possibly help me out. How do I get my script as a link? To explain a little better, I wanted to put the words 'Degrees Converter' onto my page(as a link), so that when people click the link, it loads up the prompt box. I'm very new to JavaScript, so if anyone could help me out it would be a great help. Thank you very much. Hello, I am having trouble with a javascript length converter that I got from http://www.javascriptkit.com/script/...onverter.shtml It is working fine in dreamweaver, but when it goes live on my site, the calculations do nothing. I can see everything in the drop down menus, but when i click the "to" button, nothing happens. I got the following errors from chrome when activating any of the calculation functions. I'm wondering if anyone here can help me decipher these 1. Uncaught TypeError: Cannot read property 'from_unit' of undefined 1. convert_unitDefault.aspx:459 2. (anonymous function)Default.aspx:482 3. onchangeDefault.aspx:483 1. Default.aspx:459Uncaught TypeError: Cannot read property 'from_unit' of undefined 1. convert_unitDefault.aspx:459 2. (anonymous function)Default.aspx:496 3. onchangeDefault.aspx:497 1. Default.aspx:459Uncaught TypeError: Cannot read property 'from_unit' of undefined 1. convert_unitDefault.aspx:459 2. (anonymous function)Default.aspx:516 3. onclickDefault.aspx:517 Hi all -- I realize this is probably pretty simple, but it's been a while since I did any Javascripting, and things have changed a great deal. My apologies if I sound a bit clueless. I need to create a conversion tool. On one side of the tool are 4 form boxes. On the other, just text (not in form boxes). Under the covers, I have formulas for converting the numbers -- mostly basic math functions. So, the user types in numbers, clicks convert and the text changes. For some reason, I'm having a hard time getting this to go. How can I get the results of these calculations to show up as text within a DIV tag and not inside a form element? There are lots of examples of getting these calculations to appear within form boxes, but not within DIVs. Any examples would be greatly appreciated. This page is already using the Dojo toolkit for some other functionality, is this something I could leverage here to build my Javascript? Thanks in advance for your patience. Hello all. I'm so glad i found this forum!!! This looks like a great coding community. This will be my First Post. I was wondering if you guys can help me with my weight converter. I cant seem to make it work properly on my site. here is the code im using: <p class="about">Convert weight measurements between U.S./Imperial and SI (Metric) units<br /> Type your value in a box, click the <input onclick="alert('Not this button!')" type="button" name="test_bt" value="Go!" /> and all unit conversions in the same category will be calculated.</p> <form action=""> <table width="500" border="1" cellspacing="0" cellpadding="4"> <tbody> <tr bgcolor="#0066ff"><th class="headings" colspan="3" bgcolor="#1765BB">SI (Metric)</th></tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78" width="288">Tonne</td> <td class="headings" align="right" bgcolor="#103e78" width="130"><input type="text" name="mTon" size="15" /></td> <td class="headings" bgcolor="#103e78" width="57"><input onclick="if (checkNum(mTon.value)) compute(this.form,mTon.name,weight_data)" type="button" name="mTon_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78" width="288">Kilogram (kg)</td> <td class="headings" align="right" bgcolor="#103e78" width="130"><input type="text" name="mKilogram" size="15" /></td> <td class="headings" bgcolor="#103e78" width="57"><input onclick="if (checkNum(mKilogram.value)) compute(this.form,mKilogram.name,weight_data)" type="button" name="mKilogram_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78" width="288">Gram (g)</td> <td class="headings" align="right" bgcolor="#103e78" width="130"><input type="text" name="mGram" size="15" /></td> <td class="headings" bgcolor="#103e78" width="57"><input onclick="if (checkNum(mGram.value)) compute(this.form,mGram.name,weight_data)" type="button" name="mGram_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78" width="288">Milligram (mg)</td> <td class="headings" align="right" bgcolor="#103e78" width="130"><input type="text" name="mMilligram" size="15" /></td> <td class="headings" bgcolor="#103e78" width="57"><input onclick="if (checkNum(mMilligram.value)) compute(this.form,mMilligram.name,weight_data)" type="button" name="mMilligram_bt" value="Go!" /></td> </tr> <tr><th class="headings" colspan="3" bgcolor="#103e78"> </th></tr> <tr bgcolor="#0066ff"><th class="headings" colspan="3" bgcolor="#1765BB">Troy weight</th></tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78" width="288">Pound (lb t)</td> <td class="headings" align="right" bgcolor="#103e78" width="130"><input type="text" name="troyPound" size="15" /></td> <td class="headings" bgcolor="#103e78" width="57"><input onclick="if (checkNum(troyPound.value)) compute(this.form,troyPound.name,weight_data)" type="button" name="troyPound_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78" width="288">Ounce (oz t)</td> <td class="headings" align="right" bgcolor="#103e78" width="130"><input type="text" name="troyOunce" size="15" /></td> <td class="headings" bgcolor="#103e78" width="57"><input onclick="if (checkNum(troyOunce.value)) compute(this.form,troyOunce.name,weight_data)" type="button" name="troyOunce_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78" width="288">PennyWeight (dwt)</td> <td class="headings" align="right" bgcolor="#103e78" width="130"><input type="text" name="troyDWT" size="15" /></td> <td class="headings" bgcolor="#103e78" width="57"><input onclick="if (checkNum(troyDWT.value)) compute(this.form,troyDWT.name,weight_data)" type="button" name="troyDWT_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78" width="288">Grain<br /> Same as Avoirdupois grain</td> <td class="headings" align="right" bgcolor="#103e78" width="130"><input type="text" name="troyGrain" size="15" /></td> <td class="headings" bgcolor="#103e78" width="57"><input onclick="if (checkNum(troyGrain.value)) compute(this.form,troyGrain.name,weight_data)" type="button" name="troyGrain_bt" value="Go!" /></td> </tr> <tr bgcolor="#6699ff"> <td class="headings" colspan="3" bgcolor="#103e78"> </td> </tr> <tr bgcolor="#0066ff"><th class="headings" colspan="3" bgcolor="#1765BB">Avoirdupois weight</th></tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78">British ("long") ton</td> <td class="headings" align="right" bgcolor="#103e78"><input type="text" name="briTon" size="15" /></td> <td class="headings" bgcolor="#103e78"><input onclick="if (checkNum(briTon.value)) compute(this.form,briTon.name,weight_data)" type="button" name="briTon_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78">US ("short") ton</td> <td class="headings" align="right" bgcolor="#103e78"><input type="text" name="usTon" size="15" /></td> <td class="headings" bgcolor="#103e78"><input onclick="if (checkNum(usTon.value)) compute(this.form,usTon.name,weight_data)" type="button" name="usTon_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78" height="42">British ("long") hundredweight (cwt)</td> <td class="headings" align="right" bgcolor="#103e78" height="42"><input type="text" name="briCWT" size="15" /></td> <td class="headings" bgcolor="#103e78" height="42"><input onclick="if (checkNum(briCWT.value)) compute(this.form,briCWT.name,weight_data)" type="button" name="briCWT_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78">US ("short") hundredweight (cwt)</td> <td class="headings" align="right" bgcolor="#103e78"><input type="text" name="usCWT" size="15" /></td> <td class="headings" bgcolor="#103e78"><input onclick="if (checkNum(usCWT.value)) compute(this.form,usCWT.name,weight_data)" type="button" name="usCWT_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78">Stone</td> <td class="headings" align="right" bgcolor="#103e78"><input type="text" name="briStone" size="15" /></td> <td class="headings" bgcolor="#103e78"><input onclick="if (checkNum(briStone.value)) compute(this.form,briStone.name,weight_data)" type="button" name="briStone_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78">Pound (lb)</td> <td class="headings" align="right" bgcolor="#103e78"><input type="text" name="avdpPound" size="15" /></td> <td class="headings" bgcolor="#103e78"><input onclick="if (checkNum(avdpPound.value)) compute(this.form,avdpPound.name,weight_data)" type="button" name="avdpPound_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78">Ounce (oz)</td> <td class="headings" align="right" bgcolor="#103e78"><input type="text" name="avdpOunce" size="15" /></td> <td class="headings" bgcolor="#103e78"><input onclick="if (checkNum(avdpOunce.value)) compute(this.form,avdpOunce.name,weight_data)" type="button" name="avdpOunce_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78">Dram (dr)</td> <td class="headings" align="right" bgcolor="#103e78"><input type="text" name="avdpDram" size="15" /></td> <td class="headings" bgcolor="#103e78"><input onclick="if (checkNum(avdpDram.value)) compute(this.form,avdpDram.name,weight_data)" type="button" name="avdpDram_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" bgcolor="#103e78">Grain</td> <td class="headings" align="right" bgcolor="#103e78"><input type="text" name="avdpGrain" size="15" /></td> <td class="headings" bgcolor="#103e78"><input onclick="if (checkNum(avdpGrain.value)) compute(this.form,avdpGrain.name,weight_data)" type="button" name="avdpGrain_bt" value="Go!" /></td> </tr> <tr bgcolor="#0066ff"> <td class="headings" colspan="2" align="center" bgcolor="#103e78"><input onclick="resetAll(this.form)" type="button" name="res7" value="Clear all numbers" /></td> <td class="headings" bgcolor="#103e78"> </td> </tr> </tbody> </table> <p> </p> </form> <p> </p> and help will be greatly appreciated. I am trying to make a unit converter with two dropdown boxes, two textfields and a button. I want to enter a number into the first textfield, select a unit option, then select another appropriate unit option based on the first selection, press the button and get the result in the second textfield. What would be the best approach for this. So far I have: <html> <head> <script type="text/javascript"> function convertUnit () { // convert pound to kilogram document.unitForm.toField.value = document.unitForm.fromField.value / 2.2; // convert kilogram to pound document.unitForm.toField.value = document.unitForm.fromField.value * 2.2; // convert inch to centimeter document.unitForm.toField.value = document.unitForm.fromField.value / 2.54; // convert centimeter to inch document.unitForm.toField.value = document.unitForm.fromField.value * 2.54; } </script> </head> <body style="background-color:lightgray"> <form action="" name="unitForm"> <input type="text" name="fromField" onfocus="this.form.fromField.value=''; style.background='lightyellow';" onblur="style.background='white';" /> <select name="fromList" > <option value="" selected="selected">Unit</option> <option id="fromPound" value="2.2">lb</option> <option id="fromKilogram" value="1.0">kg</option> <option id="fromInch" value="1.0">in</option> <option id="fromCentimeter" value="2.54">cm</option> </select> <input type="button" value="Convert" onclick="convertUnit()" /> <input type="text" name="toField" readonly="readonly" /> <select name="toList"> <option value="" selected="selected">Unit</option> <option name="toKilogram" id="toKilogram" value="1.0">kg</option> <option name="toPound" id="toPound" value="2.2">lb</option> <option name="toCentimeter" id="toCentimeter" value="2.54">cm</option> <option name="toInch" id="toInch" value="1.0">in</option> </select> <input type="reset" value="Reset" /> </form> </body> </html> 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; } 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.
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> 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 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 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> 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, 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 |
|||||||