ReCaptcha CSS settings (again)

Aug 05
2010
Leave a
Comment

In this case a ReCaptcha usage with web2py.

<script type="text/javascript">
    var RecaptchaOptions = {
	    theme: 'custom',
	    custom_theme_widget : 'sm_captcha'
    };
</script>
<div id="recaptcha">{{=T('Type the characters you see in the picture:')}}</div>
<div id="sm_captcha">
	<div id="recaptcha_image"></div> 
	<input type="text" id="recaptcha_response_field" class="inputBox" name="recaptcha_response_field" tabindex="14" /> 
	{{if form.errors.captcha:}}
	<div class="error" id="captcha_error">
	{{=form.errors.captcha}}
	</div>
	{{pass}}
	<div id="recaptcha_buttons"> 
		<a id="recatchaReload" href="javascript:Recaptcha.reload()">Reload</a>
		<a id="recatchaAudio" href="javascript:Recaptcha.switch_type('audio')">Audio</a>
		<a id="recatchaImage" href="javascript:Recaptcha.switch_type('image')">Text</a>
		<a id="recatchaHelp" href="javascript:Recaptcha.showhelp()">Help</a> 
	</div> 
	<script src="https://api-secure.recaptcha.net/challenge?k=YOUR_RECAPTCHA_KEY" type="text/javascript"></script><noscript><iframe frameborder="0" height="auto" src="https://api-secure.recaptcha.net/noscript?k=YOUR_RECAPTCHA_KEY" width="auto"></iframe><br /><input name="recaptcha_response_field" type="hidden" value="manual_challenge" /></noscript>
</div>

The result of these settings:

Written by Vidul in: HTML | Tags:

Generate HTML with Javascript

Jul 29
2009
Comments Off

sample HTML file

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en">
  <head>
    <script src="jquery.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="container"></div>
    <script src="gen.html.js" type="text/javascript"></script>
  </body>
</html>

sample JavaScript file (should be named gen.html.js)

$("#container").css({margin:"5% auto 5% auto",width:"70%",'max-width':"70%"});
$("#container").append("<div id='header'>this is the header</div>");
$("#container").append("<div id='body'>this is the body</div>");
$("#container").append("<div id='footer'>this is the footer</div>");
 
$("#header").css({width:"100%",height:"33px",'padding-top':"10px",'text-align':"center",border:"1px solid #777",background:"#ddd"});
$("#header").after("<div style='clear:both'>&&</div>");
$("#body").css({width:"100%",height:"50%",'madrgin-top':"2%",border:"1px solid #777",background:"#eee"});
$("#body").after("<div style='clear:both'>&nbsp;</div>");
$("#footer").css({width:"100%",height:"33px",'padding-top':"10px",'text-align':"center",border:"1px solid #777",background:"#ddd"});
 
$("#body").append("<p>1. sub body</p>");
$("#body").append("<p>2. sub body</p>");
$("#body p:first").css("text-decoration", "underline");
$("#body p:last").css("text-decoration", "overline");
Written by Vidul in: HTML, scripts |

How to edit the ReCaptcha look

May 01
2009
Comments Off

Take a look at recaptcha.js for DOM elements details.

Written by Vidul in: HTML | Tags:

Calendar

February 2012
M T W T F S S
« Sep    
 12345
6789101112
13141516171819
20212223242526
272829  

Tags