Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    6
    Thanked 0 Times in 0 Posts

    display: none not working in all browsers. Need to hide iframe.

    Hi,
    I'm designing a responsive website. I have three iframes that I need to hide or display depending on the viewport width. I have linked 3 separate css files that will I'm using so that when the min-width changes, the iframes I don't want to show should not display.

    It works great in Safari and Chrome (only one iframe displays at each size), but not in Firefox and Internet Explorer (it shows all three iframes at once), and none of the iframes are displaying in Opera.

    I've been tearing my hair out for days and I can't find any solution...
    Here is a link to the page:
    http://hometownneighbors.com/NEW%20H..._Magazine.html

    Here's the html:
    <iframe id="largemagrack" src="http://files.flipsnack.com/iframe/embed.html?hash=fzjf23fj&wmode=window&bgcolor=EEEEEE&t=13649184961347039369" width="640" height="385" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
    <iframe id="medmagrack" src="http://files.flipsnack.com/iframe/embed.html?hash=fzjf23fj&wmode=window&bgcolor=EEEEEE&t=13649184961347039369" width="530" height="385" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
    <iframe id="smallmagrack" src="http://files.flipsnack.com/iframe/embed.html?hash=fzjf23fj&wmode=window&bgcolor=EEEEEE&t=13649184961347039369" width="350" height="385" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

    and here's the css for large layout:
    #medmagrack { display: none; position: relative; }
    #smallmagrack { display: none; position: relative; }
    Here's the css for medium layout:
    #largemagrack { display: none; position: relative; }
    #smallmagrack { display: none; position: relative; }
    and small layout:
    #medmagrack { display: none; position: relative; }
    #largemagrack { display: none; position: relative; }

    Any help is greatly appreciated!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,720
    Thanks
    25
    Thanked 662 Times in 661 Posts
    Personally I hate iframes so my solution would be to just design three html files by using different styling one for each width and control what is displayed with responsive design:
    Adding the css with these:
    /* Large desktop */
    @media (min-width: 1200px) { ... }

    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) { ... }

    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) { ... }

    /* Landscape phones and down */
    @media (max-width: 480px) { ... }
    In your css section.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    6
    Thanked 0 Times in 0 Posts
    The problem with that is, I have three different pages in this site that need to hide iframes, not just this one. If I made three different pages for each one, that's nine html files to accomplish this. There has to be an easier way.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by glowingnova View Post
    The problem with that is, I have three different pages in this site that need to hide iframes, not just this one. If I made three different pages for each one, that's nine html files to accomplish this. There has to be an easier way.
    Have you tried replacing the non-standard iframe tags with standard object tags that the browsers are more likely to understand?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,720
    Thanks
    25
    Thanked 662 Times in 661 Posts
    To help you understand read this http://mashable.com/2012/12/11/responsive-web-design/

    Than have a look at this http://www.smashingmagazine.com/resp...nes-tutorials/

    Responsive Design is about using css3 to alter the html for different viewing widths.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •