CI and a design using frames... (Im)possible?

[eluser]baZzz[/eluser]
Hi all,

I'm getting frustrated so I'm turning to you guys for help. I have to build a site for which the designer has very specific ideas concerning his design. To get an idea, this is what it looks like: http://metaminds.nl/obg/

As you can see, when you resize the browser window, only the content windows gets a scrollbar. The designer specifically wants this, so the header (containing the search form) and footer are always visible. The only way I can get it to work like this, is by using frames. However, I have no idea how to implement this with CI. Actually, I think it's not even possible. So I wanted to check with you guys if this is the case or that I'm overlooking something. If I'm getting in over my head here by trying to realize it with frames, I just tell the designer it's not possible and convert the page to a 1 page layout again.

Thanks for helping me out!

[eluser]Derek Allard[/eluser]
If I needed to code that, I'd probably throw that "frame" into a div and use CSS to give it a height and scrollbars.

Code:

<style>
#fake_frame {
     height: 300px;
     overflow: scroll;
}
</style>
<h1>My site heading</h1>
<div id="fake_frame">
   content goes here...
</div>

[eluser]baZzz[/eluser]
Well Derek, I would too if only that worked... :-)

The problem with that solution is that I do not know what the height of the browser window is. If you look at the example I gave, no matter how you resize your browser, the footer and header remain visible. You could give the div a height of 100%, but this doesn't work as well. I could try to detect the browser height using javascript, subtract the height of both header and footer and insert that dynamically into the CSS for the div height, but I don't think that is a failsafe and therefor viable solution.

Thanks for replying though. I assume that sticking to the frames is not going to work?

[eluser]Derek Allard[/eluser]
try

Code:

<style>
html, body {
     height: 100%;
}

#fake_frame {
    margin-top:100px;
     height: 100%;
     overflow: scroll;
}
</style>
<div id="fake_frame">
   content goes here...
</div>

[eluser]baZzz[/eluser]
Thx again Derek, but did you test this yourself?
This is the result: http://www.metaminds.nl/derek/
Doesn't work in FF, nor in IE.

As far as I know, you'll cannot achieve the same result as the frames pages using only a singe page and CSS. If anyone will be able to do so, I'd be more than happy to pay for it.

So to get back to my earlier question, CI and a frames layout in one sentence is a nono, right?

[eluser]Derek Allard[/eluser]
That is working for me. The problem in your example is that you still have the h1 in there with a height of 100px, thus, your fake_frame is 100% of the screen, plus 100px. That said, I agree it isn't very elegant, and if you think frames are the way to go, just call your frames. The src would probably be easiest set via site_url() or base_url().

[eluser]baZzz[/eluser]
Alright, I see what you mean now and it isn't very elegant indeed (actually, it's plain 'ol ugly! :-). But I still don't get how I can use frames and CI. In the first example I gave you (http://www.metaminds.nl/obg) the search form is the top frame. How can I pass the variables from that form to the content frame below? And how to pass the resulting data to the content form? I honestly haven't got a clue...

[eluser]Derek Allard[/eluser]
Are you able to do this outside of CI?

I would do it with a frames controller. The frames controller would have an index that loaded a view with the frameset. It would also have a "top" and "bottom" method, which would just be views for the top and bottom.

[eluser]baZzz[/eluser]
It took me some time, because I didn't understand entirely what you meant. But I do now and it is even working! Thx for the help Derek!