Recaptcha buttons ugly, cannot fix - javascript

First of all, I just want you to know that I have indeed checked the "Recaptcha is broken" question where the solution to their problem was setting the line-height to 0. This does not help me unfortunately.
I've implemented Google's tremendous Recaptcha on my website, but there's this one problem; The buttons have white space above and underneath them, and so there's this really ugly graphics-border under my Recaptcha box. Check the image below. I checked the source code in the browser and it seems as if it generates an iFrame, which means I obviously can't affect the style. Wtf?

You can customize the styling of reCAPTCHA on your own, according to the documentation. To quote directly from the article:
To implement all of this this, first place the following code in your main HTML page anywhere before the element where reCAPTCHA appears:
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'custom',
custom_theme_widget: 'recaptcha_widget'
};
Then, inside the element where you want reCAPTCHA to appear, place:
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
<span class="recaptcha_only_if_image">Enter the words above:</span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<div>Get another CAPTCHA</div>
<div class="recaptcha_only_if_image">Get an audio CAPTCHA</div>
<div class="recaptcha_only_if_audio">Get an image CAPTCHA</div>
<div>Help</div>
</div>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
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>

Related

Hey, I've got some problems with hiding a part of HTML DOM using JS

I wanted to hide a part of my page from not showing up, but the HTML doesn't seem to work, please help me.
document.getElementById("login").style.display = "none";
<div id="login">
<h1 align="center">Login</h1>
<input type="text" id="Name2">
<input type="password" id="Pass2">
<button id="login">Sign Up</button>
<button id="switch2">Not a user? Sign Up here.</button>
</div>
The same JS code works when I ran it through inspect tab of my browser, that time it worked.
It also doesn't show any particular error or anything.
And, I've added the script tag after the body tag, as I had learnt from a book to do so as getElementById only works if we do so.
Please help me (ಥ _ ಥ)

Why can't I change ```font-feature-settings``` directly with javascript?

I want to make a simple web page to test OpenType features.
What I want: I simply enter some text and the feature I want to use in inputboxes, and click a button to change the content and style of a div.
However I found that the font-feature-settings wouldn't change as I expect. For example,
<html>
<body>
<input id="feature" /><input type="button" value="Change Feature" onclick="
alert(document.getElementById('feature').value);
document.getElementById('display').style.fontFeatureSettings=document.getElementById('feature').value;
alert(document.getElementById('display').style.fontFeatureSettings);" />
<div id="display" style="font-size:72;">Some text</div>
</body>
</html>
In my Chrome, the first message box shows what I inputed, yet the second message box is always empty.
I end up defining a lot of CSS classes and changing them with javascript. It works now, but it doesn't meet my need, for I have to predefine a lot of features and thus have difficulty in extending it for future use.

I am trying to put solvemedia CAPTCHA code, but it does not work

I put my challenge key and everything seems to me perfect, but when people click on the 'download track' button they go to the link without writing the security phrase in the CAPTCHA. Please help me and let me know if I need anything else. Thank you!
Here is the code:
Note: do not worry about, "your_challenge_key" I know I have to replace it.
<form action="http://www54.zippyshare.com/v/49820786/file.html" method="post">
<input type="hidden" name="cmd" value="validatecaptcha">
<h1><img src="/images/icon-disc.png"> Download Validation</h1>
<p style="font-weight:bold; font-size:15px;">To help prevent access to the site from automated bots, we'll occasionally ask you to verify that you are human. Please complete the challenge below to access this download</p>
<p align="center"><script type="text/javascript" src="http://api.solvemedia.com/papi/challenge.script?k=your_challenge_key"></script>
<noscript>
<iframe src="http://api.solvemedia.com/papi/challenge.noscript?k=your_challenge_key" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="adcopy_challenge" rows="3" cols="40"></textarea>
<input type="hidden" name="adcopy_response" value="manual_challenge"/>
</noscript></p>
<div align="center"><button type="submit">Download Track</button></div>
</form>

Custom JavaScript Creating Random Characters in WordPress

I am working on a problem that a client has come across, the javascript that they are using is causing a /* and /*]]>*/ to show up on the Login Tooltip. I have been looking for the cause and I am baffled by it. All I know is that it is being generated somehow by the JavaScript at This Page.
The plugin is using this template which doesn't have any of those characters in it:
<script type="text/template" id="api-login-btn-template">
<div id="api-signin">
<label for="api-signin-login">Login : </label><input type="text" id="api-signin-login" name="email" value="" title="e-mail address"/>
<label for="api-signin-pass">Password : </label><input type="password" id="api-signin-pass" name="password" value="" title="password"/>
<div class="sign-in-errors"></div>
<br/>
<button class="sign-in-btn"><span>Sign In</span> <span class="blue">▶</span></button>
</div>
<div id="api-signout" style="display:none">
<p>My Favorite Programs <span class="ltblue_link">▶</span></p>
<p>Application: <a id="api-app-status" href="https://secure.apistudyabroad.com/forms"></a></p>
<button class="sign-out-btn"><span>Sign Out</span></button>
</div>
</script>
The javascript file responsible for this feature is here. I believe the pop up starts at Line 400 with $('.pane-container').each(function() {
This is how your template looks like on generated page (view source in Firefox):
<script type="text/template" id="find-a-program-template">
/*<![CDATA[*/<div style="padding:20px;"><h2>
...
...
...<div class="clear"></div></div>/*]]>*/
</script>
Seems like PHP / WordPress adds that CDATA part to the template during page rendering, but jQuery plugin doesn't know how to ignore it and writes it down instead.
Btw, you also have a bunch of server side <?php the_time('m') ?> calls on the page, but that's probably unrelated.

bad javascript? hello bar solo only working on homepage - no other pages

I'm running a bigcommerce store and have the hello bar solo custom code installed in the site footer. I've also tried placement of the hellobar code in various spots (header template files, default template files, page specific template files). For some reason the hello-bar only works on my homepage, but never on any of the other pages.
Any ideas as to why? Seems like if i place this in the footer it should show up on every pages but that's not what i'm getting. please let me know if you need more details or code samples to help.
thanks
btw, bigcommerce support also thinks that the hellobar should show up on every page if i have this code in the footer, but its not working. my guess is that it's the javascript but I dont know my way around that.
Here's the code I'm using:
<div id="mailchimp_form" style="display:none;">
<form action="http://xxxxx.us5.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="xxxxxxxx">
<input type="hidden" name="id" value="xxxxx">
Get an instant coupon code by signing up to our newsletter. Email: <input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" />
<input class="button" type="submit" value="Subscribe" />
</form>
</div>
<!-- Hello Bar configuration start -->
<script type="text/javascript">
var mailChimpForm = document.getElementById('mailchimp_form').innerHTML;
new HelloBar( mailChimpForm, {
showWait: 1000,
positioning: 'sticky',
fonts: 'Arial, Helvetica, sans-serif',
forgetful: true
}, 1.0 );
</script>
And here are the references that I've placed in the header:
<link type="text/css" rel="stylesheet" href="content/hellobar.css" />
<script type="text/javascript" src="content/hellobar.js"></script>
No idea what bigcommerce is, but judging from what you supplied I am guessing one of two reasons.
There is no 'mailchimp_form' div except on your homepage.
Javascript, for some weird reason, does get executed before 'mailchimp_form' div gets loaded on all other pages.

Categories