Grow your CSS skills. Land your dream job.

iframe troubles

  • # January 20, 2013 at 12:45 pm

    Hi there,

    I’m having some trouble with iframes and i was hoping someone on here would be able to help.

    I’ve had this in place for sometime and it’s worked great but it has all of a sudden stopped working.

    On this site, http://orchidaberdeen.com/ i use iframes to get the gallery section working the way i need it to.

    It worked great until now as this error **Uncaught TypeError: Cannot read property ‘safari’ of undefined** has appeared.

    I was hoping someone would have some insight to why this has all of a sudden appeared and how can i fix it?

    Many Thanks,

    Cameron

    # January 20, 2013 at 12:54 pm

    i’m not seeing the problem. Can you describe what your trying to do in better detail?

    # January 20, 2013 at 1:13 pm

    @Jarolin Sure no problem. Thanks for getting back to me.

    If you go to the site and navigate down to the gallery section click on one of the circles the site should open up to reveal the image thumbnails.

    Those thumbnails should stretch to the whole width of the browser but they don’t and it’s because of an error on line 18 of iframe.js which reads,

    “Uncaught TypeError: Cannot read property ‘safari’ of undefined”

    It used to work no problem but now it doesn’t. Do you have any thoughts on why this could be?

    Thank you,

    # January 20, 2013 at 1:26 pm

    Telling from the source code, it looks like the thumbnails are inside a div that is far too small, and the thumbnails are the size corresponding to the small dive they are inside of. I can’t edit the source code and test it out myself.

    # January 20, 2013 at 1:31 pm

    Here’s another theory. The width and height of the iframe might not be right. So make sure to check that.

    # January 21, 2013 at 7:38 am

    @Jarolin thanks for your comments but the iframe widths are set to a 100% so that shouldn’t be causing the problem. I think it’s got something to do with the **iframe.js** file

    I’d appreciate any input anyone has on this as i’m pretty stumped?

    # January 21, 2013 at 9:42 am

    Actually, you didn’t set the width of the iframe to 100%, but the MAX-width. You might want to try changing it to width:100%;.

    (Gives some trouble with the height of the iframe though)

    # January 21, 2013 at 5:21 pm

    You’re loading up this to load jQuery:

    http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

    That will link to the latest version of jQuery 1.x which is now jQuery 1.9. In this version of jQuery, $.browser is deprecated (or just straight up gone I think).

    You could go back to an older version of jQuery or root out why that was in there in the first place (maybe it isn’t need anymore).

    # January 24, 2013 at 11:49 am

    @senff thank you for your suggestion. Yeah it seems to give me some beef with the height. I’ve found a work around, it’s messy but i’ve basically written some if statements so the browser changes the height of the iframes body at different screen breakpoints, i’ve kinda lost the ‘responsive’ nature of it.

    @chriscoyier – thanks for the heads up, i should really keep a closer eye on jQuery updates. I think you were right, it seems to have been straight up removed!? It weird, when i took out the $.browser it worked just fine except the iframes height went a bit wonky.

    Thanks for all your help guys. :)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".