My Monkey Do

A Log of Coding Solutions

Coding

Additional P tags in Contact Form 7

by

Problem

I noticed that I had paragraph (<p>) tags around some of my contact form 7 elements.  I tried adding this to the functions 

define ( ‘WPCF7_AUTOP’, false );

but that still didn’t work.

Solution

It wasn’t another plugin like in an earlier problem with p tags, it was actually contact form 7 this time.  I had label html tags and apparently this caused p tags to be added around these label tags.  I replaced the label tags with div and the paragraph tags went away.

 

 

Fancybox not working after second click

by

Problem

Setting up fancybox 1.3.4 with inline content doesn’t work when clicking on the link twice.

Solution

The problem I think is with the upgraded version of jQuery.  If using jQuery 1.4 like the example, it should work fine.  But if you are using jQuery 1.10+ or even 1.9 you may run into this problem.  The work-around would be to explicitly set the content like so:  The proper workaround is to save the parent of the element you want to lightbox and then on fancybox-cleanup replace the fancybox-inline-tmp element with the element you lightboxed like so:

  var popupParent = jQuery("#popup").parent();
  jQuery(document).on('fancybox-cleanup', function() {
    popupParent.find('.fancybox-inlinetmp').replaceWith(jQuery("#popup"));
  });

Update: There are other errors that occur with Fancybox and jQuery 1.9+. Stack overflow has the patch… but you still need to do this fix for the second click.
http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read

Update 2:  Below is a patch to fix the inline issue too.  I only tested for one instance, so use with caution.  I added a objParent… look for that and that’s all the changes made.

jquery.fancybox-1.3.4_patch_2.js

 

 

Fancybox and Datepicker Error

by

Problem

Using fancybox and datepicker I got an “a is undefined” javascript error.  I added datepicker to the fancybox by using the following code:  

$('#fancybox-wrap').on('focusin', '.datepicker', function(e) {
$(this).datepicker();
 });

This caused the datepicker to show up correctly, but when selecting a date it closed the fancybox modal while leaving the greyed background.

 

Solution

I am always amazed at how often I find solutions on StackOverflow.  Even if the OP didn’t have my exact problem, the solution given solved my problem.   Because fancybox (in general all lightboxes) duplicates the DOM datepicker gets confused on which calendar modal to close.  The solution is as follows: 

$('#fancybox-wrap').on('focusin', '.datepicker', function(e) {
$(this).attr("id","datepickerNEWID");
$(this).datepicker();
 });

http://stackoverflow.com/questions/3392961/jquery-datepicker-does-not-work-inside-lightbox

 

 

What is box-sizing and border-box?

by

Problem

In the latest WordPress theme, twentythirteen, I noticed styles that had padding didn’t affect the width of my box.  Whenever I add padding, the inside just got smaller and the outside stayed the same.  Was I dreaming all this time thinking the padding affected the overall width?  What world was I living in where you say this div is 100px wide, but if there’s 10px padding on each side the width should actually be 80px?

Solution

No, I wasn’t dreaming.  The WordPress twentythirteen theme has a style called

box-sizing:border-box

.  This causes the width to stay the width and the padding to be on the inside and not affect the width.  This is amazingly supported in IE 8 and up, and, with some prefixes, webkit and firefox.    I will always be using the below code from now on.

* {
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

template_include vs template_redirect

by

WordPress has a filter called ‘template_include’ and it also has an action called ‘template_redirect’.  The filter allows you to change what template file to use by returning a file path while the action is usually used to write whatever you need to and then exit.

According to this issue for bbPress template_redirect can cause incompatibility issues with other plugins using this hook.  Also using this hook exits WordPress abruptly not allowing WordPress to run through it’s normal procedure (according to one blog).  It is probably best to use ‘template_include’ unless you have a specific reason not to.