Blog Tech Specs Online Accounts
Projects  
Blog Tech Specs Online Accounts Projects  Projects Overview  Monte Carlo Integration  Stack Exchange Flair  Heathlands  Music Database  Genders  Calculator

Multiple Flairs


Your screen is too narrow to display the flairs

The code

The code for this is hosted on GitHub.com, and is always up to date there. The code below may be a version behind (or more).

The license for the code is The MIT License (MIT). You can read it below the code.

HTML


            
              <html>
                <head>
                  <link rel="stylesheet" href="flair.css">
                  <script src="flair.js"></script>
                </head>
                <body onload="makeAPIRequest('meta', 'http://meta.com', '-1'); makeAPIRequest('meta2', 'http://meta2.com', '22656')">
                  <table>
                    <tr>
                      <td>
                        <div id="flair-meta-in-here" class="flair-div flair-meta-div-hidden w3-padding-ver-16 w3-theme-l4 flair-meta-div">
                          <a id="flair-meta-user-profile-link" class="flair" href="">
                            <table clsss="flair-table">
                              <tr>
                                <td rowspan="3"  class="w3-left-align">
                                  <img id="flair-meta-user-display-image" src="" width="70px">
                                </td>
                                <td class="w3-right-align" colspan="3">
                                  <img id="flair-meta-site-display-image" src="" width="16px">
                                  <span id="flair-meta-user-display-name">
                                    User
                                  </span>
                                </td>
                              </tr>
                              <tr class="w3-right-align">
                                <td id="flair-meta-user-reputation" colspan="3">
                                  1
                                </td>
                              </tr>
                              <tr class="w3-right-align">
                                <td id="flair-meta-user-badge-gold">
                                  <svg height="6" width="6">
                                    <circle cx="3" cy="3" r="3" fill="#ffcc00"/>
                                  </svg>
                                  <span class="flair" id="flair-meta-user-badge-count-gold">
                                    0
                                  </span>
                                </td>
                                <td id="flair-meta-user-badge-silver">
                                  <svg height="6" width="6">
                                    <circle cx="3" cy="3" r="3" fill="#c5c5c5"/>
                                  </svg>
                                  <span id="flair-meta-user-badge-count-silver">
                                    0
                                  </span>
                                </td>
                                <td id="flair-meta-user-badge-bronze">
                                  <svg height="6" width="6">
                                    <circle cx="3" cy="3" r="3" fill="#cc9966"/>
                                  </svg>
                                  <span id="flair-meta-user-badge-count-bronze">
                                    0
                                  </span>
                                </td>
                              </tr>
                            </table>
                          </a>
                        </div>
                      </td>
                      <td>
                        <div id="flair-meta2-in-here" class="flair-div flair-meta2-div-hidden w3-padding-ver-16 w3-theme-l4 flair-meta2-div">
                          <a id="flair-meta2-user-profile-link" class="flair" href="">
                            <table class="flair-table">
                              <tr>
                                <td rowspan="3"  class="w3-left-align">
                                  <img id="flair-meta2-user-display-image" src="" width="70px">
                                </td>
                                <td class="w3-right-align" colspan="3">
                                  <img id="flair-meta2-site-display-image" src="" width="16px">
                                  <span id="flair-meta2-user-display-name">
                                    User
                                  </span>
                                </td>
                              </tr>
                              <tr class="w3-right-align">
                                <td id="flair-meta2-user-reputation" colspan="3">
                                  1
                                </td>
                              </tr>
                              <tr class="w3-right-align">
                                <td id="flair-meta2-user-badge-gold">
                                  <svg height="6" width="6">
                                    <circle cx="3" cy="3" r="3" fill="#ffcc00"/>
                                  </svg>
                                  <span class="flair" id="flair-meta2-user-badge-count-gold">
                                    0
                                  </span>
                                </td>
                                <td id="flair-meta2-user-badge-silver">
                                  <svg height="6" width="6">
                                    <circle cx="3" cy="3" r="3" fill="#c5c5c5"/>
                                  </svg>
                                  <span id="flair-meta2-user-badge-count-silver">
                                    0
                                  </span>
                                </td>
                                <td id="flair-meta2-user-badge-bronze">
                                  <svg height="6" width="6">
                                    <circle cx="3" cy="3" r="3" fill="#cc9966"/>
                                  </svg>
                                  <span id="flair-meta2-user-badge-count-bronze">
                                    0
                                  </span>
                                </td>
                              </tr>
                            </table>
                          </a>
                        </div>
                      </td>
                    </tr>
                  </table>
                </body>
              </html>
            
          

CSS


            
              #flair-meta-user-profile-link {
                text-decoration: none;
              }

              #flair-meta-in-here {

                display: block;

                /* Change this - default flair is 250px*/
                width: 250px;

                /* Centre in middle of container */
                margin: 0 auto;

                /* Pad the box */
                padding: 16px;

                /* Nice blue-grey background colur */
                background-color:#dfe5e8;

                font-family: 'Raleway', sans-serif;
                font-size: 15px;
                line-height: 1.5;

                /* Include padding / margin in width */

                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box

              }

              .flair-table {
                width: 100%;
              }

              .flair-meta-div-hidden {
                display: none !important;
              }

              #flair-meta-site-display-image {
                margin-bottom: -3px;
              }

              .w3-center {
                  text-align: center;
              }

              .w3-right-align {
                  text-align: right;
              }


              #flair-meta2-user-profile-link {
                text-decoration: none;
              }

              #flair-meta2-in-here {

                display: block;

                /* Change this - default flair is 250px*/
                /* 270 minimum for Jon Skeet */
                width: 270px;

                /* Centre in middle of container */
                margin: 0 auto;

                /* Pad the box */
                padding: 16px;

                /* Nice blue-grey background colur */
                background-color:#dfe5e8;

                /* I like Raleway */
                font-family: 'Raleway', sans-serif;
                font-size: 15px;
                line-height: 1.5;

                /* Include padding / margin in width */

                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box

              }

              .flair-meta2-div-hidden {
                display: none !important;
              }

              #flair-meta2-site-display-image {
                margin-bottom: -3px;
              }
            
          

JavaScript


            
              function createCORSRequest(method, url) {
                var request = new XMLHttpRequest();
                if ('withCredentials' in request) {
                  request.open(method, url, true);
                } else if (typeof XDomainRequest != 'undefined') {
                  request = new XDomainRequest();
                  request.open(method, url);
                } else {
                  request = null;
                }
                return request;
              }

              function makeflair(data,site) {
                document.getElementById('flair-'+site+'-user-badge-count-bronze').innerHTML = data[0];
                document.getElementById('flair-'+site+'-user-badge-count-silver').innerHTML = data[1];
                document.getElementById('flair-'+site+'-user-badge-count-gold').innerHTML = data[2];
                // If a user is a moderator, add the diamond ♦ symbol
                var symbol = '';
                if (data[8] == 'moderator') {
                  symbol = '♦';
                }
                document.getElementById('flair-'+site+'-user-display-name').innerHTML = data[3] + ' ' + symbol;
                document.getElementById('flair-'+site+'-user-display-image').src = data[4];
                document.getElementById('flair-'+site+'-user-reputation').innerHTML = data[5];
                document.getElementById('flair-'+site+'-user-profile-link').href = data[7] + '/users/' + data[6];
                document.getElementById('flair-'+site+'-in-here').className = 'w3-padding-ver-16 w3-theme-l4 flair-'+site+'-div';
                // Currently SE has a weird system for naming favicons: http://meta.stackexchange.com//280163
                if (site == 'meta') {
                  document.getElementById('flair-'+site+'-site-display-image').src = 'https://cdn.sstatic.net/Sites/stackexchange'+site+'/img/favicon.ico';
                } else {
                  document.getElementById('flair-'+site+'-site-display-image').src = 'https://cdn.sstatic.net/Sites/'+site+'/img/favicon.ico';
                }
              }

              // Helper method to parse the title tag from the response.
              function getTitle(text) {
                return text.match('(.*)?')[1];
              }
              function makeAPIRequest(site, siteUrl, userId) {
                var key = 'APIKEYHERE';
                var filter = '!LnO)*RBcGb8ff5h3LzJPmw';
                // If no key provided, don't send key perameter
                if (key == '') {
                  var url = 'http://api.stackexchange.com/2.2/users/' + userId + '?order=desc&sort=reputation&site='+site+'&filter='+filter;
                } else {
                  var url = 'http://api.stackexchange.com/2.2/users/' + userId + '?order=desc&sort=reputation&site='+site+'&key='+key+'&filter='+filter;
                }
                document.getElementById('flair-'+site+'-site-display-image').src = 'https://cdn.sstatic.net/Sites/'+site+'/img/favicon.ico';
                var response = createCORSRequest('GET', url);
                response.onload = function() {
                  var text = response.responseText;
                  parsedJSON = JSON.parse(text);
                  try {
                    var items0 = parsedJSON.items[0]
                    var data = [items0.badge_counts.bronze, items0.badge_counts.silver, items0.badge_counts.gold, items0.display_name, items0.profile_image, items0.reputation, items0.user_id, siteUrl, items0.user_type]
                    makeflair(data,site);
                  }
                  catch(err) {
                    console.log(parsedJSON)
                  }
                };
                response.send();
              }