|
JavaScript - Buttons Unselect Problem
I included a jQuery handler for my dropdown menus so that when something is selected in the first dropdown menu, it will manipulate the options in the second dropdown menu. Now what the user does is pick the option type in the first dropdown (`OptionDropId`) menu and then in the second dropdown (`NumberDropId`) menu the user selects the number of answers wanted. Below that dropdown menu a list of buttons would appear and the user selects the number of buttons depending on how many the user has selected in the second dropdown menu.
Now let's say user clicks on two buttons and then changes the option type (first dropdown menu), then the buttons selected are still selected, I want the buttons to be unselected if the option type has changed. This used to work but since I have included my `change` event handler to bind my jquery (this code is needed), it does not unselect buttons when the option type changes. What do I need to do to fix this: Below is my jquery and function of select and unselect buttons: Code: $(document).ready(function ()
{
var OptDrop = new Array();
OptDrop.abc = ["",1,2];
OptDrop.abcd = ["",1,2,3];
OptDrop.abcde = ["",1,2,3,4];
OptDrop.trueorfalse = [1];
OptDrop.yesorno = [1];
$("#optionDropId").change(function ()
{
var selectedValue = $(this).val();
$("#numberDropId").html("");
$.each(OptDrop[selectedValue], function (x, y)
{
$("#numberDropId").append($("<option></option>").attr("value", y).html(y));
});
});
$("#optionDropId").change();
});
var currenttotal=0;
function getButtons()
{
document.getElementById("answerA").className="answerBtnsOff";
document.getElementById("answerB").className="answerBtnsOff";
document.getElementById("answerC").className="answerBtnsOff";
document.getElementById("answerD").className="answerBtnsOff";
document.getElementById("answerE").className="answerBtnsOff";
document.getElementById("answerTrue").className="answerBtnsOff";
document.getElementById("answerFalse").className="answerBtnsOff";
document.getElementById("answerYes").className="answerBtnsOff";
document.getElementById("answerNo").className="answerBtnsOff";
currenttotal=0;
}
function btnclick(btn)
{
if(document.getElementById("numberDropId").value=="")
{
alert('You must first select the number of answers you require from the drop down menu');
return false;
}
if (btn.className=="answerBtnsOn")
{
btn.className="answerBtnsOff";
currenttotal--;
return false;
}
if(document.getElementById("numberDropId").value==currenttotal)
{
alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
return false;
}
if (btn.className=="answerBtnsOff")
{
btn.className="answerBtnsOn";
currenttotal++;
return false;
}
}
Html code is below: Code: <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);">
<table id="optionAndAnswer">
<tr>
<th colspan="2">
Option and Answer
</th>
</tr>
<tr>
<td>Option Type:</td>
<td>
<select name="optionDrop" id="optionDropId" onChange="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
</td>
</tr>
<tr>
<td>Number of Answers:</td>
<td>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
</select>
</td>
</tr>
<tr>
<td>Answer</td>
<td>
<input class="answerBtns" name="answerAName" id="answerA" type="button" value="A" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerBName" id="answerB" type="button" value="B" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerCName" id="answerC" type="button" value="C" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerDName" id="answerD" type="button" value="D" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerEName" id="answerE" type="button" value="E" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerTrueName" id="answerTrue" type="button" value="True" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerFalseName" id="answerFalse" type="button" value="False" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerYesName" id="answerYes" type="button" value="Yes" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerNoName" id="answerNo" type="button" value="No" onclick="javascript:btnclick(this);"/>
</td>
</tr>
</table>
</form>
Similar TutorialsI have a dropdown menu and some buttons below in my HTML: Code: <p>
<select name="numberDrop" id="numberDropId" onClick="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
<p>
<input class="answerBtns" name="answerA" type="button" value="A" />
<input class="answerBtns" name="answerB" type="button" value="B" />
<input class="answerBtns" name="answerC" type="button" value="C" />
<input class="answerBtns" name="answerD" type="button" value="D" />
<input class="answerBtns" name="answerE" type="button" value="E" />
</p>
What I want to know is that how is it suppose to be coded so that the user can only select the same amount of buttons as the number from the drop down menu? For example if the user selects the number 3 from the dropdown menu, then if the user clicks on a button, it will highlight the button in a color (lets say green) but the user can only have three buttons selected. If an additional button is clicked then that button would not be selected. The additional button can only be selected if the user unselects a selected button and then selects the button he wishes. This means that only 3 buttons can be selected at maximum. Also only 3 buttons minimum can be selected, if more or less buttons are selected than the number 3 then it should come up with an alert. Is this suppose to be done in Javascript or Jquery and how can I use css to change the color of the ubttons to green if selected or back to grey if unselected? Thank You hello, I created this program to hold 5 cd's and some information relating to them. I keep getting an error that says: cannot find symbol symbol : class ButtonListener location: class inventoryprogram.InventoryProgram ActionListener btnListen = new ButtonListener(); // create listener here is the part of code with the actionlistener in it [CODE] private JPanel createButtonPanel() { // begin method createButtonpanel method ActionListener btnListen = new ButtonListener(); // create listener // create button objects JButton nextButton = new JButton("Display Cd"); // create and label button nextButton.setActionCommand("Next"); // action command for click nextButton.addActionListener(btnListen); nextButton.addActionListener(this); JPanel panel = new JPanel(); panel.add(nextButton); // add next button to panel return panel; // return panel } // end method createButtonPanel [ICODE] Hi all, I'm having trouble getting the following right: Code: <IMG border="0" onMouseOver=this.src="home2.gif" onMouseOut=this.src="home.gif" onClick=this.src="home2.gif" SRC="home.gif"> The idea is that after somebody clicks it, the button will remain home2.gif, but ofcourse if u mouseout after the click it will return to home.gif. Can somebody please help me with this problem?! I'm not really good at js, so I've been struggling with this for quite a few days ! Thnx alot! Sjaroow Im trying to configuere a form that a. a radio buttons that allow the user to choose between quarters, nickels, dimes and pennies. and show image when click on my radio button im confused on how to get the image to display whenthey click on the radio button I'm Confused. My HTML: <form action="mail.php" class="contactForm" name="cform" method="post"> <div class="left"> <h1>Insurance Details</h1> <label>Type of Cover:</label> . . . <span class="gender-missing"><br />Please select your gender.<br /></span> <label>Gender:</label> <input class="radio" id="gender" name="gender" type="radio" value="Male" /> Male <input class="radio" id="gender" name="gender" type="radio" value="Female" /> Female Script.js: $('.contactForm').submit( function(){ //statements to validate the form var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; var digitNum = /^([0-9])/; var num1 = document.getElementById('tel'); var num2 = document.getElementById('mobile'); var email = document.getElementById('email'); var dollarUnit = document.getElementById('amount_cover'); var gender = document.getElementsById('gender'); if((document.cform.gender[0].checked== false)&&(document.cform.gender[1].checked== false)) {$('.gender-missing').show(); } else {$('.gender-missing').hide();} if((document.cform.smoke[0].checked== false)&&(document.cform.smoke[1].checked== false)) {$('.smoke-missing').show(); } else {$('.smoke-missing').hide();} if((document.cform.residency[0].checked== false)&&(document.cform.residency[1].checked== false)) {$('.residency-missing').show(); } else {$('.residency-missing').hide();} if (!filter.test(email.value)) { $('.email-missing').show(); } else {$('.email-missing').hide();} if (document.cform.name.value == "") { $('.name-missing').show(); } else {$('.name-missing').hide();} if (document.cform.address.value == "") { $('.address-missing').show(); } else {$('.address-missing').hide();} if (!digitNum.test(num1.value)) { $('.tel-missing').show(); } else {$('.tel-missing').hide();} if (!digitNum.test(num2.value)) { $('.mobile-missing').show(); } else {$('.mobile-missing').hide();} if (!digitNum.test(dollarUnit.value)) { $('.cover-missing').show(); } else {$('.cover-missing').hide();} if (document.cform.message.value == "") { $('.message-missing').show(); } else {$('.message-missing').hide();} if ((document.cform.name.value == "") || ((document.cform.gender[0].checked== false) && (document.cform.gender[1].checked== false)) || ((document.cform.smoke[0].checked== false) && (document.cform.smoke[1].checked== false)) || ((document.cform.residency[0].checked== false) && (document.cform.residency[1].checked== false)) || (!digitNum.test(dollarUnit.value)) || (!filter.test(email.value)) || (!digitNum.test(num2.value)) || (!digitNum.test(num1.value)) || (document.cform.message.value == "")){ return false; } if ((document.cform.name.value != "") && ((document.cform.gender[0].checked == true) || (document.cform.gender[1].checked == true)) && ((document.cform.smoke[0].checked== true) || (document.cform.smoke[1].checked== true)) && ((document.cform.residency[0].checked== true) || (document.cform.residency[1].checked== true)) && (digitNum.test(dollarUnit.value)) && (digitNum.test(num1.value)) && (digitNum.test(num2.value)) && (filter.test(email.value)) && (document.cform.message.value != "")) { //hide the form $('.contactForm').hide(); //show the loading bar $('.loader').append($('.bar')); $('.bar').css({display:'block'}); //send the ajax request $.post('mail.php',{coverType:$('#coverType').val(), coverRequired:$('#coverRequired').val(), amount_cover:$('#amount_cover').val(), terms:$('#terms').val(), message:$('#message').val(), name:$('#name').val(), gender:$('#gender').val(), status:$('#status').val(), Birth_month:$('#Birth_month').val(), days:$('#days').val(), years:$('#years').val(), smoke:$('#smoke').val(), residency:$('#residency').val(), email:$('#email').val(), address:$('#address').val(), tel:$('#tel').val(), mobile:$('#mobile').val()}, //return the data function(data){ //hide the graphic $('.bar').css({display:'none'}); $('.loader').append(data); }); //waits 2000, then closes the form and fades out setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 5000); setTimeout('$(".contact").animate({"marginLeft": "-=963px"}, "slow")',4900); //stay on the page return false; } }); //only need force for IE6 $("#backgroundPopup").css({ "height": document.documentElement.clientHeight }); mail.php code: <?php //declare our variables $coverType = $_POST['coverType']; $coverRequired = $_POST['coverRequired']; $amount_cover = $_POST['amount_cover']; $terms = $_POST['terms']; $message = stripslashes(nl2br($_POST['message'])); $name = $_POST['name']; $gender = $_POST['gender']; $status = $_POST['status']; $Birth_month = $_POST['Birth_month']; $days = $_POST['days']; $years = $_POST['years']; $smoke = $_POST['smoke']; $residency = $_POST['residency']; $email = $_POST['email']; $address = $_POST['address']; $tel = $_POST['tel']; $mobile = $_POST['mobile']; //get todays date $todayis = date("l, F j, Y, g:i a") ; //set a title for the message $subject = "Message from Your Website"; $body = "PERSONAL DETAILS \nFull Name: $name \nGender: $gender \nMarital Status: $status \nBirth Date: $Birth_month $days, $years \nHave you smoke in the past 12 Months? $smoke \nU.S. Residency for at least 12 Months? $residency \n\nCONTACT DETAILS\nEmail Address: $email \nAddress: $address \nTelephone #: $tel \nMobile Number: $mobile \n\nINSURANCE DETAILS\nCover Type: $coverType \nCover Required: $coverRequired \nAmount: $amount_cover \nTerms(Years): $terms \nMessage: \n$message"; $headers = 'From: '.$email.'' . "\r\n" . 'Reply-To: '.$email.'' . "\r\n" . 'Content-type: text/plain; charset=utf-8' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); //put your email address here mail("me@myemail.com", $subject, $body, $headers); ?> <!--Display a thankyou message in the callback --> <div id="mail_response"> <h3>Thank you for your interest <?php echo $name ?>!</h3><br /> <p>We have received your personal information and we will forward it to the next available insurance agent .You can expect to hear from us within 24 hours.</p> <br /><br /> <h5>Message sent on: </h5> <p><?php echo $todayis ?></p> </div> Problem is the thank you message loads in a new page. BUt if I delete this line: var gender = document.getElementsById('gender'); The form run properly, when submit button is click, it will hide the forms and replace by a thank you message but problem is the data send in the email is not the right value eg. in Gender: I select Female. BUt I receive Male as value. Why is that? for live demo: http://gbv.lifeandhealthbenefits.com/ for full Script Code: http://gbv.lifeandhealthbenefits.com/js/scripts.js I have the following buttons ... Code: <input id="newTaskButton" type="button" name="Good Morning" value="201" /> <input id="newTaskButton" type="button" name="Hello World" value="201" /> ... and the following javascript ... Code: <script type="text/javascript">
$(document).ready(function() {
$("#newTaskButton").click(function() {
alert(" " + document.getElementById("newTaskButton").name);
});
});
</script>
... but I am having some trouble having the second button to response. My objective is to have 2 or more button that have the same click function (in this case, newTaskButton) but when clicked, it will produce different response. (in this case, the first button will response 'Good Morning' while the second button will response 'Hello World') Appreciate any help. Alternatives are welcome too. On custom button images, how do you give them the effect that they're "pushed" when the user clicks them and "unpushed" when the user lets his finger off the mouse button? I'm guessing it's some type of rollover effect, but I'm not sure how it's done.
I'm creating a unit converter program using radio buttons and i can't seem to get one aspect working. i can't seem to get another set of radio buttons to display. the way the program is supposed to work is there will be 3 radio buttons saying to convert length, weight, and volume. if the user selects to convert weight, another set of radio buttons will appear with 2 options, to convert from pounds to kilograms, or kilograms to pounds. then the user enters the number in a text box and clicks to convert button. my problem is getting the second set of radio buttons to display. I have no clue how to get this to work. to get a better understanding of whats going on, here is the program without the radio buttons that i created. i'm trying to use radio buttons in place of the prompting message. Code:
<!DOCTYPE html>
<html>
<head>
<title> Conversions of Weight and Length</title>
<script type="text/javascript">
function clearMe()
{
var _s=top;
var _d=_s.document;
_d.open();
_d.write("");
_d.close();
}
function main()
{
var repeat = confirm("Do you want to perform another conversion ? \r" + "<p><b>Note:</b> Pressing OK allows for another conversion, and pressing CANCEL exits</p>");
if(repeat==true)
{
convert();
}
else
{
alert("Your program has been terminated!");
self.close();
}
}
function convert()
{
var unit, direction, value, result, original_units, new_units;
document.write("<br/><br/>")
document.write("Weight and Length conversion menu" + "<br/><br/>");
document.write("1. convert length" + "<br />");
document.write("2. convert weight" + "<br />");
document.write("3. convert volume" + "<br />");
unit = window.prompt("select conversion type: ");
if ((unit<0) || (unit>3))
{
alert("Select Menu option 1, 2, or 3!");
unit = window.prompt("Select conversion type: ");
}
switch (unit)
{
case '1':
direction = choose_direction("<br /><br />1. Feet to meters<br />" , "2. Meters to feet <br />");
if (direction =='1')
{
original_units = "meters"; new_units = "meters";
}
else {
new_units = "feet"; original_units = "meters";
}
break;
case '2':
direction = choose_direction("<br /><br />1. Pounds to kilograms <br />", "2. Kilograms to pounds <br /> <br />");
if (direction =='1')
{
original_units = "pounds"; new_units = "kilograms";
}
else {
new_units = "pounds"; original_units = "kilograms";
}
break;
case '3':
direction = choose_direction("<br /><br />1. Gallons to liters<br />", "2. Liters to gallons <br /><br />");
if (direction =='1')
{
original_units = "gallons"; new_units = "liters";
}
else {
new_units = "gallons"; original_units = "liters";
}
break;
}
value = window.prompt("Enter value to be converted:")
switch(unit)
{
case '1':
result = feet_meters(value, direction);
break;
case '2':
result = pounds_kilograms(value, direction);
break;
case '3':
result = gallons_liters(value, direction);
break;
}
document.write(value + original_units + " = " + result + new_units);
}
function choose_direction(option1, option2)
{
var direction;
document.write(option1);
document.write(option2);
do
{
window.prompt("Select a conversion direction");
return direction;
}
while ((direction!='1') || (direction !='2'));
}
function pounds_kilograms(value, direction)
{
if (direction == '1')
return parseFloat(value)/parseFloat(2.2046);
else
return parseFloat(value)*parseFloat(2.2046);
}
function gallons_liters(value, direction)
{
if (direction == '1')
return parseFloat(value)*parseFloat(3.7854);
else
return parseFloat(value)/parseFloat(3.7854);
}
function feet_meters(value, direction)
{
if (direction == '1')
return parseFloat(value)/parseFloat(3.2808);
else
return parseFloat(value)*parseFloat(3.2808);
}
</script>
</head>
<body>
<h1> weight and length conversion </h1>
<script type="text/javascript">
convert();
main();
</script>
</body>
</html>
Hey guys, I'm a noob with javascript and I only know simple HTML coding, so I have become stuck. I can program in other languages though, so I understand the principles. That being said, I have become stuck with something. My aim is to have a series of page where text is displayed, and then two or more buttons. Once a button is clicked, I want the screen to clear and it displays the next lot of text, followed by some more buttons. Once they are pushed, it continues on. So basically, each section has its own code that it pushes, plus its own buttons which lead to other sections. I am not trying to make a choose your own adventure book, but the layout is basically one of these. I can do this in another language by simply having a few sections. Inside each section, it retrieves the option and proceeds. However, when I am trying to do this, I am getting confused. The way my other programming experience tells me to write it, I would write a function which is called for each section, and it would display the text, the buttons, and return to the main function in the program. However, because the buttons are in HTML, I cannot put code for the new buttons instead the functions. If I put the code inside the body of HTML, it will automatically be displayed. I cannot write an if statement to determine which buttons are displayed. Can you please give me some advice around this? I hope I have made myself clear enough to be understood!! One other thing I should mention, I really want to be able to do this in a single HTML file instead of calling other files. I think this would work fine by using frames and multiple HTML files, but I would prefer not to unless I really need to. One file would be much better for me. Thanks! Below is the basic code I am working from. It displays the first section with some text, displays two buttons and it goes to the next section on a button click. Code:
<html>
<head>
<script type="text/javascript">
function button1()
{
document.write("Button 1 was pushed. Insert text here. Choose from two new buttons below:");
}
function button2()
{
document.write("Button 2 was pushed. Insert text here. Choose from two new buttons below:");
}
</script>
</head>
<body>
<form>
<input type="button" value="Button1" onClick="button1()" />
<input type="button" value="Button2" onClick="button2()" />
</form>
</body>
</html>
how can i make a button that takes the user to the top of the page without the url#top being displayed in addy bar? i just dont like the way it looks thanks peeps Hello there, Can some one gimme source code for greying out a button on php page. In my application i have one play button and one stop button in the html form. If i click play button it will update database with play and invoke a script. similarly with stop. so while they are being played i want this play button to be greyed out. or is there any way that i can only show stop button while playing and play button while not playing the files. HELP PLZZZZZZZZ On my website I have a radio button as any other normal radio button. <input type="radio" name="crime" value="4" id="4" class="submit"> is there any way to get rid of this radio button and click something for example <tr> <td>Blah blah</td> <td>Blah Blah</td> </tr> is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section. On my website I have a radio button as any other normal radio button. <input type="radio" name="crime" value="4" id="4" class="submit"> is there any way to get rid of this radio button and click something for example <tr> <td>Blah blah</td> <td>Blah Blah</td> </tr> is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section. Hello. I am a new user. I have got a website, www.eastbourneinks.co.uk where the quantity buttons (+) & (-) do not work on most computers where I have had feedback. Is there any way of making them work on any/all computers. This is one of the pages: http://eastbourneinks.co.uk/product/...nk-cartridges/ Many thanks. Phil. I have a page where I have a image displayed and 3 buttons underneath the image. The image displayed is the outdoor tool "hoe". I have the buttons named saw, hoe and tree trimmer below the image. What I want to do is when the user of the web page clicks a button, let's say for example tree trimmer the new image will appear on the page in place of the old image. Right now my code is messed up, it does not matter what image you click but only a image of a saw appears. Also I cannot get my image centered correctly. Does anyone have any suggestions to help me? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> img.shown {display: block; margin-left: auto; margin-right: auto; } </style> </head> <h1 style="text-align:center">A simple slide show</h1> <script> function pictureChange() { document.getElementById("shown").src="/tools/saw.jpg"; } </script> <body> <img id="shown" src="/tools/hoe.jpg";> <p><input type="button" id="theButton" value="Saw" onclick="pictureChange()"> </p> <p><input type="button" id="theButton" value="Hoe" onclick="pictureChange()"> </p> <p><input type="button" id="theButton" value="Tree Trimmer" onclick="pictureChange()"> </p> </body> </html> *** I have tried this code snipet below and it does not work for me because I don't know the actual url, the images are uploaded to a server.*********** function pictureChange(imgurl) { document.getElementById("shown").src='/tools/' + imgurl + '.jpg'; } I've been looking around and all the validation stuff I've seen doesn't work for what I have. Here is what I am trying to do: The user selects the Heads or Tails radio button for the first flip and then selects heads or tails radio button for the 2nd flip. The script then randomly flips two coins and compares it to what the user selected and if they are the same the user wins and if not then they lose. So there would be 4 buttons total, two Heads and two Tails. The first set of Heads and Tails needs to be assigned to "guess1" and the 2nd set is "guess2". So if the user clicks Tails for Flip1 and Heads for Flip2 then Tails is assigned to guess1 and Heads is assigned to guess2. Right now the script just assumes the user is selecting heads for both flips. Code: <html>
<head>
<title>Guess Two Coin Tosses</title>
<script>
function flip5(){
//Input
var guess1 = document.getElementById('guess1').value
var guess2 = document.getElementById('guess2').value
var flip1 = Math.floor(Math.random() * 2)
var flip2 = Math.floor(Math.random() * 2)
var outcomes
if (flip1 == 0) flip1 = 'Heads';
else flip1 = 'Tails';
if (flip2 == 0) flip2 = 'Heads';
else flip2 = 'Tails';
//Processing
if (flip1.toUpperCase() == guess1.toUpperCase()) {
if (flip2.toUpperCase() == guess2.toUpperCase())
outcomes = 'win win';
else
outcomes = 'win lose';
}
else { // here we lost the first
if (flip2.toUpperCase() == guess2.toUpperCase())
outcomes = 'lose win';
else
outcomes = 'lose lose';
}
//Output
document.getElementById('flip1').value = flip1
document.getElementById('flip2').value = flip2
document.getElementById('outcomes').value = outcomes
}
</script>
</head>
<body>
<h3>Predict the Futu Guess Two Coin Flips</h3>
Enter Heads for Heads, Tails for Tails! Case does not matter!
<p/>Your Guess for Flip-1:
<input type=radio id="guess1" size="5" value="Heads" />Heads
<input type=radio id="guess1" size="5" value="Tails" />Tails
<p/>Your Guess for Flip-2:
<input type=radio id="guess2" size="5" value="Heads" />Heads
<input type=radio id="guess2" size="5" value="Tails" />Tails
<p/>Flip-1:
<input type="text" id="flip1" size="5" value="???" />
<p/>Flip-2:
<input type="text" id="flip2" size="5" value="???" />
<p/><input type="button" value="Flip Two!"
onclick="flip5()" />
<p/>Outcomes:
<input type="text" id="outcomes" size="20" value="" />
<hr>
</body>
</html>
hello, this is my first attempt in javascript. im trying to make custom radio buttons here is the code i have: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.hide {display:none;}
.radio {width:16px;height:16px;}
</style>
<script type="text/javascript">
// declare variables or different states
var off = 'images/check-off.png';
var on = 'images/check-on.png';
var radioImage = document.createElement('img');
function replaceRadios(){
var radios = document.getElementsByName('radio1');
radios.type = 'radio'
for (r = 1; r < radios.length; r++) {
// if radio is checked configure the img src to var on
if (radios[r].type = 'radio' && radios[r].checked) {
radioImage.src = on;
radioImage.className= 'radio on';
} else {
// otherwise configure the img src to var normal/off and give it a class of radio
radioImage.src = off;
radioImage.className= 'radio off';
}
// give the image an id of radio
radioImage.className = 'radio';
radioImage.onclick= radioStates;
radios[r].parentNode.insertBefore(radioImage,radios[r]);
// hide the radio button to show image
radios[r].className = 'hide';
}
}
function radioStates(r) {
var radios = document.getElementsByName('radio1');
if (radios.checked = true) {
radioImage.setAttribute("class", "radio on");
radioImage.src = on;
} else if (radios.checked = false) {
radioImage.setAttribute("class", "radio off");
radioImage.src = off;
} else {
radioImage.setAttribute("class", "radio off");
radioImage.src = off;
}
}
setTimeout("replaceRadios()", 0);
</script>
</head>
<body>
<form name="radiotest">
<input type="radio" id="radio1" class="radio" name="radio1" />
<input type="radio" id="radio2" class="radio" name="radio1" />
<input type="submit" id="submit" name="submit" />
</form>
</body>
</html>
If anyone could help me, I would greatly appreciate it. Hi, I have buttons like these: PHP Code: <button type="button" onclick="izdas()">Iždas</button> <button type="button" onclick="miestas()">Miestas</button> <button type="button" onclick="map()">Žemėlapis</button> <button type="button" onclick="infantry()">Kariuomenė</button> <button type="button" onclick="biuld()">Statiniai</button> How I can add images on them?? Size would be 100x20px. Also, I would e thankful if someone would help me position them in one vertical line. Thanks in advance... There has to be a way to do what I want to do but I'm fugged iif I know how. Here's the problem... A page has three frames - top, left and disp. Top and left contain a number of buttons that display another page in disp. All the buttons need to behave as one set of radio buttons; when a button is clicked any other button returns to the non-clicked state. The really awkward bit is there's an image in top that changes depending on the currently clicked button and that image is behind the buttons. Here it is in pseudocode of sorts. Code: On click button[n]
Button[LastClicked].Image := Button[LastClicked].UnClickedImage;
Button[n].Image := Button[n].ClickedImage;
Top.Image := Button[n].TopImage;
end;
I hope that makes sense. If some kind soul has any idea of how to do that I'd be very grateful. Thanks. Simon. I'm having trouble with a 3-state rollover with rollClick staying active for a series of buttons. Each button reveals it's own content within the same page. Here's a working example of what I have. The roll in and out works fine at first, but after the second click the images start getting jumbled together. Something to do with the lastClick code at the bottom I think. HTML-side my button images get class="rollover" and a unique id. Code: window.onload = rolloverInit;
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function rolloverInit(){
var rollOvers = document.getElementsByClassName("rollover");
for(var i=0; i<rollOvers.length; i++){
setupRollover(rollOvers[i]);
}
}
function setupRollover(thisImage){
//UP
thisImage.outImage = new Image();
thisImage.outImage.src = "images/" + thisImage.id + "1.gif";
thisImage.onerror = thisImage;
thisImage.onmouseout = rollOut;
//OVER
thisImage.clickImage = new Image();
thisImage.clickImage.src = "images/" + thisImage.id + "2.gif";
thisImage.onerror = rollOut;
thisImage.onmousedown = rollClick;
//DOWN
thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id+"2.gif";
thisImage.onerror = rollOut;
thisImage.onmouseover = rollOver;
thisImage.onmouseup = rollOver;
}
function rollOver() {
this.src = this.overImage.src;
}
function rollOut() {
this.src = this.outImage.src;
}
function rollClick() {
if(lastClick){
lastClick.onmouseout = rollOut;
lastClick.src = this.outImage.src;
}
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
}
var lastClick = null;
What I'd also like, since these buttons act as tabs, is for the first button to already be in the rollClick active state on page load (since that button's content is already displayed by default). Is this possible? Thanks for any help you can provide! |
|||||||