web – 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.

Useful Terminal Commands for Remote Computing

These commands are especially useful in remote access situations, using ssh. See my post about SSH here. These commands all work in OS X 10.7 Lion. Many of them will not work in earlier versions of OS X.

Screen Sharing

on:

sudo launchctl load -w /System/Library/LaunchDaemons/com.apple.screensharing.plist

1	sudo launchctl load -w /System/Library/LaunchDaemons/com.apple.screensharing.plist

off:

sudo launchctl unload -w /System/Library/LaunchDaemons/com.apple.screensharing.plist

1	sudo launchctl unload -w /System/Library/LaunchDaemons/com.apple.screensharing.plist

Remote Management

on:

/System/Library/CoreServices/RemoteManagement/ARDAgent.app/Contents/Resources/kickstart -configure -activate -access -on -clientopts -setvnclegacy -vnclegacy yes -setvncpw -vncpw spectrum -restart -agent

1	/System/Library/CoreServices/RemoteManagement/ARDAgent.app/Contents/Resources/kickstart -configure -activate -access -on -clientopts -setvnclegacy -vnclegacy yes -setvncpw -vncpw spectrum -restart -agent

off:

/System/Library/CoreServices/RemoteManagement/ARDAgent.app/Contents/Resources/kickstart -deactivate -configure -access -off

1	/System/Library/CoreServices/RemoteManagement/ARDAgent.app/Contents/Resources/kickstart -deactivate -configure -access -off

FTP Server

on:

launchctl load -w /System/Library/LaunchDaemons/ftp.plist

1	launchctl load -w /System/Library/LaunchDaemons/ftp.plist

off:

launchctl unload /System/Library/LaunchDaemons/ftp.plist

1	launchctl unload /System/Library/LaunchDaemons/ftp.plist

Simple Web Server

on:

python -m SimpleHTTPServer $port >> ~/simple_http.log&

1	python -m SimpleHTTPServer $port >> ~/simple_http.log&

Remote Login (ssh)

I find “Remote Login” an incredibly useful tool. On a daily basis I employ it to transfer files, screen share, and directly access the shell. Turning this on (located in the Sharing pane of System Preferences) enables the local SSH server. This enables Secure Shell login, and SFTP access to transfer files. This technology is employed by thousands of machines on the internet. It is safe, secure and encrypted as long as it is properly configured and monitored. To keep your machine secure, consider some of these options or habits:

Turn if off when you don’t need it
Restrict which users can login remotely (right in the same Preference pane)
Change the default port (locally and/or at your router)
Monitor secure.log (manually with Console or with a 3rd-party app)
Setup SSH keys instead of using passwords

There may be some additional setup to access your machine via SSH remotely. If you’re behind a router, you’ll need to forward an external port to the internal SSH port (default is 22) of your machine. Any firewall will need to be configured to allow the appropriate incoming access. When your machine goes to sleep, it may or may not interfere with SSH access. Turn off sleep or turn on “Wake for network access” (Energy Saver preference pane).

Now that’s it’s running, how do you connect to the shell? In the terminal on another Mac or a linux computer, type:

ssh yourusername@[EXTERNAL IP ADDRESS]

…that’s it. If you’re using a Windows computer to connect, you’ll have to download a client.

If you want to transfer files securely, you can use the same command above but replace ssh with sftp . Then you’d have command line access to downloading and uploading files. Much easier would be to use an App like CyberDuck, or the popular Transmit for SFTP access.

One of the best features of an SSH connection is the ability to forward ports. You can forward ports in either direction, but most common is to forward a remote port to a port on the local machine. This can be setup in the initial command (ssh user@IP...) or while you’re in the session. To do the latter, once your in a remote session, type ~C at an empty prompt. If it doesn’t work, hit return to get a clear prompt and try again. This will drop you to a prompt like so:

To forward the remote port 5900 to the local port 5901, type the following a the ssh> prompt:
-L5901:localhost:5900 (no spaces)
You can continue to use the shell as normal, or not, but if you close it, so too does the “tunnel” you created close. In the example above, port 5900 is the default port for VNC, the screen sharing protocol. You could now enter “vnc://localhost:5901” in the Finder’s Connect to Server dialog on the local computer, and it would attempt to access the remote computer’s VNC server via the encrypted SSH connection.

Another type of port forwarding is “dynamic”. Using the above method, after connecting to a remote machine and typing ~C, type the following:
-D8888 (again, no spaces)
This creates a SOCKS proxy tunneled through the encrypted ssh connection. Next you would enter proxy settings, either for the entire local computer (in System Preferences) or in specific applications. Here’s how it would look in Firefox:

Now every connection Firefox makes is routed through the encrypted tunnel to the remote host. To the outside world (internet) your requests appears to come from the remote computer. Be aware that it takes proper configuration to mask all your activity. You must check on each application’s use of proxies. As well, DNS requests (resolving domain names to IPs) may not be masked by the proxy at all without additional steps.

Be sure to read the next article, Useful Terminal Commands for Remote Computing, for more ssh fun…