Single word user name in facebook.com

Go to hola.org.

Install the extension for your browser.

Go to hola settings

select facebook.com  to apply the trick.

Change the country to Indonesia

Login to facebook.

Change your language to bahasa (indonesia)

VOILA !!

Advertisements

Vertically center alignment in BootStrap3

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="row center" style="border:1px solid black;">
  <div class="col-sm-4" style="background-color:white;">
   test
  </div>    
<div class="col-sm-8 ">
  test </br>
  test </br>
  test </br>
  </div>    
</div>


CSS

.center {  
  display:flex;
   align-items:center !important; 
   text-align:center;       
}

@media ( min-width:768px ) {
.center {
      display:flex;
      align-items:center !important;     
      text-align:center;     
  }
}

@media ( min-width: 992px ) {
   .center {     
     display:flex;
       align-items:center !important;      
       text-align:center;          
    }
}

@media ( min-width: 1200px ) {
    .center {      
       display:flex;
        align-items:center !important;      
        text-align:center;        
    }
}

CodePen

100% height two-column layout with header & footer.

CSS Part:

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    header, footer {
        position: fixed;
        left: 0;
        right: 0;
        height: 20px;
        background-color: red;
        /* Specify a background color so the content text doesn't
        bleed through the footer! */
    }

    header {
        top: 0;
    }

    footer {
        bottom: 0;
    }

    main {
        height: 100%;
        -moz-box-sizing: border-box;
        /* Ensure that the height of the element includes the  box border, 
           not just the content */
        box-sizing: border-box;
       
        border: 0;
        /* Leave some space for the header and footer to  overlay. */
        border-top: 20px solid white;
        border-bottom: 20px solid white;            
    }

    aside {
        background-color: green;
        width: 300px;
        height: 100%;
        float: left;
    }

    section#right {
        background-color: white;
        overflow:auto;
    }

    .clearfix{
        clear:both;
    }
</style>

HTML Part:

<!DOCTYPE html>
<html>
<head>
    <title>Full Height Body with header & footer</title>
<style>
  ....
</style>

</head>
<body>
    <header>&lt;header&gt;&lt;/header&gt;</header>
    <main>
        <aside id="left">&lt;aside&gt;&lt;/aside&gt;</aside>
        <section id="right">
            &lt;section&gt;&lt;/section&gt;
        </section>
        <div class="clearfix"></div>
    </main>   
    <footer>&lt;footer&gt;&lt;/footer&gt;</footer>
</body>
</html>

JSFIDDLE, CODEPEN

This solution is taken from this StackOverflow post.

AngularJS & Partial View

Main Home Page (Shell Page)

 <main>
    <aside>
        <ul>
            <li><a href="#/ViewContent">View Contents</a></li>
            .....
            .....
        </ul>
    </aside>
    <section id="dynamic-content">
        <ng-view> <!--partials are injected here--></ng-view>
     </section>
</main>

JavaScript Part-

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>

<script>
    var app = angular.module("app", ['ngRoute', 'ngResource']);
    app.config(function ($routeProvider) {
          $routeProvider.when("/ViewContent",
              {
                  templateUrl: "/Admin/ContentList",
                  controller: "ContentListController"
              }
          );
    });

    app.controller('ContentListController', function ($scope, $http) {
        $http.get('/Admin/GetContentList').success(function (response) {
                $scope.contents = response.data;
            });
    });
</script>

MVC Controller- Admin

//This returns only html without any data.
public ActionResult ContentList()
{
    return View("ContentList");
}

//Returns data
public JsonResult GetContentList()
{
    List<Content> contents = new List<Content>();
    using (OleDbConnection connection=new OleDbConnection(ConnectionString))
    {
        using (OleDbCommand command=new OleDbCommand())
        {
            command.Connection = connection;
            command.CommandText = "SELECT....";
            connection.Open();
            OleDbDataReader reader = command.ExecuteReader(CommandBehavior.CloseConnection);
            while (reader.Read())
            {
                Content content = new Content();
                content.ContentId = reader["ContentId"].ToString();
                content.ContentTitle = reader["ContentTitle"].ToString();
                content.ContentTypeName = reader["ContentTypeName"].ToString();
                content.PublishDate = Convert.ToDateTime(reader["PublishDate"]).ToString("dd MMM yyyy");
                contents.Add(content);
            }
        }
    }
    return Json(new {success=true,data=contents }, JsonRequestBehavior.AllowGet);
}

Partial View: ContentList

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Type</th>
            <th>Publish Date</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="content in contents">
            <td>{{content.ContentTitle}}</td>
            <td>{{content.ContentTypeName}}</td>
            <td>{{content.PublishDate}}</td>
            <td><a href="/NewContent/EditContent?contentid={{content.ContentId}}">  Edit</a>&nbsp;&nbsp; 
                <a href="/NewContent/DeleteContent?contentid={{content.ContentId}}">  Delete</a> 
             </td>
        </tr>
    </tbody>
</table>

AngularJS – A Simple Form Submission

HTML Part –

        <form ng-submit="processForm()">
            <input type="text" name="loginName" ng-model="formData.loginName" />
            <input type="password" name="loginPassword" ng-model="formData.loginPassword" />
            <input type="submit" class="button" value="Submit" />
        </form>

JavaScript Part-

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script>
   var formApp = angular.module('formApp', []);
   function formController($scope, $http) {
      // create a blank object to hold our form information
      // $scope will allow this to pass between controller and view
      $scope.formData = {};

      // process the form
      $scope.processForm = function () {
      $http({
           method: 'POST',
           url: '/Admin/ProcessLogin',
           data: $.param($scope.formData),  // pass in data as strings
           headers: { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
            })
            .success(function (response) {
                 console.log(response);
                 if (response.result=="success") {
                      if (response.loginresult == "failed") {
                          alert(response.message);
                      }
                      else {
                            window.location = response.redirecturl;
                      }
                 }

                });
            };
        }

    </script>

Server-side Part-

public JsonResult ProcessLogin(String loginName, String loginPassword)
{
    return Json(new { result = "success", loginresult = "success", redirecturl = "/Admin/AdminHome"}, JsonRequestBehavior.AllowGet);
}

Vertical align anything with just 3 lines of CSS

HTML Part:

<!DOCTYPE html>
<html>
<head> </title>
<body>
<section class="text">
  <p>I'm vertically aligned! Hi ho Silver, away!</p>
</section>
</body>
</html>

CSS Part:

body {
  font-family: Helvetica Neue, Helvetica, sans-serif;
  background: #59488b;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
}

section {
  display: block;
  max-width: 500px;
  background: #433669;
  margin: 0 auto 1em;
  height: 140px;
  border-radius: .5em;
  color: white;
}

.text p {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
  text-align:center;
}

CodePen
This code has been taken from here

Absolute Horizontal And Vertical Centering In CSS

HTML Part

<html>
<head>
<style>...</style>
</head>
<body>   
    <div class="Parent-Container"> <!--this div is optional-->
      <p class="Absolute-Center">This is a paragraph</p>
    </div>
</body>
</html>

CSS Part

    <style>
        body{
            height:100%;
        }
      
        .Center-Container {
            position: relative; /*Position must be relative if it contains an absolute positioned element*/
            background-color: green;
            height: 300px; /*height is also required*/
        }

        .Absolute-Center {
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            height:200px;width:400px; /*Height-Width must be declared*/
            background-color:red;
        }
    </style>

JsFiddle, CodePen, For more