|
JavaScript - Fixing A Menu Move List
I've ran the entire code through a javascript debugger a few times and I believe I weeded out the obvious errors. Also I believe I fixed some of the more hidden errors that one can't find with even the best debuggers..
Still it doesn't perform like it should? I found other scripts that do the same thing, but it defeats the purpose of me fixing it if I just write up a new code, even if it's easier. What make it hard for me to digest is it is somewhat complex compared to other codes that do the exact same thing. Any help? Also attached a zip file for those who want to see it externally.. Code section Code: <script type="text/javascript">
/* <![CDATA[ */
var sortItems = 1;
function move(sourceList,targetList) {
for(var i=0; i<sourceList.options.length; i++) {
if(sourceList.options[i].selected && sourceList.options[i].value != "") {
var no = new Option();
no.value = sourceList.options[i].value;
no.text = sourceList.options[i].text;
targetList.options[targetList.options.length] = yes;
sourceList.options[i].value = "";
sourceList.options[i].text = "";
}
}
moveUp(sourceList);
if (sortItems)
doSort(targetList);
}
function moveUp(curOptionList) {
for(var i=0; i<curOptionList.options.length; i++) {
if(curOptionList.options[i].value == "") {
for(var j=i; j<curOptionList.options.length-1; j++) {
curOptionList.options[j].value = curOptionList.options[j+1].value;
curOptionList.options[j].text = curOptionList.options[j+1].text;
}
var curLine = 0;
break;
}
}
if(curLine < curOptionList.options.length) {
curOptionList.options.length -= 1;
moveUp(curOptionList);
}
}
function doSort(curOptionList) {
var newOptions = new Array();
var tempOptions = new Object();
for(var i=0; i<curOptionList.options.length; i++) {
newoptions[0] = curOptionList.options[0];
}
for(var x=0; x<newOptions.length-1; x++) {
for(var y=(x+1); y<newOptions.length; y++) {
if(newOptions[x].text > newOptions[y].text) {
tempOptions = newOptions[x].text;
newOptions[x].text = newOptions[y].text;
newOptions[y].text = tempOptions;
tempOptions = newOptions[x].value;
newOptions[x].value = newOptions[y].value;
newOptions[y].value = tempOptions;
}
}
}
for(var i=0; i<curOptionList.options.length; i++) {
curOptionList.options[i].value = newoptions[i].value;
curOptionList.options[i].text = newoptions[i].text;
}
}
/* ]]> */
</script>
Form section Code: <body> <form action="" method="get" enctype="application/x-www-form-urlencoded"> <table border="0"> <tr> <td><select multiple="multiple" size="5" name="list1"> <option value="11">iPod Nano</option> <option value="12">iPod Shuffle</option> <option value="13">iPod Classic</option> </select></td> <td> <input type="button" value=" ›› " onclick="move(list1,list2)" name="B1" /> <br /> <input type="button" value=" ‹‹ " onclick="move(list2,list1)" name="B2" /> </td> <td><select multiple="multiple" size="5" name="list2"> <option value="21">MacBook</option> <option value="22">MacBook Pro</option> <option value="23">MacBook Air</option> </select></td> </tr> </table> </form> </body> </html> Similar TutorialsHi there. This is my first thread. I'm completely new to javascript. I want to use dreamweaver with javascript to do a litter project in which I want to move value "Saleman" from drop-menu 1 and value "Billy" from drop-down 2 to a list box. The result should be as follows: dropdown 1 Manager Salesman (to be selected) Cleaner dropdown 2 Billy (to be selected) Susan Ivan --- [Add button] Listbox Salesman - Billy Thank you for your help. Cheers Raymond I'm trying to move a list of names from a textbox (jim;bill;sam;cathy to a listbox. My code so will move the name to listbox but all one line. I need the list the names in the listbox so that can click them one at a time. Please see my code. How can I modify it to fill the list one name per line? function addItem(){ var tb = $get('<%=txtWhoTo.ClientID%>'); var rightListbox = document.getElementById('<%=lstNDisplay.ClientID%>'); if(strText.length > 0){ var nlength = rightListbox.options.length; rightListbox.options[nlength] = new Option(strText, nlength, false, false); } } I don't want remove any names from the listbox till I click the "OK" button and overwrite what is in the textbox. I am trying to get the menu bar to also have a "<" on the other side, so i can control the menu to the left also, Thanks in advance Code: <style>
#hmenu {position:absolute; overflow: hidden; left: -275px; width:350px; height:30px; border: solid 1px #339900; padding: 5px; font-family: arial, sans-serif;}
#harrow {position: absolute; left: 325px; top: 5px; border: solid 1px #339900; font-weight: bold; width:20px; height: 18px; text-align:center; background-color:#336600; }
a {text-decoration: none;}
#harrow a {color: white}
</style>
<script>
function move(menu_id,mTop,mLeft){
var obj = document.getElementById(menu_id);
obj.style.top = obj.offsetTop+mTop +"px";
obj.style.left = obj.offsetLeft+mLeft+"px";
}
</script>
</HEAD>
<BODY>
<div id=hmenu>
<a href=#>Link 1</a> | <a href=#>Link 2</a> | <a href=#>Link 3</a> | <a href=#>Link 4</a> | <a href=#>Link 5</a>
<div id=harrow><a href="#" onclick="move('hmenu',0,295)"> > </a></div>
I wanted a custom look for my list menu. Here is what I came up with... http://schrene.web44.net/List-Menu.html I created it using divs with text overflow to get the scroll bar. Here is my code Code: <div id="colorList"> <center> <div class="mySelect" onClick="myFunction()">Abalone</div> <div class="mySelect" onClick="myFunction()">Acorn</div> <div class="mySelect" onClick="myFunction()">Adobe</div> <div class="mySelect" onClick="myFunction()">Allspice</div> <div class="mySelect" onClick="myFunction()">Antarctica</div> <div class="mySelect" onClick="myFunction()">Anthracite</div> <div class="mySelect" onClick="myFunction()">Aqualite</div> <div class="mySelect" onClick="myFunction()">Arctic Blueberry</div> <div class="mySelect" onClick="myFunction()">Arctic Ice</div> <div class="mySelect" onClick="myFunction()">Arctic Lime</div> <div class="mySelect" onClick="myFunction()">Cilantro</div> <div class="mySelect" onClick="myFunction()">Cinnabar</div> <div class="mySelect" onClick="myFunction()">Clam Shell</div> <div class="mySelect" onClick="myFunction()">Clove</div> <div class="mySelect" onClick="myFunction()">Cobalt</div> <div class="mySelect" onClick="myFunction()">Cocoa Brown</div> <div class="mySelect" onClick="myFunction()">Concrete</div> <div class="mySelect" onClick="myFunction()">Copperite</div> <div class="mySelect" onClick="myFunction()">Cottage Lane</div> <div class="mySelect" onClick="myFunction()">Designer White</div> <div class="mySelect" onClick="myFunction()">Doeskin</div> <div class="mySelect" onClick="myFunction()">Dove</div> <div class="mySelect" onClick="myFunction()">Earth</div> </center> </div> It worked great but it loses the scroll bar on iPhone. I want something that works for mobile web as well as traditional.. Does anybody have any ideas how to create a list menu like this??? Any help would greatly be appreciated i need help on designing a drop down list menu. this rolls down and shows other list of options to click on. i work in dreamweaver so javascripts and others can be incorporated. thanks all I am looking for something that works like this list/menu. Code: <html>
<head>
<title>
trial
</title>
<script type="text/javascript">
function go(a)
{
c=document.getElementById("hidden").value;
if(c!="")
{
document.getElementById(c).className="black";
}
b=document.getElementById(a).value;
document.getElementById(b).className="red";
document.getElementById("hidden").value=b;
}
</script>
<style type="text/css">
.black {color: #000000;}
.red {color: #c00;}
</style>
</head>
<body>
<select id="blue" onchange="go(this.id)">
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
<option value="3" id="3">3</option>
<option value="4" id="4">4</option>
<option value="5" id="5">5</option>
<option value="6" id="6">6</option>
</select>
<input type="hidden" id="hidden" value="">
</body>
</html>
This code does not work "correctly" in IE It does work "correctly" in Firefox I need something that will work "correctly" in IE and Firefox I have looked high and low but have come up with nothing.... Also I don't know if it is possible but I would like to find something that changes the font color of every previous selection that has been made not just the last one. Has any one seen anything like that???? Hi all, I am having problems with a script 'Cut & Paste CSS Horizontal List Menu' from http://www.javascriptkit.com/script/...stopmenu.shtml It works on my site with Firefox but not IE 8. My site url is http://www.bridgepoint-llp.co.uk/ I would be grateful for any help anyone could supply Hi Everyone, I have a small doubt in jsp coding..I want to disable certain links on user login.These links come under a menu list. Clarifying more on this..I have created a web application which has got a login page..After login it redirects me to my home page..now when an administrator logs in he/she should be able to view all links on the menu list whereas when an user logs in he/she should only view a certain number of links based on his/her privileges..how can i write this code. Can anyone help me?? Its really really urgent!!!!!!!!!! please................ Hi Chaps, I have a dynamic list menu: PHP Code: <?php $currentCat = ''; $first = true ;?> <ul> <?php do { if ($currentCat != $row_rsCategory['catname']) { if (!$first) { echo "\n</ul>\n</li>\n"; } $currentCat = $row_rsCategory['catname']; ?> <li><?php echo $row_rsCategory['catname']; ?> <ul> <?php }?> <li><?php echo $row_rsCategory['galleryname']; ?></li> <?php $first = false; } while ($row_rsCategory = mysql_fetch_assoc($rsCategory)); ?> </ul> </li> </ul> I've tried looking for a show/hide script, to toggle category names/gallery names, but could only find ones that have static menu options, and have failed to edit existing code to fit....any help or guidence would be appreciated! Hi... I did the Cut & Paste CSS Vertical List Menu, but I have an issue with submenus... Appear behind other divs. I attach a print screen. I include inside a div. Any idea? Code: <div id="sidebar1">
<ul id="verticalmenu" class="glossymenu">
<li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript Tutorials</a></li>
<li><a href="#">References</a>
<ul>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
</ul>
</li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >DHTML/ CSS Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/howto/">web Design Tutorials</a></li>
<li><a href="#" >Helpful Resources</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
</ul>
</li>
</ul>
</div>
I am hoping you guys can help me with this issue. What I am trying to do is fairly simple, depending on what option you select in the menu I want the picture to change to different picture. The code that I posted below works perfectly except for one problem. I need the option value to display the color name, and not have the image code in it. I have researched ways to do this without having to use "value" but I just can't find one that works. Can someone please help me? Thanks in advance for any help given! Code: function changeimg(){
document.getElementById('colors').src=document.getElementById('color_dropdown_options').value
}
Code: <label> <select name="color" class="dropdown_options" id="color_dropdown_options" onchange="changeimg()"> <option value="/images/thumbnails/image1.jpg">White</option> <option value="/images/thumbnails/image2.jpg">Blue</option> <option value="/images/thumbnails/image3.jpg">Green</option> </select> </label> Code: <div id="display"><img src="/images/thumbnails/image1.jpg" width="270" height="382" alt="" id="colors" /> I have the following code for determining 30 year amortization for fha and conventional loans: Code: function calc(){
var alrt="";
if (document.getElementById("down").value==""){
alrt+="Down Payment\n";
}
if (!document.getElementById("con").checked && !document.getElementById("fha").checked){
alrt+="Loan Type";
}
if (alrt!=""){
alert("You Must Fill Out the Following Fields:\n"+alrt);
}
else {
doAmb();
}
}
function doAmb(){
var pur=purchasePrice;
var down=eval(document.getElementById("down").value);
if (document.getElementById("type").selectedIndex==1){
downPay=down*.01;
downPay=downPay*pur;
}
else {
downPay=down;
}
var pay=pur-downPay;
if (document.getElementById("fha").checked){
pay=pay*(1.0225);
}
amt=getPayment(pay,360,interestRate);
writeData(pur,downPay,amt);
}
function getPayment(a,n,p) {
var acc=0;
var base = 1 + p/1200;
for (i=1;i<=n;i++)
{ acc += Math.pow(base,-i); }
return a/acc;
}
function writeData(pp,dp,mp){
document.getElementById("purc").innerHTML=Math.round(pp*100)/100;
document.getElementById("mon").innerHTML=Math.round(mp*100)/100;
document.getElementById("downP").innerHTML=Math.round(dp*100)/100+"
("+(Math.round(((dp/pp)*100)*100)/100)+"%)";
document.getElementById("loan").innerHTML=Math.round((pp-dp)*100)/100;
document.getElementById("inter").innerHTML=interestRate;
document.getElementById("ins").innerHTML=insurance;
document.getElementById("tax").innerHTML=tax;
document.getElementById("tot").innerHTML=Math.round((tax+insurance+mp)*100)/100;
document.getElementById("sptype").innerHTML=((document.getElementById("con").checked)?"Conventional":
"FHA");
document.getElementById("inputArea").style.display="none";
document.getElementById("outputArea").style.display="block";
}
function showIn(){
document.getElementById("cover").style.display="block";
document.getElementById("inputArea").style.display="block";
}
It works 100% perfectly in Firefox, but in Internet Explorer, it won't do anything. Also, I know there may be some missing variables, those are in a separate JS file. Edit: Also, just discovered that it works fine when used inline, but loaded from an external file, it returns an "Invalid Character" error. I've been working on this code and I need help fixing it. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Dog</title> <script> var fido = { name: "Fido", weight: 20.2, age: 4, breed: "mixed", activity: "fetch balls" }; var gleen = { name: "Gleen", weight: 15, age: 5, breed: "PitBull", activity: "fetch balls" }; var bensy = { name: "Bensy", weight: 25, age: 10, breed: "Terrier", activity: "Getting massaged" }; var lily = { name: "Lily", weight: 25, age: 20, breed: "Great Dane", activity: "Resting" }; var ben = { name: "Ben", weight: 30, age: 2, breed: "Mostiff", activity: "running" }; function bark(dog) { if (dog.weight > 20) { bark = "WOOF WOOF"; } else { bark = "woof woof"; } } var barks = bark(ben) function doggies(dogs, dogz) { if (dogs) { console.log (dogz.name + " " + "says" + " " + bark + " " + "give me" + " " + dogz.activity); } else { console.log (dogz.name + " " + "says" + " " + bark + " " + "give me" + " " + dogz.activity); } } doggies(fido, fido); doggies(gleen, gleen); doggies(bensy, bensy); doggies(lily, lily); doggies(ben, ben); </script> </head> <body></body> </html> It will work on console, and every body will say WOOF WOOF ( in uppercase). Except that gleen should say woof woof (in lowercase) since he weighs less then 20 pounds. What did I do wrong in my code? is there any way to fix the position of a draggable div in a table which is having fixed width and height??
Hi, I'm very much a newbie regaridng javascript and have been looking around and experimenting and have created a javascript although it does not function(Javascript code below), can someone help me fix it? Many Thanks. function gotoURL(){ var newURL = document.GotoForm.theURL.value if (newURL == "info1" || "info2" || "info3" || "info4" || "info 5"){ document.location.href=newURL+".html" }else{ alert("You entered an invalid value"); }} Hi, I am a small problem with the combo boxes in my web page.I have created a web search portal for travelling in that i have used combo boxes for selecting the no.of.passengers (Adults, Childs & Infants) along with the ages of the children.Take for example i have a hotel search page in that i have used combo box to select the no.of.rooms. And i have kept the same concept in selection of passengers too(i.e., when u select Room count as '2' there will two rows displayed separately for choosing adults & child) and when u choose child as '1' another combo box will appear to select for 1 child this is unique for each rooms. Now i can able to do the first part clearly that is when select room count the rows are displaying as per the no. But when i select for child the age combo box is coming same for all the rooms and not as unique (separate) for each room. Can anyone help me to fix this problem! Thanks, Hi,Im a student studying web design and I am stuck with my JavaScript Login code. I want my code to be able to log a user in if they have the correct username and password fields.however,if the password or username is wrong i would like to display a message in the label that says 'not valid' if they do not put anything into the username or password field,the label should read 'field cannot be empty.' this is what i have so far.im sure i have done something wrong.thank you in advance function validate() { var login="true"; document.getElementById("lblFnameVal").innerHTML=""; var checkForX = document.getElementById("fname").value; document.getElementById("lblpass").innerHTML=""; var passw = document.getElementById("fpass").value; if(document.getElementById('checkForX').value.length==0) { document.getElementById("lblFnameVal").innerHTML="username cannot be empty"; document.getElementById("lblFnameVal").style.color="red"; login="false"; } else if(document.getElementById('passw').value.length==0) { document.getElementById("lblFnameVal").innerHTML="username cannot be empty"; document.getElementById("lblFnameVal").style.color="red"; login="false"; } else (checkForX != "username" ) { document.getElementById("lblFnameVal").innerHTML="not valid"; document.getElementById("lblFnameVal").style.color="red"; login="false"; } else if(passw !="password") { document.getElementById("lblpass").innerHTML="not valid"; document.getElementById("lblpass").style.color="red"; login="false"; } if(login =="true" ) { document.getElementById("mypassForm").submit() } } |
|||||||