Solved

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

Posted on 2007-03-22
11
298 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

740 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