Can't center old reCaptcha code - javascript

I'm using an old code from reCaptcha and i'm trying to center it in a form but it's not working.
What i tried:
margin:0 auto;
margin:0 auto !important;
text-align:center;
HTML:
<p class="captcha">
<script type="text/javascript">
var RecaptchaOptions = {
lang : 'en',
theme : 'white',
tabindex : 9
};
</script>
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=..."></script>
<noscript>
<iframe src="http://api.recaptcha.net/noscript?k=..." height="300" width="500"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
<span class="validation-error"></span>
</p>

Using:
text-align:center;
On a form element does not work, browsers nevver implemented that feature. What you need to do is wrap a div around the CAPTCHA like so:
<div align=center><CAPTCHA></div>

Related

Javascript not working for: onclick show hidden div from textarea

I am trying to allow a user to click in a textarea and when they start typing it shows an initially hidden div. Here is my script and html, but this does not work, not sure where I am going wrong.
<head>
<script type="text/javascript">
document.getElementById("showPanel").onclick = function() {
document.getElementById("thePanel").style.visibility = "visible";
}
</script>
</head>
<body>
<textarea name="showPanel" rows="2" cols="35" style="position:absolute; left:0px; top:0px; width:300px; height:50px;"></textarea>
<div id="thePanel" style="position:absolute;left:0px;top:100px;width:300px;height:200px;background: red; visibility:hidden;">
</div>
</body>
</html>
Just some minor changes based on what the guys have commented on above.
Added an id to the textarea
Moved JS script so that the the elements exist before you call the JS.
<html>
<head>
</head>
<body>
<textarea name="showPanel" id="showPanel" rows="2" cols="35" style="position:absolute; left:0px; top:0px; width:300px; height:50px;"></textarea>
<div id="thePanel" style="position:absolute;left:0px;top:100px;width:300px;height:200px;background: red; visibility:hidden;">
</div>
<script type="text/javascript">
document.getElementById("showPanel").onclick = function() {
document.getElementById("thePanel").style.visibility = "visible";
}
</script>
</body>
</html>

Element switch by fadeIn/fadeOut

I'm trying to get the line of codes below to fadeOut the form with the class ".quote" and replace it with the DIV that has the class ".thanks." when the button is clicked. it only works when you click on the input area but doesn't fadein div.thanks.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".quote, .thanks").click(function(){
$('form:fadeIn(:.thanks)').fadeOut (5000);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: hide;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
I'd also like to know how to make it get the visitors name and insert it in div.thanks.
I think this is what you are looking for...
$(".quote").click(function(){
$(this).fadeOut(5000, function(){
$(".thanks").fadeIn();
});
});
You need to use CSS to position both elements in the same location. Typically this involves using position:absolute and setting left: and right: CSS styles. Once that's set up correctly, you can use jQuery's fadeIn and fadeOut as you expect.

ReCAPTCHA ajax loaded theme problem

Can not figure out how to theme an ajax loaded recaptcha. The below code does not work.
From Google Recaptcha
Saw this post Recaptcha ajax API custom theme not working, but I am definitely viewing in localhost and recaptcha is working fine, just not changing themes.
Anyone have advice on how to get the white theme to work?
<script type='text/javascript'>
var RecaptchaOptions = {
theme : 'white'
};
</script>
<div id="recaptcha_content">
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q" height="300" width="500" frameborder="0"></iframe><br />
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
</noscript>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
function() {Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", "recaptcha_content");
});
});
</script>
#jhanifen: I got it working after using most of the code from http://wiki.recaptcha.net/index.php/Installation, try this --
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
function() {
Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q",
"recaptcha_content",
{
theme: "white",
callback: Recaptcha.focus_response_field
}
);
});
});
</script>
<div id="recaptcha_content">
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q" height="300" width="500" frameborder="0"></iframe><br />
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
</noscript>
</div>
</body>
</html>
I't doesn't look like you are adding your options that you have set RecapthcaOptions. Try changing to:
$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
function() {Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", "recaptcha_content", RecaptchaOptions);
});
See the doc's, the third option passed to the .create() method is the options. You are setting up a variable outside the function to set the options, but don't include them.
First of all, your key is invalid or wrong, or you wanted that to be posting here :D
If not wanted. try to get a new one, and maybe make it a global one (could affect the localhost stuff). Or upload and test the code on the domain you specified.
This snippet works for my global public key, i set the theme directly on creation
<html>
<head>
<title>recaptcha test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
</head>
<body>
<div id="recaptcha_content">
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=publickey" height="300" width="500" frameborder="0"></iframe><br />
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
</noscript>
</div>
<script type="text/javascript">
$(document).ready(function() {
Recaptcha.create("publickey",
"recaptcha_content", {
theme: "white",
callback: Recaptcha.focus_response_field
});
});
</script>
</body>
</html>
Going the Occam's Razor way, can you verify that the script for setting the theme is before the form element. As stated several times in the docs, the script does not work inside or after the form element.

Tooltip after input field focus

I am sure there is a proper term for it but don't know it. How can I make a small note pop up when a user is on each field? Like let's say they go to name field; then as soon as they click on the name field on the right side, I want a small note to show up giving them a message like "make sure you use full name". I want to do this for a couple of fields I have. How can I do this?
Are you looking for ToolTips? Checkout these collection from smashing magazine.
I use this plugin for what you are asking. JQuery tooltip
FlowPlayer.org has a good jQuery tooltip plugin that you can use.
Check this for a demo of using it on a form(it suits your requirement)
Here is a simple example: http://jsbin.com/iruyo3
Code pasted here for reference too.
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { font:normal 62.5% tahoma; margin:20px }
#myForm .note { display:none; }
#myForm fieldset { border:0 }
#myForm label { width:100px; float:left; height:25px; line-height:25px; text-align:right; padding-right:10px }
</style>
</head>
<body>
<form id="myForm">
<fieldset>
<label>Name</label>
<input type="text" name="fullname">
<span class="note">Enter your full name.</span>
</fieldset>
<fieldset>
<label>Company</label>
<input type="text" name="fullname">
<span class="note">Enter your work place.</span>
</fieldset>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('#myForm input:text').focus(function(){
$('.note').hide();
$(this).next().fadeIn();
});
});
</script>
</body>
</html>

jQuery: Slide left and slide right

I have seen slideUp and slideDown in jQuery. What about functions/ways for sliding to left and right?
You can do this with the additional effects in jQuery UI: See here for details
Quick example:
$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
If you don't want something bloated like jQuery UI, try my custom animations: https://github.com/yckart/jquery-custom-animations
For you, blindLeftToggle and blindRightToggle is the appropriate choice.
http://jsfiddle.net/ARTsinn/65QsU/
You can always just use jQuery to add a class, .addClass or .toggleClass. Then you can keep all your styles in your CSS and out of your scripts.
http://jsfiddle.net/B8L3x/1/
This code works well :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
var options = {};
$("#c").hide();
$("#d").hide();
$("#a").click(function(){
$("#c").toggle( "slide", options, 500 );
$("#d").hide();
});
$("#b").click(function(){
$("#d").toggle( "slide", options, 500 );
$("#c").hide();
});
});
</script>
<style>
nav{
float:left;
max-width:300px;
width:300px;
margin-top:100px;
}
article{
margin-top:100px;
height:100px;
}
#c,#d{
padding:10px;
border:1px solid olive;
margin-left:100px;
margin-top:100px;
background-color:blue;
}
button{
border:2px solid blue;
background-color:white;
color:black;
padding:10px;
}
</style>
</head>
<body>
<header>
<center>hi</center>
</header>
<nav>
<button id="a">Register 1</button>
<br>
<br>
<br>
<br>
<button id="b">Register 2</button>
</nav>
<article id="c">
<form>
<label>User name:</label>
<input type="text" name="123" value="something"/>
<br>
<br>
<label>Password:</label>
<input type="text" name="456" value="something"/>
</form>
</article>
<article id="d">
<p>Hi</p>
</article>
</body>
</html>
Reference:W3schools.com and jqueryui.com
Note:This is a example code
don't forget to add all the script tags in order to achieve proper functioning of the code.

Categories