Wickham's HTML & CSS tutorial

Sitemap | Home | Search | PHP introduction

PHP code to show an "include" file after clicking a link

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems   gold icon warning: works in some situations or some browsers or needs care to display as you wish   green icon OK in Firefox, Safari, Opera, Google Chrome and IE

For the basic PHP codes see PHP introduction


Show a form on the same page after clicking a link

1 green icon This code is similar to javascript expand/collapse show/hide code but works when javascript/ActiveX is disabled so it may be more convenient to use and has less code (only two lines) as there isn't a javascript file. It is space-saving code because large sections of content can be excluded until someone clicks the link.

The code for a link is shown below which when clicked will show a form below the link on the same page. You use the browser back button to return to the page without the form.

The link to show the form is:- Form example

The code is:-

<a href="showform.php?f=formexample">Form example</a>

You need to make an "include" file formexample.inc (or any filename you want as long as it has .inc extension and it is repeated in the url extension ?f=...) which can have any code without doctype, html, head or body tags, such as:-

The PHP code "gets" part of the filename formexample from ?f=formexample in the link and adds .inc.

(Credit to djlebarron for the code.)

error_reporting(0); inside the PHP tags not required with this code except as a safety measure to prevent errors or warnings (if any) being displayed on the web page showing username of the website owner. When someone clicks the link the page will change to show the "include" file and the url in the browser window changes to show the php extension ?f=formexample. If someone changes the php extension to the url in their browser window like
http://www.some-domain.com/showform.php?f=rubbish
then the page would normally reload showing a warning that the php cannot be processed but it will show the website owner's username in the warning (without the password) like this:-
Warning: include() [function.include]: Failed opening '.inc' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/your-username/public_html/sub-directory-name/showform.php on line 25
This may be considered undesirable as it is the first stage to hacking into the server so the error_reporting(0); is added to prevent the errors or warnings.


Show an "include" file with an iframe on the same page after clicking a link

2 green icon The same code as above can be used for any code in the "include" file, such as an iframe with an external link.

The link to the page with the iframe is:- iFrame 1

The code is:-

<a href="showform.php?g=iframe1">iFrame 1</a>

and the file iframe1.inc can have just normal code such as:-


NEWS BOX

Latest News will be displayed here after clicking the appropriate link.

Show an "include" file with Latest News

3 green icon The same code as above can be adapted to show items of news or similar text in a separate div on your page from several different links. There is a default "include" file called newsboxdefault.inc which shows initially before a link is clicked, then a container "include" file called newsbox.inc for the div structure and different "includes" for each item of text to be shown inside newsbox.inc after clicking the relevant link:- Football News or Tennis News. It's best if the News Box is near the top of the page so that it is seen immediately without needing to scroll down after clicking a link, or you can use an anchor code as I describe at the end of this item.

The code for the styles in the head section style tags of this page is:-

The code for the php "include" for div id="newsbox" on this page is:-

which selects newsboxdefault.inc initially and then newsbox.inc when a link is clicked.

The code for the links in this page to the "include" files are:-

Note the ?newsbox=newsbox&subject=football after the filename which selects newsbox and also the correct "include" file for the subject inside newsbox. The extension .inc for newsbox and the subject file is added in the php code shown for div id="newsbox" above and in newsbox.inc below.

The code for the newsboxdefault.inc file is:-

The code for the newsbox.inc file is:-

The code for the football.inc file is:-

The code for tennis.inc is similar to football.inc with different text.

If your News Box is below the bottom of a page window and you have to scroll down to see it, when you click a link the page will refresh with the relevant News Box item but at the top of the page so you have to scroll down again. You can build in an anchor as I have done for this page by adding an id anchor in an appropriate place just above the News Box and the anchor link on the end of both links:-

I added the id into my item heading:-

and the anchor code #phpnewsbox onto the end of both links:-

If you find that & and = in the php codes don't validate in html, edit them to the character equivalents &amp; and &#61; instead.

Thanks to djlebarron for showing me the basis of this code.


Show an "include" file with Latest Sport News

4 green icon This example is just a variation of the previous item but doesn't have an initial file to display. An "include" file doesn't show until you click a link when it expands the page height and inserts the "include" file content. Sports News will appear in the box below when a link is clicked.

Ice Hockey

Ice Hockey News

Recent news and events:

News item 1: etc. etc.

The code for the styles in the head section style tags of this page is:-

The code for the links and the php "include" code for sportnews.php on this page is:-

The code for the "include" file sportnews.php (which has a .php extension because it includes PHP code) is:-

The code for the "include" file boxingnews.inc is:-

The code for the "include" file icehockeynews.inc is:-


Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that the page centralises at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" type="text/css"> <![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

© Wickham 2009 updated 2010


top | Sitemap | Home | PHP introduction

 

Google
web www.wickham43.net/