H5P embedded in tabs : text from the button missing in some activities

Hello !

I am using a WP tabs plugin (based on Bootstrap) to make tabs and embed my H5P activities in them (one activity = one tab).

A strange thing happens with the "check" button : when the H5P content is not embedded in a tab, the check button shows with the text "check" displayed as it should. But as soon as the same H5P content is embedded in a tab, the check button displays only the check icon but the "check" text is not there (as if the button was truncated).

This happens with some activities (Mark the words, Fill in the blanks) but not with others (Drag and drop). Eventually I just need to get focus in the activity to have the "check" text automagically showing.

I conclude that the tabs mess with the H5P check button and I would like to fix this if I can. I've looked a bit in Joubel UI and some CSS but I don't think that it is where I can do something. Can you point out where I should look please ?

Here is a screencast that shows the issue : http://take.ms/nUbXV

Greetings,

Isabelle 

falcon's picture

Hi Isabelle,

H5P struggles when third party plugins are hiding and showing them. If H5P is hidden when it gets "started" it thinks it has very little space and shows the minimum version of everything. If the system don't tell H5P when H5P is being displayed H5P will keep showing the smallest version of everything until something else telse it that it has been resized. I don't know why some buttons has the check text. I would have expected all of them to be small. This guide is relevant, hope it helps!

 

Hi Falcon ! And many thanks for this crystal-clear explanation and for pointing out the proper documentation. I'm sorry that I did'nt find it before asking a question here - a search engine would be really great on H5P by the way ;) I understand what happens - though I can't explain why some buttons are not truncated. I'll ask my husband to have a look on the code provided as an example and to help me on this matter. Thanks again !

falcon's picture

Sure, not easy to see that that documentation is the right one for this question. I use google when I'm looking up forum threads or documentation on H5P.org. The reason we haven't added a search feature on H5P.org yet is that it is a bit time consuming to implement a good one. We could just enable Drupal's default search but it is very far behind Googling. 

I hope you'll be able to use the documentation to make a solution for your problem :)

It is indeed fixed ! Finally I'm not going to use tabs so much because the page is a bit heavy to load then. I use instead the <!-- nextpage --> WP quicktag which allows me to split a post in several pages. It is "mimicking" tabs but the page only load one H5P content at a time, wich is better for my use.

For other users who could struggle with this, here is the way to solve the "H5P truncated buttons when embbeded in tabs" problem :

    • First, copy-paste the following code in a file that you will name phpmods.php :

<?php

/**

 * H5P Mods Plugin. 

 * Alters the way the H5P plugin works.

 * @package   H5P

 * @author    Joubel <contact@joubel.com>

 * @license   MIT

 * @link      http://joubel.com

 * @copyright 2015 Joubel

 *

 * @wordpress-plugin

 * Plugin Name:       H5P Mods

 * Plugin URI:        http://www.h5p.org

 * Description:       Overrides the H5P native H5P with your own adjustments.

 * Version:           0.0.1

 * Author:            H5P

 * Author URI:        http://www.h5p.org

 * Text Domain:       h5pmods

 * License:           MIT

 * License URI:       http://opensource.org/licenses/MIT

 * Domain Path:       /languages

 * GitHub Plugin URI: https://github.com/h5p/h5pmods-wordpress-plugin

 */

// If this file is called directly, abort.

if (!defined('WPINC')) {

  die;

}

/**

 * Allows you to alter which JavaScripts are loaded for H5P. This is

 * useful for adding your own custom scripts or replacing existing once.

 *

 * @param object &$scripts List of JavaScripts that will be loaded.

 * @param array $libraries The libraries which the scripts belong to.

 * @param string $embed_type Possible values are: div, iframe, external, editor.

 */

function h5pmods_alter_scripts(&$scripts, $libraries, $embed_type) {

    $scripts[] = (object) array(

      // Path can be relative to wp-content/uploads/h5p or absolute.

      'path' => '/custom-h5p.js',

      'version' => '?ver=1.0' // Cache buster

    );

}

add_action('h5p_alter_library_scripts', 'h5pmods_alter_scripts', 10, 3);

?>

  • put this file in a folder that you will name h5pmods and that you will create (using your FTP software) in /wp-content/plugins/
  • put a file that you will name custom-h5p.js in /wp-content/uploads/h5p/
  • in this file, add the following code. It will work with the WP plugin called WP Post Tabs (https://fr.wordpress.org/plugins/wordpress-post-tabs/) :

 

(function ($) {

  $(document).ready(function () {

    setTimeout(function () {

          $('a.ui-tabs-anchor').on('click', function (e) {

        H5P.jQuery(window).trigger('resize');

      })

    }, 0);

  });

}( H5P.jQuery ));

  • save the file, then go in your wordpress admin > plugins and activate the h5pmods plugin.
  • from now on, all your H5P content embedded in the tabs will be resized as it should (see screencap)

Hope this can help others !

Isabelle

falcon's picture

Nice! Thank you for sharing!

Depnding on needs, etc - I actually found that creating a 'tabbed content area' using pure CSS (although slightly 'hacky') works for this kind of thing; follow the guide here -- https://css-tricks.com/functional-css-tabs-revisited/

I have this within the standard BootStrap row / col, like so:
<div class="row">
<div class="col-xs-6">
// Tabbed Content Area Code Here
</div>
</div>

BV52's picture

Cool! Thanks for the tip.