home

one column

two column

three column

tutorials

Changelog:


Iframe tutorial


An Iframe is an element that allows you to view a webpage within a webpage. this is what i use on my main site Pomelo. this can be useful when you want to have something like a music player on your page that can view other pages within the frame while keeping the main layout loaded. I will show you how to add and resize and customize your frames.

Another example of where I use Iframes is on this premade layouts page! I use it on the changelog so I don't have to update it on every page of this site, the only page that needs updating is this one.

adding your iframe


Add the iframe code to the <body> tag, it can be place in any <div> element and resized to fit.

Here is the code:

linking and resizing your iframe


Lets say we wanted to display this test page in our iframe, of course you would use this to link to another page on your site but for example we will use this.

as you can see, this is not just a scroll box div element but instead a whole seperate page being displayed within an Iframe that scrolls.

the code we used to display the test page is:
<iframe src="https://pomelo.neocities.org/premades/tutorials/iframes/testpage.html" height="200" width="600"style="border: none;"></iframe>

Feel free to experiment with linking pages on your site this way, it allows for faster loading, seperate css and not disturbing things like gifs, music players, videos and just makes your site all around cooler in my opinion!