Solved

Need advice on alternative navigation schemes to current navigation bar with iframe for content

Posted on 2007-03-22
11
286 Views
Last Modified: 2013-11-19
I'm seeking advice on how to solve a very standard web design issue.  At my website (historyenthusiast.com) I have a side bar with navigation links and a main content panel.  The main content panel is implemented as an iframe and the content pages are separate and viewed on the main site only though the iframe of the content panel.

This technique works fine, but has the known downside that you can't link directly to any given subpage.  In other words it always says www.historyenthusiast.com in address bar whether your at the history enthusiast.com home page or your at historyenthusiast.com with some other content in the iframe.  The problem is I really need all of these other pages that I allow to be viewed through my navigation bar to be separate pages.  Some of the content isn't even hosted on my server.

What are my options for working around this?
0
Comment
Question by:mdobbles
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 18775011
>>Some of the content isn't even hosted on my server.

Does complicate things slightly, but I'd look at a good two column CSS layout.  Your iframes not only prohibit bookmarking but are going to mess up your SEO rank, as the spiders will have some trouble indexing your site.

I would also break to forum out completely, and just have a link back to the main site, or at least make the left nav significantly narrower.

You may have to revert back to an iframe or use some other method to break the same domain policy for the out of site content.  Maybe using an AJAX library like Dojo for those parts.
0
 

Author Comment

by:mdobbles
ID: 18777332
It is a two column CSS layout.  The issue is that in the second column of the layout I use an iframe.  I think I have to use the iframe because of all the scripts and ASP activity on the subpages I wrote and because of the third party content I include.  I thought of making the main frame be an ASP.NET page and I'd parse out of the URL the subpage for example to get to the forum I might have the URL http://www.historyenthusiast.com?nav=forum.  When the page came up I would parse the url and put the forum in the iframe.  This seems a little hokey to me though and I was wondering what was the way people really did these things.
0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 18778807
With ASP...

<body>

<div id="header"><!--#include file="myHeader.asp"--></div>

<div id="leftNav"><!--#include file="myMenu.asp"--></div>

<div id="content"><!--#include file="content.asp"--></div>

</body>

Save each page as it's own name, a don't parse the URL.

If the page retrieves off-site content then...

<div id="content><iframe src=""></iframe></div>


0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 18778966
Almost every web site I have has one template page with only the main content missing.

A real example:

<%
Option Explicit
Session.CodePage=65001
Response.Charset="UTF-8"
%>

<!--#include virtual="/ee/CDOMailInclude.asp"-->
<!--#include virtual="/ee/include/thisPageViewed.asp"-->
<%
' no browser caching of this page !! to be used on all pages
Response.Expires=-1
Response.ExpiresAbsolute = Now() - 1

' do not allow proxy servers to cache this page !! to be used on all pages
Response.CacheControl="private"
Response.CacheControl="no-cache"
Response.CacheControl="no-store"

Dim articleName
articleName = "Page Title"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<title><%=articleName%></title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/include/css/all.css">
<link rel="stylesheet" type="text/css" href="/ee/include/ee.css">
<script type="text/javascript" src="/include/allPages.js"></script>
<script type="text/javascript">
<!--

//-->
</script>
</head>

<body>
<div id="topmenu"><!--#include file="topMenu.htm"--></div>
<div id="banner"><!--#include virtual="include/banner.htm"--></div>
<div id="mainmenu"><!--#include file="mainMenu.htm"--></div>
<noscript><p>You need JavaScript to view this example.</p></noscript>
<div><h1>Page Subject</h1></div>

<div id="theExample">example</div>

<div class="code"><pre>example code</pre></div>

<div id="pageCopyright"><!--#include virtual="include/copyright.htm"--></div>
<div id="legal"><!--#include virtual="include/legal.htm"--></div>
</body>

</html>

I write a lot of example code for this and other tech help sites.

Need a new page? Open the template and add the new content the save as a new name.  All the navigation, headers, copyright, etc. etc. are maintained as well as the layout.

Maybe my site has multiple sections,

root+
       + includes   +
                          + css +
                                    - allPages.css
                          - allPages.js
                          - copyright.htm
                          - legal.htm
                          - banner.htm
       + examples +
                           - topMenu.htm
                           - mainMenu.htm
                           - pages ...
       + articles     +
                           - topMenu.htm
                           - mainMenu.htm
                           - pages ...
       + personal  +
                           - topMenu.htm
                           - mainMenu.htm
                           - pages ...

     

Then you'll see the same template in each sub-folder, but each sub folder may have a different navigation pages.

You only have one template page you can use everywhere, so you can think of the content division as your IFRAME in a sense.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 18784261
I dont see the problem.  You just LOAD a full webpage into the Iframe, and there it is.

Link to external -- http://www.someothersite.com/theirpages/first.htm

As long as you provide the full URL, the page goes right in the Iframe.  Remember, an iframe is like a totally separate browser window, except embedded in the first.

If you want the location and title bar to show the full link, just put that in the link, as normal).

Since I dont see the problem, what am I missing?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:mdobbles
ID: 18785546
The solutions suggested are all missing the point.

First, scratchcyboy:
The problem with my site is that all the navigation links are targeted to the iframe on my page.  This means that no matter what page you are on at my website, the address in the navigation bar is www.historyenthusiast.com.  This is a problem because I'm going to start adding a lot more pages to my site and I want people to be able to bookmark individual pages.  Also I want to put advertisements on google that direct people to individual pages -- something I can't do with my current scheme.

rdivilbiss:
I definitely understand how to do css div's.  In fact my site is completely based on css div's.  That's how I do my title bar, and my two column navigation and content sections.  In fact my iframe is in a css div.

The issue is this if I have one page that is my master template and if I have multiple separate pages that are included in that master template as iframes, then I'm starting to think that the only way I can give people the ability to directly navigate to subsections of my site is to provide a scheme where I parse the url such as for example having www.historyenthusiast.com?nav=forum take you to the forum section of my site.

The subsections must remain on their own pages separate from the template main page.  I might be missing something in the sugestions, but so far the only way I've heard that I can have ONE MASTER MAIN PAGE with navigation, title bar etc..., and MULTIPLE SEPARATELY MAINTAINED CONTENT PAGES is my suggestion of parsing the url and programatically creating the ability to link directly to subsections.

0
 
LVL 29

Accepted Solution

by:
rdivilbiss earned 500 total points
ID: 18785705
I guess I didn't explain well enough, but imagine the following request:

http://www.historyenthusiast.com/books/page3.aspx

That link never goes to your master page.

So you decide to do:

http://www.historyenthusiast.com/default.aspx?cat=books&page=3

That goes to your master page, but how do you get the content into the content area?

Using your current IFRAME set up you can parse the query string for cat and page and load the IFRAME with a dynamic URL created from those parameters, or you can maintain all your pages in a database and retrieve them into any element, or you could use AJAX to go get the page content and put it in the desired element.

All have various problems, not the lease of which would be performance, and the second example is not SEO friendly.

So go back to the first URL.  On Apache you could use mod rewrite to rewrite the URL and serve up the desired content.  But you are on IIS.

So, to gain the advantage of having only one master page, lets break that master page into its constituent parts.

master_banner.aspx
master_nav.aspx
master_content.aspx
master_footer.aspx

Your default home page then looks like this:

<!--#include file="master_banner.aspx"-->
<!--#include file="master_nav.aspx"-->
<!--#include file="master_content.aspx"-->
<!--#include file="master_footer.aspx"-->

You night think great!

I can just add parse the command line for the page and write that as an include in the content section of my master page, but the include occurs prior to the ASP code on IIS,

So your closest alternative is for each content page to have the following structure:

<!--#include file="master_banner.aspx"-->
<!--#include file="master_nav.aspx"-->
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras dolor. Sed sed neque. Duis eros justo, bibendum in, placerat eget, ullamcorper vel, nibh. Praesent urna arcu, sagittis eget, semper laoreet, tempus non, augue. In a pede. Vestibulum consequat eleifend sem. Duis tristique tortor ultricies massa. Duis sapien eros, posuere sit amet, rhoncus non, venenatis bibendum, tellus. Donec dui tortor, dignissim quis, eleifend eget, fermentum a, massa. Maecenas vel enim vitae sapien condimentum eleifend. Duis hendrerit luctus dui. Donec sem dui, posuere a, consectetuer eget, pretium aliquet, turpis. Vestibulum posuere porta lacus. Sed convallis molestie purus. In hac habitasse platea dictumst.
</div>
<!--#include file="master_footer.aspx"-->

This will also work for those few off site pages:

<!--#include file="master_banner.aspx"-->
<!--#include file="master_nav.aspx"-->
<iframe src="http://........>
<!--#include file="master_footer.aspx"-->

So you have in essence what you are asking for, in that the content for the master page is separate from the content of the individual page contents and is maintained separately.  You also have the content pages wholly separate, other than they have includes to the master pages content.  They are small, build dynamically on load.

If you look at master pages in .NET design environments, this is what is occurring:

Since your site uses .NET, you could download a free trial of MS Expression Web and check out the master pages and dynamic web templates.

http://www.experts-exchange.com/Web_Development/Authoring/Q_22467738.html

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 18785773
"The problem with my site is that all the navigation links are targeted to the iframe on my page.  This means that no matter what page you are on at my website, the address in the navigation bar is www.historyenthusiast.com.  This is a problem because I'm going to start adding a lot more pages to my site and I want people to be able to bookmark individual pages.  Also I want to put advertisements on google that direct people to individual pages -- something I can't do with my current scheme."

You can rewrite the status bar to show the correct link VERY EASILY !!!!  Just put it in the link.

But to encapsulate sites like Yahoo and Google in an IFRAME is fighting everyone.  People don't like it, the companies like Google hate it, and they have all kinds of code on their pages to "break out of" any frames OR IFRAMES.  Besides which, it looks like your content, so you have a LIABILITY issue too.

You are missing the obvious way to do this, that everyone expects.  Keep your main page as a launching point for all these links, and open each other sites content is a SEPARATE window.  That is what people expect, and want.  I personally HATE sites that try to cram content that was meant for a full 1024x768 display (almost every major site today) into someone else's window.  It is fighting the obvious.

Make multiple windows and your site will be much more acceptable.  I ahve done what you want to do, and it works for only 25% of pages.  The other 75% need to occupy their OWN resizable window.
0
 
LVL 9

Expert Comment

by:fuzzboxer
ID: 18804565
From what I can see, the iframe is not needed at all.  Just make the content div a regular div and remove the "target='MainFrameTarget'" from your navigation links.  Then all you should have to do is add your header and navigation sections to those corresponding pages.

The only page I can see that you might want to keep in the iframe is the Timeline considering how wide it is.
0
 

Author Comment

by:mdobbles
ID: 18805237
I think I have a reasonable solution now.  I just updated my site.  Basically what I did is use the .NET masterpages idea to handle most of my formatting, then my individual pages I swapped out content.  I still needed to use an iframe for my page called "timeline" because it has a bunch of scripts that were in conflict with the scripts that I have on my master page.
0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 18805340
The timeline is a great concept. I like it a lot. It deserves more attention from a development standpoint to be more fluid...but it can really set your site apart.

Good luck with everything.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Both Easy and Powerful How easy is PHP? http://lmgtfy.com?q=how+easy+is+php (http://lmgtfy.com?q=how+easy+is+php)  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
Uploading files to the web server has become common part of almost any kind of web application. People use different technologies to solve this, but regardless of the technology used, it is always useful to have some kind of progress indicator shown…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now