• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

javascript

WordPress Heartbeat API

April 29, 2014 by Webhead

I could not find any extensive documentation on the WordPress Heartbeat API, so I am writing here to remember what I have learned through various tutorials throughout the web.

The Heartbeat API is written in Javascript.  Think of it like a javascript function that gets run every 60 seconds (depending on the interval) which sends data via POST to the server and then the server returns a response.  All of which you can easily hook into.  It was introduced in WordPress 3.6.

Quick Examples

PHP

// server received whatever parameters from when javascript triggered the "heartbeat-send" event.
function myplugin_heartbeat_received( $response, $data ) {
if ( !empty( $data['myplugin_id'] ) ) {
$response['myplugin_got_it'] = true;
}
return $response;
}
add_filter( 'heartbeat_received', 'myplugin_heartbeat_received', 10, 2 );

Javascript

jQuery(document).ready(function($) {
wp.heartbeat.interval= 15;
// set some parameters when it's time to send data to the server
$(document).on('heartbeat-send.myplugin', function(e, data){
data['myplugin_id'] = my_id;
});

// do something when your page gets a response.
$(document).on('heartbeat-tick.myplugin', function(e, data){

if ( data.hasOwnProperty( 'myplugin_got_it' ) ) {
refreshPage();
}
});

});

Heartbeat Pulse Interval

The ‘heartbeat_settings’ filter gets applied in the ‘init’ hook, priority 0 in wp_default_scripts in wp-includes/script-loader.php.  So if you do use the hook on the server-side and want to only run it on certain pages, be prepared to parse the URL because a lot of WP functions aren’t available at that time.  Alternatively you can set the interval in javascript with wp.heartbeat.interval(15) where 15 is seconds.  Note some other tutorials say to use ‘fast’, ‘standard’, ‘slow’, but that didn’t work for me for some reason.

 

Tutorials

I found these tutorials to be the most helpful.

http://code.tutsplus.com/tutorials/the-heartbeat-api-getting-started–wp-32446

http://code.tutsplus.com/tutorials/the-heartbeat-api-changing-the-pulse–wp-32462

http://code.tutsplus.com/tutorials/heartbeat-api-using-heartbeat-in-a-plugin–wp-32496

 

Filed Under: Coding Tagged With: javascript, php, wordpress

Bootstrap Tab linking

March 26, 2014 by Webhead

If you use Bootstrap (v3.x) you would see that clicking on a tab does add anything to the url so if you were to refresh, you wouldn’t go back to the tab you are on.  The post below says to get rid of the e.preventDefault() in the tab api and add some code to detect the window href so you can go directly to your tab.

http://www.gsdesign.ro/blog/jquery-ui-bootstrap-tabs-remember-last-selected-tab/

Filed Under: Coding Tagged With: bootstrap, javascript, jquery

Javascript defaultValue

March 25, 2014 by Webhead

For some reason I have never needed to use the defautlValue property up until today.  I was pleased to find javascript can access the original input value so tracking changes in a form is a bit easier.  However, the defaultValue only works as expected for “text”, “file”, and “password” fields.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025

A workaround is to use type=”text” and just have a style=”display:none;” to act like a hidden field.

Filed Under: Coding Tagged With: html, javascript

Fancybox not working after second click

August 29, 2013 by Webhead

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

 

 

Filed Under: Coding Tagged With: javascript, jquery

IE Doesn’t see padding on hover

July 25, 2013 by Webhead

Problem

Internet Explorer 8 (I no longer even look at IE 7) seems to not be able to see the padding on an anchor tag within a ul > li > a structure.   Using jQuery I have a hover event on the li, however it only works on the bottom 1px of the li.

 

Solution

I tried adding position:relative and zoom:1, as some have suggested but that doesn’t work.  I then just tried to put a background in the anchor tag to see if IE even recognizes that the anchor tag has padding.  It did recognize the padding and once the background was in the hover also worked.  Turns out IE needs a background set?  I found another person who had this problem and the solution was to set the background to a transparent image of 1×1 px.

 

http://stackoverflow.com/questions/12197999/ie-not-including-margin-and-padding-in-hover-without-background-set

Filed Under: Coding Tagged With: css, IE crap, javascript, jquery

jQuery – When to use return false or preventDefault

April 15, 2013 by Webhead

Ran into a great article that explains the differences between return false, preventDefault and stopPropagation.  Here’s a summary:

  • return false does both preventDefault and stopProgagation
  • preventDefault just stops the browser default event.
  • stopPropagation stops bubbling.

In most cases you would only want to do preventDefault.  If you stopPropagation you prevent your code from being extensible.

 

source:  http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Filed Under: Coding Tagged With: javascript, jquery

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • Go to Next Page »

Primary Sidebar

Topics

502 apache apple bluehost bootstrap buddypress chrome cloudways cms css debug drupal eCommerce firebug firefox git goDaddy google google analytics google maps hacked hosting htaccess html html 5 icons IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php tinymce wordpress wpengine yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools