• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Bear Bibeault
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Jj Roberts
  • Carey Brown
Bartenders:
  • salvin francis
  • Frits Walraven
  • Piet Souris

html files and creating websites

 
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello,

I'm going to doing some html/javascript/css development work. Down the left side will be menu items whose content (center of page) each implemented in their own .html file. What I've run into in the past is that menu code is duplicated in each of the .html files for obvious reasons. I don't want to use frames to have that menu in its own frame.

Is there a better way to manage this and only using html markup. Well maybe an IDE of some sort that has macros insert code and generate the true html files.

I've read a little bit about joomla but not sure if that is a hammer solution when I really need more minimal tool.

I believe SSI might help or a better development environment (only if it is free).

Thanks,Jim
 
Marshal
Posts: 67496
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, repeating nav code in every page is recipe for endless headaches!

SSI is one means, but it's not HTML-only. SSI is a function of the server, not the markup. "Build time" inclusion via some IDE is also a possibility, but not one I'd choose as you are forever tied to single development environment. Can be bad news.

A technique I've been using successfully in recent projects is to use a single main page with the nav, with a scrollable div set aside for the content. Upon a click of a nav element, Ajax is employed to fetch the appropriate content from the server for the page and stuff it into the content div.

The only down-side to this approach is that it makes it difficult to bookmark individual pages (as there aren't any). For web applications, where bookmarks usually make little sense, this isn't much of an issue.

JavaScript libraries such as jQuery (the subject of this week's free book giveaway) make the Ajax part of this technique easy as pie.
[ January 17, 2008: Message edited by: Bear Bibeault ]
 
Jim Harrison
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you Bear for your reply.

Do you have a tutorial for SSI?

Jim
 
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What I've seen done is that all the navigation menus are controlled with CSS. You simply markup a list. Make a list of url links for each page and then, by using a common style sheet you control the look and feel. Since each page's navigation should be slightly different since your menus will probably reflect where you are on the site you just slightly tailor your list to reflect such changes. You could even handle some of this with JQuery I would suppose.
 
Bear Bibeault
Marshal
Posts: 67496
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
jQuery could certainly handle what you are referring to, but that doesn't really address the OP's question about repeated code across multiple pages. Even factoring out the CSS, it's best not to have to repeat the markup again and again and again.

Do you have a tutorial for SSI?



For information on how your server implements SSI, you'd need to check the documentation of whatever web server you are planning to use.
 
Jim Harrison
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Bryce,

Thanks for the advice but it wasn't really what my issue is. I have N number of menu items and thus N number of .html files. If I were to add another menu item, I'll have N .html files to update with the new menu item. I know I'll have M .html files but would like something like

inc "menuitems.html?selectMenuItem=2" in each of the M .html files and have one .html containing the menu items.

Of course from your suggession selectMenuItem #2 would have different markup via CSS.

Thanks, Jim
 
Bryce Martin
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What if you create a page template and then just apply the template? You will have multiple copies of the code, but it will handle itself. The same way an IDE would do it. If you create a generic HTML page and then just copy it and save as a new page name you won't have to rewrite it. The code will just copy itself.

Another thought, I'm using WDSC to do my coding and they have a template option. If you do that you just change the template and it will change it on all pages the template is applied to. A lot of pages are done that way. I don't know what SSI is or what it does, it may be what I just talked about for all I know....just my thoughts.
[ January 18, 2008: Message edited by: Bryce Martin ]
 
Bear Bibeault
Marshal
Posts: 67496
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Originally posted by Bryce Martin:
The code will just copy itself.


But that only applies for the first time through. With the markup repeated on every page, any changes must be kept in sync across the pages. This is a major headache that escalates quickly.

The OP is much better off with a solution that does not require the replication of the markup. That means an SSI of some type (Apache SSI, JSP include, etc), or having a single nav instance (the Ajax technique I alluded to earlier).

Replicated code in more than one place is a bug waiting to happen.
 
Bear Bibeault
Marshal
Posts: 67496
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Another client-side solution that I don't necessarily recommend is to have a common JavaScript script file that is included on each page that creates the nav on each page upon load.
 
Sheriff
Posts: 13411
Firefox Browser VI Editor Redhat
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I think it's hard to find a hosting plan these days that doesn't include PHP.
PHP's require("filename"); function will perform a server side include.
 
Bryce Martin
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hence making a Template. Just change that one template and all pages are changed. Maybe this isn't available elsewhere but I do it with my JSP's in the WDSC IDE. Its so easy. SSI means Server-Side Include. I just figured that out from your last post.
 
Bear Bibeault
Marshal
Posts: 67496
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I misunderstood what you meant by template. As I had said, I'm not a big fan of build-time templating that relies upon a particular IDE -- locking you into that tool. Anyone who's followed my posts for any amount of time on these forums will know my opinion of vendor lock-in. And as Ben said, there isn't a reputable web server on Earth that doesn't offer some manner of SSI. I can't see how that's not the OP's simplest and best choice.

Although our OP is yet to weigh in with his choice of server...
 
Jim Harrison
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I really appreciate watching this thread evolve w/ great ideas. Kudos to everyone!

The OS is definitely Linux and I believe the web servers are Apache. The hosting company, and this is *not* a plug, is 1and1.com. So maybe someone knows differently.

I come from an extensive background and years of Java experience. Hence repeating code is *against* my creed. I've done webapps w/ jsp/ajax/js/Struts for app servers like Tomcat, Weblogic & WebSphere at my 9-5 job.

But w/ doing this site w/out jsp and only html/css/js and php is daunting only because I've only done maybe 10-20 of true php code.

I like the idea of the Ajax (via JQuery, which I've never heard of) retrieving the center part of the site from the server. If I understand the Poster of this concept, I would have an index.html that shows the typical header of a website and left side navigation menu. For each menu item attach javascript function call to update menu item id values and use JQuery to retieve menu_item_1_snipit_code.html, menu_item_2_snipit_code.html, etc.

I can appreciate the need to learn php but might pass if the above works.

I'm not a big fan of SSI just b/c of the syntax read during my limited research. Maybe I've just read the wrong sites for it. PHP seems a more natural solution versus SSI due to the industry "standards".

Thanks,Jim
 
Bear Bibeault
Marshal
Posts: 67496
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Originally posted by Jim Harrison:
[QBIf I understand the Poster of this concept, I would have an index.html that shows the typical header of a website and left side navigation menu. For each menu item attach javascript function call to update menu item id values and use JQuery to retieve menu_item_1_snipit_code.html, menu_item_2_snipit_code.html, etc.[/QB]



Yes. The response from the Ajax call would be an HTML fragment (not full page) that would get loaded into a div element.

Thus no page refreshes.

P.S. Apache supports SSI, and it is widely used.
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic