|
JavaScript - Need Help To Animate Onclick Drop Down Div
I'm using the below code to expand and collapse a DIV on alternative clicks
Quote: Code: <script>
function Tog(id){
var x=document.getElementById(id);
if(x) {
if(x.style.display=='none')
{ x.style.visibility='visible';
x.style.display='block';
}
else{ x.style.visibility='hidden';
x.style.display='none';
}
}
}
</script>
<a href="#" onclick="Tog('togme')" > Click me tog 'togme'</a>
<div id="togme">
Content inside this DIv will hide and show on alternative clicks
</div>
When you click on the link div togme drops down suddenly, I need to make it slow and animated, however I'm not able to make it animated yet. I tried playing around with the below code Code: Quote: Still no luck, Something is wrong with the usage of display:block , It display whole of it in a click, Help me fix this Similar TutorialsHi guys, I am having an issue changing a piece of Javascript and hoped you guru's could help?I am not awful with Javascript but it is fair to say I am still at the beginning of my learning! I can't find the correct answer in forums and tutorials and you guys are literally my last hope! Here it is .... I have a drop-down menu on a website I am working on which is made up of HTML, CSS and a little bit of Javascript. At the moment it is set so that when the user hovers over the menu it operates the drop-down. This obviously does not work for iPads etc as there is no mouse to hover. I want to keep my menu but alter the Javascript so the menu drops when clicked instead. Here is my code: Javascript Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
HTML Code: <div id="menuPadding"> <div id="menu"> <ul id="nav"> <li id="m1"><a href="">HOME</a></li> <li id="m2">ABOUT US <ul> <li><a href="">Our Values</a></li> <li><a href="">Facilities</a></li> <li><a href="">Arena</a></li> <li><a href="">Jobs</a></li> </ul> </li> <li id="m3">SUCCESS <ul> <li><a href="">Jobs</a></li> <li><a href="">Results</a></li> <li><a href="">Awards</a></li> <li><a href="">Testimonials</a></li> </ul> </li> </div> </div> CSS Code: #menu {
margin-top: 16px;
width: 879px;
height: 30px;
z-index: 1000;
font-family: Verdana, Geneva, sans-serif;
font-size:11px;
font-weight:bold;
}
#menuPadding {
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
text-align:center;
z-index: 1000;
}
#menuPadding ul {
height: 29px;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
z-index: 1000;
}
#menuPadding ul li {
/* display: inline;*/
line-height: 29px;
padding:0px;
margin-left:1px;
display:block;
float:left;
font-weight:bold;
color:#fff;
z-index: 1000;
}
#menuPadding ul li a {
text-align:center;
z-index: 1000;
}
#menuPadding ul li li {
padding:0px;
margin:0px;
z-index: 1000;
}
#menuPadding ul li li a {
text-align:left;
padding-left:14px;
text-transform:uppercase;
z-index: 1000;
font-size:90%;
}
#menuPadding ul li li a.notupper {
text-transform:none;
z-index: 1000;
}
/* coloured menus */
#menuPadding ul li#m1 {
background:#FF0000;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m1 li {
background:#FF0000;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m2 {
background:#0099CC;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m2 li {
background:#0099CC;
width:166px;
z-index: 1000;
}
#menuPadding ul li#m2 li a {
width:166px;
z-index: 1000;
}
#menuPadding ul li#m3 {
background:#999999;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m3 li {
background:#999999;
width:176px;
z-index: 1000;
}
#menuPadding ul li#m3 li a {
width:176px;
z-index: 1000;
}
#menuPadding ul li#m4 {
background:#9966CC;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m4 li {
background:#9966CC;
width:156px;
z-index: 1000;
}
#menuPadding ul li#m4 li a {
width:156px;
z-index: 1000;
}
#menuPadding ul li#m5 {
background:#AAC619;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m5 li {
background:#AAC619;
width:230px;
padding-right:20px;
z-index: 1000;
}
#menuPadding ul li#m5 li a {
width:230px;
z-index: 1000;
}
#menuPadding ul li#m6 {
background:#FF9900;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m6 li {
background:#FF9900;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m7 {
background:#FF0099;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m7 li {
background:#FF0099;
width:216px;
color:#fff;
z-index: 1000;
}
#menuPadding ul li#m7 li a {
width:216px;
color:#fff;
z-index: 1000;
}
#menuPadding ul li#m7 li li {
font-size:87%;
z-index: 1000;
}
#menu li ul ul { /* third-and-above-level lists */
margin: -30px 0 0 216px;
z-index: 1000;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
z-index: 1000;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
z-index: 1000;
}
#menuPadding ul li#m8 {
background:#660099;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m8 li {
background:#660099;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m9 {
background:#A80017;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m9 li {
background:#A80017;
width:146px;
z-index: 1000;
}
#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
color:#fff;
z-index: 1000;
}
#menuPadding ul li a:hover {
color:#000;
z-index: 1000;
}
/* suckerfish */
#menu, #menu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;color:#fff;
}
#menu a {
display: block;
width: 96px;
}
#menu li { /* all list items */
float: left;
width: 96px; /* width needed or else Opera goes nuts */
border-top:1px solid #fff;
}
#menu li ul { /* second-level lists */
position: absolute;
background: orange;
width: 106px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
font-size:90%;
}
#menu li ul ul { /* third-and-above-level lists */
/* margin: -1em 0 0 96px;*/
font-size:110%;
}
#menu li li {
font-size:100%;
color:#fff;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
I realise that this must be quite an easy thing for you guys but - as I said - I am at the beginning of my learning and it is confusing the hell out of me! All of the things I have tried have not worked! Any help would be truly appreciated! Thanks in advance! I'm new to JavaScript, and this forum so please forgive any improprieties. What I'm trying to do is fairly simple. I have a script that creates some SVG rectangles. I want to be able to click a button and have two rectangles switch places, moving along a curve to do so. This is part of a prototype for a larger product. I've included the relevant code pieces below, and I've also included the whole .html file as an attachment if you prefer. I feel like I'm on the right track, but I cannot figure out why it is not working. I "believe" the problem is when I create the animateA and animateB elements (syntax perhaps?). Please let me know if this is not enough information, as I've been staring at it for so long I seem to have lost perspective. Thanks for any help. Code: var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
var animateDur = "1s";
function swap(a,b) {
//this section handles moving the actual elements of the array
//rectArray is an array of integer values that represent the height of the rectangles
var temp = rectArray[a];;
rectArray[a]=rectArray[b];
rectArray[b]=temp;
//this section is for the animation (will probably be its own function
//for the final version
//get the elements
var aRect = document.getElementById("rect_" + a);
var bRect = document.getElementById("rect_" + b);
//get the element coordinates, bY isn't needed, as it
//is the same as bX
var aX = aRect.getAttributeNS(null,"x");
var aY = aRect.getAttributeNS(null,"y");
var bX = bRect.getAttributeNS(null,"x");
//calculate the x distance from a to b and from b to a
//to use in the bezier curve path
var aToBx = bX - aX;
var bToAx = aX - bX;
//calculate the halfway point to use in the bezier curve
var qA = Math.floor(aToBx/2);
var qB = Math.floor(bToAx/2);
//create the path strings:
//should be M startX startY q midpointX midpointY endX endY
//notice that endX and endY are with respect to the startX and startY
var pathAtoB = "M" + aX + " " + aY + " q " + qA + " 30 " + aToBx + " " + aY;
var pathBtoA = "M" + bX + " " + bY + " q " + qB + " 30 " + bToAx + " " + aY;
//create the animation element for rectangle A
animateA = document.createElementNS(svgNS, "animateMotion");
animateA.setAttributeNS(null,"path",pathAtoB);
animateA.setAttributeNS(null,"dur",animateDur);
//append it to the rectangle
aRect.appendChild(animateA);
//create the animation element for rectangle B
animateB = document.createElementNS(svgNS, "animateMotion");
animateB.setAttributeNS(null,"path",pathBtoA);
animateB.setAttributeNS(null,"dur",animateDur);
//append it to the rectangle
bRect.appendChild(animateB);
//change the id's of the rectangles to reflect their new
//positions
aRect.setAttributeNS(null,"id","rect_" + b);
bRect.setAttributeNS(null,"id","rect_" + a);
}
So, I've built this navigation bar so far and I'm curious if it's even possible to achieve what I'm thinking. Currently, when you hover over each of the links they drop down (padding is increased). Now, what I'm curious in doing is if you hover over say "test1", test2-4 also drop with it but in the padding that has been created from the drop down, "test1" information shows up. Allowing the user to click or read whatever information is in there. Also, if the user would like to, they can move their mouse to test2 and everything would animate (opacity, this I can do I think) to whatever is in the test2 field, test3 doing the same and so on. I haven't had much success with this, I've created a completely separate panel before, but that didn't exactly work or I wasn't doing it correctly. Here is what I've been working on, ANY help would be appreciated! Thanks! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#nav li > a").hover(function() {
$(this).stop().animate({paddingTop: "100px"}, 100);
},
function() {
$(this).stop().animate({paddingTop: "10px"}, 200);
});
});
</script>
<style type="text/css">
#nav
{
position: absolute;
top: 0;
left: 60px;
padding: 0;
margin: 0;
list-style: none;
}
#nav li
{
display: inline;
}
#nav li a
{
float: left;
display: block;
color: #555;
text-decoration: none;
padding: 10px 30px;
background-color: #d1d1d1;
border-top: none;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="nav">
<li><a href="">test1</a></li>
<li><a href="">test2</a></li>
<li><a href="">test3</a></li>
<li><a href="">test4</a></li>
</ul>
</div>
</body>
</html>
Hello. I have my animation script working and I use setInterval to move by a number of pixels specified as 'this.gap', which defaults to 2 pixels (or 2/100's for opacity). I would like to use a curve, such as the first half of a sine curve, for a more graceful effect. Before the setInterval is begun I know the 'from' and 'to' position and believe I could use these initial values to work out the gaps to move on each iteration. (My code is slightly complicated by the fact that I change an x value and either the 'from' or 'to' value depending on whether I'm increasing or decreasing the left/top/opacity.) My maths is a little rusty and any suggestion would be welcome Here's a code snippet but I could provide more on request. Andy. Code: function animateIt(o) {
if ( o.from < o.to ) {
var y = ( o.type == 'opacity' ) ? 100 : 1;
o.x = (o.positive) ? o.x + this.gap/y : o.x - this.gap/y;
if ( o.type == 'opacity' ) {
this.theObj.style.filter = "alpha(opacity=" + (o.x * 100) + ")";
this.theObj.style.opacity = o.x;
} else {
this.theObj.style[o.type] = o.x + 'px';
}
(o.positive) ? o.from += this.gap/y : o.to -= this.gap/y;
} else {
this.stopIt();
}
}
PS i have posted elsewhere but no response as yet. I'm trying to get the menu divs' width to grow, extending to the right but am not getting any animation at all... I'm not sure if I even have the right code... Code: <script type="text/javascript">
$(document).ready(function(){
$('#menu').mouseover(function(){
$(this).stop().animate({"right": 20 }, 400);
}).mouseout(function(){
$(this).stop().animate({"right": 0 }, 400);
});;
});
</script>
<div id="menu" style="
width:90px;height:24px;
font: #C12026;
text-align:right;
padding-right:10px;
padding-top: 5px;">
<a href="#top" class="scroll">Home</a></div>
<br />
<div id="menu" style="
width:90px;height:24px;
font: #C12026;
text-align:right;
padding-right:10px;
padding-top: 5px;">
<a href="#who" class="scroll">Who We Are</a>
</div>
<br />
<div id="menu" style="
width:90px;height:24px;
font: #C12026;
text-align:right;
padding-right:10px;
padding-top: 5px;">
<a href="#what" class="scroll">What we do</a>
</div>
<br />
<div id="menu" style="
width:90px;height:24px;
font: #C12026;
text-align:right;
padding-right:10px;
padding-top: 5px;">
<a href="#contact" class="scroll">Contact Us</a>
</div>
and here is the css Code: #menu {
width:125px;
height:24px;
background:#C00;
font: #C00;
}
#menu a {
color: #C00;
}
#menu a:visited {
color: #C00;
}
#menu a:hover {
color: #FFF;
}
right now I'm just trying to get it to grow but my original idea was to have the bars small with no words then when you mouse over it reveals the words when it grows to the right around 50px. When clicked it stays extended... ANANANAY Help would be greatly appreciated!!! here is the link to the temp site: http://sethwardallison.com/fargo/index.htm Hi i have a code like this in my web site to slide a panel from left to right: <script type="text/javascript"> <!-- var sipPos = 0; $(document).ready(function() { $("#panel-tab").click(function(e) { //if(autoTimer) clearTimeout(autoTimer); //autoTimer = null; e.preventDefault(); $("#panel").animate({ left: sipPos }, 1764, 'linear', function() { if(sipPos == 0) { sipPos = -856; } else { sipPos = 0; } }); }); }); --> </script> ---CSS--- #panel { width: 864px; height: 369px; position: absolute; top: 195px; left: -856px;/*-856*/ z-index: 200; background:url('../images/bg_panel.png') no-repeat; padding:20px 0 0 18px; text-align:left; } #panel-tab { width: 21px; height: 371px; position: absolute; top: 9px; left: 856px; background:url(../images/panel-arrw-show.png) no-repeat; text-decoration: none; color: #FFFFFF; text-indent:-999999px; } What i want to do is use the animate function in jquery...like this $("#panel").animate({ left: 0 }) but not sure how to use that and on page load make the panel opens and stays open.. Any help Sam So I'm trying to modify this code to make it so a 1px border fades in on rollover of an image. My CSS for the images has this class for an invisible border: Code: border: solid 1px rgba(242, 112, 17, .0); I was assuming using this part of the Javascript code below that I could animate some kind of borderOpacity or something like that so the border would fade in from .0 to 1. Code: $('.item li img').animate({'opacity' : 1}).hover(function() {
$(this).animate({'borderOpacity' : 1});
}, function() {
$(this).animate({'opacity' : 1});
});
But I obviously am doing something wrong. Any help would be greatly appreciated. Thanks! hi, here is my Javascript to show and hide my comments div: Code: <script language=javascript type='text/javascript'>
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('comments').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('comments').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}
I would now like to animate the div fading or moving down can someone please help? thanks Im wanting to make a div move according to where the mouse is IE if the mouse is on the left the div moves right and visa versa. I've got the pixels for where the middle of the screen is but im unsure what to do next. If anyone can help ill be very grateful, ill try and find an example to help illustrate what i mean. I want to design my website so that when a page loads javascript will smoothly animate it from a reference point to the top of the page. I visited an Apple store recently and was looking at the encased ipods next to the displayed product and the one next to the iphone has a mini site and after pressing the compare button at the bottom of the page I saw this animation. Below is a link to the video i recorded showing what I am trying to achieve. Any and all help will be appreciated. I have found other script that animate on page load but none of which does it from a reference point like the following video. I'm not sure how the page loads at that point either. If someone could help with that as well I would greatly appreciate it. Thanks in advance. http://demetriusmcclain.elementfx.co...pageScroll.MOV Hey CF. I'm not great with JS, but I'm trying to build something pretty simple and even that's out of my league. I have a layout with multiple fields that need to be filled randomly from an array on click. I have an array with a bit of jQuery that randomly reloads one field on click, but I need multiple fields filled at once from the same item in the array. Code is below. I grabbed it from a tutorial somewhere, and have made some modifications. Code:
<Script>
$(document).ready( function() {
var foodArray = [
'1',
'2',
'3',
'4',
'5'
];
$('.foodtype').loadText( foodArray, 10000 ); // ( array, interval )
});
// custom jquery plugin loadText()
$.fn.loadText = function( foodArray, interval ) {
return this.each( function() {
var obj = $(this);
obj.fadeOut( 'slow', function() {
obj.empty().html( random_array( foodArray ) );
obj.fadeIn( 'slow' );
});
timeOut = setTimeout( function(){ obj.loadText( foodArray, interval )}, interval );
// reload random text (if not animated) -- entirely optional, can be removed, along with the reload link above (<a href="javascript:;" id="text-reload"><em>randomize</em></a>)
$("#text-reload").click( function(){
if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( foodArray, interval );} // animation check prevents "too much recursion" error in jQuery
});
});
}
//public function
function random_array( aArray ) {
var rand = Math.floor( Math.random() * aArray.length + aArray.length );
var randArray = aArray[ rand - aArray.length ];
return randArray;
}
</script>
That outputs one of the array items into a <span class="foodtype">. What I need is another value next to say "1", eg '1, Blue' and print "Blue" to another span. Can anyone help? The other issue I have is the divs are snap resizing, is there a way set them to animate smoothly? The total height will be variable depending on the combinations that display. Cheers guys, hope someone can help. Hello, I am trying to move each cell content from one table to another table. I do not want to lose the value of each cells in table1, but just to show how I got table2 from table1. I would like to show/animate the movement. So when the user clicks the button the data from table1 will scroll towards table2. I am new to HTML/javascript programming I really appreciate your help Hey, I'm working on a script that uses a function (called on click) to change the content of a div (called description) within the page. It contains an unordered list and list items. The first one has the class "show" and the ID "1", the second with just the ID "2", and so forth. (see code below). I am using jQuery to control the onclick function. the jQuery gets the current object with the "show" class. If there is no show class, it takes the first. It then puts a variable string together that represents the UL LI that is needed to be shown. Code: var descurrent = ($('div#description ul li.show')? $('div#description ul li.show') : $('div#description ul li:first'));
var desclass = '#description li#'+x;
Note: x is a variable transfered from the function change(x); where x is the ID that is to be shown HTML CODE: Code: <div id="description"> <ul> <li class="show" id="1">blahblah </li> <li id="2"> etc </li> </ul> The jQuery i'm trying to get to work is: Code: //Hide the current image
descurrent.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Show new image
$(desclass).addClass('show')
.animate({opacity: 1.0}, 1000);
Note: the class "show" has a higer z-index Thanks in advance, Hope this can be resolved soon, been giving me headaches! Cheers, John I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. 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. >.< |
|||||||