Help! - Major problem with Iframe theme previewer

Does anyone know what to do about this issue? Envato support, anyone? We unfortunately have had to add a script that removes the TF iframe as that’s the only way to correctly display the demo on all devices. However, the sales conversions are lacking because there isn’t a purchase link. Does anyone have a clue what’s going wrong? I’d LOVE to get this fixed!

Prothemeus said
Does anyone know what to do about this issue? Envato support, anyone? We unfortunately have had to add a script that removes the TF iframe as that’s the only way to correctly display the demo on all devices. However, the sales conversions are lacking because there isn’t a purchase link. Does anyone have a clue what’s going wrong? I’d LOVE to get this fixed!

Just put your own iframe around with the purchase link.

Use this as a starting point: http://themeforest.net/forums/thread/introducing-item-switcher/42612?page=1

Unfortunately we have already tried such a thing and the mobile versions still showed incorrectly. I’m getting a bit desperate right now, we have worked so hard on the theme and now it looks messed up because of the TF iframe, we have no idea where the issue is coming from.

Actually I have no idea on how a iframe could mess up a website. Could you post a screenshot or describe in detail what happens? Does it only happen in the desktop mode or only after resizing?

I have no idea either, I thought an iframe is pretty straight forward but no. What happened is that when visiting the demo through the live preview link, the mobile versions were messed up, the tablet’s portrait mode showed up as landscape mode and the demo was tiny on the mobile phone. It only happened on the mobile devices and after resizing the browser ofcourse. If you visit the demo via the direct link, it shows perfectly fine.

Prothemeus said
I have no idea either, I thought an iframe is pretty straight forward but no. What happened is that when visiting the demo through the live preview link, the mobile versions were messed up, the tablet’s portrait mode showed up as landscape mode and the demo was tiny on the mobile phone. It only happened on the mobile devices and after resizing the browser ofcourse.

Are you using the .resize(); event in your theme? I had quite similar problems with my own iframe until I reworked my Javascript on behalf of the .resize event which excutes/re-executes code upon resizing.

I’ll have to ask the developer on monday when he returns, could you perhaps be a bit more specific regarding the resize event? Thanks for your time even if it might not help!

In my latest template I needed to adjust the height of various DIV Container to the height of the window. Means if the window is 955px the DIV ’s also get each a height of 955px. My function looks like this:

var windowWidth        =    $(window).width();
var windowHeight    =    $(window).height();

if (windowWidth >= 769) { 
    $('.section, #page-side .wrapper').css('minHeight', windowHeight + 'px');
} else {
    $('.section, #page-side .wrapper').css('minHeight', 'auto');
}

That worked pretty fine – but this doesn’t get adjusted when a user resizes the browser. I mean if the website gets loaded on the desktop it gets a height of 955px for example and when the page gets loaded it gets a height of 480px. But if it gets loaded on a desktop and the user manually resizes the height remains the same.

The solution was to wrap my code in a function which I can execute on load and on resize.

function sectionHeight() {
    var windowWidth        =    $(window).width();
    var windowHeight    =    $(window).height();

    if (windowWidth >= 769) { 
        $('.section, #page-side .wrapper').css('minHeight', windowHeight + 'px');
    } else {
        $('.section, #page-side .wrapper').css('minHeight', 'auto');
    }
}

sectionHeight();

$(window).resize(function() {
    sectionHeight();
});

that would probably the solution for you as well.

Thanks a lot Infuse for your help, I will definitely let you know on Monday if your code was a solution. Thanks!