Saturday, January 1, 2011

How To Use frames In A Better Way!

Posted by Shiva Gouraram | Saturday, January 1, 2011 | Category: , |


Hello viewers,I have been googling from so many days on how to use iframes(frames) in a better way for my website.but i did'nt find a perfect solution for what i want,so me and my friend started thinking on it,atlast we find a simple and better solution on how to use frames in a website!
let us start,assume you have a website in which you have to just change the required content and the remaining content shoud be sticky,ex consider this blog we have same sidebar contents in every page and just the post contents are changing in every page,so it is a best way to use iframes here which makes total page to remain same and just changes the centre part but in blogger it is not possible to do so,thus we cant use frames just for changing the post content in blogger blogs,but if you have your own website you can simply use frames for a fast loading and saving bandwidth.
Now we understood why to use frames,let us start how to use them,
To use frames first of all we need to know which part of the page must be change and which content must be sticky,for example consider gmail initially it loads inbox but if you need to access starred mail you need to click on  starred do you observed any  time as soon as you clicked,only inbox gets disappeared and in that place you see your starred mail content,thus that is the place where you need to change and remaining must be left same!


so let us start now,keep this piece of html code where you need to change your content.

<iframe id="frame" src="someurl.html">
</iframe>
That`s it the place where you insert this code will be changed according to links you put.
To make changes we have to add a piece of javascript code to menu links or wherever you put a navigation!
consider a simple list,
ex:

<div class="container">
<ul class="menu_body">
<li><a href="google.com">google</a></li>
<li><a href="yahoo.com">yahoo</a></li>
<li><a href="bing">bing</a></li>
<li><a href="blogger.com">Blogger</a></li>
</ul>
</div>

Now we add javascript for our list item`s,ex:
Now replace the code
<li><a href="google.com">google</a></li>
With below code
<li><a onclick="document.getElementById('frame').src='www.google.com';">google</a>

if you click on the list item your page where you inserted iframe will be changed according to the given link.
Hope you all liked this post!
reply to post if you have any doubt!
Thank u!
Share/Bookmark

Currently have 0 comments:


Leave a Reply

Subscribe