by Daniel, on 12th Aug, 2013

Recreating the Facebook Mobile Menu effect

Hello all,

Been busy here @weareforrk HQ with lots of new client work (& our summer holidays) which explains the slight delay in our latest blog post. 

Today we are going to create a mobile menu in HTML/CSS and a tiny bit of JQuery. The mobile menu will function in the same way the Facebook mobile-app menu expands from the left hand side and pushes the main content out of the viewport. You can view it in action on Facebook by visiting http://m.facebook.com & you can check out our example here.

 

Lets begin with our HTML. (Start with a blank HTML template - I personally prefer http://html5reset.org/)

Below are the elements we will use to build our basic mobile menu:

 

    

Mobile Menu Example

  • Home
  • About
  • Contact

Now lets move onto the styling of the elements. I will start with the content container, for this element the styling is mostly dependant upon your needs. I have gone with a fluid width and a set height of 100% (height should be removed for non-demo purposes). The container is centered and has padding although this is calculated within the width by using box-sizing:border-box. The important CSS here is that the .content class has a position of relative.

 

    .content
    {
        width:75%;
        margin:0px auto;
        background:white;
        -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.05);
        box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.05);
        height:100%;
        text-align:center;
        box-sizing:border-box;
        position:relative;
    }

Next up we will style the actual mobile menu. Once again exact styles can be changed dependant on your needs, the only important styles that must be applied are those which position the element and ensure display is set to none by default. We will also create a class of active which will display the element when appropriate.

 

   #mobile-menu
    {
        position:absolute;
        left:0;
        top:0;
        width:70%;
        height:100%;
        z-index:100;
        -webkit-box-shadow: inset -25px 0px 15px -25px rgba(0,0,0,0.2);
        box-shadow: inset -25px 0px 15px -25px rgba(0,0,0,0.2);
        display:none;
    }
    #mobile-menu.active
    {
        display:block;
    }

Now we have built our basic page we need to style the element which will trigger the mobile menu when clicked. This is contained in the .top-bar element. This element is once again hidden and only becomes visible using media queries when our screen is less than a certain width. I have this set to

   .top-bar
 {
 display:none;
 width:100%;
 background:#2f2f2f;
 color:white;
 padding:10px 0 10px;
 z-index:100;
 text-align:left;
 }

So to recap we have a standard container for our content. A top bar which becomes visible when the site is viewed in a device with a low enough screen resolution and a mobile menu which is placed absolutely to the left of the page and hidden with display:none

Now we have to use some JQuery to make the mobile menu visible when the user clicks our 'open menu' link. The JQuery is below and is very simple. All we do is listen for a click event on the relevant DOM element and check if the mobile menu has a class of active. If it does not then show the menu and force the main container out of view, if it does then rehide the menu and move the container back.

   
 $('.mobile-interact').click(function()
 {

    if($('#mobile-menu').hasClass('active'))
    {
        $('#mobile-menu').removeClass('active');
        $('.content').css('left', '0%');
    }
    else
    {
        $('#mobile-menu').addClass('active');
        $('.content').css('left', '70%');
    }

 });

And that's about it. You can style this however you want. Don't forget if you have any questions about this tutorial you can always tweet us @weareforrk. The demo can be found here. (Remember you will need to resize your browser window (or view on mobile) if you wish to actually see the effects, this is after all a mobile tutorial)

by Daniel, on 7th Jan, 2013

Finding a short Twitter Username (Mission Impossible)

Hello, this is my first every blog post for Forrk, a Web Development agency which I have co-founded with Ross Tanner & Andy Barr (& may many more follow)

You may notice if you clicked any of the links I have provided above to my esteemed colleagues profiles that they both go to their respective owners twitter profiles. Why? Because (in my opinion) this is almost always how best to get an idea of somebody in the online environment these days. Facebook, whilst remaining as popular as ever is a slightly more private place where people often offer a restrictive profile view to those users who are not already 'Friends'  of the user. Twitter however is a whole different ball game and although they do offer the opportunity for users to screen their followers it is an option many do not take up. 

In the Web Design/Development field I follow a lot of advice and read even more blogs based purely on the person in questions presence on Twitter. This in its-self says a lot about the positive influence having good social networking profiles can have for you or your business. But I'm not here to sell you on social networking (you should already be sold). I'm here to help you find a short username because in Social Media nothing is more valuable real estate than your username.

A good twitter username is important for all the obvious reasons and then you remember that Twitter imposes a 140 character limit on Tweets which means having a short username can help people conversing with you get those extra word in the conversation. That and they look MUCH cooler.

So the challenge was to try and find the shortest possible username currently available on Twitter. I started by looking at the Twitter V2 docs but found to my dismay the Twitter rate limit for authorised user/lookup requests to just 150 per hour. Now my early estimations for a three (letter only) character username told me I would need to check over 17,575 combinations which would take about 117 hours if we went via the API route. This was clearly not an option.

So I played around in my browser by requesting invalid username such as (http://twitter.com/hghdguyrgyg) and noted these went to 404 pages. Success - this allowed me to separate the invalid/available usernames from the names already taken.

First of all I mocked up a basic PHP script which generated every possible combination of usernames and via CURL checked to see if the profile was valid. This worked, however, it still took some time to run and I didn't like waiting for the page to buffer usernames to get the most recent results so I tried a different tact (and I also needed to try 4 letter usernames). I set up the loop in Javascript and used AJAX/PHP handle the CURL checking and returning of results.

Now for the code:

First off below is my complete JS Code. I will explain each part in detail.

$(document).ready(function() {
var count = 0;
dance:  
for (var first = 97; first < 123; first++) 
 {
  for (var second = 97; second < 123; second++)  
   {
    for (var third = 97; third < 123; third++)  
     {
      for(var fourth = 97; fourth < 123; fourth++)
       {
        var username = String.fromCharCode(first,second,third,fourth);
        $.ajax({
          dataType: 'json',
          url: "http://192.168.1.40/username/twitter.php?username="+username,
         cache: false
        }).success(function( data ) {
          var count = parseInt($('#counter').text());
          $( "#counter" ).html( count+1 );
          if(data.status =='available')
          {
           $("body").append('The twitter username - '+data.username+' appears to be available'); 
          } 
          else 
          { 
           console.log(data); 
          } 
          }); 
          count++; 
       } 
     } 
   } 
 } 
});

First and foremost we start with the standard document ready. Then I have labelled the for loop so I/you can break it wherever necessary to avoid running through each username every time you want to run the script.

So here what we are doing is looping through each ASCII character (a-z) on four different levels which will help me produce a four letter username beginning with 'aaaa', 'aaab','aaac' etc etc. You could potentially increase the number of characters by nesting further loops:

 for (var first = 97; first < 123; first++) 
 {
  for (var second = 97; second < 123; second++)  
   {
    for (var third = 97; third < 123; third++)  
     {
      for(var fourth = 97; fourth < 123; fourth++)
       {

Once the ASCII numbers are generated I convert them into a char string using:

 var username = String.fromCharCode(first,second,third,fourth);

Now we have the username generated and ready to verify with twitter I send it off as a parameter to a PHP script (which I will also run through) to check with twitter.

 for (var first = 97; first < 123; first++) 
 $.ajax({
          dataType: 'json',
          url: "http://192.168.1.40/username/twitter.php?username="+username,
         cache: false
        }).success(function( data ) {
                var count = parseInt($('#counter').text());
                $( "#counter" ).html( count+1 );
                if(data.status =='available')
                {
                    $("body").append('

The twitter username - '+data.username+' appears to be available'); } else { console.log(data); } }); count++;

So above I am receiving the result from my PHP script via AJAX in JSON format. If my script advises the username is available I simply append the username to my HMTL body. If not I have console.log the return but this is not necessarily important or something you need to do. Please note above I have also used a counter to visually aid in how many usernames I have checked, again this is optional.

This is it for our Javascript. To recap: We have generated - using for loops - every possible combination of (letter only) four character usernames and sent them off to a PHP script via AJAX for checking. Once the result is returned we handle accordingly.

So below we have the PHP which handles the actual checking of the username and all of the 'hard work', once again the full code is below and I will explain in detail each section:

    $username = $_GET['username'];
    if(!empty($username) && $username != '')
    {
          $url="http://twitter.com/".$username;
          
          $ch = curl_init();
          curl_setopt($ch, CURLOPT_URL, $url);
          curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
          curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
          curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
          curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
          $return = curl_exec($ch);
          $http_status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
          curl_close($ch);
                              
          if ($http_status == "404")
          {
                echo json_encode(array('status' => 'available', 'username' => $username));
          }
          else
          {
                echo json_encode(array('status' => 'not available', 'username' => $username));
          }  
    }

So to begin with we verify that we do indeed have the username we passed through in the URL.

 
 $username = $_GET['username'];
 if(!empty($username) && $username != '')
 {

Once this has been done we generate the URL we are going to check which is the standard Twitter profile URL with the generated username passed in.

 
 $url="http://twitter.com/".$username;

Now we initiate CURL, set our options and execute - we need SSL_VERIFYHOST set to false because all Twitter profile URL's are https. All we really want is the HTTP return header from the page so we store this in a variable called $http_status which we can use for checking.

  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
  curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  $return = curl_exec($ch);
  $http_status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
  curl_close($ch);

Finally we have a very simple IF statement which checks whether we have stumbled upon a valid profile or an available one. The result is echoed in a JSON encoded array which is in return received by the earlier AJAX script to output on the page.

  if ($http_status == "404")
  {
        echo json_encode(array('status' => 'available', 'username' => $username));
  }
  else
  {
        echo json_encode(array('status' => 'not available', 'username' => $username));
  }  

After running through 17,576 three letter usernames I found 16 which were not already being used and all of these had been made unavailable by twitter for some reason or other. I am currently running through the four letter usernames and will post any I find available (that I do not want!) in this post and on our Forrk Twitter so check back and give us a follow!

request a callback

Why not check us out on some of our social networking accounts. Alternatively, if you would prefer to contact us directly, you can always drop us a line below or on hello@forrk.co.uk or tell us about your project and get a quote.

GET A QUOTE Back to top