EverWeb Widgetbox

Insert iFrame Widget

Insert iFrame


iFrames are really useful for inserting all sorts of documents into web pages. Long documents can be made to take up less space due to the iframe's inherent ability to create scrollbars if the document is bigger than the frame. This widget makes it a breeze to insert them in EverWeb.

There are a lot of redundant iframe codes out there on the world wide web. This one uses HTML5 compliant code and CSS3 to create a far superior iframe.

Drag the widget onto the design canvas, enter the URL to the file and click the "Apply" button.

Stretch the frame out to the required width and height and it's done.

The web page should be at least 40px wider than the inserted document to avoid the appearance of horizontal scrollbars.

The iframe example shown below contains a horizontal accordion style slider with captions and hyperlinks. This is created on a separate HTML document which is uploaded to the server and referenced using a relative URL. See THIS page for info about relative and absolute URLs.

Find out how to create iframe content without using code HERE.

Horizontal Accordion Slider With Captions & Hyperlinks

iFrames & Mobile Devices

NOTE: Due to a limitation in iOS, the scrolling function doesn't work with iframes and content is displayed full height.

If you are using an iframe to display content on iOS devices such as the iPad or iPhone, you need to drag the snippet downwards until the vertical scrollbar disappears. Remember that quite a few visitors will view the conventional version of the site on tablets such as the iPad!

An iOS compatible styled iframe for creating scrolling content on iPad/iPhone can be found in the More section.

Get The Widget