JavaScript - 3 Separate Drop Down Lists Same Javascript

Hi, I'm fairly new to javascript & am trying to learn it using best methods. I have been using various books & some video tutorials, such as lynda.com. I've noticed when I do google searches for example tutorials, 9 times out 10, the javascript has been coded into the html file. As a newbie I find it takes a very long time to redo the coding into the separate .js file. And if the coding is relatively complex (and most of it appears that way to someone new to this) I can't get it too work using a separate file for the javascript. I wanted to ask anyone very familiar with this, their suggestions regarding good places for tutorials where the .js file is separated. Apparently there are advantages to having it separate and it's considered best practices from what I've come to understand. Also most of the results from google searches pulls up out-dated coding and/or tutorials that suggest you should already understand what is being referred too. I'm trying to avoid learning it the wrong way. I'm willing to put in the effort, however I don't want to pick up bad habits. Any help is very appreciated. If this was not as clear as I intended it to be, please ask any specifics and I'll try my best to answer.
-Todd

I'm a newbie...please! html lists making javascript array

I need help with a HTML UL I have ul inside ul but all I want to get when I select a certain list is the children of that list but remove the ul inside that list so they dont show at all http://pastebin.com/m98deaff any help would be great , current selecting code is http://pastebin.com/m6f4b886f


Code:

<div class="demo" id="demo_1">

		<ul>

			<li id="1" class="open"><a id="1" href="#"><ins>&nbsp;</ins>Root node 1</a>

				<ul>

					<li id="2"><a id="2"  href="#"><ins>&nbsp;</ins>Child node 1</a></li>

					<li id="3"><a id="3" href="#"><ins>&nbsp;</ins>Child node 2</a></li>

					<li id="4"><a id="4" href="#"><ins>&nbsp;</ins>Some other child node with longer text</a></li>

					<li id="6"><a id="6" href="#"><ins>&nbsp;</ins>Root node 222</a>

//SHOUL NOT BE IN MY ARRAY
						<ul>

							<li id="7"><a id="7"  href="#"><ins>&nbsp;</ins>Child node 222a</a></li>

							<li id="8"><a id="8" href="#"><ins>&nbsp;</ins>Child node 222b</a></li>

							<li id="9"><a id="9" href="#"><ins>&nbsp;</ins>Some other child node with longer text 222</a></li>
					</ul>
//END OF UL ELEMENT N OT NEEDED THERE COULD BE more than 1

</li>
				</ul>

			</li>

			<li id="5"><a id="5" href="#"><ins>&nbsp;</ins>Root node 2</a></li>

		</ul>

Hello everyone,

I am trying to figure a solution to this CSS/JavaScript navigation menu. I have a couple of different classes set out for each level of the menu, which there are 4 levels max. The first level has a class for it called 'pMenuMain'. The second and third have names 'pMenu2' and 'pMenu3'. The 4th level is found by its <a> tags, because all of those are links.

This is the JavaScript I need to change somehow:

Code:

<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout    = 1000;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('.pMenu2').hover(jsddm_open, jsddm_timer)
   $('.pMenu > li > ul').hover(jsddm_open, jsddm_timer)});

document.onclick = jsddm_close;
</script>

Now this is the CSS style sheet:

Code:

/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper {
    padding-bottom:53%;
    padding-left:21%;
}

.pMenu {
    margin:0;
    padding:0;
    list-style:none;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li{
    width:100%;
    display:inline-block;
}
ul.pMenu ul ul li{
    width:100%;
    display:inline-block;
}
ul.pMenu ul ul ul li{
    width:100%;
    display:inline-block;
}

/*begin main list attributes*/
ul.pMenu > li:hover{
    background:#F00;
    border:.33em ridge #C90;
    color:#FF0;
}

ul.pMenu > li{
    float:left;
    list-style:none;
	margin-right:1%;
	display:block;
    color:#FFF;
    background:#900;
    border:.33em ridge #C30;
    text-decoration:none;
}

.pMenuMain{
    text-shadow:1px 1px 1px #000;
    white-space:nowrap;
    padding-top:.7em;
    padding-bottom:.7em;
	text-align:center;
}

/*first sub-list*/
ul.pMenu li li{
	margin-right:0;
}

ul.pMenu ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

.pMenu2{
	background:#CCC;
	border:.25em outset #999;
	width:10em;
	font-size:12px;
	padding-top:.5em;
	padding-bottom:.5em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	visibility:hidden;
}

.pMenu2:hover{
    background:#999;
    border:.25em inset #666;
    text-decoration:blink;
}

/*second sub-list*/
ul.pMenu ul ul{
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
    display:none;
}

.pMenu3{
	background:#999;
	border:.25em outset #666;
	width:13em;
	font-size:11px;
	padding-top:.35em;
	padding-bottom:.35em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	visibility:hidden;
}
ul.pMenu ul ul li {
    float:none;
    display:inline;
}

ul.pMenu ul ul li a {
    width:auto;
    background:#999;
    border:.15em outset #666;
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}

ul.pMenu ul ul a:hover {
    background:#999;
    border:.15em inset #666;
    text-decoration:blink;
}

/*third sub-list*/
ul.pMenu ul ul ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

ul.pMenu ul ul ul li {
    float:none;
    display:inline;
}

ul.pMenu ul ul li a {
    width:auto;
    background:#999;
    border:1% outset #666;
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}

ul.pMenu ul ul li a:hover {
    background:#999;
    border:1% inset #666;
    text-decoration:blink;
}
/******************/
/*End Personal Nav*/
/*****************/

This is how it's set up in HTML:

Code:

<!-- begin Personal navigation menu -->
<div class="pWrapper">
	<ul class="pMenu">
		<li style="width:10%;"><div class="pMenuMain">health</div>
    		<ul style="left:18em;">
        		<li><div class="pMenu2">weight loss</div>
            		<ul>
               		  <li><div class="pMenu3">fitness</div>
                			<ul>
                       		  <li><a href="#">under construction</a></li>
                        	</ul>
                    	</li>
                    	<li><div class="pMenu3">dieting</div>
                    		<ul>
                       		  <li><a href="#">under construction</a></li>
                        	</ul>
                    	</li>
            		</ul>
            	</li>   
            	<li><div class="pMenu2">skin care</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
        	</ul>
    	</li>
	</ul>

	<ul class="pMenu">
		<li style="width:14%;"><div class="pMenuMain">insurance</div>
    		<ul>
        		<li><div class="pMenu2">property insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">auto insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">health insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">annuities</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
       	   </ul>
   	   </li>
	</ul>

	<ul class="pMenu">
		<li style="width:11.3%;"><div class="pMenuMain">general</div>
    		<ul>
        		<li><div class="pMenu2">electronics</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">style &amp; fashion</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">food/dining</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">cars/auto</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
       		</ul>
   	    </li>
	</ul>
                   
	<ul class="pMenu">
		<li style="width:10%;"><div class="pMenuMain">dating</div>
    		<ul>
        		<li><a href="#">RealMatureSingles</a></li>
            	<li><a href="#">SeniorPeopleMeet</a></li>
        	</ul>
    	</li>
	</ul>

	<ul class="pMenu">
		<li style="width:13.8%;"><div class="pMenuMain">education</div>
    		<ul>
        		<li><div class="pMenu2"><a href="#">under construction</a></div></li>
        	</ul>
    	</li>
	</ul>                    	
</div>
	<!-- end Personal navigation menu-->

I know that I will receive critique for the HTML I created for this. The reason I am going this route is that a drop down menu with a list full of <a href="#"> can be clicked, resetting the menu. This is a flaw in functionality.

Hi All,

I am really stumped. I am not sure why it's not working.

Basically, selecting a country will pre-populate the state field for both billing and shipping sections. Please help!

Also, when copying the billing info from shipping, the state field doesn't seem to copy over.

I have attached the entire code as a text file (part1 + part2 = complete code).

Thanks!

Hi,
I have the following code for drag and drop objects in any page.

My target:
I want to be able to drag and drop the advertisement images that come on top of the page. It works most of the time, but sometime page crashes. I use google chrome as a bookmarklet.

Code:
Code:

javascript:var d=document,b=d.body,i="innerHTML",s="style",p="position",a="absolute",r="relative",w1="offsetWidth",w2="width",h1="offsetHeight",h2="height",t1="offsetTop",t2="top",l1="offsetLeft",l2="left",drag=false;function down(e){drag=true;z=event.srcElement;z[s][p]=r;x=event.clientX;y=event.clientY;zx=z[l1];zy=z[t1];d.onmousemove=move}function up(e){drag=false;}function move(e){if(drag){z[s][l2]=zx+event.clientX-x;z[s][t2]=zy+event.clientY-y}}document.onmousedown=down;document.onmouseup=up;

Any improvements in the code is appreciated.
Does anybody have a advanced better code, because I am just medium in javascript.

Hi,
I am currently working in mail client project. The mails are displayed in the html table. I have an requirement to drag and drop the mails from the Inbox to another folder. Can you please suggest how to proceed with this. Thanks in advance.


Regards,
Anne.

I am working on a website that involves a pizza. I have a drop down box with the following options: small, medium, large, and extra large. When the user selects small the topping price is $0.75 each, when the user selects medium the topping price is $1.00 each, when the user selects large the topping price is $1.25 each, and when the user selects extra large the topping price is $1.25 each. I the problem is no matter what size the user selects the topping price is always $0.75.

Here is code that goes with the drop down box :

Code:

<td height="49" align="right"><label for="Pizza_Size">Size</label>
      <select name="Pizza_Size" id="Pizza_Size" onchange = "SetToppingPrice()" />
        <option value="Small_Pizza">Small ($4.99)</option>
        <option value="Medium_Pizza">Medium ($5.99)</option>
        <option value="Large_Pizza">Large ($7.99)</option>
        <option value="X_Large_Pizza">X-Large ($10.99)</option>
      </select></td>

Here is the Javascript code:

Code:

// JavaScript Document
function SetToppingPrice() {
	var Pizza_Topping_Price = document.getElementById("Pizza_Size");
	divOutput = document.getElementById("Display_Topping_Price");
	if(Pizza_Topping_Price = "Small_Pizza") {
		divOutput.innerHTML = "$0.75 per topping";}
	else if (Pizza_Topping_Price = "Medium_Pizza") {
		divOutput.innerHTML = "$1.00 per topping";}
	else if (Pizza_Topping_Price = "Large_Pizza") {
		divOutput.innerHTML = "$1.25 per topping";}
	else if (Pizza_Topping_Price = "X_Large_Pizza") {
		divOutput.innerHTML = "$1.50 per topping";}
}

Any advice is greatly appreciated.

Hi Guys,

A couple of years ago I came across a Javascript drop down search facility which I used for an eBay shop I built. I don't really have any knowledge at all of Javascript but I did manage to get it to work the way I wanted, somehow!

Basically at the moment with the drop down you have to select the product type, your make of vehicle and then your model. This then searches the ebay shop for any relevant listings.

However, I now want to add a forth drop down box which also searches the engine size.

How would I go about adding another drop down list? Any help would be much appreciated.

I've had to split the code into two lots and there is too many characters to fit in one thread!

Code:

<script type="text/javascript">
product = new Array ("CATALYTIC-CONVERTER","CENTRAL-SILENCER","FRONT-PIPE","Rear-Assembly");
make = new Array ("ALFA_ROMEO","AUDI","BMW","CITROEN","DAEWOO","FIAT","FORD","HONDA","HYUNDAI","JAGUAR","LAND_ROVER","LEXUS","MAZDA","MERCEDES","MG","MITSUBISHI","NISSAN","PEUGEOT","RENAULT","ROVER","SAAB","SEAT","SKODA","SUBARU","SUZUKI","TOYOTA","VAUXHALL","VOLKSWAGEN","VOLVO");
ALFA_ROMEO = new Array ("ALFA ROMEO 145", "145", "ALFA ROMEO 146", "146", "ALFA ROMEO 147", "147", "ALFA ROMEO 155", "155", "ALFA ROMEO 156", "156", "ALFA ROMEO 164", "164","ALFA ROMEO 166", "166","ALFA ROMEO 75", "75","ALFA ROMEO 33","33","ALFA ROMEO GTV", "GTV","ALFA ROMEO SPIDER","SPIDER");
AUDI = new Array ("AUDI 80","80","AUDI 90","90","AUDI 100","100","AUDI 200","200","AUDI A2","A2","AUDI A3","A3","AUDI A4","A4","AUDI A6","A6","AUDI A8","A8","AUDI CABRIOLET","AUDI COUPE","COUPE","AUDI S3","S3","AUDI S4","S4","AUDI S6","S6", "AUDI S8","S8","AUDI TT","TT");
BMW = new Array ("BMW 316","316","BMW 318","318","BMW 320","320","BMW 323","323","BMW 325","325","BMW 328","328","BMW 518","518","BMW 520","520","BMW 523","523","BMW 525","525","BMW 528","528","BMW 530","530","BMW 535","535","BMW 540","540","BMW 728","728","BMW 730","730","BMW 735","735","BMW 750","750","BMW 840","840","BMW 850","850","BMW M3","M3","BMW M5","M5","BMW Z3","Z3","BMW MINI","MINI");
CITROEN = new Array("CITROEN AX","AX","CITROEN BERLINGO","BERLINGO","CITROEN BX","BX","CITROEN C15","C15","CITROEN C5","C5","CITROEN DISPATCH","DISPATCH","CITROEN RELAY","RELAY","CITROEN SAXO","SAXO","CITROEN SYNERGIE","SYNERGIE","CITROEN XANTIA","XANTIA","CITROEN XM","XM","CITROEN XSARA","XSARA","CITROEN ZX","ZX");
DAEWOO = new Array("DAEWOO ESPERO","ESPERO","DAEWOO KORANDO","KORANDO","DAEWOO LANOS","LANOS","DAEWOO LEGANZA","LEGANZA","DAEWOO MATIZ","MATIZ","DAEWOO MUSSO","MUSSO","DAEWOO","NEXIA","DAEWOO","NUBIRA","DAEWOO TACUMA","TACUMA");
FIAT = new Array("FIAT BARCHETTA","BARCHETTA","FIAT BRAVA","BRAVA","FIAT BRAVO","BRAVO","FIAT CINQUECENTO","CINQUECENTO","FIAT COUPE","COUPE","FIAT CROMA","CROMA","FIAT DOBLO","DOBLO","FIAT DUCATO","DUCATO","FIAT FIORINO","FIORINO","FIAT MAREA","MAREA","FIAT MULTIPLA","MULTIPLA","FIAT PANDA","PANDA","FIAT PUNTO","PUNTO","FIAT SCUDO","SCUDO","FIAT SEICENTO","SEICENTO","FIAT TEMPRA","TEMPRA","FIAT TIPO","TIPO","FIAT ULYSSE","ULYSSE","FIAT UNO","UNO");
FORD = new Array("FORD COUGAR","COUGAR","FORD ESCORT","ESCORT","FORD EXPLORER","EXPLORER","FORD FIESTA","FIESTA","FORD FOCUS","FOCUS","FORD GALAXY","GALAXY","FORD GRANADA","GRANADA","FORD KA","KA","FORD MAVERICK","MAVERICK","FORD MONDEO","MONDEO","FORD ORION","ORION","FORD PROBE","PROBE","FORD PUMA","PUMA","FORD SCORPIO","SCORPIO","FORD SIERRA","SIERRA","FORD TOURNEO","TOURNEO","FORD TRANSIT","TRANSIT");
HONDA = new Array("HONDA ACCORD","ACCORD","HONDA CIVIC","CIVIC","HONDA CONCERTO","CONCERTO","HONDA CRV","CRV","HONDA HRV","HRV","HONDA INTEGRA","INTEGRA","HONDA JAZZ","JAZZ","HONDA LEGEND","LEGEND","HONDA PRELUDE","PRELUDE","HONDA SHUTTLE","SHUTTLE","HONDA STREAM","STREAM");
HYUNDAI = new Array("HYUNDAI ACCENT","ACCENT","HYUNDAI ATOS","ATOS","HYUNDAI COUPE","COUPE","HYUNDAI LANTRA","LANTRA","HYUNDAI PONY","PONY","HYUNDAI S COUPE","S COUPE","HYUNDAI SONATA","SONATA");
JAGUAR = new Array("JAGUAR S TYPE","S TYPE","JAGUAR XJ12","XJ12","JAGUAR XJ6","XJ6","JAGUAR XJ8","XJ8","JAGUAR XJR","XJR","JAGUAR XJS","XJS","JAGUAR XK8","XK8");
LAND_ROVER = new Array("LAND-ROVER 110","110","LAND-ROVER 90","90","LAND-ROVER DEFENDER","DEFENDER","LAND-ROVER DISCOVERY","DISCOVERY","LAND-ROVER FREELANDER","FREELANDER","RANGE-ROVER","RANGE ROVER");
LEXUS = new Array("LEXUS ES","ES SERIES","LEXUS GS","GS SERIES","LEXUS IS","IS SERIES","LEXUS LS","LS SERIES","LEXUS LX","LX SERIES","LEXUS RX","RX SERIES","LEXUS SC","SC SERIES","LEXUS SOARER","SOARER");
MAZDA = new Array("MAZDA 121","121","MAZDA 2","2","MAZDA 323","323","MAZDA 323F","323F","MAZDA 6","6","MAZDA 616","616","MAZDA 626","626","MAZDA 929","929","MAZDA DEMIO","DEMIO","MAZDA MPV","MPV","MAZDA MX3","MX3","MAZDA MX5","MX5","MAZDA MX6","MX6","MAZDA PREMACY","PREMACY","MAZDA RX7","RX7","MAZDA RX8","RX8","MAZDA TRIBUTE","TRIBUTE","MAZDA XEDOS","XEDOS");
MERCEDES = new Array("MERCEDES 180","180","MERCEDES 190","190","MERCEDES 200","200","MERCEDES 220","220","MERCEDES 230","230","MERCEDES 240","240","MERCEDES 280","280","MERCEDES 300","300","MERCEDES 320","320","MERCEDES 400","400","MERCEDES 420","420","MERCEDES 430","430","MERCEDES 500","500","MERCEDES 600","600","MERCEDES A CLASS","A CLASS","MERCEDES C CLASS","C CLASS","MERCEDES E CLASS","E CLASS","MERCEDES G WAGON","G WAGON","MERCEDES ML","ML","MERCEDES SPRINTER","SPRINTER","MERCEDES V","V","MERCEDES VITO","VITO");
MG = new Array("MG 25","25","MG MGF","MGF","MG RV8","RV8","MG TF","TF","MG ZR","ZR","MG ZS","ZS","MG ZT","ZT");
MITSUBISHI = new Array("MITSUBISHI 3000","3000","MITSUBISHI CARISMA","CARISMA","MITSUBISHI COLT","COLT","MITSUBISHI ECLIPSE","ECLIPSE","MITSUBISHI EVO","EVO","MITSUBISHI FTO","FTO","MITSUBISHI GALANT","GALANT","MITSUBISHI GTO","GTO","MITSUBISHI L200","L200","MITSUBISHI L300","L300","MITSUBISHI L400","L400","MITSUBISHI LANCER","LANCER","MITSUBISHI PAJERO","PAJERO","MITSUBISHI SHOGUN","SHOGUN","MITSUBISHI SIGMA","SIGMA","MITSUBISHI SPACE STAR","SPACE STAR","MITSUBISHI SPACEWAGON","SPACEWAGON");
NISSAN = new Array("NISSAN 100 NX","100 NX","NISSAN 200 SX","200 SX","NISSAN 300 ZX","300 ZX","NISSAN 350 Z","350 Z","NISSAN 1800 SX","1800 SX","NISSAN ALMERA","ALMERA","NISSAN BLUEBIRD","BLUEBIRD","NISSAN CABSTAR","CABSTAR","NISSAN CHERRY","CHERRY","NISSAN MICRA","MICRA","NISSAN MAXIMA","MAXIMA","NISSAN PRIMERA","PRIMERA","NISSAN SERENA","SERENA","NISSAN SKYLINE","SKYLINE","NISSAN SUNNY","SUNNY","NISSAN TERRANO","TERRANO","NISSAN X TRAIL","X TRAIL");
PEUGEOT = new Array("PEUGEOT 106","106","PEUGEOT 107","107","PEUGEOT 205","205","PEUGEOT 206","206","PEUGEOT 306","306","PEUGEOT 307","307","PEUGEOT 309","309","PEUGEOT 405","405","PEUGEOT 406","406","PEUGEOT 407","407","PEUGEOT 605","605","PEUGEOT 607","607","PEUGEOT 806","806","PEUGEOT 807","807","PEUGEOT 1007","1007","PEUGEOT BOXER","BOXER","PEUGEOT EXPERT","EXPERT","PEUGEOT PARTNER","PARTNER");
RENAULT = new Array("RENAULT CLIO","CLIO","RENAULT ESPACE","ESPACE","RENAULT KANGOO","KANGOO","RENAULT LAGUNA","LAGUNA","RENAULT MEGANE","MEGANE","RENAULT SAFRANE","SAFRANE","RENAULT SCENIC","SCENIC","RENAULT R19","R19","RENAULT R21","R21");
ROVER = new Array("ROVER 111","111","ROVER 114","114","ROVER 211","211","ROVER 214","214","ROVER 216","216","ROVER 218","218","ROVER 220","220","ROVER 25","25","ROVER 323","323","ROVER 414","414","ROVER 416","416","ROVER 420","420","ROVER 45","45","ROVER 618","618","ROVER 620","620","ROVER 623","623","ROVER 75","75","ROVER 820","820","ROVER 825","825","ROVER 827","827","ROVER MAESTRO","MAESTRO","ROVER METRO","METRO","ROVER MG","MG","ROVER MGF","MGF","ROVER MINI","MINI","ROVER MONTEGO","MONTEGO","ROVER STREETWISE","STREETWISE");
SAAB = new Array("SAAB 9-3","9-3","SAAB 9-4","9-4","SAAB 9-5","9-5","SAAB 90","90","SAAB 99","99","SAAB","900","SAAB 9000","9000");
SEAT = new Array("SEAT ALHAMBRA","ALHAMBRA","19AUK35","ALTEA","SEAT AROSA","AROSA","SEAT CORDOBA","CORDOBA","SEAT IBIZA","IBIZA","SEAT INCA","INCA","SEAT LEON","LEON","SEAT MALAGA","MALAGA","SEAT MARBELLA","MARBELLA","SEAT TERRA","TERRA","SEAT TOLEDO","TOLEDO");
SKODA = new Array("SKODA FABIA","FABIA","SKODA FAVORIT","FAVORIT","SKODA FELICIA","FELICIA","SKODA OCTAVIA","OCTAVIA","SKODA SUPERB","SUPERB","SKODA TAVRIA","TAVRIA");
SUBARU = new Array("SUBARU FORESTER","FORESTER","SUBARU IMPREZA","IMPREZA","SUBARU JUSTY","JUSTY","SUBARU LEGACY","LEGACY","SUBARU LIBERO","LIBERO","SUBARU SVX","SVX","SUBARU VIVIO","VIVIO");
SUZUKI = new Array("SUZUKI ALTO","ALTO","SUZUKI BALENO","BALENO","SUZUKI CARRY","CARRY","SUZUKI GRAND VITARA","GRAND VITARA","SUZUKI JIMMY","JIMMY","SUZUKI ESTEEM","ESTEEM","SUZUKI IGNIS","IGNIS","SUZUKI LIANA","LIANA","SUZUKI SAMURAI","SAMURAI","SUZUKI SWIFT","SWIFT","SUZUKI VITARA","VITARA","SUZUKI WAGON","WAGON");
TOYOTA = new Array("TOYOTA AVENSIS","AVENSIS","TOYOTA CAMRY","CAMRY","TOYOTA CARINA","CARINA","TOYOTA CELCIA","CELICA","TOYOTA COROLLA","COROLLA","19S35","ESTIMA","TOYOTA HI-ACE","HI-ACE","TOYOTA HI-LUX","HI-LUX","TOYOTA LAND CRUISER","LAND CRUISER","TOYOTA MR2","MR2","TOYOTA PASEO","PASEO","TOYOTA PICNIC","PICNIC","TOYOTA PREVIA","PREVIA","TOYOTA PRIUS","PRIUS","TOYOTA RAV 4","RAV 4","TOYOTA SPACECRUISER","SPACECRUISER","TOYOTA STARLET","STARLET","TOYOTA SUPRA","SUPRA","TOYOTA YARIS","YARIS");

</script>
    
  <script type="text/javascript">
VAUXHALL = new Array("VAUXHALL ASTRA","ASTRA","VAUXHALL BRAVA","BRAVA","VAUXHALL CALIBRA","CALIBRA","VAUXHALL CAVALIER","CAVALIER","VAUXHALL COMBO","COMBO","VAUXHALL CORSA","CORSA","VAUXHALL FRONTERA","FRONTERA","VAUXHALL MERIVA","MERIVA","VAUXHALL MONTERRY","MONTERRY","VAUXHALL NOVA","NOVA","VAUXHALL OMEGA","OMEGA","VAUXHALL SENATOR","SENATOR","VAUXHALL SIGNUM","SIGNUM","VAUXHALL SINTRA","SINTRA","VAUXHALL TIGRA","TIGRA","VAUXHALL VECTRA","VECTRA","VAUXHALL ZAFIRA","ZAFIRA");
VOLKSWAGEN = new Array("VOLKSWAGEN BEETLE","BEETLE","VOLKSWAGEN BORA","BORA","VOLKSWAGEN CADDY","CADDY","VOLKSWAGEN CARAVELLE","CARAVELLE","VOLKSWAGEN CORRADO","CORRADO","VOLKSWAGEN GOLF","GOLF","VOLKSWAGEN JETTA","JETTA","VOLKSWAGEN LUPO","LUPO","VOLKSWAGEN PASSAT","PASSAT","VOLKSWAGEN POLO","POLO","VOLKSWAGEN SANTANA","SANTANA","VOLKSWAGEN SCIROCCO","SCIROCCO","VOLKSWAGEN SHARAN","SHARAN","VOLKSWAGEN TRANSPORTER","TRANSPORTER","VOLKSWAGEN VENTO","VENTO");
VOLVO = new Array("VOLVO 240","240","VOLVO 340","340","VOLVO 440","440","VOLVO 460","460","VOLVO 480","480","VOLVO 740","740","VOLVO 760","760","VOLVO 850","850","VOLVO 940","940","VOLVO 960","960","VOLVO C70","C70","VOLVO S40","S40","VOLVO S60","S60","VOLVO S70","S70","VOLVO S80","S80","VOLVO S90","S90","VOLVO V40","V40","VOLVO V50","V50","VOLVO V70","V70","VOLVO V90","V90");
function writeoptions(selectname)
{
var arr = selectname;
var k=arr.length;
for (i=0; i<k; i++)
{
 if (arr[i] == "REAR_SILENCER")
 {
  document.write ("<OPTION value=\"\">"+arr[i]+"</OPTION>");
 }
 else
 {
  document.write ("<OPTION value="+arr[i]+">"+arr[i]+"</OPTION>");
 }
}
}
function writeselect(selectedoption)
{
var opt = selectedoption;
var optarray = window[opt]
var frm1 = document.myForm;
frm1.model.disabled=(frm1.make.selectedIndex==0  || frm1.product.selectedIndex==0);
frm1.model.selectedIndex = 0;
frm1.model.length = 1;
count=1
if(frm1.make.selectedIndex > 0) for(i=0;i<optarray.length;i=i+2) 
{
frm1.model.options[count] = new Option(optarray[i+1],optarray[i]);
count++
}}
</script>

Okay everyone, new here, of course, and as much as I hate to be one of those people that don't really know much about a topic at hand and gratuitously seek out the help of those who do, here I am. The upshot is that it's probably something really easy to answer for those who know Javascript already.

I've tried figuring this out but I'm at a loss. I can manage pretty well with CSS, messing around and playing with values to figure out what I need, but I've taken a look at the Javascript and it's completely unapproachable for me. I used a website, http://www.mycssmenu.com/ to create a really nifty dropdown menu, which has a tree structure in Javascript as well as collapse and expand buttons. The great thing is that, for those with Javascript disabled, it still fully works as a CSS drop-down menu.

But I've been asked to modify it. Right now, you click and that's how things expand. But I've been asked to make it so that it will expand simply on hover.And I don't know what to do at all.

Of course I know how to change the colors of the particular fields when you hover, through CSS, but to make it expand simply on hover?

Think anyone can give me some pointers or a bit of help? The website in question is here Psiholog Popa Anca. Great job on the colors though, eh?

Let me know!

Hi guys.

I have been scowering high and low for code to create a Java drop down menu bar for my site.

I want it to be something like this: http://javascript-array.com/scripts/...rop_down_menu/

but want to insert pictures into it, for each heading, to create a new looking bar if thats possible.

Can you do a mouseover with them also, as i currently have one set up, to change text colour (2 different images per button) but am unsure of the code.

Thanks in advance.

can someone give me the code to display drop down date with default todays date selected...format dd/mm/yyyy
i found the code to display month in mon format..what is to be modified to get in mm format here
______________
<script>
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];

function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}

</script>

Hi,

I'm doing a project for college where i have create a game in which images must be dragged-and-dropped into a certain order.

The game should:

* Be web-based, using client-side JavaScript
* Include At LEAST FIVE moveable images
* Randomise the positions of the images at start-up
* Check the positions of the images and notify the user when they are in the correct order
* Record and display the time taken to sort the images

All of these requirements are working, i have div tags set up with borders around them, so that the user knows where to place the images.

The thing i would like to do is when an image is dragged say within 20px of a div that the image snaps to the div...can anybody suggest a way to do this or perhaps a code suggestion.


Code:

<html>
<head>

<script language="javascript" type="text/javascript">

// cursor drag and drop variables
var IE = document.all;
var selectedImage = null; 
var tx = 0;
var ty= 0;
var x = 0;
var y = 0;

//change names
var rand=null;
var myround=null;

//timer variables
var c= 0;
var t;
var timer_is_on= null


// Where images are supposed to go
var image1 = new Array ("804px","70px"); 
var image2 = new Array ("661px","70px");
var image3 = new Array ("225px","70px");
var image4 = new Array ("950px","70px");
var image5 = new Array ("517px","70px");
var image6 = new Array ("372px","70px");
var picLocs = new Array(image1,image2,image3,image4,image5,image6);


//

var correctPitchPosition = new Array("0","0","0","0","0","0");

var allCorrect = true;

var correctPosition = 50;
var counter = 0;
 


// start drag and drop 

function enableDragging(evt) {
	if(IE) {
		selectedImage = event.srcElement;
	} else {
		selectedImage = evt.target; 
	}
	
	tx = parseInt (selectedImage.style.left +0) 
	ty = parseInt (selectedImage.style.top +0)
	
   	if(IE) {
		x = event.clientX;
		y = event.clientY;
	} else {
    	x = evt.clientX;
		y = evt.clientY;
	}

    document.onmousemove = dragImage;
    document.onmouseup = disableDragging;

    return false;
  }


// Do drag and Drop
 
function dragImage(evt) {

    if (!evt) evt = window.event;

	selectedImage.style.left = tx + evt.clientX -x;
    selectedImage.style.top = ty + evt.clientY- y;

    return false;
}


//Stop Drag and Drop

function disableDragging() {

	correctImg();
    document.onmousemove = null;
    document.onmouseup = null;
	correctTeam();

    return false;

  }


//Set Up Events for every image 
 
function setupEvents() {
	
	for (var j=0; j < document.images.length; j++)
	{
    	document.images[j].onmousedown = enableDragging;
	}
}
  

//Timer Control
function timedCount()
{
	document.getElementById('txt').value=c;
	c=c+1;
	t=setTimeout("timedCount()",1000);

}


//Timer function

function doTimer()
{
	if (!timer_is_on)
  	{
   		timer_is_on=1;
   		timedCount();
 	}
}

//Stop Timer
function stopCount()
{
	clearTimeout(t);
	timer_is_on=0;
	alert("Timer stopped!");
}


function gameStart() { 

	doTimer(); 
	setupEvents();
	c = 0;
	for (var i=0; i < 6; i++)
	{
		randX = Math.random()*800;
		myroundX = Math.floor(randX);
		document.images[i].style.left = myroundX;
	}
	alert("You must put the Liverpool player in their correct spaces based on the descriptions, press OK to continue")
}



function correctImg()
{

for (i=0; i < picLocs.length; i++)
{ 
  if  ( parseInt(document.images[i].style.left) > parseInt(picLocs [i][0])-correctPosition && 
		parseInt(document.images[i].style.left) < parseInt(picLocs[i][0])+correctPosition &&
		parseInt(document.images[i].style.top) > parseInt(picLocs[i][1])-correctPosition && 
		parseInt(document.images[i].style.top) < parseInt(picLocs[i][1])+correctPosition)
  {
  correctPitchPosition[i] = 1;
  }
}

}

function correctTeam() {
	for(var k=0; k < 6; k++) {
		if(correctPitchPosition[k] == 1)
		counter = counter + 1;
	}
	
	if (counter==6)
	{
		alert("Your time was " + c + " well done!");
		stopCount();
	}
	counter=0;
}


</script>
<link href="_css/styles.css" rel="stylesheet" type="text/css">
</head>

<body>
		<img src="_images/agger.jpg" alt="Daniel Agger" class="imgPos" style="position: absolute; top: 320px; left: 804px" />
        <img src="_images/carragher.jpg" alt="Jamie Carragher" class="imgPos" style="position: absolute; top: 320px; left: 950px"/>
        <img src="_images/gerrard.jpg" alt="Steven Gerrard" class="imgPos" style="position: absolute; top: 320px; left: 372px"/>
        <img src="_images/mascherano.jpg" alt="Javier Mascherano" class="imgPos" style="position: absolute; top: 320px; left: 225px"/>
        <img src="_images/reina.jpg" alt="Pepe Reina" class="imgPos" style="position: absolute; top: 320px; left: 517px"/>
        <img src="_images/torres.jpg" alt="Fernando Torres" class="imgPos" style="position: absolute; top: 320px; left: 661px"/>
   
   		<div id="desAgger" class="description" style="left:804px;">
            <p>"I have a wicked left foot but i like to stay and defend"</p>
</div>
<div id="desMascherano" class="description" style="left:950px;">
            <p>"I'm a tenacious Argentinian who'll chase anything down"</p>
        </div>
<div id="desTorres" class="description" style="left:372px;">
            <p>"I am from Spain, they call me El Nino"</p>
        </div>
<div id="desGerrard" class="description" style="left:225px;">
            <p>"I'm the captain of Liverpool FC, and a proud scouser"</p>
        </div>
<div id="desReina" class="description" style="left:517px;">
            <p>"My real name is Jose and i'm the Liverpool goalkeeper"</p>
        </div>
<div id="desCarragher" class="description" style="left:661px;">
            <p>"I'm the defensive stalwart, and vice-captain"</p>
        </div>
    
<form>
		<input type="button" value="Start game!" onClick="gameStart()" style="position:absolute; left: 500px; top: 539px; width: 20px; height: 20px; width: 120px; height: 40px;">
		<input type="button" value="Stop count!" onClick="stopCount()" style="position: absolute; left: 792px; top: 537px; width: 120px; height: 40px;">
		<input type="text" disabled id="txt" style="position: absolute; top: 547px; left: 633px" value="0" readonly="readonly">
</form>
		
</body>
</html>

Thanks very much in advance

I'm sorry if this question might have already been posted before, but as I do not know how to go about phrasing the questions(due to low calibre in technical terms), I could not do any search about it.

Basically what I intended to do is to add a *drop down list* to the header looking something like this http://www.w3schools.com/DHTML/tryit...rydhtml_menu10 except for the fact that the header(the Tutorials, Scripting, Validation coloured in pink) isn't coded using .html but .js(in this website, its coded in html as shown below).

<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<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>
<h3>Drop down menu</h3>
<table width="100%">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
<a href="/default.asp">Tutorials</a><br />
<table class="menu" id="tutorials" width="120">
<tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
<tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
<tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
<tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
<a href="/default.asp">Scripting</a><br />
<table class="menu" id="scripting" width="120">
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
<a href="/site/site_validate.asp">Validation</a><br />
<table class="menu" id="validation" width="120">
<tr><td class="menu"><a href="/web/web_validate.asp">Validate HTML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate XHTML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate CSS</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate XML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate WML</a></td></tr>
</table>
</td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>

</html>

So how can I code this in .js instead of .html? I really need a clue on how to get started on coding this as this is totally new to me, hope that anyone would appreciate helping me and I will be grateful about it.