|
JavaScript - Master/slave Drop Box Problem
Hello,
I'm in the process of setting up an online store for our company. I'm adding a function whereby the user can view all products for their particular motorcycle model by selecting first the make and then the model they own via drop down boxes. I have the two boxes working fine, that's no problem. The problem I'm running into is in the re-direct to the proper page. What's happening is this: the URL is ending up like this: http://rekluse.mybigcommerce.com/?ma...ucts&x=11&y=16 when it should end up like this: http://rekluse.mybigcommerce.com/cat...F250R-Products Here is what I believe is the relevant code: Code: <script type="text/javascript">
<!--
function MM_jumpMenuGo(objId,targ,restore){ //v9.0
var selObj = null; with (document) {
if (getElementById) selObj = getElementById(objId);
if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0; }
}
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 KW_updateItems(d,o,fn) { //v2.6 By Paul Davis www.kaosweaver.com
var i,s,l=MM_findObj(d),b,z=o.options[o.selectedIndex].value;
l.length=0;l.options[0]=new Option('tbd','tbd');b=(z!='nill')?eval(z+'_items'):0;
for(i=0;i<b.length;i++){s=b[i].split("|");l.options[i]=new Option(s[1],s[0]);}
l.selectedIndex=0;if (!fn) return;eval(fn)
}
//-->
</script>
Code: <form name="form" id="form">
<select name="make" id="make" onchange="KW_updateItems('model',this)">
...
<input type="image" src="%%GLOBAL_IMG_PATH%%/%%GLOBAL_SiteColor%%/GoButton.gif" value="%%LNG_Subscribe%%" class="Button" id= "go_button" onclick="MM_jumpMenuGo('model','parent',0)" />
</form>
...
<script language="JavaScript">
var honda_items = new Array();
honda_items[2]='categories/Honda-CRF250R-Products|CRF250R';
</script>
Any hints? Thanks in advance. Similar TutorialsHi there! I hope I posted this question in the right place. I've been working on a Spry Master/Detail region using Dreamweaver CS4 for months now and I just can't get it to work right. I know very little about coding Javascript; I'm altering a template from a tutorial book. Here's my problem: I want at least 2 master/detail regions on a single page, each nested in a spry tabbed panel, and each filtered by a non-destructive filter. I'm having all kinds of trouble getting this accomplished.I did some troubleshooting and have pinpointed exactly where things go wrong. First, I thought that the problem might be that both of my tables were on the same page as the master/detail regions, so I put them on their own pages. No problems there. Then I built one master/detail region, with selectable filter menu, in a spry tabbed panel. No problem. Then I started all over again, and built each master/detail region stepwise following the instructions in the book. The 2 master/detail regions, 1 in each tab, are no problem. Applying the non-destructive filter is where things get tricky for me. When I apply the non-destructive filters, all of the data from the first table disappears! The table in the 2nd tab still works perfectly. My 2 spry datasets are named rs_CasteAbilities and rs_ProfAbilities. Here's the code for just creating the 2 spry data sets: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] No problems there. When I apply the nondestructive filter to the first spry dataset the first dataset filters just as it is supposed to and the second one does nothing, just as its supposed to. It looks like this: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] The problem is that when I apply the same filter to the 2nd spry dataset, the 2nd dataset filters, but the first dataset totally disappears when I view the page (firefox and safari)! I can post screenshots if needed. Here's the code I'm using: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); rs_ProfAbility.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_ProfAbility.gallery) { return row; } return null; } rs_ProfAbility.filter(chooseSet); [CODE] This problem has been stumping me for weeks and I'm getting to the point where I need to get this done. I hope that in my inexperience, I was able to communicate this problem articulately. Please somebody help! Thanks so much to anyone who takes the time to help me out. The page itself, with nothing showing up in the first tab, can be viewed he www.iotheatre.com/GoldenAgeAbilities.php -Chris Blockus Hi, I need to replace "Link Text" with the value in the variable (myNewString). myNewString is just text e.g hello code document.write(myNewString); <a href="welcome.html">Link text</a> i need some thing like the below or even a php version of it <a href="welcome.html">(myNewString)</a> THANKS!!!!!!!!! This drop down works great in Firefox, Safari, IE 8, etc... But not in IE 6 & 7. the drop down appears to the far left instead of right under the navigation. The people in the CSS area have no feedback so I thought I'd try the Javascript section because this may be a Javascripting thing for all I know. Any help or advice would be totally appreciated. Thanks... Example link: http://www.millermillerllc.com/dynamicdrive/index.html Files: http://www.millermillerllc.com/dynam...website_01.zip Hi there. I recently put a news ticker on my work's homepage and it works fine. The only problem is that the drop-down menus above it are appearing behind the news ticker. I tried trouble-shooting for the last couple days to no avail. I am hoping someone might be able to give me some hints or a way to resolve this. Here is a link to the beta page, and below is the newsticker javascript I used. This is my first time posting here and I'm really new to the world of scripting so please let me know if there is anything else you might need to help me crack this thing. Thanks to everyone in advance. Code: // Create namespace
if (at == undefined) var at = {};
if (at.bartelme == undefined) at.bartelme = {};
// Newsticker Class
at.bartelme.newsticker = Class.create();
at.bartelme.newsticker.prototype = {
initialize: function()
{
// Get elements
this.interval = 10000;
this.container = $("newsticker");
this.messages = $A(this.container.getElementsByTagName("li"));
this.number_of_messages = this.messages.length;
if (this.number_of_messages == 0)
{
this.showError();
return false;
}
this.current_message = 0;
this.previous_message = null;
// Create toggle button
this.toggle_button = document.createElement("a");
this.toggle_button.href = "#";
this.toggle_button.id = "togglenewsticker";
this.toggle_button.innerHTML = "Toggle";
Event.observe(this.toggle_button, "click", this.toggle.bindAsEventListener(this), false);
this.hideMessages();
this.showMessage();
// Install timer
this.timer = setInterval(this.showMessage.bind(this), this.interval);
},
showMessage: function()
{
Effect.Appear(this.messages[this.current_message]);
setTimeout(this.fadeMessage.bind(this), this.interval-2000);
if (this.current_message < this.number_of_messages-1)
{
this.previous_message = this.current_message;
this.current_message = this.current_message + 1;
} else {
this.current_message = 0;
this.previous_message = this.number_of_messages - 1;
}
},
fadeMessage: function()
{
Effect.Fade(this.messages[this.previous_message]);
},
hideMessages: function()
{
this.messages.each(function(message)
{
Element.hide(message);
})
},
toggle: function()
{
Effect.BlindUp(this.container, 1000);
},
showError: function()
{
if (this.container.getElementsByTagName("ul").length == 0)
{
this.list = document.createElement("ul");
this.container.appendChild(this.list);
} else {
this.list = this.container.getElementsByTagName("ul")[0];
}
this.errorMessage = document.createElement("li");
this.errorMessage.className = "error";
this.errorMessage.innerHTML = "Could not retrieve data";
this.list.appendChild(this.errorMessage);
}
}
Event.observe(window, "load", function(){new at.bartelme.newsticker()}, false);
Hi I need a help with my code. When i'm trying to put a picture in empty div it works fine, but when i put the second picture to the div where already is picture, then second picture "disappear". If i have only one div, then everything is ok, but with 2 or more divs i have issue. PHP Code: <div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="http://images.photo.bikestats.eu/zdjecie,600,79346,20091201,zdjecia-wiewiorek.jpg" draggable="true" ondragstart="drag(event)" width="80" height="80"> <img id="drag2" src="http://www.tech-blog.pl/wordpress/wp-content/uploads/2011/12/gaba-16-12-2011.jpg" draggable="true" ondragstart="drag(event)" width="80" height="80"> <style> #drop { border: 1px solid black; width:80px; height:80px; } #drop2 { border: 1px solid black; width:80px; height:80px; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text/html", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text/html"); var parent = ev.target.parentNode; if( parent.id == 'drop' ) { parent.removeChild(ev.target); parent.appendChild(document.getElementById(data)); } else ev.target.appendChild(document.getElementById(data)); } </script> 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 Hi there, Im a noobo in the world of Javascript but am trying to get my heard around it (shouldn't take too) Basicly what im trying to do is the following I have a drop down box that when changed will change an image, which i have got to work using the following cose Code: <HTML>
<HEAD><TITLE>JS1</TITLE>
<script LANGUAGE="JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!--
image1 = new image(120,90)
image1.src = "desk1.gif"
image2 = new image(120,90)
image2.src = "desk2.gif"
image3 = new image(120,90)
image3.src = "desk3.gif"
image4 = new image(120,90)
image4.src = "desk4.gif"
function loadCatch(list)
{
var img = list.options[list.selectedIndex].value
document.thumbnail.src = eval(img + ".src")
}
</SCRIPT>
</HEAD>
<BODY>
<ING SRC="desk1.gif" NAME="thumbnail" HEIGHT="90" WIDTH="120">
<FORM>
<SELECT NAME="catch" onChange="loadCatch(this)">
<OPTION VALUE="Image1">Bands
<OPTION VALUE="Image2">Clips
<OPTION VALUE="Image3">Lamp
<OPTION VALUE="Image4">Else
</SELECT>
</FORM>
</BODY>
</HTML>
The trouble is my form has 3-4 parts so when you click back to edit the form stays selected with the correct option selected but but the image shows the default image, i know this is because it is using an onChange event so i have investigated another way using the follwoing code: Code: <script language="JavaScript" type="text/javascript">
<!--
var dropdownIndex = document.getElementById('colorsselect').selectedIndex;
var dropdownValue = document.getElementById('colorsselect')[dropdownIndex].value;
document.write(dropdownValue);
//-->
</script>
Which displays the correct image if I click to go back but it isn't live (onChange) so the user gets doenst get immediate result showing the new image. I'm not sure how to combine the two pieces of code above, hope someone can help? Hi everyone I am having a bit of trouble with a question that I have been given for my Javascript assignment. I was given a web page with a series of boxes (created by <div> tags) which could be dragged and dropped anywhere on the web page, and they were dragged by holding the mouse down and dragging, and released when the mouse button was released. The web page can be viewed at http://adamr.hitwebs.net/dragDropOriginal.html and the source can be viewed at http://adamr.hitwebs.net/dragDropOriginal.js. The assignment was to make any other element drag-and-droppable, so I chose to make a jigsaw puzzle and hence make images drag-and-droppable, but with minimal changes to the script (simply changing the class name and id of my images), the dragging and dropping process is visually very different (the images appear to "stick" to the cursor on mouse up, and you have to actually click a second time to drop the image). Can someone please help me to fix this so that the drag and drop looks like what the boxes did (an example of what I want is exactly how the smiley faces are dragged-and-dropped at http://elouai.com/javascript-drag-and-drop.php). My jigsaw puzzle can be viewed at http://adamr.hitwebs.net/drag&Drop.html and the source can be downloaded from http://adamr.hitwebs.net/dragDrop.js. As you will see, apart from the large sections of script that I added, I only changed about two or three words of the original script, and it stopped working properly as soon as I started using images, which was long before I made my own additions to the script. Also note that there are A LOT of comments in my code because this is an assignment, and I have to note every change that I made to the original code, as well as put explanatory comments in my own code. P.S. Please don't tell me to use the script on the smiley face web page that I have provided, as this would not be useful to me. I must amend the script that I was originally given with the boxes. As for the assignment, I have checked this with the teacher, and I will not lose any marks for the terrible drag-and-drop effect as it does not appear to be my fault. This post is purely for my curiosity and because I hate not being able to solve a problem, and to me, this is a problem. Thanks heaps, - Adam Im coding with AnyLink JS drop down menu and I am running into a annoying Java Script Problem or CSS not sure. Here is the site ip http://96.0.177.61 if you view it in FF it looks fine but in IE 8 you will find a space about 5 - 10px wide straight across the bottom of the top Nav. I cant figure out why that is happening can someone please help Thanks I've been running into a brick wall on this problem, and have gone over my html, css and PHP dozens of times, so I'm thinking it's a Javascript issue (where my skills are lacking). I'm using a drop-down menu script that I got he http://www.php-development.ru/javascripts/dropdown.php, which I have modified slightly to eliminate timeout and change styles on closing the menu (by clicking on it). It works fine everywhere except in IE 6 and 7. In IE 7, the menu appears where it should, but looks blank. If you leave the sub-menu open and hover over another link, the menu appears as it should. Both drop-down menus do this. In IE6, the problem is similar, except that only the bottom border of the menu items appear, not the whole link. The page can be found he http://www.georgekoury.com/index_test.php, and the only options with drop-down are "Individual Insurance" and "Group Insurance". I realize the code isn't entirely compliant, I inherited this code from another programmer and I'm trying to avoid having to rewrite the whole structure. I'm not sure what code you may need me to post, so if more information is needed, please let me know and I'll provide it. The code below is a download form,, the number after the P= are the index idents for each file to be downloaded.. The destination_folder is set for C:\temp as default location. the code below works as needed for one file,,however i need to create a drop down list which will show all file names,and automatically throw the right ident for that file after the P=. sounds simple enough but there are other sections that are tied to this form so the solution has to use the CFForm_1(this) else i'll have to redo all the other sections as well. as well as javascript if anyone has a quick and clean way to do this i'd be very appreciative. i've pulled my hair out trying to find examples using this config and none are even close..or don't have a drop down menu Code: <form name="CFForm_1" action="http://www.XXX.cfm?p=6D6F615CC&rt=2&st=2" method="POST" onsubmit="CFForm_1(this)"> <input name="destination_folder" id="destination_folder" type="text" value="C:\Temp" maxlength="200" size="60" /> <input type="Submit" value="Resume"> thanks in advance, Rick My problem has to do with having more then two drop down menus and disabling selected items. In this example whenever anyone selects an option from either of the drop-down menus the opposing drop-down menu greys out the selection: Code: <script type="text/javascript">
function updateSelect(changedSelect, selectId) {
var otherSelect = document.getElementById(selectId);
for (var i = 0; i < otherSelect.options.length; ++i) {
otherSelect.options[i].disabled = false;
}
if (changedSelect.selectedIndex == 0) {
return;
}
otherSelect.options[changedSelect.selectedIndex].disabled = true;
}
</script>
Code: <select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'subject2');" > <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> <select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1');" > <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> The above code works perfect. My problem is extending this to even more drop-down menus. I'm not a javascript guy but my logic was thinking something like this: Code: ARRAY = "subject1, subject2, subject3"; <select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'ARRAY');" > ...either an array to include multiple drop-down menus or what about something like this? Code: <select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1, subject2, subject3, subject4');" > Obviously I know my code solutions don't work, however, I'm hoping they can provide someone with clarity with respect to what I'm trying to accomplish. I sincerely would appreciate anyone's help on this. Firstly, I'm not trying to 'fix' the code below. (eg: not interested in links to other drag & drop scripts). I'm mearly trying to understand what's happening & what I've missed or done wrong. For instance, why in FF & IE does it wait until after onmouseup (release) before moving the object, because it works fine with a DIV with only text in it, but not with a DIV with an image in it, or a stand alone image. In Chrome it seems to highlight the image and onmousemove also highlights the surrounding areas. I've tried forcing focus() & blur() & covering with a higher zIndexed transparent DIV but nothing seems to work. Any help in understanding would be greatly appreciated. dragscript.js Code:
document.onmousemove = mouseXY;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
var mouseX = 0;
var mouseY = 0;
var drag;
var dragObject = null;
var mouseOffsetX;
var mouseOffsetY;
function mouseXY(e) {
e = e || window.event;
if (e.pageX || e.pageY) {
mouseX = e.pageX; mouseY = e.pageY;
}
else if (e.clientX || e.clientY) {
mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
document.getElementById('mouseposX').value = mouseX;
document.getElementById('mouseposY').value = mouseY;
if (dragObject) {
document.getElementById(dragObject.id).style.left = mouseX - mouseOffsetX;
document.getElementById(dragObject.id).style.top = mouseY - mouseOffsetY;
}
}
function mouseDown(x) {
if (!x) var x = window.event;
if (x.target) drag = x.target;
else if (x.srcElement) drag = x.srcElement;
if (drag.nodeType == 3) drag = drag.parentNode;
if (drag.className == 'dragable') {
dragObject = drag;
document.getElementById('ObjectId').value = dragObject.id;
mouseOffsetX = mouseX - document.getElementById(dragObject.id).offsetLeft;
mouseOffsetY = mouseY - document.getElementById(dragObject.id).offsetTop;
}
}
function mouseUp() {
dragObject = null;
document.getElementById('ObjectId').value = '';
}
test.html Code: <html>
<head>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<script type="text/javascript" src="dragscript.js"></script>
<style type="text/css">
.dragable {position:absolute; left:200; top:200; border:2px solid black;}
</style></head><body>
MouseX : <input id="mouseposX" type="text" size=3>
MouseY : <input id="mouseposY" type="text" size=3>
dragObject Id : <input id="ObjectId" type="text" size=10>
<image id="image1" class="dragable" src="test.gif" border=0>
</body></html>
Many thanks, Paul PS: Login for posting timeout too short. I have been searching for a long time but have been unsuccessful on how to develop a drop down menu but have the menu items show in a list above the main nav. Not below. I really like the way this functions: http://www.sohtanaka.com/web-design/examples/toggle/ But I would like the item in the list to appear above the main nav so it animates up not down. Can anyone help me on how to alter this js code to perform this task? Here is the jQuery file link: http://code.jquery.com/jquery-latest.js I tried going through this js file but it very complex. Can anyone tell me what I need to change to have the animation roll up instead of down? Any help would be most appreciated. Hello everyone! So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). I'm hoping someone can tell me why it is happening and how to fix it! Code: // JavaScript Document
var posX;
var posY;
var element;
function drag(event) {
element = document.getElementById("square");
posX = event.clientX;
posY = event.clientY;
element.addEventListener("mousemove", move, false);
}
function move(event) {
if (typeof(document.getElementById("square").mouseup) == "undefined")
element.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function drop() {
element.removeEventListener("mousemove", move, false);
element.removeEventListener("mouseup", drop, false);
}
the html is a simple (position is set to relative): <p id="square" onmousedown="drag(event)">meep</p> Lastly, and most importantly, thank you all for your time =] EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library. Hello there, CodingForums.com! I'm a newbie to Javascript, HTML, XHTML, CSS-- and oh god, everything, so please bear with me! I have come to understand that to get any better, I'll need support. I hope you guys (and gals) can assist! Here is my issue: I'm currently trying to develop a first-draft calculator that will allow me to calculate some values for work and the way I want it requires me to do it with a pair of drop-downs. Take a look at it he http://www.projectvoid.co.uk/ I would like to select the first drop-down, on the left-hand side (Current Lighting Products -> Type of Lamp) and for the right-hand side to copy it's selected value (Energy Efficient Products -> Type of Lamp). Furthermore, it shouldn't interfere with the fact that I'm also using those values with my dependent drop-down, below (Wattage). The only piece of code I've found that might help is this: Code: function setSelect(name1, name2)
{
var select1 = document.forms.formname.elements[name1];
var select2 = document.forms.formname.elements[name2];
select1.selectedIndex = select2.selectedIndex;
}
I am also unsure how to utilize it. I look forward to your aid! Thank you 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 Okay, I'm having some trouble getting my head around how to do this.. Code: <select> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option value="Rhino">Rhino</option> <option value="Bird">Bird</option> <option value="Rooster">Rooster</option> </select> <select> <option value="0202A">Rhino - Text</option> <option value="0203A">Rhino - Text2</option> <option value="0204A">Bird - Text1</option> <option value="0205A">Bird - Text2</option> <option value="0202B">Rhino - Text</option> <option value="0204B">Rhino - Text2</option> <option value="0204C">Rooster - Text1</option> <option value="0205C">Rooster - Text2</option> <option value="0206C">Rooster - Text3</option> </select> So say we had those three drop-downs. I'm looking to make it so that second drop-down only has options corresponding to a relationship between the first and the third drop-down. Example - if you select A in the first drop-down you only see Rhino and Bird in the second drop-down. If you select B you will only see Rhino in the second drop-down. Lastly, if you select C you will only see Rooster in the second drop-down. Just can't figure this out. >.< Hello, Current Live View: https://tornhq.com/AroundTheWorld/Lo...WorkingOn.html This content is going to be implemented into a form I am currently working on once completed. As you can see, not all of the countries have yet been broken down as some we're having difficulties doing so. Code: SList.getSelect = function (slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content
if (SList[slist][option]) {
// if option from the last Select, add text-content, else, set dropdown list
if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else {
var addata = '<option>- - -</option>';
for (var i = 0; i < SList[slist][option].length; i++) {
addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
}
// cases for each dropdown list
switch (slist) {
case 'slist2':
document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">' + addata + '</select>';
document.getElementById('slist3').innerHTML = '';
break;
case 'slist3':
document.getElementById('slist3').innerHTML = txtsl3 + ' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>';
break;
}
}
} else {
// empty the tags for select lists
if (slist == 'slist2') {
document.getElementById('slist2').innerHTML = '';
document.getElementById('slist3').innerHTML = '';
} else if (slist == 'slist3') {
document.getElementById('slist3').innerHTML = '';
}
}
}
I need to know how to edit the following, if there is a simple way to set the case for each one as they are not all split up into the same way, some are Districts, some states and whatnot so the new question varies. Or do I simply need to make another big list to do them all? Best Regards, Tim Reply With Quote 03-21-2013, 06:35 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Well, for starters, this is generally a really bad way to add <select>s and <option>s. Period. I would certainly toss out your entire getSelect() function and rewrite it. But I'm also not clear on what your question is. Are you asking *HOW* to implement the third level? I don't see any countries with any third level data, at this point. If that's what you are asking, one possible way: Code: SList.slist2 = {
...
"United Kingdom" :
{ "England" : ["Staffordshire", "Derby", ... ],
"Scotland" : ["Edinburgh", ... ],
"Wales" : [ ... ],
"Northern Ireland" : [ .... ]
},
...
};
I have to ask: Why would you name that Slist.slist2 instead of Slist.countries ?? Not that it really matters, but why not make code more self documenting? 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; } |
|||||||