TOT: HTML/css trick to selectively display parts of page

[John Stumbles]

As I say, totally off-topic but I bet someone here knows the answer!

I've got a few websites (e.g.

which have grown to the point there's too much presented on one page and I'd like to break the pages up with a menu near the top with 'About' 'Contact' 'Links' etc and the appropriate content appearing below.

One way obviously is to maintain separate pages for each menu item and have the same banner and menu on each page with different content below, but (equally obviously) maintaining the pages so the common bits look the same and the links from one to the other all work would be a PITA. It could be done by building the pages up from fragments with a script or makefile but it still makes the user wait for a new page to load to see the next bit of content. Altogether yuk.

I'm sure I've seen, somewhere, a way of having all the content in one page/file but some bit of html/css/javascript magic that makes the browser display only one chunk at a time and hide the others.

Like:

.................................. common head of page stuff ...

menu: + about + contact + links + etc

{about section text} {contact section text} {links section text} {etc}

common bottom of page stuff ................................

I seem to recall the menu items were like About etc, and the sections had etc tags, so the whole thing would work on a browser with no fancy css/js abilities.

Of course I can't remember where I saw this technique or what it's called and my Google-fu has failed to find my anything. Anyone know what this technique would be called, have links to how-tos or suggest ways to do this?

[Adrian Brentnall]

HI John I've seen it done with javascript - in NetObjectsFusion it's known as a Multi-region layout - I can put an example up somewhere on the web if you'd like to see it?

Adrian

[Andy Dingley]

You're on Usenet, which is _still_ the best resource for "the right answers" on web design issues. Take it to c.i.w.a.h (com.infosystems...)

This approach can be done, but it's a bad idea. Two reasons: firstly it relies on JavaScript, secondly it's a right pain to make URLs to individual pages.

A better approach is to make lots of pages, but to share the shared part (the nav menu) between them using SSI. This is an FAQ, so search for it.

[Mike Clarke]

Something like this? I've put a very basic demo at

-------------------------------------------------------

about contact links etc

Common Stuff at top common head of page stuff ...

About ... about stuff ...

Contact ... contact stuff ...

Links ... links stuff ...

Etc ... links stuff ...

Common Stuff at end common bottom of page stuff

-------------------------------------------------------

One downside with this is that you need to scroll all the way back up to the top to see the menu again. You can get round this by putting a similar type of link at the end of each section to send people back to the menu.

Another possible snag is that the entire page has to be downloaded even if the user wants to see just one small section. This might slow things down with a very large page on a slow line.

If you want all the bells and whistles and are sufficiently familiar with JavaScript then take a look at the jQuery library . With that you can hide and reveal sections of your page on the fly and, if your server supports it, do all kinds of magic like using ajax callbacks to load just the section you want into a designated area of your page.

[Tim Streater]

You don't need JavaScript for this.

Put like:

11.1.2 Clipping:

in your list at the top, and:

Clipping

further down the page. This appears to be what they have done here:

It also appears to be pretty much what you posted - did you not try it?

[Dave Liquorice]

You are still thinking static pages, your need to think dynamic pages where the content is pulled from files according to data provided. That might simply be looking at the URL or using "query strings". This involves the use of server side processing, via PHP or similar.

Well things only take age to load if they are full of useless eye candy or "experience enhancing" scripting bollocks. Simple clear text content is very quick, even some small web optimised images don't slow things down that much...

think the pages linked from the top menu load PDQ...

That's all done with CSS, PHP and a set of "content" files, IIRC all links are worked out by the PHP so you don't have to manually maintain them across pages.

[Adrian C]

Bung it all in a content management system. Plenty of free ones including hosting. I'm one for abusing the blogging platforms out there.

An example (not mine)

a redirect from your domain name no one would ever know it was actually was blogger or wordpress working behind the scenes.

[Tim Watts]

John Stumbles ( [e-mail]) wibbled on Wednesday 02 February

2011 14:28:

Personally I would not be afraid of CSS - it's pretty well supported and in the worse case, you'll just end up with the entire page viewable which does not deny the end user any information.

Cheers

Tim

[Mike Barnes]

John Stumbles :

That's it in a nut-shell - have you tried it? The only problem is that it doesn't "hide the others" as you specified - it simply scrolls the long page to the desired section.

Indeed it would but TBH all but the most antique browsers do css, and so many sites use js that the web's almost unusable without it - you won't find many users that have it disabled.

If you want to "hide the others" *and* place minimal demands on the browser, you need separate pages for each section. To ease maintenance of shared content you could use either ssi (server side includes) or php. The availability of both depends on your hosting arrangement. You'll find the ssi route simple but limited. The php route will involve a much steeper learning curve but will give enormous flexibility. It's the gold standard solution to the problem.

[Roger Mills]

I use frames for all my sites - with a shallow frame across the top containing all the common stuff (which is always visible) and a narrow vertical frame down the LHS containing the menu - which is also always visible. The main content is then displayed in the big frame, as each item is selected from the menu. I use a separate page for each menu item, but it *could* all be in one long scrolling page - with each menu item linking to the appropriate place in the file.

You'll see what I mean if you have a look at:

or the second example, the lines between the frames are not visible - but the frames are nevertheless there.

[george [dicegeorge]]

I could do it with frames or javascript but debugging it for all browsers on computers and phones and debugging it in a few years time would be so time consuming it'd be easier to make several copies of the page with new filenames and then hack them down in notepad to be one section per page.

[g]

[Scott M]

PHP.

Rename all the HTML files as .php, trim out the header/footer stuff (including all the css includes/body tags/javascript stuff) and put them in "header.html" & "footer.html" (say.)

Then "mypage37.php" will look like this (excuse spaces in tags but Thunderbird won't post without them):

----------------------------------------------- < head>Page 37< /head>

< ?php require "header.html"; ? >

This is page 37 with lots of stuff about peanut butter and power tools... . . . . To read more on peanut butter, try < a href='page38.php>here< /a>

< ?php require "footer.html"; ? >

-----------------------------------------------

There's endless variations of how to split the files but require (or 'include' as an alternative) make easy work of divvying up the repeating content of pages.

[John Stumbles]

Thanks.

I've been girding myself up to learning Drupal or Joomla or even Typo2 but it's a steeeep learning curve, especially when one factors in setting things up to prototype on one's home webserver then upload to one's real internet server and so on. At the moment what I've got works well enough with the sites served on my desktop Apache for testing then rsynced to my real server. Couldn't do that with someone else's CMS/blogger, I guess I'd have to update the sites live all the time. And some of them have weird stuff like password protected pages and videos hosted on the server (not embedded from youtube) so I'd end up with some sites on the blogger/cms, some old school. More hassle.

[John Stumbles]

Well that's why I mentioned that I did want to hide the other sections!

[John Stumbles]

I know frames still work but I don't want to launch into using deprecated features. I'm actually trying to drag myself kicking and screaming into the 21st century and use css!

[The Natural Philosopher]

I do it with server side PHP. Being a p[rogramming language getting a common frame is a matter of

Now write the custom page..

In my case the menulib draws the basic frame and buttons, and all I have to do is to patch it and add a new button and a call to a new page every time I add another one.

[Bob Eager]

I did it but wanted to avoid using Javascript, and for various reasons PHP wasn't an option, nor was server side includes.

I wrote a simple script that looks at which pages (locally) have been edited, inserts a navigation sidebar, copyright dates and other useful stuff, handles includes, etc. and generates a new page, then uploads it to the server. Good if the server has limitations.

The web pages are basic (I have better things to do with my time) but functional. You can see an example at

[John Rumm]

What development system are you using? The standard way round problems of consistency with static pages if you have a decent client like dreamweaver is to place all the common bits into template pages. Then you can create new pages from a template and be sure it will look the same. If you later update the template then all the pages using it can also be batch updated. The same applies to using other "assets" for objects on the page - again change the object, and every user of it can be updated in one hit.

Couple the above with using CSS to control *everything* and you can get fast pages that work for most visitors, and fail gracefully. See:

I'm sure I've seen, somewhere, a way of having all the content in one

Yup there are lots of ways of doing this sort of stuff. The simplest would be to place each "section" in a with the visibility turned off. Then you just need very minimal JS actions on a button or similar to toggle the visibility.

Other options include lots of client side tools for implementing tabbed dialogue style pages. The Spry framework is one I quite like:

Of course I can't remember where I saw this technique or what it's

[Mike Barnes]

BTDTGTTS (with Wordpress). I did set it up locally but TBH it wasn't worth the effort. Nowadays I just prototype remotely.

My thoughts exactly. I have several sites maintained that way and I feel very comfortable with it. I also have one site that has a Wordpress blog. The editing tools are frankly rubbish compared with what I have installed locally, and installing Wordpress locally actually doesn't help enough to make it worth while.

If static HTML pages suit your purpose and skills (and it sounds like they do), the CMS/blog route simply isn't worth it IMO.

Indeed. And then there's the backup problem...

Now that I know a little more about your experience, desires and motivations, I feel sure that PHP is the way to go. You can immerse yourself gradually and keep most of your current way of working. I'm sure that within an hour you'll know exactly where you're going with it and how to get there.

The only other possibility - and this is a long shot - is that you might have, or be able to obtain, a copy of Adobe Dreamweaver. This would allow you to keep your plain HTML files and sync mechanism. You write a "template" containing the HTML common to all pages, containing "editable regions". When you change the template, Dreamweaver can automatically update all the pages that use it, leaving the editable regions unchanged. When you're working on the page content in the editable regions, Dreamweaver locks the parts defined by the template. It's a very simple, effective system and one that I've used for many years on many sites.

[Dave Liquorice]

Agreed, there are plenty of online tutorials on PHP and the PHP online manual is pretty good as well, not only the formal definition but also code snippets and discussion for each one.

Cut down and simplyfied:

Note that the name of the file to include as the "content" is a variable. That would be extracted from a query string in the URL eg

would load the files "clients.php" into the content area. If the "content" variable isn't set you can default it to "home" or if garbage to "not found" content.

The title for each page can be read from the file and loaded into another variable of index.php to be used as required. I make this an HTML comment on the first line as easy to find/extract and is included in the completed page so you know where the bits are coming from.

I'd use "include" rather than "require" as the latter will force a PHP error, the former just won't include anything.

That should point you in the right direction for further self education. B-)