0

I have a widget from truspilot that makes an iframe that I'm trying to make responsive. I've searched for hours on SO to find how to do this, but no solution seems to work for adjusting my height and width responsively.

JSFIDDLE

Here is the widget

<div class="tp_-_box" data-tp-settings="domainId:3660907">
    <a href="http://www.trustpilot.com/review/www.longtiestore.com" rel="nofollow" hidden>Long Tie Store Reviews</a>
</div>
<script type="text/javascript">
    (function () { var a = "https:" == document.location.protocol ? "https://ssl.trustpilot.com" : "http://s.trustpilot.com", b = document.createElement("script"); b.type = "text/javascript"; b.async = true; b.src = a + "/tpelements/tp_elements_all.js"; var c = document.getElementsByTagName("script")[0]; c.parentNode.insertBefore(b, c) })();
</script>

I my iframe width is working fine with just:

iframe {width:100%}

but there is an element within the iframe that needs to be set to 100% in order for the layout to work.

.tp-box {width:100%;}

But I can't stylize content within the iframe from the parent. So I've tried adding: 

window.onload = function () {
    if (parent) {
        var oHead = document.getElementsByTagName("head")[0];
        var arrStyleSheets = parent.document.getElementsByTagName("style");
        for (var i = 0; i < arrStyleSheets.length; i++)
        oHead.appendChild(arrStyleSheets[i].cloneNode(true));
    }
}

but with no success.

So what can I do to make the width and height fluid?

stevenspiel
  • 5,775
  • 13
  • 60
  • 89

3 Answers3

2

I had a similar problem recently, specifically making the width match the parent div and also respond. I couldn't work out why Trust Pilot thought it appropriate to set something to make the height of the frame dynamic and not the width, but anyway.

Firstly, I had some CSS for the parent div, like:

<style type="text/css">
div.trust-pilot{
    width: 100% !important;
    height: auto;
}
</style>

This may not actually be necessary, but I put it there anyway.

These are the 'trustbox' settings I used (see http://trustpilot.github.io/developers/#trustbox):

<div id="trust-pilot" class="trust-pilot">
    <div class="tp_-_box" data-tp-settings="domainId: xxxxxxx,
    bgColor: F5F5F5,
    showRatingText: False,
    showComplementaryText: False,
    showUserImage: False,
    showDate: False,
    width: -1,
    numOfReviews: 6,
    useDynamicHeight: False,
    height: 348 ">

</div>
<script type="text/javascript">
    (function () {
        var a = "https:" == document.location.protocol ? "https://ssl.trustpilot.com" : "http://s.trustpilot.com", b = document.createElement("script");
        b.type = "text/javascript";
        b.async = true;
        b.src = a + "/tpelements/tp_elements_all.js";
        var c = document.getElementsByTagName("script")[0];
        c.parentNode.insertBefore(b, c) })();
</script>
</div>

Replace the domainId with something valid (in the case of this question, it's 3660907). Note that the width: -1 parameter might work already for you except if you want the page to be responsive (that is below).

Firstly, to make the width match the parent div, I used:

<script type="text/javascript">
jQuery( window ).load(function() {
    _width = jQuery('#trust-pilot').innerWidth();
    jQuery('#tpiframe-box0').attr('width',_width);
});
</script>

And then to make the box respond, I used:

<script type="text/javascript">
jQuery( window ).resize(function() {
    _width = jQuery('#trust-pilot').innerWidth();
    jQuery('#tpiframe-box0').attr('width',_width);
});
</script>

I hope that this helps. Shaun.

Shaun Bebbington
  • 49
  • 4
0

See Making an iframe responsive :: this comment in particular:

The iframe itself ('the box') can be responsive. But everything inside the iframe is a separate page, and therefore not in the domain of your CSS nor JS. – DA. Jul 25 at 20:12

Community
  • 1
  • 1
JonathanR
  • 48
  • 1
  • 4
  • is it possible to detect when the iframe has loaded and then add the css with javascript? http://stackoverflow.com/questions/751435/detecting-when-iframe-content-has-loaded-cross-browser – stevenspiel Dec 16 '13 at 19:25
  • I get the impression this is a $1million question. One would think you could read the HTML from the iFrame and then write styles and formatting on top of the iFrame. So far, I've never been able to pull that off. I'll be curious to see if anyone else can shed light on this. – JonathanR Dec 16 '13 at 19:27
0

Easiest way around this is to identify how many responsive states there are, for example: if you have four different width's in your responsive theme then you simply create four different css rules and include the display tag (example below if for the main css):

.trustpilot_a {display:block;}
.trustpilot_b {display:none;}
.trustpilot_c {display:none;}
.trustpilot_d {display:none;}

Then wrap your 'trustbox' code in the div named 'trustpilot_a' with the correct size of the width required (below is an example of 210px required width):

<div class="block trustpilot_a">
<div class="tp_-_box" data-tp-settings="domainId:[your number],
linkColor:59962B,
fontColor:4077BD,
bgColor:ECF1F3,
bgBarColor:4077BD,
borderColor:D3EAF8,
width:210,
fontBarColor:4077BD,
useDarkLogo:False,height:100">
<a href="[your trust pilot domain]" rel="nofollow">[your title]</a></div>
<script type="text/javascript">// <![CDATA[
    (function () { var a = "https:" == document.location.protocol ? "https://s.trustpilot.com" : "http://s.trustpilot.com", b = document.createElement("script"); b.type = "text/javascript"; b.async = true; b.src = a + "/tpelements/tp_elements_all.js"; var c = document.getElementsByTagName("script")[0]; c.parentNode.insertBefore(b, c) })();
// ]]></script>
</div>

Then duplicate four times changing the class to 'a (with width:210)', b (with width:190) etc etc. Paste them all into your code and just change the 'display' setting in your responsive theme for the 'width' you need it to be.

Happy Days

Mattisfaction
  • 11