|
JavaScript - Change Style When Facebook Like Button Is Clicked
I have three divs, Step 1, Step 2, Step 3.
I'm trying to get it so when a person clicks the Facebook Like, the style changes to none and Step 2 is revealed and when the Facebook Share is clicked, the Step 3 is revealed. But when I like the first thing, it doesn't change to Step 2. Any thoughts? Code: <div id="Step1"><table border="0" width="630" height="174" background="images/step1-2.jpg"><tr><td valign="top" align="left" style="padding-left: 215px; padding-top: 80px"><br />
<iframe src="http://www.facebook.com/plugins/like.php?href=LINKHERE&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35" scrolling="no" action="like" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
<br />
</tr></td></table></div><div id="Step2" ><table border="0" style="display: none" width="630" height="174" background="images/step2-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 82px"><br />
<a name="fb_share" type="button" share_url="LINKHERE"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
<br />
</tr></td></table></div><div id="Step3" style="display: none"><table border="0" width="630" height="174" background="images/step3-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 72px"><br />
<center><a href="LINKHERE">Download Here</a>
</center></tr></td></table></div><br />
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'ID HERE', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function() {
document.getElementById('Step1').style.display = 'none';
document.getElementById('Step2').style.display = 'block';
document.getElementById('Step3').style.display = 'none';
setTimeout('document.getElementById(\'Step1\').style.display = \'none\';document.getElementById(\'Step2\').style.display = \'none\';document.getElementById(\'Step3\').style.display = \'block\';', 7000);
});
};
(function() {
var e = document.createElement("script");
e.type = 'text/javascript';
e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js";
e.async = true;
document.getElementById("fb-root").appendChild(e);
}());
</script>
Similar TutorialsHi guys, I've been breaking my brains for few hours, I already searched online and I found nothing so far. What I wanna do.... I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on. The code changes the images,but I dunno how to deal with the link to the websites. This is the code: Code: <html>
<head>
<title>Testing...</title>
</head>
<script type="text/javascript">
imgs=Array("1.png","2.png","3.png","4.png","5.png");
links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
var x=0;
function change() {
document.getElementById("changes").src=imgs[++x];
if (x==4) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<body>
<div>
<iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />
<div>
<a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a>
</div>
</body>
</html>
And this is the link to the test page: http://www.virtualbc.ca/sites/test/ Dear All, The things needs to be work like if I click one of the NA radio button all other radio buttons and comments ,text box, span text needs to be disabled. But the code used below is disabling all the fields. Also if first question NA radio button is clicked first question all other fields should be disabled and shown with red color. If I click on the 2nd question first question fields needs to be enabled and only 2nd question needs to be enabled. The questions will be dynamically loaded based on some other conditions. I am stuck with something on the below. Could you please help to achieve the below concept? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <script language="javascript"> function enable_text(status) { status=status; var form = document.forms[0]; var rads = form.elements.radio1; for (var i=0; i < rads.length; i++) { var color = rads[i].checked? "red" : ""; document.getElementById("check"+i).style.backgroundColor = color; document.getElementById("check"+i).disabled = status; } } </script> <body onload=enable_text(false);> <div> <form name="form1" method="post" action=""> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td class="PortletText1" nowrap><strong>ALL Data</strong></td> <td class="PortletText1" nowrap><strong>YES</strong></td> <td class="PortletText1" nowrap><strong>NO</strong></td> <td class="PortletText1" nowrap><strong>N/A</strong></td> <td class="PortletText1" nowrap><strong>Comments</strong></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="PortletText1" nowrap>Data 1:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check0"/></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check1" /></td> <td class="PortletText1" nowrap> <input type="radio" name="radio1" id="check2" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text0" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 2:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check3" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check4" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check5" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text1" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 3:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check6" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check7" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check8" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text2" name="other_text"/></td> </tr> <tr> </div> </form> </body> </html> </body> </html> thanks in advance. Regards sona <script language="JavaScript"> function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}} </script> Can anyone tell me what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working. I want to show the div when a button is clicked. And the div will enter the page by sliding in (from the left of the page). When it got clicked again, the div will dissapear by sliding out from the page. Any suggestions? Thank You. Hey all, Hoping someone could help me out with some javascript coding as I am a complete novice to this! I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below). The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on. Can anyone help me out with how I can get this to work correctly? javascript: Code: <script language="JavaScript" type="text/javascript">
var Lst;
function CngClass(obj){
if (typeof(obj)=='string') obj=document.getElementById(obj);
if (Lst) Lst.className='';
obj.className='On';
Lst=obj;
}
</script>
HTML: Code: <div id="navWrapper">
<div id="globalNav">
<ul>
<li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li>
</ul>
</div>
<div id="localNav"></div>
</div>
Hi everyone, Let's say i have a form that looks like this: <form name="myForm" action="myPage" onsubmit="return validateForm();"> <input type="text" name="myInput" size="10"> <input type="submit" name="add" value="Add this"> <input type="submit" name="cancel" value="Cancel this"> </form> What i'm trying to do is for the validateForm() function to either redirect the page if "Cancel this" is clicked, or continue processing if "Add this" was clicked. So the validateForm() would work something like this: function validateForm() { if (cancel button is clicked){ location.href=go some place } else{ do some other stuff } } So, how can dynamically detect which submit button was clicked, before submitting the form? (that would fill in the "cancel button is clicked") I tried with document.myForm.cancel.selected and other variations but it always returns undefined. Any input will be greatly appreciated. Thanks! Hey I'm looking to create a button like Facebook has that just says Like. Since I have little JavaScript experience I was wondering if anyone could point me towards a tutorial or code me one. I could do it with just a link and PHP but I want to use Ajax. http://venturebeat.com/wp-content/up...ike1020909.png I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery So I have a new window document write which outputs all my data after validation into a new window, I have tried to write a button which will (when clicked) send that information to an email address. here is my code so far. i spent about 2 hours checking and playing around looking for errors couldnt find any. I think the problem is the function EmailForm and function subwrite. Is a button written into a new window a common thing to do? or is there another simpler way, however i want the user to be able to check to see if there data is valid and then click to send the email. Code: <HTML>
<!--learn to program through JavaScript-->
<mymerch.HTML>
<HEAD>
<TITLE> mymerch </TITLE>
<SCRIPT LANGUAGE=JavaScript>
//declaringvariables
var firname;
var surname;
var phonenumber;
var emailaddress;
var streetnamenumber;
var yoursuburb;
var postcode;
var yourstate;
var product1;
var product2;
var product3;
var product4;
var product5;
var product6;
var product7;
var product8;
var totalc;
var paymethods;
var method;
var value;
var Cost;
var numericExpression;
var alphaExpression;
var sendemail;
var subject;
var message;
var mailto_link;
var win;
function main() {
//open function main
//function main which validates all data
//declaring variables
firname = document.merch.firstname.value;
surname = document.merch.lastname.value;
phonenumber = document.merch.phonenum.value;
emailaddress = document.merch.emailadd.value;
streetnamenumber = document.merch.stnamenum.value;
yoursuburb = document.merch.suburb.value;
postcode = document.merch.pcode.value;
yourstate = document.merch.state.value;
if (firname == "")
{
alert("Please fill in your Firstname.")
document.merch.firstname.value.focus()
return true;
}
//checks to see if no data as been entered and alerts the user if so.
alphaExpression = /[a-zA-z]/;
if(document.merch.firstname.value.match(alphaExpression)){
}else{
alert("You can only enter letters in the firstname field")
document.merch.firstname.value.focus()
return false;
}
//checks to see if the data entered is letter and if not true returns false.
if (surname == "")
{
alert("Please fill in your Surname.")
document.merch.lastname.value.focus()
return false
}
//checks to see if no data as been entered and alerts the user if so.
alphaExpression = /[a-zA-z]/;
if(document.merch.lastname.value.match(alphaExpression)){
}else{
alert("You can only enter letters in the lastname field")
document.merch.lastname.value.focus()
return false;
}
//checks to see if the data entered is letter and if not true returns false.
numericExpression = /^[0-9+\ ]+$/;
if(document.merch.phonenum.value.match(numericExpression)){
}else{
alert("You can only enter numbers in the Phonenumber field")
document.merch.phonenum.value.focus()
return false;
}
//checks to see if the data entered is a number and if not true returns false.
if(document.merch.phonenum.value.length <7)
{
alert("The Phone Number you have entered is not valid it contains less than 7 digits.")
document.merch.phonenum.focus()
return false
}
//checks to see if the phone number is less than 7 and if so returns false.
if(document.merch.phonenum.value.length >10)
{
alert("The Phone Number you have entered is not valid it contains more than 10 digits.")
document.merch.phonenum.focus()
return false
}
//If phone number is more than 10 return false
if (emailaddress == "")
{
alert("Sorry, your email address is not valid. You didn't enter anything.");
document.merch.emailadd.focus()
return false
}
//checks to see if no data as been entered and alerts the user if so.
if (emailaddress.indexOf("@")==-1)
{
alert("Sorry, your email address is not valid. It doesn't have an @ symbol");
document.merch.emailadd.focus()
return false
}
//checks to see if the data has an "@" and alerts the user if false.
if (emailaddress.indexOf(".")==-1)
{
alert("Sorry, your email address is not valid. It doesn't have .COM");
document.merch.emailadd.focus()
return false
}
//checks to see if the data has an dot and alerts the user if false.
if (emailaddress.indexOf(" ")!=-1)
{
alert("Sorry, your email address is not valid. It has a space!");
document.merch.emailadd.focus()
return false
}
//checks to see if the data has an space and alerts the user if false.
if (streetnamenumber == "")
{
alert("Please fill in your Street Name and Number.")
document.merch.stnamenum.value.focus()
return false
}
//checks to see if the data is empty and alerts the user if true.
if (document.merch.suburb.value == "")
{
alert("Please fill in your Suburb.")
document.merch.suburb.value.focus()
return false
}
//checks to see if the data is empty and alerts the user if true.
alphaExpression = /[a-zA-z]/;
if(document.merch.suburb.value.match(alphaExpression)){
}else{
alert("You can only enter letters in the Suburb field")
document.merch.suburb.value.focus()
return false;
}
//checks to see if the data entered is a letter and if not true returns false.
if(document.merch.pcode.value.length <3)
{
alert("The postcode you have entered is not valid.")
document.merch.pcode.value.focus()
return false
}
//checks to see if the data has less than 3 characters and alerts the user if true.
numericExpression = /^[0-9+\ ]+$/;
if(document.merch.pcode.value.match(numericExpression)){
}else{
alert("You can only enter numbers in the postcode field")
document.merch.pcode.value.focus()
return false;
}
//checks to see if the data entered is a number and if not true returns false.
if(document.merch.pcode.value.indexOf(" ")!=-1)
{
alert("The postcode you have entered is not valid.")
document.merch.pcode.value.focus()
return false
}
//checks to see if the data has a space and alerts the user if true.
if (document.merch.state.value == "Select")
{
alert("Please select your state")
document.merch.state.focus()
return true
}
//checks to see if the data has been selected and alerts the user if false.
paymentmeth();
openNewWin();
subWrite();
//calling the two functions
}
function paymentmeth()
{
for (i = 0; i < document.merch.payway.length; i++){
if (document.merch.payway[i].checked == true){
//a loop that is used to determine the paymethod and checks to see if data has been entered
method = document.merch.payway[i].value
//declares method
}//ends IF
}//ends
//error control for nothing checked
if (method == false)
{
//if method equals nothing show alert
// this fails to validate
alert("You forgot to select Pay Method.")
}
//document.merch.paytype.value = method;
}
function emailForm(){
sendemail = "micha3l26@hotmail.com";
subject = "Order Details";
message = ("Clients Information firstname is "+firname +" Surname is "+ surname +" PhoneNumber is "+ phonenumber +" EmailAddress is "+ emailaddress +" Street Name and Number is "+ streetnamenumber +" Suburb is "+ yoursuburb +" Postcode is "+ postcode +" State is "+ yourstate +" Payment Method is "+ method +" Total Payment is "+ Cost);
mailto_link = ('mailto:'+sendemail+'?subject='+subject+'&body='+message);
win = window.open(mailto_link,"emailWindow");
if (win && win.open &&!win.closed)win.close();
}
//ends function
function openNewWin() {
var newWin;
newWin = window.open("","newWin","status,height=600,width=600")
//opens the window and sets it 600px by 600px
}
//open new window
function subWrite() {
if (newWin.closed) {
makeNewWin()
}
newWin.focus()
var image = "<img src=quote.jpg>";
//declares variable image as the banner jpg
newWin.document.write(image)
//document writes the variable image
newWin.document.write("<br/>");
newWin.document.write("<br/>");
newWin.document.write("Your FirstName is "+firname);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your Surname is "+surname);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your PhoneNumber is "+phonenumber);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your EmailAddress is "+emailaddress);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your Street Name and Number is "+streetnamenumber);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your Suburb is "+yoursuburb);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your Postcode is "+postcode);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your State is "+yourstate);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your Pay Method is "+method);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your total payment is "+Cost);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("<input type="button" onClick="emailForm()" value="Send Email"/> ");
//("<div style="border:2px solid black;padding:10px;">
//Please <a href="#" onclick="emailForm();">Email Support</a>
//</div>");
//a document write to input a button, with an onclick function to mailto a email address
var newContent = "</BODY></HTML>"
newWin.document.write(newContent)
newWin.document.close() // close layout stream
}
//calling the two functions
//the send email button does not work.
function tally()
{
//the function that calculates the prices of tshirts
Cost =0;
//sets the cost at 0
if (document.merch.tshirt1.checked)
{
Cost = Cost + parseInt(document.merch.tshirt1.value);
}
//cost which is 0 + the tshirt value equals the price of tshirt 1
//repeated 8 times
if (document.merch.tshirt2.checked)
{
Cost = Cost + parseInt(document.merch.tshirt2.value);
}
if (document.merch.tshirt3.checked)
{
Cost = Cost + parseInt(document.merch.tshirt3.value);
}
if (document.merch.tshirt4.checked)
{
Cost = Cost + parseInt(document.merch.tshirt4.value);
}
if (document.merch.tshirt5.checked)
{
Cost = Cost + parseInt(document.merch.tshirt5.value);
}
if (document.merch.tshirt6.checked)
{
Cost = Cost + parseInt(document.merch.tshirt6.value);
}
if (document.merch.tshirt7.checked)
{
Cost = Cost + parseInt(document.merch.tshirt7.value);
}
if (document.merch.tshirt8.checked)
{
Cost = Cost + parseInt(document.merch.tshirt8.value);
}
document.merch.Total.value = "$"+Cost;
}
</script>
Code: <style type="text/css">
<!--
.style1 {
font-family: Century Gothic;
color: #FFFFFF;
}
.style3 {font-family: Century Gothic; color: #FFFFFF; font-size: 24px; }
.style5 {color: #000000}
-->
<!--Declaring the different styles of text !-->
</style></HEAD>
<BODY BGCOLOR="BLACK">
<div align="center"><img src="mymerchbanner.jpg" width="787" height="158">
<!The placement of the main banner>
</div>
<HR>
<FORM NAME="merch" onSubmit="main()">
<!declaring the forms name and onsubmit run the function main>
<table width="368" border="1" bordercolor="#000000" bgcolor="#000000">
<tr>
<td width="187" height="40"><span class="style3">First Name: </span></td>
<td width="165"><input type="text" name="firstname" id="firstname"></td>
</tr>
<!firstname textboxes>
<tr>
<td height="45"><span class="style3">Last Name: </span></td>
<td><input type="text" name="lastname" id="lastname"></td>
</tr>
<!lastname textboxes>
<tr>
<td height="44"><span class="style3">Phone Number:</span></td>
<td><input type="text" name="phonenum" id="phonenum"></td>
</tr>
<!phonenumber textboxes>
<tr>
<td height="43"><span class="style3">Email Address:</span></td>
<td><input type="text" name="emailadd" id="emailadd"></td>
</tr>
<!emailaddress textboxes>
<tr>
<td><span class="style3">Street Name and Number:</span></td>
<td><input type="text" name="stnamenum" id="stnamenum"></td>
</tr>
<!streetnameandnumber textboxes>
<tr>
<td height="43"><span class="style3">Suburb:</span></td>
<td><input type="text" name="suburb" id="suburb"></td>
</tr>
<!suburb textboxes>
<tr>
<td height="42"><span class="style3">Postcode:</span></td>
<td><input type="text" name="pcode" id="pcode"></td>
</tr>
<!postcode textboxes>
<tr>
<td height="42"><span class="style3">State:</span></td>
<td> <select name="state" id="state">
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="QLD">QLD</option>
<option value="VIC">VIC</option>
<option value="NSW">NSW</option>
<option value="ACT">ACT</option>
<option value="NT">NT</option>
<option value="WA">WA</option>
<option value="Select" selected>Click to select</option>
</select> </td>
</tr>
<!state selection>
</table>
<p> </p>
<p class="style3">What Would you Like Today? </p>
<table width="684" border="0" bordercolor="#000000" bgcolor="#000000">
<tr>
<td width="79" class="style1">0001</td>
<td width="79">2<span class="style1">0002</span></td>
<td width="79"><span class="style1">0003</span></td>
<td width="79"><span class="style1">0004</span></td>
<td width="79"><span class="style1">0005</span></td>
<td width="79"><span class="style1">0006</span></td>
<td width="79"><span class="style1">0007</span></td>
<td width="79"><span class="style1">0008</span></td>
</tr>
<tr>
<td><img src="1.png" width="100" height="100"></td>
<td><img src="2.png" width="100" height="100"></td>
<td><img src="3.png" width="100" height="100"></td>
<td><img src="4.png" width="100" height="100"></td>
<td><img src="6.png" width="100" height="100"></td>
<td><img src="8.png" width="100" height="100"></td>
<td><img src="9.png" width="100" height="100"></td>
<td><img src="10.png" width="100" height="100"></td>
</tr>
<!tshirt images for the 8 shirts>
<tr>
<td><input type="checkbox" name="tshirt1" Value="15" onClick="tally()"> ></td>
<td><input type="checkbox" name="tshirt2" Value="15" onClick="tally()"> ></td>
<td><input type="checkbox" name="tshirt3" Value="15" onClick="tally()"> > </td>
<td><input type="checkbox" name="tshirt4" Value="30" onClick="tally()"> > </td>
<td><input type="checkbox" name="tshirt5" Value="30" onClick="tally()"> > </td>
<td><input type="checkbox" name="tshirt6" Value="15" onClick="tally()"> > </td>
<td><input type="checkbox" name="tshirt7" Value="15" onClick="tally()"> > </td>
<td><input type="checkbox" name="tshirt8" Value="15" onClick="tally()"> > </td>
</tr>
<!8 checkboxes with diffent values that are used to add up the prices and onclick run function tally>
<tr>
<td class="style1">$15</td>
<td class="style1">$15</td>
<td class="style1">$15</td>
<td class="style1">$30</td>
<td class="style1">$30</td>
<td class="style1">$15</td>
<td class="style1">$15</td>
<td class="style1">$15</td>
</tr>
<!text for prices>
</table>
<td> Total <INPUT TYPE="text" NAME="Total" value="0" size="7"></td>
<p class="style3">How Will you Like to Pay? </p>
<table width="268" border="0" align="center" bordercolor="#000000">
<tr>
<td width="196" class="style3">Cash on Delivery </td>
<td width="56"><input name="payway" type="radio" value="Cash"onClick="paymentmeth()"></td>
</tr>
<!radio button with different values and onclick run paymentmeth>
<tr>
<td class="style3">Bank Deposit </td>
<td><input name="payway" type="radio" value="Bank Deposit"onClick="paymentmeth()"></td>
</tr>
<tr>
<td class="style3">Paypal</td>
<td><p>
<input name="payway" type="radio" value="Paypal"onClick="paymentmeth()">
<label></label>
</p></td>
</tr>
</table>
<p> </p>
<p align="center" class="style3">
<INPUT TYPE="SUBMIT" VALUE="Show Invoice" onSubmit="main()">
<!submit button that runs function>
<span class="style5"> </span>
<input type="RESET" />
<!reset button that runs function>
<span class="style5"> </span>
</p>
</FORM>
</BODY>
</HTML>
I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');
function getLabels()
{
for (x=0; x<spans.length; x++)
{
if (spans[x].className == "LabelWrapper")
{
labelspans.push(spans[x]);
}
}
for (y=0; y<labelspans.length; y++)
{
labels.push(labelspans[y].firstChild);
radioname.push(labelspans[y].firstChild.htmlFor);
}
}
function getRadios()
{
//will put all radio groups into the "radiolist" array
for (z=0; z<radioname.length; z++)
{
radiolist.push(document.getElementsByName(radioname[z]));
//will add Event Listener to each radio button, and add each one to the "radios" array
for (i=0; i<radiolist[z].length; i++)
{
chkradio = radiolist[z][i];
chkradio.setAttribute("count",Number(z));
chkradio.addEventListener("click", function(){changeLabel()}, false);
radios.push(chkradio);
}
}
}
function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly
{
for (w=0; w<radios.length; w++)
{
if (radios[w].checked)
{
a = radios[w].getAttribute("count");
labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
}
}
}
getLabels();
getRadios();
This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? Hi I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success! Thanks in advance I've been told by many reliable sources that getting people to 'like' your site on Facebook is a great way of increasing your site traffic and getting a site ranked higher on Google and other search engines. However, it is hard work to get it implemented correctly. What you want is to have each page individually 'liked' rather than the site as a whole. To do that can take a lot of time-consuming fiddling around. We've created a simple piece of Javascript that allows you to create a custom 'like' button on each page of your site. Because we've had some help from other members with some bits and pieces of Javascript coding, it only seems fair to share something in return. Prerequisites You will need to get a Facebook Application ID from Facebook themselves. This is a unique Application ID for your domain. The easiest way to get one of these is to go to http://developers.facebook.com/docs/.../plugins/like/ and enter the details for your domain. Then click on 'GET CODE' and copy the 15 digit number from #appId. You then paste this into the Javascript as shown below. Adding the Facebook 'like' button to each page - changes to HTML In the <head> section of your HTML, add the following piece of code: Code: <script type="text/javascript" src="SocialMedia.js"></script>
<script type="text/javascript">
FacebookSetup('Your page title goes here', 'image-to-show-on-Facebook.jpg');
</script>
At the point on the page where you actually want the 'Like' button to appear, you then add the following piece of code: Code: <script type="text/javascript"> FacebookLike(); </script> The JavaScript Now create a JavaScript file called SocialMedia.js: Code: var facebookAppID = "xxxxxxxxxx"
function FacebookSetup(title, image)
{
var url=window.location.host + window.location.pathname;
document.write("<meta property='og:title' content='" + title + "' />");
document.write("<meta property='og:type' content='article' />");
document.write("<meta property='og:url' content='" + url + "' />");
document.write("<meta property='og:image' content='" + hostname + "/images/" + image + "' />");
document.write("<meta property='og:site_name' content='" + sitename + "' />");
document.write("<meta property='fb:admins' content='" + facebookAppID + "' />");
}
function FacebookLike()
{
var facebook="http://www.facebook.com/plugins/like.php?href=" + url + "&layout=standard&show_faces=false&width=250&action=like&font&colorscheme=light&height=35";
document.write("<iframe src=" + facebook + " scrolling=no height=35 frameborder=0 style=border:none; overflow:hidden; width:250px; height:35px; allowTransparency=true></iframe>");
}
Change the value in the variable facebookAppId on line one to your Application ID (as explained in the prerequisites section above). What happens once you've implemented this? Once you've implemented this, you should see a LIKE button on your page. If you are a Facebook user and have cookies set to always log you in, you'll find that when you click on this LIKE button, a link to your page will appear on your Facebook page, along with a thumbnail photograph as specified by you when you called FacebookSetup in your HTML code. Other people who follow you on Facebook will then also have the link to your site appearing on their News Feed. If you are not logged in when you click on the LIKE button, you will be prompted to log on to Facebook before the information appears on your News Feed. What are the benefits of using JavaScript to do this, rather than writing the HTML code for each page? Many sites have created a blanket site-wide 'LIKE' button and embedded it into their HTML. Whilst this is easy, it is limiting - the LIKE button always has the same title, the same picture and sends you to the same page on your website. Of course, it is possible to write custom HTML for each page, but this can soon get messy and then becomes more difficult to maintain. As an alternative, this JavaScript is simple and tidy. The code makes it simple to create unique Facebook 'likes' for each page, with custom text and custom images. It also keeps your HTML tidy, thereby making it easy to maintain in the future. Hope this helps, folks. i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. Hi im a newbie to java so please don't laugh. And apologies in advance for my English. When i open my page the src of the iframe is home.html. Home.html is empty and its in the way of the interface of my .swf file. My swf triggers the iframe to change into 50 different URL. So at the beginning the iframe should be gone. But whenever the src changes it should come back. I tried it by changing the height of the iframe. But nothing changes. here is a preview http://boyswithbeards.net/xrc/pres/ I have something like this. <iframe name="MoinkOriginal" id="MoinkOriginal" src="home.html" frameborder="0" scrolling="auto"></iframe> <script type = "text/javascript"> var iframe = document.getElementById('MoinkOriginal'); if (src='home.html') { var iframeElement = parent.document.getElementById('MoinkOriginal'); iframeElement.style.height = "0px"; // or use px iframeElement.style.width = "500px"; // or use px iframeElement.style.marginHeight = "-563px"; // or use px iframeElement.style.marginLeft = "750px"; // or use px } else { var iframeElement = parent.document.getElementById('MoinkOriginal'); iframeElement.style.height = "300px"; iframeElement.style.width = "500px"; iframeElement.style.marginHeight = "-563px"; // or use px iframeElement.style.marginLeft = "750px"; // or use px } </script> Thank you for helping me. Im stuck on this for days. Can anyone point out why this might not be working??? In my style sheet I have the span #downarrow display:none; Code: <script type="text/javascript">
function arrow(boxName){
document.getElementById(boxName).style.display = 'block';
}
arrow('downarrow');
</script>
<span id="downarrow"><img src="http://www.mysite.com/images/downarrow.png" /></span>
Thanks!! I have several checkboxes with labels, all laid out in a table. All of the checkboxes have a class of "hide" and through CSS I have them hidden. Then with javascript it's set up so that when a user clicks on the label for the checkbox the background of the TD that contains it changes colors to indicate that that item is selected. Works great except for those browsers that have javascript disabled. Then the form is useless. I'm thinking now it would be better to use javascript to apply the "hide" class to the checkboxes. That way if it's disabled then the checkboxes will still be visible and the form useable. I'm just not sure how to go about doing that (not much of a javascript ninja). Can anyone advise me on how to do that? I'd really appreciate the help! Thanks! Hi, I have a list of pictures like this: <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1474');return false"><img src="image.php?path=source/shoes/0788.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1440');return false"><img src="image.php?path=source/shoes/0754.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1430');return false"><img src="image.php?path=source/shoes/0744.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=54&pic=1407');return false"><img src="image.php?path=source/shoes/0127.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=18&pic=1390');return false"><img src="image.php?path=source/shoes/0106.jpg" class="img" border="0"></a> Size of pictures in class is width 155px and hight 175px. Now I want, when I click on any picture from the list, to replace class "img" on all pictures with new class that have width 100px and height 75px. Is this possible? Thanks hi anyone know how to style the dojo button cause i declare the button it appear but i cannot use the style:"border:0px; background-color: black;" this is how i declare my dojo button var forward = new dijit.form.Button({ style: "border:0px;background:black;", label: "NEXT" }); Please help me with this !!! Please Reply ASAP!!! Thanks p.s if can show me some sample Hi all, I'm working on a script which is actually a very simple tab system. Code: <script>
window.addEvent('domready', function() {
var tabs = $$('div[id^="tab"]');
tabs.fade('hide');
$$('#buttons li a').each(function(element,index){
element.addEvent('click',function(){
tabs.fade(0);
tabs[index].fade(1);
});
});
});
</script>
<ul id="buttons">
<li><a href="#">button 1</a></li>
<li><a href="#">button 2</a></li>
<li><a href="#">button 3</a></li>
<li><a href="#">button 4</a></li>
</ul>
<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>
I'm trying to change the style of the selected button. I mean that the button which is selected each time, should be highlighted (bold text). How can I add this function in the existing code? Can you help me please? I'm using the 1.2.0 version of mootools for this. |
|||||||