|
JavaScript - I Have A Problem With My Contact Us (feedback Page) Of My Website
Dear all,
MAIN QUESTIONS : QUESTIONS for www.cyoffshore.byethost12.com/feedback4test.html I designed the Contact Us (Feedback) page of my website but something goes wrong. I would like to set an email address or some email addresses where the visitors can find me. Now, this function does not work! I would also like the users / visitors who complete and submit the (my) Contact Form, to receive an auto-confirmation to their email which will confirms that they have addressed to me with their details (their name, address, tel ,etc) according to their input into the fields and options from the (my) Contact form and if they would like to see their written request (what they have written to me if they did), they could use an option button from the (my) Contact Form. Actually the details of their written request will depend of what they would like to choose (depends on their choice). According to the submitted Contack Form, generally many users take the advantage of the Contact Us Forms where they send spam emails via the Contact Form. This might be avoid by the usage of the free tool: http://www.google.com/recaptcha Below is the url of the feedback.html page of my website. I have created a copy of the same and I renamed it to: feedback4test.html for testing purposes. www.cyoffshore.byethost12.com/feedback4test.html Here is the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<!-- this template was designed by http://www.tristarwebdesign.co.uk - please visit for more templates & information - thank you. -->
<head>
<title>cyproservices</title> <!-- change to whatever you want as the title for your website -->
<meta name="description" content=" " /> <!-- enter a description for your website inside the " " -->
<meta name="keywords" content=" " /> <!-- enter a a string of keywords that relate to your website inside the " " -->
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="headercont">
<div id="header">
<h1><span>cyproservices</span></h1>
</div>
</div>
<div id="menucont">
<div id="menu">
<ul>
<li><a title="link one" title="home" href="index.html">ABOUT CYPRUS</a></li>
<li><a title="link two" href="ourservices.html">OUR SERVICES</a></li>
<li><a title="link three" href="offshorejurisdictions.html">OFFSHORE JURISDICTIONS</a></li>
<li><a title="link four" href="fees.html">PRICES</a></li>
<li><a class="active" href="feedback.html">CONTACT US</a></li>
</ul>
</div>
</div>
<div id="maincont">
<div id="main">
<h1>Feedback</h1>
<p style="margin-top: 0; margin-bottom: 0" align="justify">
<font size="3" face="Book Antiqua" color="#FF0000"> Tell me what you think about my
website. I welcome all of your comments and your suggestions.</font></p>
<form method="POST" action="--WEBBOT-SELF--" onSubmit="location.href='../_derived/nortbots.htm';return false;" name="SENDEMAIL" webbot-onSubmit>
<!--webbot bot="SaveResults" u-file="C:\Users\antonis\Documents\My Documents\My webs\cyproservices\_private\formresults.csv" s-format="TEXT/CSV" s-label-fields="TRUE" b-reverse-chronology="FALSE" s-date-format="%d %b %Y" s-time-format="%H:%M:%S" s-builtin-fields="REMOTE_NAME REMOTE_USER HTTP_USER_AGENT Date Time" u-confirmation-url="confirm.htm" s-email-address="georgeashiotis@yahoo.com" s-email-format="TEXT/PRE" startspan --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot bot="SaveResults" endspan i-checksum="43374" --><p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua"> What
kind of comment would you like to send?</font></strong></p>
<dl>
<dd>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><font color="#666666" face="Book Antiqua"><strong><input type="radio" name="MessageType" value="Complaint">Complaint
<input type="radio" name="MessageType" value="Problem">Problem
<input type="radio" checked name="MessageType" value="Suggestion">Suggestion
<input type="radio" name="MessageType" value="Praise">Praise</strong></font></dd>
</dl>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua">
Subject:</font></strong></p>
<blockquote>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="26" maxlength="256" name="Subject"></p>
</blockquote>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua"> Enter your comments in the space provided below:</font></strong></p>
<dl>
<dd>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><textarea name="Comments" rows="5" cols="42"></textarea></dd>
</dl>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua"> Tell me how to get in touch with you:</font></strong></p>
<dl>
<dd>
<table>
<tr>
<td>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><strong>
<font color="#666666" face="Book Antiqua">Name:</font></strong></td>
<td>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="Username"></td>
</tr>
<tr>
<td>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><strong>
<font color="#666666" face="Book Antiqua">E-mail:</font></strong></td>
<td>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="UserEmail"></td>
</tr>
<tr>
<td>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><strong>
<font color="#666666" face="Book Antiqua">Tel:</font></strong></td>
<td>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="UserTel"></td>
</tr>
<tr>
<td>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><strong>
<font color="#666666" face="Book Antiqua">Fax:</font></strong></td>
<td>
<p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="UserFAX"></td>
</tr>
</table>
</dd>
</dl>
<p align="justify" style="margin-top: 0; margin-bottom: 0">
<strong><font color="#666666" face="Book Antiqua">
</font></strong><p align="justify" style="margin-top: 0; margin-bottom: 0">
<strong><font color="#666666" face="Book Antiqua">
<input type="checkbox" name="ContactRequested" value="ContactRequested">
Please contact me as soon as possible regarding this matter.</font></strong><p align="justify" style="margin-top: 0; margin-bottom: 0">
<p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="submit" value="Submit Comments">
<input type="reset" value="Clear Form"></p>
</form>
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="footercont">
<div id="footer">
<div id="footerleft">
<p><a title="back to top" href="#headercont">^ back to top</a></p>
</div>
<div id="footerright">
<p>template design by
<a title="derby web design" href="http://www.tristarwebdesign.co.uk">tristar web design</a></p>
</div>
</body>
</html>
</body>
</html>
According to the above CODE , I would like to inform you that I've just done a copy and paste to the above FORM from an other website of mine which is working properly, meaning that I do receive emailS from the users/ visitors when they fill and submit the (my) Contact Form. . This website is www.cypruspainters.net and the related web link is: http://cypruspainters.net/feedback2.htm The related CODE of the secondary website which I have copied and pasted the above code is the following CODE: : Code:
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
<meta content="en-us" http-equiv="Content-Language">
<title>Feedback2</title>
<meta name="Microsoft Theme" content="pixel 011">
</head>
<body background="_themes/pixel/pixbkgnd.gif" bgcolor="#FFFFFF" text="#000000" link="#6666CC" vlink="#999999" alink="#663333"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
<tr>
<td width="49" colspan="2" align="center">
<p style="margin-top: 0; margin-bottom: 0">
<a href="http://www.agora-gallery.com/"
rel="nofollow" target="_blank">
<img border="0" src="photogallery/logoForLinks2.gif" hspace="3" width="125" height="78"></a></p>
</td>
<td align="center" width="907"><p style="margin-top: 0; margin-bottom: 0">
<img border="0" src="HEADERS/feedback2.gif" width="621" height="60"></td>
</tr>
<tr>
<td width="882" colspan="3" style="border-bottom-style: none; border-bottom-width: medium">
<p style="margin-top: 0; margin-bottom: 0"></td>
</tr>
</table><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="border-bottom-style: solid; border-bottom-width: 1" align="right">
<h4 style="margin-top: 0; margin-bottom: 0"> </h4>
</td>
</tr>
</table><table border="0" cellpadding="0" cellspacing="0" width="727" height="78">
<tr>
<td style="border-style: none; border-width: medium" valign="top" width="140">
<p>
<!--webbot b-include-home="TRUE" b-include-up="FALSE" bot="Navigation" s-orientation="vertical" s-rendering="graphics" s-theme="nature 100" s-type="siblings" -->
</p>
<p><br> </p>
<p> </p>
</td>
<td style="border-style: none; border-width: medium" valign="top" width="3">
<p></p>
</td>
<td height="100%" style="border-style: none; border-width: medium" valign="top" width="584">
<h3 align="justify" style="margin-top: 0; margin-bottom: 0">
<font color="#FF0000" face="Book Antiqua" size="3">Tell me what you think
about my website. I welcome all of your comments and your suggestions.</font></h3>
<h1><b><b><b><b><b>Contact Us:</b></b></b></b></b></h1>
<form action="test.mf" method="post">
Your Name:<br />
<input name="Name" size="20" type="text" value="" /><br />
<br />
Email:<br />
<input name="Email" size="20" type="text" value="" /><br />
<br />
Comments:<br />
<textarea cols="40" name="Comments" rows="10"></textarea><br />
<br />
<script src="http://api.recaptcha.net/challenge?k=6LfxMwYAAAAAAM8fEdeJUlJzGmueIL9-gDhnUdpo " type="text/javascript"></script>
<noscript>
<iframe frameborder="0" height="300" src="http://api.recaptcha.net/noscript?k=6LfxMwYAAAAAAM8fEdeJUlJzGmueIL9-gDhnUdpo " width="500">
</iframe><br>
<textarea cols="40" name="recaptcha_challenge_field" rows="3">
</textarea>
<input name="recaptcha_response_field" type="hidden" value="manual_challenge"></noscript><input type="submit" value="Submit Form" />
</form>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<blockquote>
</blockquote>
<p>
</p>
<p style="margin-top: 0; margin-bottom: 0"> </p>
<p style="margin-top: 0; margin-bottom: 0">
<a href="index.htm"><img align="right" border="0" height="40" src="images/Press/home3.gif" width="40"></a></p>
<p style="margin-top: 0; margin-bottom: 0"> </p>
<table border="0" cellpadding="0" cellspacing="0" width="746" height="0%" style="border-collapse: collapse">
<tr>
<td valign="baseline" width="746">
<p align="right" style="margin-top: 0; margin-bottom: 0">
<a href="Links.htm">
<img border="0" src="images/Press/back.gif" width="47" height="29"></a><a href="feedback2.htm"><img border="0" src="images/Press/top.gif" width="40" height="29"></a></td>
</tr>
</table></body>
</html>
You can email me at: antonis20032002@yahoo.gr and I can reply to you by attaching, uploading and sending my www.cyoffshore.byethost12.com website or/ and www.cyoffshore.byethost12.com/feedback4test.html (Contact Us Form) to your email in order to investigate the case! SECONDARY QUESTIONS : ADDITIONAL QUESTIONS for www.cypruspainters.net/feedback2.htm under your consideration: Firstly, when I visit my website a pop up page appears which is very annoying for the visitors! The url of the pop up is: http://www.freelotto.com/register.as...&affiliateid=3 Another issues are : According to these issues, I have attached the screenshots and the text below: The screenshots below are refered to my previous software which was FRONTPAGE. Now I am using a substituted program which is Microsoft Expression Web 3. The problem is when I would like to use a Captcha image to block form spam and include this setting in my test.mf file (see attached screenshot -test.mf file), then @recaptchaFailPage is pointing to the page I want the visitor redirected to should they enter the wrong text from the image and does not work (see attached screenshot - recaptchaFailPage). In addition, we can add more fields to Misk Contact Us.htm Form (see attached screenshot- Misk Contact Us.htm Form) and the file test.htm is merely an example of what can be done! I created under my website a web link www.cypruspainters.net/MiskMailForm.htm with 3 images to look over the guidelines describing what is supported by my hosting provider and it will help you setup any form with their Mail Form service. Another issue, as instructed in the pdf, my hosting provider provides a Mail Form service which I can setup a confirmation page to notify people of their form being submitted successfully within the test.mf file. My confirmation page is listed as: @redirPage=confirm2.htm within the test.mf file. This is merely a redirect and will not pass Form Information to the page in order to show people what was submitted. Currently this might not be a feature of my hosting provider Mail Form service. But I am not sure! According to the attached screenshot- confirm2.htm , could you make the necessary changes to confirm2.htm in order to notify people of their form being submitted successfully with a more detailed and presentable way, for example, showing what the visitors have requested (visitors input), their details, their comments, etc and at the bottom maybe will be better if we would add a web link back to the Form! You can email me at: georgeashiotis@yahoo.com and I can reply to you by attaching, uploading and sending my www.cypruspainters.net/index.htm website or/ and www.cypruspainters.net/feedback2.htm (Contact Us Form) to your email in order to investigate the case! Thanks! Antonis Similar TutorialsFor some reason i cant get this bit of code to work. You can ignore the php and html if its getting in your way. Thanks: Code: <div id="pl">
<?
if($edit == true){
?>
<script type="text/javascript">
$("#add_playlist_form").css({display:"none"});
$("#add_playlist").click(function(){
alert($("#add_playlist").html());
if($("#add_playlist").html() == "Add a Playlist >>"){
$("#add_playlist").html("Hide <<");
$("#add_playlist_form").css({display:"block"});
}
else{
$("#add_playlist").html("Add a Playlist >>");
$("#add_playlist_form").css({display:"none"});
}
});
</script>
<a href="#" id="add_playlist">Add a Playlist >></a>
<form id="add_playlist_form" method="POST" action=" ">
<input type="text" name="pl_name" class="add_playlist"/>
<textarea name="pl_dsec" maxlength="200"></textarea>
<input type="submit" name="submit_playlist" value="Add Playlist" class="submit_playlist"/>
</form>
<?
}
?>
<ul class="vList">
Does someone know how to let 2 of the same type of contact form, working on the same page? Because i have the contact form on the footer of my page, and when you visit at the mennu: contact us, the same contact form will be shown. But it wont work, only the one in the footer. Hi Everybody. i have a contact form here PHP Code: <form id="form1" method="post" action="/contact.php" onsubmit="return validate(this)"> <p> <label for="name">Name:</label> <input type="text" name="name" id="name" /> <img src="alert.gif" alt="" class="alertImg" /> </p> <p> <label for="number">Mobile:</label> <input type="text" name="number" id="number" /> <img src="alert.gif" alt="" class="alertImg" /> </p> <p> <label for="email">Email:</label> <input type="text" name="email" id="email" /> <img src="alert.gif" alt="" class="alertImg" /> </p> <p> <label for="msg">Comments:</label> <textarea name="msg" id="msg" cols="30" rows="3"></textarea> <img src="alert.gif" alt=""class="alertImg" /> </p> <p> <input class="submit_btn" type="image" src="images/submit_btn.gif" name="submit" value="Submit" /></p> <!-- --> </form> and i have an external js script to validate the form and the code is below PHP Code: var alertImgs = []; var nImage = ""; function validate(nForm){ for (i=0; i<alertImgs.length; i++) { nImage[alertImgs[i]].style.visibility = "hidden"; } var nName = nForm['name']; var nMobile = nForm['number']; var nEmail = nForm['email']; if (nFirstName.value.replace(/s/g, "").length < 1) { alert('Please Enter Your Name'); document.images[alertImgs[0]].style.visibility = "visible"; return false; } if (!/[ds-]+$/.test(nmobile.value) || !/d{10}/.test(nmobile.value.replace(/[s-]/g, ""))) // must contain 10 digits; { alert('Enter your mobile phone number'); document.images[alertImgs[2]].style.visibility = "visible"; return false; } if (!/^w+[w|.|-]{0,1}w*[w|.|-]{0,1}w*@w+[w|-]{0,1}w*[w|-]{0,1}w*.{1,1}[a-z]{2,4}$/.test(nEmail.value)) { alert('Invalid Email'); document.images[alertImgs[3]].style.visibility = "visible"; return false; } if (nForm['msg'].value == "") { alert('Please write a comment'); document.images[alertImgs[4]].style.visibility = "visible"; return false; } alert('Thank you for your submission'); return true; } function init(){ nImage = document.images; var imgFileName = ""; for (i=0; i<nImage.length; i++) { imgFileName = nImage[i].src; imgFileName = imgFileName.substring(imgFileName.lastIndexOf("/")+1,imgFileName.length) if (imgFileName == "alert.gif") { alertImgs[alertImgs.length] = i; nImage[i].style.visibility = "hidden"; } } } navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); Could anyone tell me why it wont work for me and is there any problem with the code? Thanks for your help if you give some Hei! I am trying to use a contact form which appears in a lightbox from : http://www.xul.fr/javascript/lightbox-form.html It is working great but, of course I have a problem. My page is very big and when I want my page to scroll to the point where the form is. I am using window.scrollTo function. the problem is that before scrolling to that point , it automatically scrolls to the coordinates (0,0) and only after that. I am posting my javascript and css code. Thanks for your help ! JAVASCRIPT Code:
function gradient(id, level)
{
var box = document.getElementById(id);
box.style.opacity = level;
box.style.MozOpacity = level;
box.style.KhtmlOpacity = level;
box.style.filter = "alpha(opacity=" + level * 100 + ")";
box.style.display="block";
if(id=='boxa')
{
window.scrollTo(2500,0);
}
else
{
window.scrollTo(100,100);
}
return;
}
function fadein(id)
{
var level = 0;
while(level <= 1)
{
setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
level += 0.01;
}
}
function openbox(formtitle, fadin,boxtitle,boxN)
{
var box = document.getElementById(boxN);
document.getElementById('filter').style.display='block';
//var btitle = document.getElementById(boxtitle);
// btitle.innerHTML = formtitle;
// var btitle = document.getElementById(boxtitle);
// btitle.innerHTML = formtitle;
if(fadin)
{
gradient(boxN, 0);
fadein(boxN);
}
else
{
box.style.display='block';
}
}
// Close the lightbox
function closebox()
{
document.getElementById('box').style.display='none';
document.getElementById('filter').style.display='none';
document.getElementById('boxa').style.display='none';
document.getElementById('filter').style.display='none';
}
CSS Code:
#filter
{
display: none;
position: absolute;
top: -500px;
left: -500px;
width: 7200px;
height: 3300px;
background-color: #000;
z-index:10;
opacity:0.5;
filter: alpha(opacity=50);
}
#box
{
display: none;
position: absolute;
top: 20%;
left: 20%;
width: 400px;
height: 200px;
padding: 48px;
margin:0;
border: 1px solid black;
background-color: white;
z-index:101;
overflow: none;
}
#boxtitle
{
position:absolute;
float:center;
top:0;
left:0;
width:496px;
height:24px;
padding:0;
padding-top:4px;
left-padding:8px;
margin:0;
border-bottom:4px solid #3CF;
background-color: #09c;
color:white;
text-align:center;
}
#boxa
{
display: none;
position: absolute;
top: 350px;
left: 2950px;
width: 700px;
height: 200px;
padding: 48px;
z-index:101;
overflow: visible;
/* background-image: url(../imagini/tutorial.png); */
background-repeat:no-repeat;
}
I completed a simple JavaScript program which calculates the area of the 4 walls of house (so post to represent the total are to be painted). I am simply looking for feedback on how to make the code better and/or simpler. Code: <html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Calculate Total Area To Be Painted</title>
<script type = "text/javascript">
<!--
function calculate()
{wall1_width = window.document.form1.wall1w.value;
wall1_height = window.document.form1.wall1h.value;
wall2_width = window.document.form1.wall2w.value;
wall2_height = window.document.form1.wall2h.value;
wall3_width = window.document.form1.wall3w.value;
wall3_height = window.document.form1.wall3h.value;
wall4_width = window.document.form1.wall4w.value;
wall4_height = window.document.form1.wall4h.value;
total1_area = (wall1_width * wall1_height) + (wall2_width * wall2_height) + (wall3_width * wall3_height) + (wall4_width * wall4_height);
window.document.form1.total1.value = total1_area;
}
// -->
</script>
</head>
<body>
<form name='form1'>
<table cellspacing='0'>
<td>
<center>
<b>Walls</B><br><br>
Wall 1 Width: <input type='text' name='wall1w' style="width:40px;"> ft.<br>
Wall 1 Height: <input type='text' name='wall1h' style="width:40px;"> ft.<br>
Wall 2 Width: <input type='text' name='wall2w' style="width:40px;"> ft.<br>
Wall 2 Height: <input type='text' name='wall2h' style="width:40px;"> ft.<br>
Wall 3 Width: <input type='text' name='wall3w' style="width:40px;"> ft.<br>
Wall 3 Height: <input type='text' name='wall3h' style="width:40px;"> ft.<br>
Wall 4 Width: <input type='text' name='wall4w' style="width:40px;"> ft.<br>
Wall 4 Height: <input type='text' name='wall4h' style="width:40px;"> ft.<br><hr width='200'><br>
<input type='button' value='Calculate' onClick='calculate();'><br><hr width='200'>
</center>
</td></tr>
<tr><td>
<center>
<b>Total Area To Be Painted</B><br>
Total Area: <input type='text' name='total1' style="width:100px;"> sq. ft.<br><hr width='200'><br>
</center>
</td></tr>
</table>
</form>
</body>
</html>
Have a look at the java script feedback form on this page http://christmas.cre8tivebug.com/ the button is on the right hand side of the browser window.. when you click on it the feed back form shows up in the center of the screen and dims out the background.. does anybody know where i can get this script Thanks Hi This is a pretty easy beginner question I'm trying to doa feedback form for my website but having problems with the send button here is my code could someone tell me where i'm going wrong <html> <title>Feedback form</title> <body> <h2> Feedback Form </h2> <form> <FORM METHOD = Post ACTION = mailto:julie_bloggs@hotmail.co.uk> <p>E-mail: <INPUT TYPE = text NAME = Email SIZE = 30 <p>Please enter your name:<INPUT TYPE = text NAME =readeR <br> Could you fill in this survey please <br> Do you live in New Brighton? <br><INPUT TYPE = checkbox NAME = Yes>Yes <br><INPUT TYPE = checkbox NAME = No>No <br><INPUT TYPE = checkbox NAME = Moving>Moving soon <p>Your Comments <br> <TEXTAREA NAME = Address ROWS=4 COLS=40> </TEXTAREA> <P> <INPUT TYPE =Submit VALUE = "Send"> <INPUT TYPE =reset VALUE = "clear the form"> </FORM> </HTML> Thanks to codingforums that help me to gain success with my javascript program! Please let me know what do you think about it: http://backslash.altervista.org/messa/mass_search.html The js script read the page http://backslash.altervista.org/messa/orari_messa.html and get the church's data and the mass's time. I know it'll better use a db but i have no control on server where the html page is (the mine is only a copy) and i want to do something that if the owner of the server want put in, it can without problem. Any review will be very appreciated Thanks ps: look at the footer pps: sorry it's all in italian Is there an easy way of creating one file with the website menu code that is used on each page of a website? At present I use frames which work well except search engines don't direct through the frameset so only the content is loaded not the menu. 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 am creating a very content rich news/media website that requires an audio player. The audio player should be seen by the user as soon as they enter the website and the playlist should play throughout their time spent at the website and should not be restarted or stopped when navigating the website. We originally were using a frameset for the audio player, but the fact that none of the pages through out the site could be reached through a link in the URL bar proved to be too much of an issue. So the new idea was to open the audio player in a javascript pop-up window. But because of the nature of the website, we found that it was very common for users to go "back" in their browser to the homepage after they had navigated away, which would cause the pop-up code to be activated again and would make the pop-up reload, interrupting the audio. So then we moved the pop-up code to the splash page so that when you enter the main page, its already open, and it can't be interrupted. But THEN we found that the pop-up window was of course opened behind the main website's window, which made it hidden and useless. So we currently have no solutions! All we need is for this pop-up window to take focus and be the very top window, and once its opened to never be reloaded/refreshed again. Does anyone have a solution?! Any help is appreciated! I have an older website consisting of frames (html). Now I want to password protect one page. So far I added the following Javascript which I found on youtube: <SCRIPT> function passWord() { var testV = 1; var pass1 = prompt('Please Enter Your Password',' '); while (testV < 3) { if (!pass1) history.go(-1); if (pass1.toLowerCase() == "letmein") { alert('You Got it Right!'); window.open('protectpage.html'); break; } testV+=1; var pass1 = prompt('Access Denied - Password Incorrect, Please Try Again.','Password'); } if (pass1.toLowerCase()!="password" & testV ==3) history.go(-1); return " "; } </SCRIPT> <CENTER> <FORM> <input type="button" value="Enter Protected Area" onClick="passWord()"> </FORM> </CENTER> This works but the protected page opens in a new window not in the main frame. What do I have to add and where? Will search engines pick up this page and display it on the public? Thank you. CT ok i need a bit of advice.. I have a webpage and i want to put a section of another website on to my own website.. The Section i want to put on my website is on this page www.bebo.com/thegaadiscos and i only want to put the section with the comments on it... What i want is a bit like the face book section of this website http://www.alexandraburkeofficial.com/ How would this be done does anyone know.. hi I've written a piece of code for someone that works fine on my machine but doesnt seem to work on theirs its here- http://www.nomanic.biz/myfayt/ click the link, a popup window should appear with a map, men, a town and a fort on it that can be mouseovered. On his he doesnt see any men or town or fort does anyone else get this problem? Please advise! i am new to JS and need help in solving my code that's not reloading the page to download subcat list from db when you select the cat list? Any help is appreciable:
Hello all..New to the board and javascript. Link to the page in question:http://cgi.ebay.com/test-page-only-D...item27ae5e0654 I have a problem here..Confused maybe someone can spot it I can't. I am using Firefox 3.5-6 and IE 7 and Chrome 4.1......Just CSS and Javascript. I am using "Tiny Slider" JS. for my image gallery, most of the content was deleted from the code for security purposes. Head and body tags are not necessary for Ebay. The problem is the gallery I think. This page works great (Image gallery) outside of Ebay..but when I insert in Ebay the gallery will not position the images properly except the first one. After the first image 2, 3, and 4 pass by without centering and some not at all?? Layout problem? I need this to work for Ebay..So any help would be appreciated. Not totally sure this is in the correct section but here goes!... I've coded up my form in html / css and added some scripts i found online that should prevent users from submitting the form without the fields filled in. However the form only seems to work in chrome, safari and yet firefox it lets users submit without needing anything filled in. my form is he http://www.rhombusone.com/projecttiger/contact.html Also targeting the error text so that it appears below the field box instead of being all over the place, what value am i targeting? Thanks M I have a div which toggles visible, ie, it disappears when you click "close" with Code: <a href='#' onclick="toggle_visibility('div1'); toggle_visibility('div2'); return false;" >Close </a>
which calls this: Code: function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
The problem I have is that when I click that button, the page jumps down to center on exactly where I clicked. This is really unwanted, I was wondering if anyone could help? Thanks for your time. Dear all, I am trying to set up a web site for an art gallery. That is for new talents so I have no budget. I am not a web designer and I am facing some barriers. Maybe some of you could help me. My problem is, I guess, about going around with the DOM node tree. My page looks like this: FRAME 1 - Header FRAME 2 - Navigation bar FRAME 3 - Has arrows for scrolling iframe 3.1 ---- iframe 3.1 - has thumbnails FRAME 4 - First for query and after shows the enlarged pictures of thumbnails FRAME 5 - Has arrows for scrolling iframe 5.1 ---iframe 5.1 Has text explaining pictures in frame 4 How it works: In first place, after page has been loaded, I am using frame 4 to run a HTML form. After submit, iframe 3.1 is populated with thumbnails according to the query. When a thumbnail is clicked, I succeeded in bringing the corresponding text, talking about the artwork, on iframe 5.1 to do so, I change the html source in iframe 5.1 I am using for that: top.frames['frame5_id'].document.getElementById('iframe 5.1_id').src=new_source.html; The idea was about doing the same with the frame 4 that is for a larger picture of the artwork. But first I need to get rid of the form once it was submitted (bring a new HTML with a dummy transparent gif to be swapped with the desired picture). But how can I bring a new html in frame 4? After the form is submitted the 'action' moves to iframe 3.1 I tried changing the html source using getElementById but I could not find a way to get to the right object. So my questions a Two src attibutes must be changed with code written in iframe 3.1. (where the thumbnails are clicked). But... How can I address and change the HTML src code in FRAME 4 ? How can I address and change the src image in the new code loaded in FRAME 4 ? I have both attributes in variables but don't know how to get to the target elements Thanks for any help. regards, wagner |
|||||||