CODEWITHSUNDEEP
javascripthtmliframe
eric-o
eric-o

Reputation: 65

How to control the <iframe> scroll parameter based on screen width?

I'm trying to find a way to make an iframe control it's scrolling behavior so that when it renders on a screen with a width of greater than "X", then the iframe scroll parameter is set to "no" and then the iframe scroll parameter is set to "auto" when the screen width is below "X".

I understand that iframes are outdated, but I'm working with a very antiquated CMS that doesn't allow for anything else but this 'nuclear' option.

Most of the JavaScript I'm using is the 'fluid' iframe stuff from dyn-web.com (http://www.dyn-web.com/tutorials/iframes/fluid/).

Upvotes: 0

Views: 432

Answers (1)

leoLR
leoLR

Reputation: 487

You can use CSS Media rules for example:

@media only screen and(max-width: 600px){
     #idiFrame{
          height: 500px;
          width: 500px;
          overflow: scroll;
      }
}
@media only screen and (max-width: 1200px){
#idiFrame{
height: 1000px;
width: 1000px;
overflow: hidden;

}
}

Upvotes: 1

Related Questions