Need an alternative to HTML frames (I now know why they're evil)

Just to summarize, I'm trying to make a live page render (browse websites) while having an overlaying menu for functionality.

I may have made a mistake in how I designed my application and need an alternative to frames. Any advice is appreciated on this.

So the goal of the application is analyzing web content. Its got a global menu with the usual stuff: profile, sign out, settings. A global footer with the standard legal stuff and in the middle is where all the functionality comes in.

I knew that one of the functionality was a live render of the site with a menu overlaying at the bottom. With it, they could view elements and write up comments on what was there.

Each function was embedded inside a frame so if i clicked the page view button, the frame would shoot off to the frame page and relay it. Heres the problem. In order to get a live render of a site and using it this way, I had to put a frame inside a frame and thus duplicate scroll bars were born.

If anyones confused as to how the layout works there are 2 shots here. http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=pageviewlayout.jpg And a cleaner designer model (mainly just global menu) http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=globalview.jpg

I've got the coding it and for the overlaying menus, I tried both an accordion and a css style thing that slides. You can take a look at the code here.

GLOBAL MENU: save this as global.html.erb http://paste.ubuntu.com/648135/

PAGE VIEW: save this as pageview.html.erb http://pastebin.ubuntu.com/648146/ Once you've done this, it should work as you'd expect.

The technology or way its done is option but the design is not. Just looking now, on the page view at the bott开发者_如何学Goom of live website but above the footer. There needs to be an overlaying menu that slides in an out. If anyone has any ideas on how to implement a live view of a site and an overlaying menu, I'm all ears.

Thank you

Quick Summary:

What I'm trying to achieve is an application that has a global menu that stays consistent across all pages. In the middle of this global menu is a frame that goes to other pages that I've created, e.g list view, statistics and page view.

Page view is the one I'm working on at the moment. In the page view there are 2 components, Live view of website (whatever page they want) and an overlaying menu at the bottom. Think like youtubes playlist on bottom of page. The problem is that in order to put this live render of a website in the frame, you have an iframe within an iframe and I;m trying to resolve that.

But rather than treat it as a bug, I'm looking for alternatives to how I can achieve the above

My final solution available on pastebin: page view: http://paste.ubuntu.com/648246/

Global view: http://paste.ubuntu.com/648250/

Basically this jQuery('#iframeWrapper').height('61%');

This is a quick demo of CSS and divs - you might be able to do what you want using this method.

<style type="text/css">
#holder {position:absolute;left:0;top:0;width:425px;height:350px;z-index:1;}
#menu {position:absolute; left:0;top:300px;height:50px;background-color:#f0f;width:425px;z-index:10;}
</style>

<div id="holder">

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=firebox&amp;aq=&amp;sll=53.800651,-4.064941&amp;sspn=17.72791,44.736328&amp;ie=UTF8&amp;hq=firebox&amp;hnear=&amp;z=5&amp;iwloc=A&amp;cid=2836054255231781537&amp;ll=51.386465,-0.138487&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=firebox&amp;aq=&amp;sll=53.800651,-4.064941&amp;sspn=17.72791,44.736328&amp;ie=UTF8&amp;hq=firebox&amp;hnear=&amp;z=5&amp;iwloc=A&amp;cid=2836054255231781537&amp;ll=51.386465,-0.138487" style="color:#0000FF;text-align:left">View Larger Map</a></small>

</div>

<div id="menu">Nav / whatever goes here</div>

Also there is he option of using ajax to call content into the #holder div rather than using an iFrame too