Frames Alternatives

[Wyndru]

I'm really having a hard time maintaining one of my pages that has a couple of frames on it (top, left nav and main), and I'm looking to replace them with something a little easier to modify, and simpler to achieve the style I want. I've read about the following alternatives:

iframes
server side or php includes
javascript

I don't want the js requirement, and I'd like to avoid iframes so that leaves me with the option of server side or php includes. I have PHP 5 running, so I'd like to take advantage of this, but I'm not sure if it is the easiest to maintain.

Basically it's a simple page that will have a nav bar along the left with dynamically assigned links. I already have this part working in frames, but I guess I'll need to update it to work as an include.

I'm just looking for something to cleanly update the main part of the page when a link is clicked, and let the link stay highlighted in the left frame. The way I have it now, I'm using CSS's active and focus styles, but when the user clicks on a link in the frame (or anywhere on the page), the highlight removes itself, since the left frame no longer knows which page they are on. I think as a workaround I could reload the left frame and pass the main page name each time a link is clicked, but it seems without frames this might be a lot easier to manage.

Overall this should be simple to set up, I'm just wondering if anyone has any preference to server side or php includes, or if either has an advantage. They seem very similar to me, but I've never used them so I could be overlooking something.

Thanks!

 

[Cogman]

Why don't you want the javascript requirement? For a simple static page, a javascript solution sounds like it would be better than using some server side language.

 

[Wyndru]

Why don't you want the javascript requirement? For a simple static page, a javascript solution sounds like it would be better than using some server side language.

Some of the locations that this site will be used will not have java installed, or the ability to do so (or flash). I've started converting over to php already, and it's actually much easier for me to understand. I think I'm going to go that route.

 

[Crusty]

java != javascript

All modern web browsers have javascript built-in.

 

[Wyndru]

java != javascript

All modern web browsers have javascript built-in.

Oh, I need to check my code then, I think something is broken. When I test it on computers without java installed, some of the functionality fails (certain mouseover effects and image resizing code).

If you can't tell by my last post, it's been a long time since I've worked on this page (or web dev in general). I don't remember what or how I did half of this stuff, it was a mashup of frames, tables java php and html. I have no idea how it even works. I think the last time I touched it was 10 years ago.

Either way, I'm enjoying messing around with php, I might just continue with this.

 

[jvroig]

Oh, I need to check my code then, I think something is broken. When I test it on computers without java installed, some of the functionality fails (certain mouseover effects and image resizing code).

May just be a coincidence. Whatever the case, your compatibility concern is still warranted. It is browser-dependent, so you have to program for IE6, IE7 (to whatever it is now, 9?) Firefox, Opera, etc. Something you wrote that works on your machine using your favorite browser may not work on a different machine using a different browser.

So you either go through the trouble of making sure your js code is cross-browser compatible, or you use jquery (or your preferred js library, but jquery is the right choice ).


As a side note, a side effect with relying entirely on PHP to "include" your header and nav bar on each page is that it needs to be processed for every single request. Depending on what needs to be processed to display the header and menus and whatever else is on your nav bar (for example, querying your database for ACL permissions of the user, active modules, various widgets, etc), and also depending on the capacity of your server and the number of concurrent users expected at peak, this redundant processing might add up. This is something non-existent with using Frames, as the other frames don't necessarily have to be refreshed each time the "body" or content frame changes.

 

[Wyndru]

May just be a coincidence. Whatever the case, your compatibility concern is still warranted. It is browser-dependent, so you have to program for IE6, IE7 (to whatever it is now, 9?) Firefox, Opera, etc. Something you wrote that works on your machine using your favorite browser may not work on a different machine using a different browser.

I actually figured out that I had embedded a bunch of applets from a java class I was taking at the time. That's what wasn't working. In addition, the computer I had someone test it on actually had noscript (he hadn't allowed the page), so that explains some of the mouseover and image resize code not working that I thought was related to java not being installed on the machine.

So you either go through the trouble of making sure your js code is cross-browser compatible, or you use jquery (or your preferred js library, but jquery is the right choice ).

I have messed around with jquery a little bit, and really liked it. It seems powerful. I never considered it for this though, I'll take a look at that.

As a side note, a side effect with relying entirely on PHP to "include" your header and nav bar on each page is that it needs to be processed for every single request. Depending on what needs to be processed to display the header and menus and whatever else is on your nav bar (for example, querying your database for ACL permissions of the user, active modules, various widgets, etc), and also depending on the capacity of your server and the number of concurrent users expected at peak, this redundant processing might add up. This is something non-existent with using Frames, as the other frames don't necessarily have to be refreshed each time the "body" or content frame changes.

That is a good point. In one of the "frames" (or css div sections as I have it set up now) it actually scans a folder for sub folders, then inserts those as links. I can see how processing this each time a request is sent would be a bit overkill. The amount of hits I will get at one time is really low (this is just a picture website for my family to upload pics to and view them), however I still don't want it to be doing unnecessary work if I can avoid it.

That being said, part of the reason I was moving away from frames was because they don't refresh. I was looking for the nav frame to always know where the person is on the page, and highlight the link on the left. Using css's active and focus doesn't seem to do this correctly. Once the user clicks anywhere on the screen, the highlighted link returns to it's normal state (visited). I was looking to be able to get a single page so that I could keep the left frame "active" as the user navigates through the site. I'm probably overlooking a simple solution to this though, as this design seems pretty basic. Everything I've read points to either using something other than frames, or passing arguments to the nav frame and manually reloading it.

I spent a while on it last night, and it was pretty fun actually. I was able to eliminate a number of files by creating a php and css file that gets included, and just run the php functions from within the main page. It's much cleaner, but I still have a lot to do. I haven't touched the navigation part yet so I may still use frames and or jquery to see what I can do with it.

 

[jvroig]

I'm not sure if you actually want me to help out and spoil the fun for you (since you did mention that it has been pretty fun tackling this project), but just in case:

That is a good point. In one of the "frames" (or css div sections as I have it set up now) it actually scans a folder for sub folders, then inserts those as links. I can see how processing this each time a request is sent would be a bit overkill. The amount of hits I will get at one time is really low (this is just a picture website for my family to upload pics to and view them), however I still don't want it to be doing unnecessary work if I can avoid it.

Not much of a stretch, but you can apply the principle of Space-Time Tradeoff anytime you want processing to be lessened or minimized. In our case, if you don't want a folder scan to happen all the time, you can save the result in a number of ways then just use that result each time the "nav bar" (or whatever part needs that result) is called again. This includes:
- saving the allowable links (as defined, perhaps, by your ACL, or whatever mechanism you have) in the user's SESSION data.
- saving the info in a table in the database (kinda defeats the purpose, since a query is expensive, but if your folder scan contains thousands of files and subfolders, it may still be quicker)
- saving the info in a text file you create and can parse rather easily since you made the data structure youself.
- creating a "cached" html file of the result, and this cached html is used instead of doing a folder scan again.

I specifically mentioned "folder scan", but you might as well say "expensive activity" like a query or anything else that gets redundantly processed (meaning almost all the time, upwards of 90% or so, the results are always the same anyway).

You need to determine what triggers a change in the result set (therefore, a change in your session data, or text file, or database table, or cached html) so you can actually do the expensive activity (your folder scan in our case) to "update" your session data/table/text file/cached html. If this only happens 2% of the time, you can end up getting a ton of free performance (if you actually need the performance), but naturally, as per the name of the principle, you do end-up using more storage/memory. So it is no silver-bullet, merely a fine-tuning and balancing act.

Once the user clicks anywhere on the screen, the highlighted link returns to it's normal state (visited). I was looking to be able to get a single page so that I could keep the left frame "active" as the user navigates through the site. I'm probably overlooking a simple solution to this though, as this design seems pretty basic.

Yeah, that would be a dead-end. The solution is that the link that you want active simply gets a different CSS style than the rest. For example, all links may have the style "a.menu", but the active one (whose content is now displayed in the body of your site) gets the style "a.menu_active" (and this "menu_active' style gives the link a different color, or font, or size, or bgcolor, or whatever it is you want to emphasize that it is the active one)

How you determine which is active can be through several means. Quick-and-dirty can be passing a token/variable through the URL, which your script can interpret as meaning "this menu is active". You can run that in an if-block while displaying the menu, so your page can determine whether to give a link the style "a.menu" or "a.menu_active". You can also pass this token more "invisibly" through $_SESSION, or your own text file (If you prefer it for some reason), or a database table (but very expensive, I doubt anybody would actually want this, although it is technically feasible), or whatever storage mechanism you can think of. The principle is that you just "save" which link has been requested, so upon refresh (actually directing you to the requested page), you can determine before drawing the links which one gets the "active" style.

 

[Wyndru]

Yeah, that would be a dead-end. The solution is that the link that you want active simply gets a different CSS style than the rest. For example, all links may have the style "a.menu", but the active one (whose content is now displayed in the body of your site) gets the style "a.menu_active" (and this "menu_active' style gives the link a different color, or font, or size, or bgcolor, or whatever it is you want to emphasize that it is the active one)

How you determine which is active can be through several means. Quick-and-dirty can be passing a token/variable through the URL, which your script can interpret as meaning "this menu is active". You can run that in an if-block while displaying the menu, so your page can determine whether to give a link the style "a.menu" or "a.menu_active". You can also pass this token more "invisibly" through $_SESSION, or your own text file (If you prefer it for some reason), or a database table (but very expensive, I doubt anybody would actually want this, although it is technically feasible), or whatever storage mechanism you can think of. The principle is that you just "save" which link has been requested, so upon refresh (actually directing you to the requested page), you can determine before drawing the links which one gets the "active" style.

Just to get things done for now (limited on time), I ended up just passing a variable in the URL. I did start looking at the $_SESSION super global variable, and it looks like a better solution. When I get some more time, I'll go back and adjust it to use that. I'm not a big fan of information being appended to the URL, especially when you need to start passing paths around, but like you said, quick and dirty.

I'm pretty much finished for now. I have the page converted to using 4 files. A home page that kicks off all of the functions and includes the other files, a css page for the styles, a php page to hold all of the functions, and a javascript page for the js functions that I couldn't find a PHP solution for. What I was trying to accomplish with the links staying active is working now, frames are gone and formatting looks identical in IE and FF. The code is much more logical now, and I only need to update those 4 pages when a change is needed. The way it was set up before, I would " file copy" the main pages to each directory and just update the data in each directory. So if I had to modify something, I had to modify each file in each directory. I have no idea why I did it this way, I probably just wanted the page up quick and simple, and wasn't considering includes and passing variables.

I'm not sure if you actually want me to help out and spoil the fun for you (since you did mention that it has been pretty fun tackling this project)

No problem at all, I really appreciate all of the info you have been providing. Since I'm not really a web programmer, these tips are really useful, as they open my eyes to different ways to do things that I haven't seen before. While this was enjoyable modifying this page, it did suck up quite a few hours of my life. I forgot how much trial and error this stuff takes (although if I did it more often I'm sure it would go much quicker). Thanks for all of your input.