Question

What I’m trying to do is to resize a fancybox iframe and I thought I succeeded by calling:

parent.jQuery('#fancybox-inner').css({'height': '450px'});
parent.jQuery('#fancybox-wrap').css({'height': '550px'});

But when deploying this to my stage area that works in https this solution doesn’t work and I guess it has to do with the https part. I tried to google this but I didn’t find any suitable solution. Could please help me and remember that I’m a JS newbie.

Code:

jQuery().ready(function() {
    jQuery('#no_user').click(function () { 
        if (jQuery(".temp_expand").css("display") == "none") {
            jQuery(".temp_expand").slideDown();
                parent.jQuery('#fancybox-inner').css({'height': '450px'});
                parent.jQuery('#fancybox-wrap').css({'height': '550px'});
            }
            else {
                jQuery(".temp_expand").slideUp();
                jQuery(".temp_expand").css("display", "none");                    
                parent.jQuery('#fancybox-inner').css({'height': '850px'});
                parent.jQuery('#fancybox-wrap').css({'height': '950px'});
            }
            }).toggle(function() {
                jQuery('#temp_no_user').text("#{messages['login']}");
            }, function() {
                jQuery('#temp_no_user').text("#{messages['register']}");
            });           

        });

EDIT START

I’m getting a JS error:

Error: Permission denied to access property 'jQuery'
Source File: https://stage.temp.se/login/login
Line: 185

EDIT END

Answer 1

It sounds like you have the page as https and the frame source http – or vice versa. This might help if that’s the case:

Updating a http parent page from a https page via Javascript

Allowing HTTP iFrame to call JavaScript on HTTPS parent frame