Using Changing Content With Tab Panels
Tab Panels are an attractive method of organizing lots of
content on individual web pages.
A link to a tab panel generator is in
the tab panel article.
It's an easy to use generator. Answer a few questions and
paste the generated code into your web page.
There is even a checkbox to make the tab panel content
visible to non-JavaScript browsers and available to screen
readers — and, incidentally, available to search engine
spiders.
But what about frequently changing content? You don't want
to have to use the generator every time a price changes or
a new special is in the works.
The solution is to maintain an external file with the
content. Use JavaScript, PHP, or SSI to import the file
whenever the tab panel page is loaded into a browser.
It's actually a method of syndicating, except you're
syndicating your own content for the tab panel.
JavaScript Syndicating Tab Panel Content
Send your browser to
the Convert Text to JavaScript page.
Paste some text into the converter. Copy the generated
content and save it on your server as a filename.js file.
IMPORTANT: When using JavaScript in an external file, do
*not* include the beginning and ending SCRIPT tags.
At the tab panel generator, paste this instead of the
regular content:
<script
type="text/javascript"
src="http://example.com/url/to/filename.js">
</script>
The above may be all one line. The content you converted
will be imported into the tab panel every time the tab panel
page is loaded into a browser.
When ready to change the content, save it to the same
filename.js and the tab panel will automatically import
the new content.
Master Syndicator
can be used instead of manually converting the content. The
software will even generate the short JavaScript code for
you, ready to copy and paste into the tab panel.
Changing tab panel content is then as easy as pasting the
new content into the form text box field and clicking the
submit button.
PHP Syndicating Tab Panel Content
To insert the content of an external file with PHP, make a
plain text file and save it on your server. It can be a .txt
file or any other file name extension that does not
conflict. (Don't use *.pdf or *.zip, for example.)
When you save the text file, make a note of its location on
the server. The location would be the file's URL except
without the http and domain name part. For example, if the
file is at http://example.com/books/pricelist.txt then the
location would be /books/pricelist.txt
To insert the content into the tab panel, use this code:
<?php
readfile($_SERVER['DOCUMENT_ROOT']."/books/pricelist.txt");
?>
In the above code, put your file's location between the
quotation marks.
The web page with the tab panel containing the PHP code must
be a PHP web page. Usually, these are pages with .php file
name extensions.
SSI Syndicating Tab Panel Content
Syndicating with SSI is similar to syndicating with PHP.
Create a plain text file on your server with the content.
<!--#include virtual="/books/pricelist.txt"-->
In the above code, put your file's location between the
quotation marks.
The web page with the tab panel containing the SSI code must
be an SSI web page. Usually, these are pages with .shtm or
.shtml file name extensions.
Generating the Tab Panel Code
When you use JavaScript syndication, the content of the
external file will be inserted into the tab panel
generator's preview (provided the external file exists).
However, when using PHP or SSI syndication, the content will
not be inserted until after the generated tab panel is
published on a web page on your site. Representative content
may be used while designing the tab panel, then replaced
with the PHP or SSI code for the final generation of the
tab panel code.
Tab Panels are an attractive method of organizing a lot of
material on your web page in an accessible format. Changing
the content with one or more these methods makes maintenance
easy.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2008 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
