Like SystemiConnectFri 15 Oct 2021, 04:50
Auto Save MessagesLGforumFri 26 Feb 2021, 13:31
New tutorial questionTheCrowMon 15 Feb 2021, 08:12
Support iOS Emojis (and other platforms)LGforumSun 14 Feb 2021, 01:25
LGforum (2806)
Replicating a custom 404 page. Vote_lcapReplicating a custom 404 page. Voting_barReplicating a custom 404 page. Vote_rcap 
Mr.Easybb (1587)
Replicating a custom 404 page. Vote_lcapReplicating a custom 404 page. Voting_barReplicating a custom 404 page. Vote_rcap 
Bloodbath (745)
Replicating a custom 404 page. Vote_lcapReplicating a custom 404 page. Voting_barReplicating a custom 404 page. Vote_rcap 
Rukiafan (533)
Replicating a custom 404 page. Vote_lcapReplicating a custom 404 page. Voting_barReplicating a custom 404 page. Vote_rcap 
Dom (513)
Replicating a custom 404 page. Vote_lcapReplicating a custom 404 page. Voting_barReplicating a custom 404 page. Vote_rcap 
puppycheese (446)
Replicating a custom 404 page. Vote_lcapReplicating a custom 404 page. Voting_barReplicating a custom 404 page. Vote_rcap 
pedro (330)
Replicating a custom 404 page. Vote_lcapReplicating a custom 404 page. Voting_barReplicating a custom 404 page. Vote_rcap 
Neymar (301)
Replicating a custom 404 page. Vote_lcapReplicating a custom 404 page. Voting_barReplicating a custom 404 page. Vote_rcap 
Hitsu (281)
Replicating a custom 404 page. Vote_lcapReplicating a custom 404 page. Voting_barReplicating a custom 404 page. Vote_rcap 
Flora (275)
Replicating a custom 404 page. Vote_lcapReplicating a custom 404 page. Voting_barReplicating a custom 404 page. Vote_rcap 


Replicating a custom 404 page.

LGforumLGforum
Status : Working to restore AWC!

Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Wed 08 May 2013, 12:34
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:
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>
It looks like this: http://www.avacweb.forumotion.co.uk/h1-page-not-found

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';
 });
});
Add that Javascript to All Pages and now when a user clicks on a link in your forum which doesn't exist, it will display your custom error page. Smile
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
doannamthaidoannamthai
Status : No status yet...

Posts : 152
Join date : 2013-01-02
Age : 37
Wed 08 May 2013, 12:37
Good job LG
p/s : where did you learn some character like this : /(^http:\/\/)|(\?.*$)/ ?
Mr.EasybbMr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!

Posts : 1587
Join date : 2013-01-04
Wed 08 May 2013, 13:10
Doanna that is Regex (Regular Expressions) there are a view articles you can read up on these. I am also still learning these, I guess just some practice expressions would be nice like I believe

/n is numbers or /d

all regex goes inside /regex here/

and I'm not sure what | is but I'm going to take a guess and say it is an or factor.


and I believe ^http: is starts with and we have to escape the forward slashes so \/\/ is what that is after http:
NeymarNeymar
Status : No status yet...

Posts : 301
Join date : 2012-03-11
Location : Glasgow, Scotland
Wed 08 May 2013, 13:15
Nice little tip LG.

The most annoying part of the default page is the bit that says "Free" at the top of the page. It's just a horrible default page.
lightningterrorlightningterror
Status : No status yet...

Posts : 102
Join date : 2012-11-02
Wed 08 May 2013, 14:00
This is very nice indeed , i might also suggest adding the fav icon to the custom page as well.

edit: There are some problems with the code , and it shows on working links on the navigation but not on broken links.
AconitinAconitin
Status : No status yet...

Posts : 115
Join date : 2012-09-17
Location : Earth
Sun 12 May 2013, 07:52
Same condition here..
Didn't work, it still direct us to 404 Page from Forumotion..
LGforumLGforum
Status : Working to restore AWC!

Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Sun 12 May 2013, 09:50
Working for me on a test forum. Have you put your HTML page link where needed? And are you aware it will only work on clicking on links, not if your typing in URLs in the navbar?
puppycheesepuppycheese
Status : No status yet...

Posts : 446
Join date : 2013-02-12
Age : 30
Location : New Jersey
Mon 13 May 2013, 00:30
Thank you LG I appreciate the tip! Very nice!
lightningterrorlightningterror
Status : No status yet...

Posts : 102
Join date : 2012-11-02
Mon 13 May 2013, 11:51
LGforum wrote:[quotelink="http://www.avacweb.com/t1254-replicating-a-custom-404-page#12062"]Working for me on a test forum. Have you put your HTML page link where needed? And are you aware it will only work on clicking on links, not if your typing in URLs in the navbar?

ah that explains it , also the js was missing some links in row 5 like portal , calendar , report.forum

so it works now.
Rhino.FreakRhino.Freak
Status : Moved on to Phpbb

Posts : 222
Join date : 2013-03-05
Age : 27
Location : India
Mon 13 May 2013, 12:16
LGforum it has a bug in Invision, when we are in the memberlist and click on drop down menu, it redirects to the page.
RukiafanRukiafan
Status : No status yet...

Posts : 533
Join date : 2012-07-20
Mon 13 May 2013, 22:21
I'm having the same problem such as PM's redirecting to the 404 page can someone fix this?
Mahmoud alzamalkawyMahmoud alzamalkawy
Status : No status yet...

Posts : 49
Join date : 2013-09-05
Fri 06 Sep 2013, 17:39
thanks it's working well in arabic forums
avatarluizr187
Status : No status yet...

Posts : 10
Join date : 2013-10-14
Tue 15 Oct 2013, 00:24
Didnt work for me am i supposed to change !tester.test(url)? (my website is everyonesblog.net you'll see what happens)
LGforumLGforum
Status : Working to restore AWC!

Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Tue 15 Oct 2013, 01:58
You only have to change the line mentioned.
Bare in mind this will only work for links clicked on; not when typing a (non existent) URL in the address bar.
avatarluizr187
Status : No status yet...

Posts : 10
Join date : 2013-10-14
Tue 15 Oct 2013, 04:02
@LGforums oh, ok thanks but does it have to be a link from inside the website to an non-existent link (still in the website) or can it be like an non-existent link from google? And do you know how to make it work from the URL address bar?
LGforumLGforum
Status : Working to restore AWC!

Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Tue 15 Oct 2013, 09:18
Yeah it only works from non existent links posted on your site.
I know that sucks, but it's just a limitation of Forumotion, and not being able to access any server aspects.
avatarluizr187
Status : No status yet...

Posts : 10
Join date : 2013-10-14
Tue 15 Oct 2013, 23:41
Forumotion needs to allow us to do that. It can limit how good our site is.
avatarKaizer20
Status : No status yet...

Posts : 111
Join date : 2012-10-06
Age : 27
Location : In my girlfriend's pants.
Fri 08 Nov 2013, 09:05
Hey,

I just used this and before it was working like a charm, now it doesn't, even in my test forum.

Uhm, what happened?
BloodbathBloodbath
Status : No status yet...

Posts : 745
Join date : 2013-05-31
Age : 28
Fri 08 Nov 2013, 20:56
What does your console print for errors and/or warnings?
avatarKaizer20
Status : No status yet...

Posts : 111
Join date : 2012-10-06
Age : 27
Location : In my girlfriend's pants.
Sat 09 Nov 2013, 19:10
I think Avac has the same problem too.

Click on LG's "Bad Link" because it shows the same result to me, just a plain blank page.
BloodbathBloodbath
Status : No status yet...

Posts : 745
Join date : 2013-05-31
Age : 28
Sat 09 Nov 2013, 19:37
Hum, just an idea, in the regular expression var (tester), it starts with [ic]/^(|#[/ic], try removing the first occurrence of "|" so that it should look like [ic]/^(#[/ic]
avatarKaizer20
Status : No status yet...

Posts : 111
Join date : 2012-10-06
Age : 27
Location : In my girlfriend's pants.
Sun 10 Nov 2013, 04:04
It does not work o.o

Kirigaya KazutoKirigaya Kazuto
Status : No status yet...

Posts : 38
Join date : 2013-10-27
Sun 10 Nov 2013, 04:32
Kaizer20 wrote:[quotelink="http://www.avacweb.com/t1254p15-replicating-a-custom-404-page#17055"]It does not work o.o
Yes Neutral
LGforumLGforum
Status : Working to restore AWC!

Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Mon 11 Nov 2013, 12:03
This isn't installed on avacweb anymore which is why the bad link doesn't work in the first post.
And bloodbath, that first bar is meant to be there, it basically means "nothing or # or ...."
midomido
Status : No status yet...

Posts : 85
Join date : 2013-11-11
Mon 11 Nov 2013, 12:33
Nice tip Admin
thank u for sharing it
Would you aloow me to correct your code
when u set the var [ic]tester [/ic] correct value is [ic]'..rss|mailto:|..'[/ic] and not [ic]'..rss|ailto:|..'[/ic]

thank u again!
Sponsored content

 • Previous Topic • Next Topic