PgwBrowser Jquery Plugin : Very Easy to Detect Browser and Operating System with Jquery

detect browser

You want to create an application that is specific to a browser or operating system, for example the application can run smoothly on the android operating system with google chrome browser. This is just an application problem. For that, you can use a jquery plugin, its name is PgwBrowser.

This plugin will detect the following parameters

  1. The operating system used by the client
  2. Web browsers are used, complete with engine
  3. View port / monitor resolution.

All the above data with the complete versions, so you get the right data, then your application can determine the next action.

PgwBrowser Jquery plugin will return a json data. As below format

{
   "userAgent": "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36",
   "browser": {
      "name": "Chrome",
      "group": "Chrome",
      "fullVersion": "36.0.1985.143",
      "majorVersion": 36,
      "minorVersion": 0
   },
   "viewport": {
      "width": 1583,
      "height": 799,
      "orientation": "landscape"
   },
   "os": {
      "name": "Windows 7",
      "group": "Windows",
      "fullVersion": "7.0",
      "majorVersion": 7,
      "minorVersion": 0
   }
}

After that, you can parse the json string with PHP, then get its value. This method is very easy to use.

[Snippet] Generate Random String with Javascript

When creating a program, sometimes we need a useful random string to create a unique invoice, but we do not have to create it manually. The easiest and most appropriate way is to submit the task to the program we are designing.

random string

One way is with a random string. That is a special function that produces a random string, which is unique and automatically. Since I use javascript, then I use this function to generate a random string.

function makeid(){
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

This function will generate a random string of 5 characters. Quite easy right?

jQuery Alerts Must Be Try Before Write a Code

Avgrund Modal jQuery Plugin

Alerts and notifications are used designers to notify the results of a process to the user. Therefore, alerts and notifications should be cool and easily understood by the end user.
There are some javascript or jquery plugin to create alerts and notifications to be even better. Developers and designers also made easy with this plugin.
All this under a free plugin, you can use it on all your projects.

Avgrund Modal jQuery Plugin

Avgrund Modal jQuery Plugin

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior).

Website | Download

Bootbox.js – Bootstrap Powered Alert, Confirm and Dialog Boxes

Bootbox.js – Bootstrap Powered Alert, Confirm and Dialog Boxes

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

Website | Download

FBModal – Facebook Style jQuery Modal Plugin

FBModal – Facebook Style jQuery Modal Plugin

FBModal is a jQuery plugin that is the first Facebook replica modal dialog. FBModal provides a simple ways to invoke a modal dialog.

Website | Download

Bootstrap Dialog – Flexible Dialog for Bootstrap

Bootstrap Dialog – Flexible Dialog for Bootstrap

Bootstrap Dialog is a flexible modal for Bootstrap 3 using pure javascript. It has many options and methods to customize.

Website | Download

Alertify – JavaScript Alert/Notification System

Alertify – JavaScript Alert/Notification System

Alertify is an unobtrusive customizable JavaScript notification system.Features

Website | Download

SweetAlert – Beautiful Replacement for JavaScript Alert

SweetAlert – Beautiful Replacement for JavaScript Alert

SweetAlert is a beautiful replacement for JavaScript’s alert.It automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet. It’s highly customizeable.

Website | Download

noty – jQuery Notification Plugin

noty - jQuery Notification Plugin

noty is a jQuery plugin that makes it easy to create alert, success, error and confirmation messages as an alternative the standard alert dialog. The notifications can be positioned at the top, topCenter (like GMail), bottom, centre, top left or top right. There are lots of other options in the API to customise the text, animation, speed, buttons and much more.

Website | Download

jQuery Sticky Alert

jQuery Sticky Alert

Sticky Alert is a minimal jQuery plugin to add a sticky alert bar to the top of your website. It’s available under the MIT license and is free for use on personal or even commercial projects.

Website | Download

Easy Z Modal – jQuery Modal Plugin

Easy Z Modal – jQuery Modal Plugin

Easy Z Modal is a simple, customizable and dynamic jQuery plugin to create modals and dialog boxes.

Website | Download

Apprise – Attractive Alert Alternative for jQuery

Apprise – Attractive Alert Alternative for jQuery

An alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality.Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework.

Website | Download

jQuery Ambiance Notification Plugin

jQuery Ambiance Notification Plugin

jQuery Ambiance allows you to create notifications on the fly by just calling the function and providing some information

Website | Download

jQuery Confirm – Multipurpose Web Alert & Confirm

jQuery Confirm – Multipurpose Web Alert & Confirm

jQuery Confirm is a multipurpose jQuery plugin for alert, confirm and dialog. It provides set of features like, Auto-close, Ajax-loading, background-dismiss, themes and more.

Website | Download

Sticky – Simple Notification for jQuery

Sticky – Simple Notification for jQuery

Sticky is a simple notification system that allows you to send such messages with ease, and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders.

Website | Download

Lobibox – Responsive jQuery Notification Plugin

Lobibox – Responsive jQuery Notification Plugin

Lobibox is a responsive jQuery messagebox and notification plugin.Both Messageboxes and Notifications has some useful option to customize.

Website | Download

Simply Toast – Simple Toast Messages for jQuery

Simply Toast – Simple Toast Messages for jQuery

Simply Toast is a simple toast messages for jQuery. All css styles were extracted from bootstrap, so if you already use bootstrap, you don’t need include plugin css file.

Website | Download

Resources to Building Pinterest Layout with Bootstrap

bootstrap-layout-pinterest

Pinterest brings a fresh new layout. The developers want to imitate it in various ways, such as by using the bootstrap and javascript. Thus, many released wordpress themes or themes with a layout similar to HTML pinterest. Actually, this layout suitable for a website with lots of pictures, displays a random image with different sizes and trimmed with javascript.
The most popular Javascript is masonry, unfortunately there is no developer who is able to combine perfectly masonry and bootstrapping. Because, I am also looking for him.

Well, although it can not be incorporated perfectly, at least we can still use the bootstrap with javascript (jquery plugin) to create layouts pinterest. Below I detail how to make pinterest style layout with additional bootstrap and javascript.

1. Mansory CSS with Bootstrap

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 
  
}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.well {
 position:relative;
 display: block;
}

 

<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
<div class="row">
    <div class="item">
      <div class="well"> 
        1 blah blah blah
      </div>
    </div>
 	<div class="item">
        <div class="well"> 
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well"> 
        3 blah blah blah blah blah blah blah blah h
        </div>
    </div>
    <div class="item">
        <div class="well">
        blah blah blah blah 
        </div>
    </div>
    <div class="item">
        <div class="well"> 
          blah blah blah. The container inside the item must be position:relative
        </div>
    </div>
 	<div class="item">
        <div class="well"> 
        blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well">
        blah blah blah blah blah blah blah blah h
        </div>
    </div>
    <div class="item">
        <div class="well"> 
        blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well"> 
        blah blah blah blah blah blah blah blah blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well"> 
          blah blah blah. The container inside the item must be position:relative
        </div>
    </div>
</div>
</div>

Source

2. Pinstrap – a HTML Template

3. Bootstrap Mansory Template

bootstrap mansory template

Download

4. Simple jQuery Plugin to Create Pinterest Layout

I am use this jquery plugin to build jabirah, its easy to use, fast and client side calculation

pinterest layout

Download

5. Waterfall.js

Its best pinterest layout with javascript, because is combine with infinite scroll. I am prefer to use it, but when deal with infinite scroll, it very hard to implement with my cakePHP.

pinterest layout

Download

Recomended this one.

Gridsby is premium bootstrap theme with pinterest style. If you dont have time to design, you can use it. I am very recomended this stuff.

gridsby

Fully Responsive

Built with a 100% fluid grid system, Fit Coach gives your visitors the ability to browse your site easily on any device. The layout makes booking classes on tablets and mobile devices a breeze.

Download here

 

Best RequestJs Alternative : Needle

All developers know that requestjs is a library that is very useful for HTTP calling just like web browsers that we use. RequestJS almost supports all activities such as streaming, autentication, GET and post. But, I have problems with requestjs when trying to open codecanyon.net (only codecanyon and a group of Envato), but not for the other sites.

The problem is as described in on this page,

I can not solve that problem. Finally, I look for an alternative for requestJS that do not have a problem.

Previously, I’ve tried to update requestjs, perhaps there is a bugs and the problem is not finished. I do not know why, maybe with this article, the author of requestjs will fix the problem.

Ok, I tried to find an alternative, and I found the needle. Needle is a library similar to requestjs. Here are some features of needle

  • HTTP/HTTPS requests, with the usual verbs you would expect
  • All of Node’s native TLS options, such as ‘rejectUnauthorized’ (see below)
  • Basic & Digest authentication
  • Multipart form-data (e.g. file uploads)
  • HTTP Proxy forwarding, optionally with authentication
  • Streaming gzip or deflate decompression
  • Automatic XML & JSON parsing
  • 301/302/303 redirect following, with fine-grained tuning, and
  • Streaming non-UTF-8 charset decoding, via iconv-lite

This makes Needle an ideal alternative for performing quick HTTP requests in Node, either for API interaction, downloading or uploading streams of data, and so on. If you need OAuth, AWS support or anything fancier, you should check out mikeal’s request module.

Installing Needle

npm install needle

Example code

var needle = require('needle');
 
needle.get('http://www.google.com', function(error, response) {
  if (!error && response.statusCode == 200)
    console.log(response.body);
});

Needle successfully resolve my problem. It’s worked for me!
Now, bot that I designed working again. Thanks Needle

Infographic : What Will You Choose : AngularJS, BackboneJS or EmberJS ?

When would choose to use or learn javascript MVC framework, you should know there are three large javascript MVC framework available on the internet, namely: AngularJS, Backbone JS and EmberJS. There are at least three such frameworks have a large community, you do not have to worry when encountering problems. That so the question is: What kind of features that you want and whether the framework is suitable for you.

Also read : Best angularJS tutorial and EmberJS tutorial collections
For the record, these frameworks will not stop to be developed by the developer and the community. So choose the best.
I found a nice infographic that will explain to you about when framework: AngularJS vs BackboneJS vs EmberJS

Choosing-Javascript