|
JavaScript - Drop Down Box Problems
I'm still not quite sure if I'm posting in the right place! I was using FireFox to design a page with a drop down box to select four different links. the script works just fine in FireFox but does nothing in IE8. Does anyone have any suggestions???
Script: <form action="../"> <select onchange="window.open(this.options[this.selectedIndex].value,'_top')"> <option value="">Choose a destination...</option> <option value="./Marrgolf_european_open.html">European OPEN</option> <option value="./Marrgolf_US_open.html">U.S. OPEN</option> <option value="./Marrgolf_masters.html">MASTERS</option> <option value="./Marrgolf_PGA.html">PGA</option> <option value="./Blank_page.html">Reserved</option> </select> </form> Similar TutorialsHi there, I am trying to come out with a Cross-Browser JavaScript codes to drag & drop some pictures. It seems to work well in IE, but when I tried it in Non-IE type of browsers (Safari, Chrome, Firefox), it did not come out that good... I would be very happy if anyone can enlighten me on the reasons why the script misbehave in Non-IEs. To try, you need to create a not-too-big-sized jpeg image and name it "x.jpg". Many thanks ! Chris ================================= <html> <head> <style> .drag{position:relative;cursor:hand} </style> <script language="JavaScript1.2"> var dragapproved=false var z,x,y var temp1, temp2; // ------------------------------------------------------------------------- function MouseEvent(e) { // Class used to standardize Cross-Browser event object. if (!e) { e = window.event; // IE this.target = e.srcElement; this.button = e.button; this.X = e.clientX; this.Y = e.clientY; } else { // Non-IE this.target = e.target; this.button = e.button; this.X = e.pageX; this.Y = e.pageY; } } // ------------------------------------------------------------------------- function move(e) { var e = new MouseEvent(e); if (e.button <= 1 && dragapproved) { z.pixelLeft = temp1 + e.X - x; z.pixelTop = temp2 + e.Y - y; return false } } // ------------------------------------------------------------------------- function startDrag(e) { var e = new MouseEvent(e); if (e.target.className=="drag") { dragapproved=true; z=e.target.style; temp1=z.pixelLeft; temp2=z.pixelTop; x=e.X; y=e.Y; document.onmousemove=move; } } // ------------------------------------------------------------------------- function stopDrag() { dragapproved = false; } // ------------------------------------------------------------------------- document.onmousedown=startDrag document.onmouseup=stopDrag </script> </head> <!-- ========================================================================== --> <body> <img src="x.jpg" class="drag"><br> </body> </html> 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. 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. >.< 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 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? Hi Everyone, Could someone please help? I'm rewriting our website at present, and am quite ok with HTML and CSS, but am not particularly au fait with Javascript. Here's the page I'm having a bit of trouble with: http://www.ambersupplies.co.uk/thomas/miscellaneous.htm If you look at the long button marked 'Diagnostics', you'll see it has an arrow and initiates a drop-down menu on mouse-over. My problem is that I wish to further subdivide the three items on the sub-menu, ie, Visual to become sub-menued into Dermatoscope and Penlight. In other words, the Visual button initiates another drop-down menu on mouse-over. Basically, therefore, I'm trying to expand the Javascript to make this happen, but I just don't seem to able to. I'd be so very grateful for any help anyone can offer. Graham I'm trying to create a custom drop down and using the code below it works pretty well - only one problem is if i have more than one drop down, all the links will only activate the first drop down. Any ideas on how I would fix that? Code: function toggle() {
var ele = document.getElementById("dropdown-items");
var text = document.getElementById("dropdown-menu");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
I have a dropdown list working, but I want the dropdown list to be initiated when the mouse goes over the first link in the list. Once it is visible, I want it to remain visible so long as the mouse is over any of the links. Right now I have it working for being visible only when the mouse is over the first link, but it does not remain visible moving the mouse over the first link, down the drop down menu. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <style type="text/css"> div.ff { border:2px solid white; display:none; width:200px; background-color:red; margin-top:5px; } a { width: 200px; text-align:center; background-color:red; color:white; font-size:16px; display:block; } </style> <script type="text/javascript"> function ab(a) { document.getElementById(a).style.display="block"; document.getElementById(a).parentNode.onmouseover="ab(a)"; document.getElementById(a).parentNode.onmouseout="ab1(a)"; } function ab1(a) { document.getElementById(a).style.display="none"; } </script> </head> <body style="background-color:black;"> <div> <a href="kkjklj.com" onmouseover="ab('dg')" onmouseout="ab1('dg')">kjlj</a> <div id="dg" class="ff"> <a href="kjlj.com">lkjefee</a> <a href="ehfueh.com">fheufheuih</a> </div> </div> </body> </html> If you open two tabs, http://www.google.com/imghp and another one, you are able to drag and drop an image from the other tab to the google search tab, and google will search similar images. i can't figure out how that works, does anybody know how? Hi Could you help me please. I am trying to make this drop down menu work in Internet Explorer 7 by inserting the Javascript. I'm obviously doing something wrong. Please be gentle with me I'm a bit of a newcomer to this: HTML and Javascript included below. <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> <link href="dropdownmenu.css" rel="stylesheet" type="text/css" /> </head> <body> <ul class="nav"> <li><a href="/home/">Home </a></li> <li><a href="/products/">Products </a> <ul> <li><a href="/products/silverback/">Silverback </a></li> <li><a href="/products/fontdeck/">Font Deck </a></li> </ul> </li> <li><a href="/services/">Services </a> <ul> <li><a href="/services/design/">Design </a></li> <li><a href="/services/development/">Development </a></li> <li><a href="/services/ consultancy/">Consultancy </a></li> </ul> </li> <li><a href="/contact/">Contact Us </a></li> </ul> </body> </html> Hi, Please look at the following drop-down menu: http://www.w3schools.com/JS/tryit.as...yjs_selectmenu 1. How can I set it so the pages open in the parent frame (instead of the same frame)? 2. How can I set it so the pages open in a new window? Regards Rain Lover Hi, Im trying to create a drop down menu using the following code JS Code: function showMenu(theMenu) {
thisMenu = document.getElementById(theMenu);
var str = theMenu;
if (thisMenu.className == str.slice(4)+'_off') {
thisMenu.className = str.slice(4)+'_on';
}
else {
thisMenu.className = str.slice(4)+'_off';
}
}
function hideMenu(theMenu) {
thisMenu = document.getElementById(theMenu);
var str = theMenu;
if (thisMenu.className == str.slice(4)+'_on') {
thisMenu.className = str.slice(4)+'_off';
}
else {
thisMenu.className = str.slice(4)+'_on';
}
}
CSS Code: #wrapper
{
width: 770px;
margin:10px auto;
border:none;
text-align:left;
position:relative;
z-index:0;
}
#wrapper div.1_off
{
/* visibility:hidden;
z-index:-1;
*/
width:100px;
position:absolute;
top:40px;
left:10px;
height:70px;
width:200px;
margin:0px;
visibility:visible;
z-index:1;
}
#wrapper div.2_off
{
visibility:hidden;
z-index:-1;
}
#wrapper div.1_on
{
width:100px;
position:absolute;
top:40px;
left:10px;
height:70px;
width:200px;
margin:0px;
visibility:visible;
z-index:1;
background-color:#000;
}
#wrapper div.2_on
{
width:100px;
position:absolute;
top:40px;
left:110px;
height:70px;
width:200px;
margin:0px;
visibility:visible;
z-index:1;
background-color:#000;
}
with the anchors tags onmouseover/out containting the relevant JS functions: Code: <a href="" onmouseover="showMenu('menu1')">Hello</a></td><td name="dropdown">
<a href="" onmouseover="showMenu('menu2')">Goodbye</a>
and these divs nested within the wrapper div: Code: <div id="menu1" class="1_off">Yes</div><div id="menu2" class="2_off">No</div> Unfortunately the JS does not seem to be changing class of the div attributes. Any help would be greatly appreciated. Thanks Sol All I Want To Make Happen Is That If You Drag and Drop A Div Into A Table An Action Happens
I need some code to make it so if one option is selected on drop down A then only certain options are available on dropdown B. Likewise, if a different option on dropdown A is selected, different options are available on dropdown B etc etc. They can either be greyed out, or not visible at all I think i can use Code: <option disabled="disabled"> but i'm not sure how to implement it any help appreciated Hi everyone - I was wondering how it would be possible for me to create a FAQ with drop-down answers when the question is clicked? For example: https://www.facebook.com/help/?page=1145 Facebook has something like that available. Any ideas? Hi Everyone, I'm trying to put a drop-down menu onto my website, but desperately need some help; I'd be so grateful if someone could offer some assistance. If you click on this link to see the webpage, http://www.ambersupplies.co.uk/newsite/pageone.htm you'll see the drop down menu, and the two problems I'm having with it. Please don't take any notice of the menu content; I'll be styling it all when these problems are sorted. Firstly, you'll see that the external drop down list is lying within the table (with the red background) when it should appear outside. I've obviously missed a closing table or td tag somewhere, but can't find it. Secondly, the drop down menu should appear on mouseover, and disappear on mouseout; which it does, but as you can see, when the page is firstly or reloaded, the menu is showing. I didn't write this drop-down menu code, I copied it from this page with the intention of styling it to my own webpage: http://www.w3schools.com/DHTML/tryit...rydhtml_menu10, perhaps this will give someone a clue. Can anyone shed a bit of light on this for me, please? I'd be really grateful for any help whatsoever. Many thanks in advance. Graham Hi! I was wondering if anyone could help with the code below. I think there is something wrong with the "thecontents[] part below. Could anyone have a look and possible email me with a finished version... Code: <table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><select name="selectbox" size="1" onChange="changecontent(this)">
<option selected value="What is JavaScript?">What is JavaScript?</option>
<option value="Why learn JavaScript?">Why learn JavaScript?</option>
<option value="What do you think of the site?">What do you think of the site?</option>
<option value="I'd like to feature one of these codes on my site.">I'd like to feature one of these codes on my site.</option>
</select><br>
</td>
</tr>
<tr>
<td width="100%"><textarea rows="8" name="contentbox" cols="35" wrap="virtual"></textarea><br>
<font face="arial" size="-2">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></font>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<p>
<script language="JavaScript">
/*
Drop down messages script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/
//change contents of message box, where the first one corresponds with the first drop down box, second with second box etc
var thecontents=new Array()
thecontents[0]='Its what I used to make this :/'
thecontents[1]='I wouldn't reccommend it, its rather hard. Though, I hate to blow ones own trumpet, I am learning to do it rather well.'
thecontents[2]='I hope you have enjoyed it! Email support@matthewjmorris.co.uk with your comments. Also, if you have any bits to go on this page, email Support aswell with the code, instructions for installing the code and your name! Your name may appear here, along with your code!'
thecontents[3]='support@matthewjmorris.co.uk'
//don't edit pass this line
function changecontent(which){
document.ddmessage.contentbox.value=thecontents[which.selectedIndex]
}
document.ddmessage.contentbox.value=thecontents[document.ddmessage.selectbox.selectedIndex]
</script>
Thanks! Hi All, Hope someone can help me with this. I have been using a free javascript code to make some drop-down menus. this is the link for the code on dynamic drive. http://www.dynamicdrive.com/dynamici...anylinkcss.htm The script works fine and I have been using it for a while now. However, one of the websites that I run has just asked me to include a sub menu on one of the menu items. I have managed to get the sub menu to show as requested by using the normal drop down menu and adding a Quote: rev="lr" and giving it another class and rel. However, When the link is hovered over the menu appears to the side as expected but when you move onto that "sub-menu" the original menu disappears. can anyone suggest what changes I would need to make so that the first menu does not disappear? Any help would be greatly appreciated. As you can tell I am new to JavaScript (hence the use of free codes) |
|||||||