JavaScript - Drop Down Problem Explorer 6 & 7
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 Similar TutorialsI have javascript code in my site. It works in FireFox but doesn't work in IE. The page is http://omidpand.ir/search.html First select something from first combobox when u open second combobox the javascript code should change latin characters with persian one, but it doesn't do it. I have been working with someone of a forum to get a script functioning, and we have it working fine in firefox and safari etc.. but there seems to be issues with internet explorer and the script is not functioning in that browser. It seems it is an inner html issue. I am very new to ajax and my javascript is limited, but with other help assisting me, but I have a deadline of today. I just need to get this working in internet explorer, can anyone please help. here is the ajax code for the script. Code: function get_XmlHttp() { var xmlHttp = null; // if a native XMLHttpRequest object exists if ( window.XMLHttpRequest ) { xmlHttp= new XMLHttpRequest; } else { // let's try an ActiveXObject try { xmlHttp= new ActiveXObject("MSXML2.XMLHTTP.6.0"); } catch(ex) { xmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } function ajaxrequest(tagID,post) { var http = get_XmlHttp(); var info = 'request='+post; http.onreadystatechange = function() { if (http.readyState == 4) { document.getElementById(tagID).innerHTML = http.responseText; } } http.open("POST", 'destinations.ajax.regions.php', true); // edit php.php to your actual php file path http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.send(info); } I am making a web page, and as part of it I have a table that the user can add rows to. My code works in FF and Chrome, but IE is broken. Code: function addrow() { var example=document.getElementById("new"); var addHere=document.getElementById("ticketTable"); var node= example.cloneNode(true); node.id="added"; addHere.appendChild(node); } This code is called when a button is clicked. new is the ID of the row I am adding, and ticketTable is the ID of the table I am adding to. Help please! Hello, I was wondering why my code is perfectly working in Firefox, but does not work in Internet Explorer at all: Code: <script language="javascript"> <!-- document.body.onload=document.body.appendChild(document.getElementById('testdiv')); --> </script> I don't get any error messages, the div is just not showing how it is supposed to show with body as parent. Any suggestions? Thanks Is there any way to make the select boxes behave in IE the way they do in Firefox? I am setting a fixed width for the select box but IE chops it off. In Firefox it works good. <select width="60" STYLE="width: 60px" name="Category1"> <option value="null">code<?php for($i=0; $i<count($categories); $i++) { echo "<option value=$categories[$i]>$categories[$i] --> $descriptions[$i]"; } ?> </select> 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 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> 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 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 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 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 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. 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 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. 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. 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. i'm looking for a function to check for the browser version and NOT run a script if the user is using internet explorer 7 or less something like <!--[if gte IE 7]> alert(internet explorer 6 sucks) <!--[else]> alert(internet explorer 7 or greater is better but it still sucks) <![endif]--> and if i just use "lte IE 7" instead of gte IE 7 it will exclude firefox... so that's why i prefer to use a "else" statement.... instead you got something better to suggest thanks!! |