Shortcodes not displaying when 2 or more present on a single page

febster's picture

Hey there again!

I basically have been trying to put 2-3 h5p shortcodes or even embed files on a single page. For some reason, when I put more than one shortcode on a page, the first shortcode will display, but the second won't.

It seems when two shortcodes are present, they conflict with one another, and the second one down on the page is disallowed to display. It doesn't seem to matter if you have different content types. In the video below I'm using a 'course presentation' and a drop and drag text content shortcodes.

Here's the video is my screencast (sorry, hope my screencasts don't get too annoying). I find screencasts are more easy to clearly and quickly show the issue at hand.

http://screencast.com/t/dUTkllFt5

Anyhow, just curious if this is replicated for others, and if this just isn't my set up, but affects others as well.

Cheers!

icc's picture

Hello there!

Inserting multiple H5Ps using shortcode shouldn't be an issue on the theme you're using. I'm guessing it's the accordion you're using that's causing the issue. When the rest of the H5Ps are loaded they're not visible and therefore not able to determine their own size. They just lay there with no size. Can you try changing to an invisible H5P and then resizing your browser window to see if it appears?
If so, what needs to be done is triggering a resize event on the h5p content when the accordion changes views. What accordion plugin are you using?

Another way of achieving what you want might be to request an accordion content type for H5P, which I think would be a much more solid solution. However it wouldn't be as easy to re-use the content you create across pages.

febster's picture

Hey there. Appreciate your response. I'm not quite sure though what you mean by 'invisible H5P'. May you please explain what this is more? How would you make the 'shortcode invisible?' Is this what you mean?

I'm using the 'visual composer' to create the accordian which is a drop & drag page builder (which uses shortcodes itself) to build pages easily without much coding. I'm only doing some additional HTML + CSS on the pages though but I don't believe this would be any part of the problem at hand.

Sorry, I'm not immediately understanding what you mean. Very keen though figure out what to do! Could you please explain more?

Cheers!

icc's picture

Of course. When opening the page only the first element of the accordion is visible, the others are hidden. But even though they are hidden they are still loaded and initialized. The problem is that since they are hidden they get no size, and they don't know when they do. So if you jump to the next element in the accordion the H5P in that element is shown, but it's invisible since it has no size. What you have to do is to get the accordion to tell the H5P to resize when the accordion element opens. You can test this by opening an accordion element with a H5P that doesn't work, and then you can resize your browser window and the H5P will appear. This is because the browser tells the H5P to resize. What you want is the accordion to tell the H5P to resize. We can probably help you achieve this if we know the name of the accordion plugin you're using.

febster's picture

Hey there! Many thanks again for the response. Yes, I'm using the Visual Composer plugin (http://vc.wpbakery.com)

So, it's basically a drop and drag page builder which one of its functionalities is a drop and drag build for the 'accordian' feature as seen on my site.

Definitely now understand what you mean. I tested it, and it works exactly like what you say. Once I re-size the page, the second/third shortcodes of H5P content suddenly appear below.

Do you think the solution is simple then to make the content tell the accordian (the Visual Composer Plugin) to size it? If you have a solution I'm really all ears! Would love any solution to get Visual Composer to tell my H5P content to size. I look forward to knowing more. :-)

icc's picture

Ok, sorry I missed the name in the first post.

Since Visual Composer isn't open source it's a bit hard for me to tell how to make the accordion resize H5P. I would advice you to ask in the Visual Composer forum if there are any events you can listen for when the accordion changes elements. If there are I can help you create the code that triggers the resize.

febster's picture

Yes, just put in a ticket and will see what comes back. Hopefully soon!

A huge thanks for your direction in this!

febster's picture

This is what was written to me:

"We use the default jquery accordion: http://api.jqueryui.com/accordion/

So, I guess this is the event: http://api.jqueryui.com/accordion/#option-event which the developer is referring to. kindly check." Does this help or make sense? Cheers!
icc's picture

Ok, I see. What we can try to do is add the following code at the end of this file: wp-content/themes/capture/js/imagesloaded.min.js:

jQuery(document).ready(function () {
  setTimeout(function () {
    jQuery('.ui-accordion').on('accordionactivate', function (event, ui) {
      ui.newPanel.css('height', 'auto');
      jQuery(window).trigger('resize');
    });
  }, 0);
});

Now when you update the theme this code will disappear, so ideally the code should be put in a separate file in a custom plugin where you keep all your little hacks. But I will not cover that now since there are numerous other tutorials on how to create you own custom plugin.

You might need to empty your browsers cache (Ctrl+Shift+Del) to get the new code running. Let me know if it works for you.

febster's picture

Thank you! That's great. Will check out how to implement. Really appreciate the work put into this! Will post something here when it's up and running!

Kind regards,

Chee En

febster's picture

Yes, I got it to work in Safari and Chrome no problem. :-) But Firefox for my test page (www.chinesebuddy.com/aaaaa) for some reason does not seem to be recognising the sizing...I'm guessing Firefox is going about how it knows sizing differently than other browsers. Is there anyting I should be looking to add to my little plugin to remedy the issue for Firefox? 

 

icc's picture

Are you still having issues with Firefox? You could try updating the line:

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

to:

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

and see if that works better.

I've tried to docment this "fix" here: http://h5p.org/node/2766

febster's picture

Yes, will give it a go. The Firefox problem has persisted, so hopefully this is the fix! Many thanks!

febster's picture

I had my support try it in the plugin create to fix the accordion sizing the H5P content on www.chinesebuddy.com/aaaaa They said the above code wasn't able to remedy the problem in Firefox. Not quite sure if there's a remedy.

Here's the quote from my website support:

 "The problem is with the script itself and since the code is coming from an iFrame we can't change the height in our side. "

Many thanks for your continued help.

icc's picture

It seems like there might be some race conditions happening between the scripts in Firefox. You could try to increase the }, 0); to }, 1000); or something. Another way of solving this might be to move the script tag with the fix futher down on the page. Ideally I think the script should run after js_composer_front.js, So you could try inserting it just before the /body tag and see if that helps.

febster's picture

Yes, giving it a go now. Will see what happens!

febster's picture

Hey there. Many thanks for the suggestions. Didn't seem to work. Any other ideas? At this point I pretty much willing to let it go. Will just have to limit myself to 1 h5p content type per accordion.

Here's what we tried but failed:



I have applied to defer the loading of the plugin script so that this will be called at the last of the action. I have also applied the H5P suggestion which the load will be 1000.
icc's picture

That is unfortunate. I'm guessing it's not easy to time everything in the correct order when using multiple plugins. Perhaps it would be easier if the resizing was done by the plugin starting the .accordion(). You could try to modify the visual composer scripts, but then you'll have to add the fix each time you update the plugin.

Beyond that I don't have any good suggestions. Perhaps the easiest solution is to just avoid using multiple H5Ps in the accordion.

febster's picture

Yes, in the end will just let this one rest...I seem to fix one issue, but it creates a completely different one. 

Anyhow, many thanks!