[WordPress][fixed] couldn’t type space in form textareas and inputs

Funny how sometimes the investigation takes more time than actual fix itself.

As an only web designer in the company I need to deal with a lot of small bugs. Most of the time is browser incompatibilities or other small mostly CSS issues. But sometimes you come across something silly. This one was one of those things where fix is very simple but the process leading up to it was interesting. Thought I’d share.

Issue: Could not type space in text area in forms in the sidebar on the page here: http://www.allon4perth.com.au
Debugging / thought process:

1. Thought maybe there was some kind of java script anti spam or anti hack for forms – so it wouldn’t allow you to type special characters.
2. Checked the forms on contact page and it worked fine – figured that it had only some issues on home page.
3. Went through the manual process of checking what java script files are included in home page and BOOM that was it! Found out that it was Galleriffic JS.
   1. First updated it to the newest version of the script
   2. Goggled galleriffic and input forms errors
   3. Came up with a simple solution 🙂

Issue found: galleriffic was using the space and other characters like arrows for navigation. So everytime you would hit the space bar it would flick a photo / start slide show etc.

I couldn’t see it as the forms I was testing were much higher on the page then the gallery itself.

Solution: disable gallerific keyboard navigation:

How to do it? Easy.

In my Case I was using WordPress and I found the gallerific initialisation code in my template folder\footer.php but you might also find it in a .js file which contains all your script.

my initialisation for gallerific looks a bit complicated,

// Initialize Advanced Galleriffic Gallery
				var gallery = $('#thumbs').galleriffic({
					delay:                     2500,
					numThumbs:                 15,
					preloadAhead:              15,
					enableTopPager:            true,
					enableBottomPager:         true,
					maxPagesToShow:            7,
					imageContainerSel:         '#slideshow',
					controlsContainerSel:      '#controls',
					captionContainerSel:       '#caption',
					loadingContainerSel:       '#loading',
					renderSSControls:          false,
					renderNavControls:         false,
					playLinkText:              'Play Slideshow',
					pauseLinkText:             'Pause Slideshow',
					prevLinkText:              '‹ Previous Photo',
					nextLinkText:              'Next Photo ›',
					nextPageLinkText:          'Next ›',
					prevPageLinkText:          '‹ Prev',
					enableHistory:             false,
					autoStart:                 false,
					syncTransitions:           true,
					defaultTransitionDuration: 900,
								
				
				});

as the last option just add the line :enableKeyboardNavigation: false,
and that should fix it

// Initialize Advanced Galleriffic Gallery
				var gallery = $('#thumbs').galleriffic({
					delay:                     2500,
					numThumbs:                 15,
					preloadAhead:              15,
					enableTopPager:            true,
					enableBottomPager:         true,
					maxPagesToShow:            7,
					imageContainerSel:         '#slideshow',
					controlsContainerSel:      '#controls',
					captionContainerSel:       '#caption',
					loadingContainerSel:       '#loading',
					renderSSControls:          false,
					renderNavControls:         false,
					playLinkText:              'Play Slideshow',
					pauseLinkText:             'Pause Slideshow',
					prevLinkText:              '‹ Previous Photo',
					nextLinkText:              'Next Photo ›',
					nextPageLinkText:          'Next ›',
					prevPageLinkText:          '‹ Prev',
					enableHistory:             false,
					autoStart:                 false,
					syncTransitions:           true,
					defaultTransitionDuration: 900,
                                        // just add this line below
					enableKeyboardNavigation:  false,

								
				
				});

Easy? let me know in comments below.
If you still have a problem with it I am happy to help.

HIRE ME NOW