Height/Width of embed inside of tab containers

  • Resolved ericbrissette

    (@ericbrissette)


    5 months ago

    I’ve got PDFs embedded in tabs (Kadence Blocks tab element). Some of the PDFs don’t work with the auto width/height when you switch to their associated tab.

    I did notice that if you resize the browser window, the PDF would adjust and properly fit to the container. I added a script to send a resize event after a tab is clicked, but it hasn’t worked. Is there some other function I can use to force the plugin to refresh the PDF or recalculate the size?

    <script>
    const tabTitles = document.querySelectorAll('.kt-tab-title');

    for (const tabTitle of tabTitles) {
    ? tabTitle.addEventListener('click', function() {
    ? ? setTimeout(() => {
    ? ? ? window.dispatchEvent(new Event('resize'));
    ? ? ? console.log("resize event");
    ? ? }, 300);
    ? });
    }
    </script>

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @ericbrissette,

    Thanks for reaching out and I sincerely apologize for the delay in getting back to you.

    I checked the page URL you shared and noticed inconsistencies when I navigated through the tabs. Sometimes the PDFs appear just fine, and sometimes they don’t.

    To look into this properly, I’d like to get some clarification from you regarding your current plugin settings:

    1) Can you please ensure you are using the latest version of the plugin and WordPress as well?

    2) Please share a screenshot of your current PDF Embedder global settings (Settings > PDF Embedder > Settings tab). Only share the Default Viewer Settings and Miscellaneous sections. Please be sure not to share any sensitive information regarding your site, as this is a public forum.

    3) How are you embedding the PDFs into the tabs? Are you using the Gutenberg block or are you inserting a shortcode?

    Once we have a bit more information, we can better understand the context and explore potential solutions for you.

    Please let me know. Thanks ??

    Thread Starter ericbrissette

    (@ericbrissette)

    I just updated to the latest version of Kadence Blocks / Kadence Blocks Pro. PDF Embedder was already at the latest version (4.8.2).

    Here’s the screenshot of my settings: https://imgur.com/a/kf5YwSw

    I wasn’t aware there was a Block for the plugin. PDFs under the tabs for “Survey 4” and “Survey 5” are now both Blocks. The rest use the Shortcode. It doesn’t seem to have made a difference one way or the other.

    Thank you for checking it out!

    Plugin Author Slava Abakumov

    (@slaffik)

    Hello there,

    I’ve tried the Kadence Blocks > Tabs block, and here is the snippet that I came up with that works:

    // Kadence Blocks - Tabs.
    add_action( 'wp_footer', static function () {
    	?>

    	<script>
    		const tabTitles = document.querySelectorAll( '.kt-tab-title' );

    		for ( const tabTitle of tabTitles ) {
    			tabTitle.addEventListener( 'click', function() {

    				let tabs = tabTitle.closest( '.kt-tabs-wrap' );

    				let tabNumber = tabTitle.classList.value.match( /kt-tab-title-\d+/ )[ 0 ].replace( 'kt-tab-title-', '' );

    				setTimeout( function() {
    					jQuery( '.kt-inner-tab-' + tabNumber + ' .pdfemb-viewer', tabs ).pdfEmbedder( pdfemb_trans.cmap_url );
    				}, 300 );
    			} );
    		}
    	</script>

    	<?php
    } );

    Please let me know how it works for you.

    Thread Starter ericbrissette

    (@ericbrissette)

    That works great, thank you for your help, I’ll be sure to buy a license for the pro version.

    Plugin Author Slava Abakumov

    (@slaffik)

    Hey @ericbrissette,

    That’s awesome, thanks for confirming it works for you.

    That snippet is specific to the free version of the plugin, and it will not work for a paid one, but feel free to contact us via a support form on our side when/if you need that same thing for the paid version.

    Have a nice week.

    Thread Starter ericbrissette

    (@ericbrissette)

    Is this because the paid version still needs to be refactored as it seems the free version has? There are no features that I currently need in the Paid version, I just want to support the project.

    Plugin Author Slava Abakumov

    (@slaffik)

    No, the reason is completely different.

    The paid version uses a completely different way to embed PDF which allows us to give uses more features (like watermarking, more granular control over what is displayed in the PDF Viewer), etc.

    So architecturally, they are different in a way PDF Viewer is embedded and rendered on a page, and all the JS code and HTML markup is also different.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.