WTF ... IS WTF!?
We are a collective of people who believe in freedom of speech, the rights of individuals, and free pancakes! We share our lives, struggles, frustrations, successes, joys, and prescribe to our own special brand of humor and insanity. If you are looking for a great place to hang out, make new friends, find new nemeses, and just be yourself, WTF.com is your new home.

Suggestion Say hello to the WTF!? Application for your phone!

ib4

Error
Staff
1,865
2,824
257
If you don't want to read the bs I wrote at first skip down to the CODE section for the main point of this post.

Every time I visit WTF!? I get a dose of nostalgia from an internet that once was. The internet was in its newest age of websites designed and sliced in Photoshop or created in Adobe Flash. We played mPC games to on your 128 MB Radeons that were so elite then. We visited shock content websites like Rotten and whatever else you may know...I have forgotten. We recycle Goat.cx and Tubgirl to piss of your friends in email or on your favorite forum. FORUMS-This was a big time for the forum age. If you were an internet junky you were most definately aprat of 2 or 3 forum communities. We played around on Photoshop, Fruityloops, Adobe Flash, Windows Pinball, Silk Road, Halo PC, WOW, Red Alert, Roller Coaster Tycoon etc. while chatting on Ventrillo or Teamspeak and chatting it up on mIRC. All of this would take place at your favorite desk in your room, or some area in the house, or apartment where you just geeked for hours and that was home, safety, and fun to you.

Or maybe you didn't do any of this. Anyway, I visit this site and those are the kinds of things I alwasy think of. If I had the daily job of creating new ideas to generate new traffic to the site I would gladly. I like thinking of ways to get this community back to high traffic.

So down to business. I recently created a web app / mobile app for a client. I basically built a Fitness Facebook for their gym. I wanted to be in full control an ownership of all the components and services associated with the app. You can't do this with native mobile apps when they are large scale. At some point youre going to be paying for some service somewhere to keep it alive. XAMP+WebApp+MobileWorkArounds=BasicallyAnApp

I searched for a workaround that would suffice and I found one. Below is a segment of code that will make the WTF!? website appear full screen and remain in full screen mode and feel like a native standalone app. I have done this with the app I am building for my client and it's beautiful. Below that. I in order to launch it in I'll screen mode you will need an icon on your phone home screen. I will post instructions with pictures on how to set a button on the home screen that launches it. These two things combined make it look like you have an app installed that you are launching.

NOTE*** you may think this doesn't sound worth doing because I'm saying full screen. But when you actually make it happen and see it working in person, it makes a huge difference. I really does look good and is totally handy.

Code:
HTML:
<!--Mobile Enhancements: THE FOLLOWING SHOULD BE PLACE IN THE (head)(/head) space-->

<!--Actives the full screen standalone view-->
    <meta name="apple-mobile-web-app-capable" content="yes">

<!--These various icon sizes will set the "app icon" on your home screen. Without these, it will show a Xenforo icon-->
    <link rel="apple-touch-icon" href="assets/images/touch-icon-iphone.png">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon" sizes="76x76" href="assets/images/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="assets/images/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/images/touch-icon-ipad-retina.png">
 
<!--Without those snippet below, the site will exit full screen mode every time you click a link. The browser components will reappear-->
<script>
    // Mobile Safari in standalone mode
    if(("standalone" in window.navigator) && window.navigator.standalone){

      // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
      var noddy, remotes = false;
 
      document.addEventListener('click', function(event) {
   
        noddy = event.target;
   
        // Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
        while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
              noddy = noddy.parentNode;
          }
   
        if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
        {
          event.preventDefault();
          document.location.href = noddy.href;
        }
 
      },false);
    }
    </script>
    <!--/Mobile Enhancements-->
Add Webpage to IPhone home screen to make it appear like an app. (the url in these pics do not work anymore so don't try em ;) )
1. Open website in Safari. At the bottom of the browser in the center you will see a square with an up arrow. Click this button.
IMG_3067.jpg

2. Click the icon in the bottom row that appears that says, "Add to Home Screen".
IMG_3068.jpg

3. (The image that appears here is what the icon for the "app" will look like. This is why that segment of code that has the "icons" is important.
IMG_3069.jpg

That's it! You will now have an app like icon that opens WTF!? in full screen mode and keep it that way as if it is its own app!

If Jason likes this idea, and adds that segment of code to the <head></head> segment of the XenForo code, everything mentioned in this post will be possible. I will add the Android workaround to this post if its gets the green light.
 
Last edited:

ib4

Error
Staff
1,865
2,824
257
Thanks @BudVugger :) You can actually set that App Icon now, the website will view in browser mode though until he adds the little code segment.
 

HeliosHyperion

Lex Notionus
Premium
92
35
37
not that I do the phone-app thing, but jassssss dude!

"no problem, only solution" I'd buy you a whiskey for this. high-five
 
  • 1Like
Reactions: ib4

Jason

Voorhees a jolly good fellow!
Founder
6,902
5,175
537
Well, if I consider it I'll need a few icons in the sizes contained in the above code..

Can anyone work something up with our mascot or wtf.com image (below nav) to work in those 4 sizes?
 
  • 1ORLY?
  • 1Agree
Reactions: Out2Lunch and ib4

Nebulous

Tenderony
127
74
32
You want me to download yet another app for my phone? The several hundred on there right now aren't enough? I'll just access wtf.com via safari. :p