solution – iNexi

reCAPTCHA Scrolling Issue on iOS

The problem occurs when an iOS user succeeds in verifying a Google reCaptcha (with or without the additional challenges); the window scrolls down way past the CAPTCHA, which can be very confusing for users. It was brought to my attention because some users at a site I manage were confounded when they were scrolled to a login form below a registration form…they thought it was some vicious loop! ?

This issue is documented at Google Groups, GitHub, and stackoverflow. The latter link is where most of the code below is sourced from, so credit to Jacob Cruz.

This was all within the context of a Gravity Forms form, using their native CAPTCHA field. I placed the code shown below in an HTML field after the CAPTCHA field.

<script>
// reCAPTCHA div container ID is hard coded below
window.scrollCaptcha = false;
document.getElementById('input_1_8').setAttribute('data-callback','scrollFixCaptcha');
function scrollFixCaptcha(a) { if(window.scrollCaptcha) { jQuery("html, body").scrollTop(window.scrollCaptcha); } }
document.addEventListener("scroll", function() {
	var el = document.getElementById('input_1_8');
	var theTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	var elemTop = el.getBoundingClientRect().top;
	var elemBottom = el.getBoundingClientRect().bottom;
	var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
	if(isVisible) { window.scrollCaptcha = theTop;  }  
});
</script>

// reCAPTCHA div container ID is hard coded below

window.scrollCaptcha = false;

document.getElementById('input_1_8').setAttribute('data-callback','scrollFixCaptcha');

function scrollFixCaptcha(a) { if(window.scrollCaptcha) { jQuery("html, body").scrollTop(window.scrollCaptcha); } }

document.addEventListener("scroll", function() {

var el = document.getElementById('input_1_8');

var theTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

var elemTop = el.getBoundingClientRect().top;

var elemBottom = el.getBoundingClientRect().bottom;

var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);

if(isVisible) { window.scrollCaptcha = theTop; }

});

</script>

Filemaker and MySQL Floats in Relationship

I’ve been connecting a Filemaker Pro solution with a WordPress website for a client. In a matching relationship to a Gravity Forms table (rg_lead_detail) I was matching a local field with the Gravity Forms column “field_number” which is defined as a float. I noticed that the relationship was only matching whole integers, not numbers with decimals like “1.3”.

Researching this problem led me to this article about MySQL float columns not being precisely recorded:

If you store the number 1.3 in a float column of your database table, MySQL actually stores the number 1.2999999523162842.

My quick solution was to create two calculation fields, one high and one low based on the local field. The high calculation added 0.05 to the field, and the low field subtracted 0.05. This assumes the field only goes to tenths.

It works for this application, but I don’t see it working for solutions needing precision and accuracy to multiple decimal places.

WordPress 3.7.1 Update Causing Errors

Upgrading to WordPress 3.7.1 broke a lot of backend (admin, wp-admin) pages. I got 404 Missing and sometimes 500 Internal Server Errors for themes.php, and options.php. No quick fixes were working…

Upgrading PHP from 5.3 to 5.4 solved all issues.

WordPress.org states that the minimum PHP version required is version 5.2.4 or greater. I was using 5.2.11 and upgraded to 5.3.15. Good luck!

Change Media Attachment Post in WordPress

When you upload an image or other media to a WordPress site via the “Add Media” button on a post (or page or custom type) edit page, that media is linked to that page. You can still insert that media on another post, or in a gallery on another post, but it is “forever” attached to the original post. I say “forever” because WordPress stock gives you no options for reattaching it (or detaching it.) This may be desired for many situations often involving 3rd party plugins. Your options are re-upload the media to the new post, alter the MySQL database directly or find a plugin that adds this functionality. Below is quick code that adds a link on the Media page for each Media Item.

Credit for this code goes to Andy Potanin via the WordPress forums here. Add it to your theme’s function.php file at the end. I just tested it with WordPress 3.5.1…

add_filter("manage_upload_columns", 'upload_columns');
add_action("manage_media_custom_column", 'media_custom_columns', 0, 2);

function upload_columns($columns) {

	unset($columns['parent']);
	$columns['better_parent'] = "Parent";

	return $columns;

}
 function media_custom_columns($column_name, $id) {

	$post = get_post($id);

	if($column_name != 'better_parent')
		return;

		if ( $post->post_parent > 0 ) {
			if ( get_post($post->post_parent) ) {
				$title =_draft_or_post_title($post->post_parent);
			}
			?>
			<strong><a href="<?php echo get_edit_post_link( $post->post_parent ); ?>"><?php echo $title ?></a></strong>, <?php echo get_the_time(__('Y/m/d')); ?>
			<br />
			<a class="hide-if-no-js" onclick="findPosts.open('media[]','<?php echo $post->ID ?>');return false;" href="#the-list"><?php _e('Re-Attach'); ?></a></td>

			<?php
		} else {
			?>
			<?php _e('(Unattached)'); ?><br />
			<a class="hide-if-no-js" onclick="findPosts.open('media[]','<?php echo $post->ID ?>');return false;" href="#the-list"><?php _e('Attach'); ?></a>
			<?php
		}

}

add_filter("manage_upload_columns", 'upload_columns');

add_action("manage_media_custom_column", 'media_custom_columns', 0, 2);

function upload_columns($columns) {

unset($columns['parent']);

$columns['better_parent'] = "Parent";

return $columns;

}

function media_custom_columns($column_name, $id) {

$post = get_post($id);

if($column_name != 'better_parent')

return;

if ( $post->post_parent > 0 ) {

if ( get_post($post->post_parent) ) {

$title =_draft_or_post_title($post->post_parent);

}

<strong><a href="<?php echo get_edit_post_link( $post->post_parent ); ?>"><?php echo $title ?></a></strong>, <?php echo get_the_time(__('Y/m/d')); ?>

<br />

<a class="hide-if-no-js" onclick="findPosts.open('media[]','<?php echo $post->ID ?>');return false;" href="#the-list"><?php _e('Re-Attach'); ?></a></td>

<?php

} else {

<?php _e('(Unattached)'); ?><br />

<a class="hide-if-no-js" onclick="findPosts.open('media[]','<?php echo $post->ID ?>');return false;" href="#the-list"><?php _e('Attach'); ?></a>

<?php

}

WP E-Commerce Using Incorrect Timezone

I noticed incorrect dates in the sales log, as well as incorrect expiration calculations for coupons… Not great things. WP E-Commerce appears to ignore the WordPress settings and use the server settings via PHP.

Quick fix solution, credit goes to Babelscribe.com

Set the server timezone by adding this to the header file of your theme:

<?php date_default_timezone_set ('Pacific/Auckland' ); ?>

Time zones are detailed here:

http://www.php.net/manual/en/timezones.php

I just added it to the top of the theme’s function.php, seems more appropriate than any header template. Obviously you must adjust the argument for your timezone.

This instantly fixed and updated dates displayed everywhere in WP E-Commerce.

It’s this the main query?

The main query in a WordPress site is the query based on the URL being accessed. When you access this post’s single page, the URL indicates the main query is the text you are reading right now. The “Recent Posts” widget on the sidebar is generated from a query, but not the main query.

There are a few methods to test for the “main query”. As of WordPress 3.3, there is a new way:

$query->is_main_query()

Examples: Using pre_get_posts hook | Using posts_where hook

There’s the old way (which is the basis for the above method):

1 2	global $wp_the_query; if( $wp_the_query === $query)

In situations where I wanted to alter the content of a post (in the loop) if it was the main query, the above methods didn’t work reliably. I attempted to hook into the pre_get_posts action and set a global variable, which I would then test in the content filter function. I reasoned that the variable would be set to true before the loop, and then set to false if another query was called after that. The results however were always false.

My solution was to set a global variable with the post ID in a wp_head action, then test that against the post ID while in the loop (every time the_content filter is called.) Code below…

add_action( 'wp_head', 'main_query_test', 0 );

function main_query_test() {
	global $main_query_test, $post;
	$main_query_test = $post->ID;
}

add_filter('the_content', 'my_content_filter');

function my_content_filter($content) {
	global $main_query_test;
	if ($main_query_test == get_the_id() && is_singular()) {
		$main_query_test = null; // Prevent a second instance
		// do content filtering
	}
	return $content;
}

add_action( 'wp_head', 'main_query_test', 0 );

function main_query_test() {

global $main_query_test, $post;

$main_query_test = $post->ID;

}

add_filter('the_content', 'my_content_filter');

function my_content_filter($content) {

global $main_query_test;

if ($main_query_test == get_the_id() && is_singular()) {

$main_query_test = null; // Prevent a second instance

// do content filtering

}

return $content;

}

Now it’s quite possible this is not the most direct, efficient or reliable method. I welcome your comments if you have suggestions or concerns.