This is just a mini tip rather than a tutorial, because the method is not going to cover all broken links completely.
A 404 Error page is when you visit a URL which points to a file that is non-existent or can not be found on the server. The file can not be found, therefore can not be displayed and the user is presented with the 'Not Found' message. On regular web hosting, you can change this page either through the use of [ic].htaccess[/ic], or if the web host provides a suitable UI to do so.
On Forumotion we're given this custom 404 page: http://www.avacweb.forumotion.co.uk/badlink
And as you can see it's plain, boring, non-descriptive and all-round stupid.
Today we're going to try and replicate a custom 404 page. There's only a limited amount of pages on our forums, so we're going to try and check all the possibilities with our Javascript and display a 404 page if the link doesn't appear to be one of the possible pages on our forums. This can only be done on the clicking of a link unfortunately and we can not stop people from typing in non-existent URL's.
First off we must have a 404 page. So we'll make a new HTML page [tip]Found at ACP > Modules > HTML Pages Management[/tip], now this bit is up to you to make your own 404 page to match your site, but I will give you this Avacweb styled one to start with:
Now lets make the Javascript to redirect to it when a link doesn't exist:
Just make sure to change this line: [ic]window.location = 'YOUR 404 ERROR PAGE LINK HERE';[/ic]
The code may need tweaking for non-english boards, let me know if you see any issues, or any URL's I've missed.
#tips
A 404 Error page is when you visit a URL which points to a file that is non-existent or can not be found on the server. The file can not be found, therefore can not be displayed and the user is presented with the 'Not Found' message. On regular web hosting, you can change this page either through the use of [ic].htaccess[/ic], or if the web host provides a suitable UI to do so.
On Forumotion we're given this custom 404 page: http://www.avacweb.forumotion.co.uk/badlink
And as you can see it's plain, boring, non-descriptive and all-round stupid.
Today we're going to try and replicate a custom 404 page. There's only a limited amount of pages on our forums, so we're going to try and check all the possibilities with our Javascript and display a 404 page if the link doesn't appear to be one of the possible pages on our forums. This can only be done on the clicking of a link unfortunately and we can not stop people from typing in non-existent URL's.
First off we must have a 404 page. So we'll make a new HTML page [tip]Found at ACP > Modules > HTML Pages Management[/tip], now this bit is up to you to make your own 404 page to match your site, but I will give you this Avacweb styled one to start with:
- Code:
[panda=html]<html>
<head>
<title>Page Not Found</title>
<style type="text/css">body { background-color: #105289; font-family: sans-serif; } a { color: #105289; cursor: default; bottom: 0px;} h1 { font-size: 2em; } p a { cursor: pointer; } #maintenance {text-shadow: 0 1px #FFF; box-shadow: inset 0 0 10px; border-radius: 7px;color: #105289;background-color: #E1EBF2;text-align: center;width: 60%;margin-left: auto;margin-right: auto;padding: 20px 20px 20px 20px;} #container { text-align: center; }</style>
</head>
<body>
<div id="container">
<img src="http://i45.servimg.com/u/f45/16/35/08/55/new_lo12.png">
<div id="maintenance">
<h1>Error 404 - File not Found. </h1>
The page you are looking for does not exist, <span onclick="window.history.back()" style="cursor:pointer; text-decoration:underline">click here to return to the previous page</span>.
<p>If you believe this is a mistake, please contact the <a href="/u1">Administrator</a>. Thank you.</p>
</div>
</div>
</body>
</html>
Now lets make the Javascript to redirect to it when a link doesn't exist:
- Code:
[panda=js]$(function() {
$('a').filter(function() { //only keep internal links.
var internal = !!(this.href.charAt(0) === '/' || this.href.indexOf(location.host) !== -1),
url = this.href.replace(/(^http:\/\/)|(\?.*$)/g, '').replace(location.host, '').substr(1),
tester = /^(|#\w+|portal|calendar|post|privmsg|memberlist|faq|forum|search|groups|profile|login|modcp|statistics|contact|abuse|admin(\/index.forum)?|viewonline|rss|ailto:|([tfhc]\d+(?:[pn]\d*)?-.*?)|(u\d+(\w+)?)|(s[tp]a\/.*?))$/g;
return internal && !tester.test(url)
}).click(function(e) {
e.preventDefault();
window.location = 'YOUR 404 ERROR PAGE LINK HERE';
});
});
Just make sure to change this line: [ic]window.location = 'YOUR 404 ERROR PAGE LINK HERE';[/ic]
The code may need tweaking for non-english boards, let me know if you see any issues, or any URL's I've missed.
#tips