|
JavaScript - Javascript - Drop Down For Selecting # Of Results/pg
I don't know anything about javascript so the way I word this might be a bit confusing.
I am making an online store using corecommerce but I am having difficulty finding a code that will allow my visitors to determine how many items they see per pg. The options would be: 25 items 50 items 75 items View All. I have been playing around with codes that I find.. but like I said earlier, I know absolutely NOTHING about javascript. Can anyone help me out by either giving me the code or pointing me to a tutorial or anything! PLEASE! thx a bunch P.S. if you know of a program or software thats also great too! Similar TutorialsI saw this on the web the other day and didn't mark the page I found it on. How do I change an image based on what selection is made in a drop down? Kathy I don't know if JavaScript is the best choice for this or maybe just Java but i want to create something were I can compare a list of names and their picks with a correct list. For example lets say this is the list of peoples picks... Code: Dan Slota New York Jets Dan Slota Cincinnati Bengals Dan Slota Pittsburgh Steelers Dan Slota Denver Broncos Dan Slota Green Bay Packers Dan Slota Atlanta Falcons Dan Slota New Orleans Saints Dan Slota Seattle Seahawks Dan Slota Indianapolis Colts Dan Slota Houston Texans Dan Slota Philadelphia Eagles Dan Slota San Diego Chargers Dan Slota Chicago Bears Dan Slota New England Patriots Danielle rossi New York Jets Danielle rossi Cincinnati Bengals Danielle rossi Baltimore Ravens Danielle rossi Tennessee Titans Danielle rossi Green Bay Packers Danielle rossi Atlanta Falcons Danielle rossi New Orleans Saints Danielle rossi St. Louis Rams Danielle rossi Indianapolis Colts Danielle rossi Houston Texans Danielle rossi Philadelphia Eagles Danielle rossi San Diego Chargers Danielle rossi Chicago Bears Danielle rossi Miami Dolphins David Fleischer New York Jets David Fleischer Cincinnati Bengals David Fleischer Baltimore Ravens David Fleischer Denver Broncos David Fleischer Green Bay Packers David Fleischer Atlanta Falcons David Fleischer New Orleans Saints David Fleischer Seattle Seahawks David Fleischer Indianapolis Colts David Fleischer Oakland Raiders David Fleischer Philadelphia Eagles David Fleischer San Diego Chargers David Fleischer New York Giants David Fleischer Miami Dolphins and here is the master list of the correct picks ... Code: Master List New York Jets Master List Cleveland Browns Master List Baltimore Ravens Master List Tennessee Titans Master List Green Bay Packers Master List Atlanta Falcons Master List New Orleans Saints Master List Seattle Seahawks Master List Indianapolis Colts Master List Houston Texans Master List Philadelphia Eagles Master List San Diego Chargers Master List New York Giants Master List Miami Dolphins After the user list is compared to the master list i need it to say the results of each user for example Code: David Fleischer 8 correct Danielle Rossi 9 correct Dan Slota 5 correct . . Sam Adams 2 correct [/CODE] What would be a good way of doing this? Any help would be appreciated Thanks. Hi everyone, i am developing a facebook application and here i am, struggling with this piece of code. I have this php query result he $id = $facebook->api(array('method' => 'fql.query', 'query' => "SELECT uid FROM user WHERE uid IN( SELECT uid FROM page_fan WHERE page_id='411133928921438' AND uid IN ( SELECT uid2 FROM friend WHERE uid1 = me() ))")); And i need to save it as an array like: var user_ids = [x,y,z] etc etc... I have used the json_encode but it isn't working... here is my code.. Code: var user_ids = <?php echo json_encode($id); ?>; How can i retrieve the query results, the id's in an array like i mentioned above? Please help me... I'm very new at JavaScript and I'm trying to get each of the if statements below in a text text box with the result depending on the answer of the equation. However i can't figure out a way to allow the user to click a button to to show the result in a text box. If anyone could help it would be much appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function calculate() {
A = document.form1.text2.value
B =(parseInt(A ) * 52)
D= (parseInt(B ) * 0.015 )
if ( B <= 6000){
tax = 0;}
else
if (B <= 37001){
tax = (B - 6000) * .15;
} else
if (B<= 80001){
tax = (B - 37000) * .30 + (37000 - 6000) * .15;
} else
if (B <= 180001){
tax = (B- 80000) * .37 + (80000- 37000) * .30 + (37000 - 6000) * .15;
} else
tax = (B - 180000)* .45 + (180000 - 80000 begin_of_the_skype_highlighting**************180000 - 80000******end_of_the_skype_highlighting) * .37 + (80000- 37000) * .30 + (37000 - 6000) * .15;}
</script>
</HEAD>
<BODY>
<form name="form1">
Weekly Salary: <INPUT TYPE="TEXT" NAME="text2">
<INPUT TYPE="BUTTON" VALUE="SUBMIT" Onclick="calculate();">
</BODY>
</HTML>
Hi All, Wondering if someone could help me out. i am developing a simple javascript calculator at the problem is this: When I use the input type = button or submit, then the calculator works fine BUT I need to use a custom button and now the calculator just shows the results for a split second and then disappears and the form reloads I have made the button line in bold. All help appreciated!! Many thanks Here is my code: <html> <head> <script language="JavaScript"> function Framesize(BikeSizer) { var a = parseFloat(BikeSizer.Insleg.value); b = (a * 0.572); c = Math.round(b); BikeSizer.FramesizeCM.value = c; d = (a * 0.226); e = Math.round(d); BikeSizer.FramesizeInch.value = e; } </script> </head> <body> <Form name="BikeSizer"> <!--The visuals for the graphic--> <table cellpadding="0" cellspacing="0" align="center" border="0" width="370"> <tr> <td align="center" valign="top"><img src="images/Calculator_bg_top.gif" border="0"></td> </tr> </table> <table cellpadding="0" border="0" cellspacing="0" align="center" width="370" style="background:url(images/Calculator_bg_mid.gif) repeat-y top center; font-family:Verdana, Arial, Tahoma;"> <tr> <td colspan="2" valign="middle" align="left"> <div style="padding:2px 5px 5px 12px;"> <font style="font-weight: bold; color:#cc6600; font-size:14px">Berechnung der richtigen Rahmenhöhe</font> <br /><a href="#" style="font-size:10px">Wie messe ich die Schrittlänge richtig?</a></div> </td> </tr> <tr> <td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Fahrradart:</div></td> <td><select name="Biketype" style="font-size:11px;"> <option>Mountainbike</option> <option>Trekking-, Reise- oder Cityrad</option> <option>Rennrad</option> </select></td> </tr> <tr> <td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Schritthöe:</div></td> <td><input name="Insleg"></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td> </td> <td><div style="padding:6px 0 8px 0;"> <input type="image" NAME="calc" VALUE="Calculate" src="images/berechnen_btn.gif" onClick=Framesize(BikeSizer)> </div></td> </tr> <tr> <td align="left" valign="top"><div style="font-size:13px; padding:0px 0 7px 12px;"><strong>Rahmenhöe:</strong></div></td> <td align="left" valign="top" style="font-size:13px;"><input name = "FramesizeCM"> <strong>CM</strong> <br /><br /><input name = "FramesizeInch"> <strong>Zoll</strong> </td> </tr> </table> <table cellpadding="0" cellspacing="0" align="center" border="0" width="370"> <tr> <td align="center" valign="top"><img src="images/Calculator_bg_end.gif" border="0"></td> </tr> </table> </FORM> this is my javascript code: Code: var aaa, aab; aaa = choo.chooserver0.checked; aab = choo.chooserver1.checked; k=(aaa==true)?0:(aab==true)?1:(aaa=true&&aab==true)? 'b2' : false ; now when the checkbox with id chooserver0 is checked, it sets k's value to 0, and when checkbox with id chooserver1 is checked it sets its value to 1, but when both are checked it must set value to b2, but it sets value to 0, why? and when i write it as: Code: var aaa, aab; aaa = choo.chooserver0.checked; aab = choo.chooserver1.checked; k=(aaa=true&&aab==true)? 'b2' :(aaa==true)?0:(aab==true)?1: false ; when box 1 is checked, it sets k= false, when box2 is checked it sets k= 'b2' and when both are checked it sets k = 'b2'... why is code doing so? 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>
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. 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! 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! view the rest of my comments works on the first page but when i extend the search results the rest of the view comments wont expand. click View all 3 comments and it will show all comments then click more button try to click the view all comments on the next comment and nothing happens but the screen jumping up to the top. http://www.runningprofiles.com/membe...ll_Script.php# Why is this?? What do i need to do to fix it? PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>9lessons Applicatio Demo</title> <link href="frame.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.oembed.js"></script> <script type="text/javascript"> $(function() { $('.more').live("click",function() { var ID = $(this).attr("id"); if(ID) { $("#more"+ID).html('<img src="moreajax.gif" />'); $.ajax({ type: "POST", url: "http://www.runningprofiles.com/members/shout/data/ajax_more.php", data: "lastmsg="+ ID, cache: false, success: function(html){ $("ol#updates").append(html); $("#more"+ID).remove(); // removing old more button } }); } else { $(".morebox").html('The End');// no results } return false; }); }); $(function() { $(".view_comments").click(function() { var ID = $(this).attr("id"); $.ajax({ type: "POST", url: "../viewajax.php", data: "msg_id="+ ID, cache: false, success: function(html){ $("#view_comments"+ID).prepend(html); $("#view"+ID).remove(); $("#two_comments"+ID).remove(); } }); return false; }); }); $(function() { $(".comment_button").click(function() { var element = $(this); var boxval = $("#content").val(); var dataString = 'content='+ boxval; if(boxval=='') { alert("Please Enter Some Text"); } else { $("#flash").show(); $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>'); $.ajax({ type: "POST", url: "update_ajax.php", data: dataString, cache: false, success: function(html){ $("ol#update").prepend(html); $("ol#update li:first").slideDown("slow"); document.getElementById('content').value=''; $('#content').value=''; $('#content').focus(); $("#flash").hide(); $("#expand_url").oembed(boxval); } }); } return false; }); //comment slide $('.comment').live("click",function() { var ID = $(this).attr("id"); $(".fullbox"+ID).show(); $("#c"+ID).slideToggle(300); return false; }); //commment Submint $('.comment_submit').live("click",function() { var ID = $(this).attr("id"); var comment_content = $("#textarea"+ID).val(); var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID; if(comment_content=='') { alert("Please Enter Comment Text"); } else { $.ajax({ type: "POST", url: "comment_ajax.php", data: dataString, cache: false, success: function(html){ $("#commentload"+ID).append(html); document.getElementById("textarea"+ID).value=''; $("#textarea"+ID).focus(); } }); } return false; }); // Delete Wall Update $('.delete_update').live("click",function() { var ID = $(this).attr("id"); var dataString = 'msg_id='+ ID; var parent=$("#bar"+ID); jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', function(r) { if(r==true) { $.ajax({ type: "POST", url: "delete_comment.php", data: dataString, cache: false, success: function(html){ $("#comment"+ID).slideUp(); } }); } return false; }); return false; }); }); </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .update_box { background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px } a { text-decoration:none; color:#d02b55; } a:hover { text-decoration:underline; color:#d02b55; } *{margin:0;padding:0;} ol.timeline {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;} .delete_button { float:right; margin-right:10px; width:20px; height:20px } .cdelete_button { float:right; margin-right:10px; width:20px; height:20px } .feed_link { font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px } .comment { color:#0000CC; text-decoration:underline } .delete_update { font-weight:bold; } .cdelete_update { font-weight:bold; } .post_box { height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3; width:499px;padding:.7em 0 .6em 0;line-height:1.1em; } #fullbox { margin-top:6px;margin-bottom:6px; display:none; } .comment_box { display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:50px; } .comment_load { margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF; } .text_area { width:290px; font-size:12px; height:30px; } #expand_box { margin-left:90px; margin-top:5px; margin-bottom:5px; } embed { width:200px; height:150px; } *{ margin:0px; padding:0px } ol.timeline { list-style:none } ol.timeline li { position:relative; border-bottom:1px #dedede dashed; padding:8px; } .morebox { font-weight:bold; color:#333333; text-align:center; border:solid 1px #333333; padding:8px; margin-top:8px; margin-bottom:8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } .morebox a{ color:#333333; text-decoration:none} .morebox a:hover{ color:#333333; text-decoration:none} #container{margin-left:60px; width:580px } </style> </head> <body> <?php include '../../../settings.php'; ?> <div align="center"> <table cellpadding="0" cellspacing="0" width="500px"> <tr> <td> <div align="left"> <form method="post" name="form" action=""> <table cellpadding="0" cellspacing="0" width="500px"> <tr><td align="left"><div align="left"> <h3>What are you doing?</h3></div></td></tr> <tr> <td style="padding:4px; padding-left:10px;" class="update_box"> <textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br /> <input type="submit" value="Update" id="v" name="submit" class="comment_button"/> </td> </tr> </table> </form> </div> <div style="height:7px"></div> <div id="flash" align="left" ></div> <ol id="update" class="timeline"> </ol> <ol class="timeline" id="updates"> <div id='old_updates'> <?php $small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="80%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> </ol> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> </div> </td> </tr> </table> </div> </body> </html> if it help here is ajax_more.php PHP Code: <?php include("../../../settings.php"); if(isSet($_POST['lastmsg'])) { $lastmsg=$_POST['lastmsg']; $lastmsg=mysql_real_escape_string($lastmsg); $small=mysql_query("select * from messages2 WHERE msg_id<'$lastmsg' order by msg_id desc LIMIT 2"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div class="comments" id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="50%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> <?php } ?> Hey, I've tried w3schools, tizag, and google, but haven't found exactly what I need. I need some way of easily figuring out which option in a drop down menu is checked, through the use of javascript, like how you can use document.formname.elementname[i].checked to find out which checkbox/radio button is checked. Anything that would return something that allows me to figure out which option has been chosen. I will need to have a function with 3 if statements, one for each option.
I am trying to create 2 different drop down menus which are chained. First drop down menu: options 1, 2, 3, and 4 Second drop down menu: options 1, 2, 3 and 4 However for the first drop down menu, if you choose the number then that number cannot be selected again on the second drop down menu. So if i pick 4 on the first drop down. then only 1, 2, and 3 should show up on the second drop down OR if you pick 4 on the second drop down it gives you an error saying you selected that value. Here is the complicated part that I cannot figure out. I want each drop down menus on two different pages and not on the same page. So after you select the submit button on the first drop down it should go to another page with the second drop down.. Has anyone seen this before. if you can give me some tips or show me how its done or even a webpage that has already implemented this i would appreciate it. Thank you! Hi On my web page I have 3 seperate catorgories with 2 drop down lists in each, the first dropdown list in each catergory is for "county" here is a snippet of the code Code: function fillCategory(){
addOption(document.drop_list.Category, "bedfordshire", "Bedfordshire", "");
addOption(document.drop_list.Category, "berkshire", "Berkshire", "");
addOption(document.drop_list.Category, "buckinghamshire", "Buckinghamshire", "");
addOption(document.drop_list.Category, "cambridgeshire", "Cambridgeshire", "");
I wanted to know if it is possible to use "list.js" to populate all 3 county dropdown lists or would I need "list.js" "list1.js" etc etc Hi everyone, How can I achieve this? I need to get my drop down menu go over the javascript slideshow going on in this page: www.kimikal.com/store It works on all browsers except for IE, which hides the menu behind the js slideshow. Any help would be greatly appreciated! I have done drag and drop of popup in JavaScript and it is dragged in all directions properly but down.MouseUp event is not triggered properly when I drag the popup towards down.So that it is moving even though I released mouse. I am really screwed up with this bug.Please help..I have to resolve it urgently.... Here is my code.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body{
margin:0px;
padding:0px;
}
iframe{
width:800px;
height:500px;
}
img{border:none;}
.parentDisabled
{
width:100%;
height:100%
background-color:red;
position:absolute;
top:0;
left:0;
display:block;
border:1px solid blue;
}
#popup{
position:absolute;
width:800px;
height:500px;
border:2px solid #999188;
display:none;
}
#header{
padding-right:0px;
width:800px;
}
#close{
cursor:hand;
width:15px;
position: absolute;
right:0;
top:0;
padding:2px 2px 0px 0px;
}
#move{
cursor:move;
background:#999188;
width:800px;
line-height:10px;
}
#container{
}
.navigate{
border:1px solid black ;
background:#CC00FF;
color:white;
padding:5px;
cursor:hand;
font-weight:bold;
width:150px;
}
</style>
</HEAD>
<BODY>
<div onClick="showPopUp('w3schools');" class="navigate">W3Schools</div>
<div onClick="showPopUp('yahoo');" class="navigate">Yahoo</div>
<div onClick="showPopUp('linkedin');" class="navigate">LinkedIn</div>
<div onClick="showPopUp('vistex');" class="navigate">Vistex</div>
<div id="popup">
<div id="header">
<span id="move"></span>
<span id="close"><img src="close_red.gif" onClick="closePopUp()" alt="Close"/></span>
</div>
<div id="container">
<iframe name="frame" id="Page_View" frameborder=0>
page cannot be displayed
</iframe>
</div>
</div>
</BODY>
<script>
var popUpEle=null;
function showPopUp(value,evt)
{
evt = evt ? evt : window.event;
var left=evt.clientX;
var top=evt.clientY;
popUpEle = document.getElementById('popup');
if(popUpEle)
{
closePopUp();
var url= "http://www."+value+".com";
document.getElementById('Page_View').src=url;
popUpEle.style.left=left;
popUpEle.style.top=top;
popUpEle.style.filter="revealTrans( transition=1, duration=1)";
popUpEle.filters.revealTrans( transition=1, duration=1).Apply();
popUpEle.filters.revealTrans( transition=1, duration=1).Play();
popUpEle.style.display="inline";
}
}
function closePopUp(){
if(popUpEle)
{
popUpEle.style.filter="revealTrans( transition=0, duration=4)";
popUpEle.filters.revealTrans( transition=0, duration=5).Apply();
popUpEle.filters.revealTrans( transition=0, duration=5).Play();
popUpEle.style.display="none";
}
}
var dragApproved=false;
var DragHandler = {
// private property.
_oElem : null,
// public method. Attach drag handler to an element.
attach : function(oElem) {
oElem.onmousedown = DragHandler._dragBegin;
// callbacks
oElem.dragBegin = new Function();
oElem.drag = new Function();
oElem.dragEnd = new Function();
return oElem;
},
// private method. Begin drag process.
_dragBegin : function(e) {
var oElem = DragHandler._oElem = this;
if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }
var x = parseInt(oElem.style.left);
var y = parseInt(oElem.style.top);
e = e ? e : window.event;
if (e.pageX || e.pageY)
{
oElem.mouseX = e.pageX;
oElem.mouseY = e.pageY;
}
else if (e.clientX || e.clientY) {
oElem.mouseX = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
oElem.mouseY = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
}
document.onmousemove = DragHandler._drag;
document.onmouseup = DragHandler._dragEnd;
return false;
},
// private method. Drag (move) element.
_drag : function(e) {
var oElem = DragHandler._oElem;
var x = parseInt(oElem.style.left);
var y = parseInt(oElem.style.top);
e = e ? e : window.event;
var clientXTmp,clientYTmp;
if (e.pageX || e.pageY)
{
clientXTmp = e.pageX;
clientXTmp = e.pageY;
}
else if (e.clientX || e.clientY) {
clientXTmp = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
clientYTmp = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
}
var tmpX = x + (clientXTmp - oElem.mouseX);
var tmpY = y + (clientYTmp - oElem.mouseY);
if(tmpX<=0){tmpX = 0;}
if(tmpY<=0){tmpY = 0;}
oElem.style.left = tmpX + 'px';
oElem.style.top = tmpY + 'px';
oElem.mouseX = clientXTmp;
oElem.mouseY = clientYTmp;
return false;
},
// private method. Stop drag process.
_dragEnd : function()
{
var oElem = DragHandler._oElem;
document.onmousemove = null;
document.onmouseup = null;
DragHandler._oElem = null;
}
}
DragHandler.attach(document.getElementById('popup'));</script>
</HTML>
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 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. |
|||||||