Jump to content
dspolyglot

Auto-resize iframes containing report DataPages

Recommended Posts

Hi everyone,

Does anyone know how to automatically resize an iframe that contains a tabular report? I set the container iframe to a fixed width and height. However, that gives me too much space upon hitting the Search button and viewing the results page, which is larger than the search form.

I tried searching online but no luck. Please help.

Thanks in advance.

-dspolyglot

Share this post


Link to post
Share on other sites

You can try adding this code in the iframe deployment   frameborder="0" width="auto" height="auto"     or       frameborder="0" width="100%" height="100%"

 

Example of iframe deployment:    

<iframe frameborder="0" width="100%" height="100%" name="Multi Java and Format Mask" title="Multi Java and Format Mask" src="https://c2ffn194.caspio.com/dp.asp?AppKey=aa2840008e9f36cd7e654ff6bc34">Sorry, but your browser does not support frames.</iframe>

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hi dspolyglot,

You can also try the following:

  1. [RECOMMENDED] Create an external HTML file in your web hosting provider. [OR] you can also create an HTML DataPage.
  2. Use this code inside the <body> element:
  3. <!-- iframe container -->
    <div id="cb-iframe-container"></div>
    
    <!-- REFERENCE: http://stackoverflow.com/questions/9249680/how-to-check-if-iframe-is-loaded-or-it-has-a-content -->
    <script type="text/javascript">
        function checkIframeLoaded()
        {
            // Get a handle to the iframe element
            var iframe    = document.getElementById('cb-iframe-1');
            var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    
            // Check if loading is complete
            if (iframeDoc.readyState === 'complete')
            {
                // The loading is complete. Call the function we want executed once the iframe is loaded
                setIframeDimensions(iframe);
                return;
            }
    
            // If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds
            window.setTimeout('checkIframeLoaded();', 100);
        }
    </script>
    
    <script type="text/javascript">
        var previousHeight = '0px';
        var previousWidth  = '0px';
    </script>
    
    <!-- REFERENCE: http://www.dyn-web.com/tutorials/iframes/height/demo.php -->
    <script type="text/javascript">
        function setIframeDimensions(iframe)
        {
            var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
    
            // Reset to minimal height and width
            iframe.style.height = '10px';
            iframe.style.width  = '10px';
            iframe.style.visibility = 'hidden';
    
            // IE opt. for Bing/MSN needs a bit added or scrollbar appears
            iframe.style.height = getDocHeight(doc) + 4 + 'px';
            iframe.style.width  = getDocWidth(doc) + 4 + 'px';
            iframe.style.visibility = 'visible';
    
            // Detect height and/or width changes
            previousHeight = (iframe.style.height === previousHeight) ? previousHeight : iframe.style.height;
            previousWidth  = (iframe.style.width === previousWidth) ? previousWidth : iframe.style.width; 
        }
    
        function getDocHeight(doc)
        {
            doc = doc || document;
    
            // REFERENCE: https://stackoverflow.com/questions/1145850/
            var body = doc.body,
                html = doc.documentElement;
            var height = Math.max(
                body.scrollHeight, body.offsetHeight,
                html.clientHeight, html.scrollHeight, html.offsetHeight,
                600
            );
    
            return height;
        }
    
        function getDocWidth(doc)
        {
            doc = doc || document;
    
            // REFERENCE: https://stackoverflow.com/questions/1145850/
            var body = doc.body,
                html = doc.documentElement;
            var width = Math.max(
                body.scrollWidth, body.offsetWidth,
                html.clientWidth, html.scrollWidth, html.offsetWidth,
                1024
            );
    
            return width;
        }
    </script>
    
    <!-- REFERENCE: http://stackoverflow.com/questions/10418644/creating-an-iframe-with-given-html-dynamically -->
    <script type="text/javascript">
        // TODO: Change the site and appkey as necessary --> 
        var site   = 'YOUR_SITE.caspio.com'; // EXAMPLE: c5gaf330.caspio.com
        var appkey = 'YOUR_APPKEY';
    
        window.onload = function ()
        {
            parent.createIframe(site, appkey);
        }
    
        function createIframe(site, appkey)
        {
            var iframe = document.createElement('iframe');
            iframe.id  = 'cb-iframe-1';
            iframe.style.borderStyle = 'none';
    
            var customContent = document.getElementById('cb-iframe-container');
    
            var oldIframe = document.getElementById('cb-iframe-1');
            if (oldIframe)
            {
                customContent.removeChild(oldIframe);
            }
    
            customContent.appendChild(iframe);
    
            var link = 'https://' + site + '/dp.asp?AppKey=' + appkey;
            var id   = 'cb' + appkey;
    
            var html = '<scr' + 'ipt type="text/javascript" src="https://' + site + '/scripts/embed.js"></scr' + 'ipt><scr' + 'ipt type="text/javascript">try{f_cbload(true, "' + site + '", "' + appkey + '");}catch(v_e){;}</scr' + 'ipt><div id="cxkg"><a href="' + link + '">Click here</a> to load this Caspio <a href="http://www.caspio.com" target="_blank" title="Cloud Database">Cloud Database</a></div><div id="' + id + '"><a href="https://www.caspio.com" target="_blank">Cloud Database</a> by Caspio</div>';
    
            iframe.contentWindow.document.open();
            iframe.contentWindow.document.write(html);
            iframe.contentWindow.document.close();
    
            checkIframeLoaded();
        }
    </script>

    Don't forget to update these two lines:

        // TODO: Change the site and appkey as necessary -->  
        var site   = 'YOUR_SITE.caspio.com'; // EXAMPLE: c5gaf330.caspio.com
        var appkey = 'YOUR_APPKEY';

Hope this helps.

-nightowl

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...