A Free HTML5 POPUP Window Widget

These days, I am working on HTML5 project. In the project, I need to popup a window with black background mask. When I click on the mask, the popup window will dismiss. This effect is quite simple but it may take time when we want to implement it again. So I put this HTML popup widget here. You can download this HTML5 widget for free.

Demo: Click Button to Popup Window with Black Background

In this demo, I will put an anchor link. When clicking on the link, a text field will popup. When clicking on the black background, the text field will dismiss.

<a onclick="popup()">Open</a>

Import the following javascript in the html:

	<script src="simplePopup.js"></script>
		var myDiv = null;
		function popup() {
			var popupEng = new simplePopup();
			if(myDiv == null) {
				myDiv = document.createElement("div");
				myDiv.style.zIndex = "3";
				myDiv.style.position = "absolute";
				myDiv.innerHTML = "Click Black Background to Dismiss!";
				myDiv.style.backgroundColor = "#FFFFFF";
				myDiv.style.paddingTop = "5px";
				myDiv.style.paddingBottom = "5px";
				myDiv.style.paddingLeft = "5px";
				myDiv.style.paddingRight = "5px";
            myDiv.style.display = "block";

Try the demo: Click to open

Download HTML5 Popup Window Widget for Free

You can download this JS library for free.

Download JS Library

Ajax HTTPs Reuqest in iOS UIWebview

Using Ajax to GET and POST data is general choice when we are developing hybrid applications. In my latest project, I am using cordova (phonegap) to build an iOS app with HTML5, javascript and css. In this app, all conmunication in this app will use AJAX. This approach will extremely increase the project development speed. To enhence the safety, we are using HTTPs when we are using Ajax to get and post data in our mobile apps. With AJAX, we can develop the HTML project in HTMl browsers like Chrome, Safari or Firefox. After we finish the project, we can easily deploy the whole project in iOS and Android with cordova (phonegap).
Read more

Build Android App and IOS App with Backbone and Cordova

Most of the companies wanna to create both Android app and iOS app to cover all mobile device visitors. To save effort and time, many companies try to choose hybrid development which can create cross platform apps. The ideal result is coding once and running anywhere. Currently, there are several frameworks to help people create cross platform app, such as Cordova, Adobe Air, IONIC. The best advantage of hybrid development is that we can use HTML5, CSS and Javascript to build the native app for Android device, iOS device, Windows device, etc. Of course, not every framework use HTML and Javascript to implement the cross-platform.
Read more

Make Your Website Fully Responsive For Google

Several weeks ago, I got an email from google. The abstract is that Google search will analyse your website and find how if your website is mobile friendly, fully responsive in other words. And this factor will affect the search result on mobile. For most of old website, it is a hard job to make the whole website mobile friendly. But there are more and more traffic from mobile. So what will you decide to do, change your website fully responsive or lost traffic from mobile? Now let’s start to make our website mobile friendly.
Read more

Build Complex HTML Chart with Google Chart

Google chart is a powerful graphic chart library to build HTML or SVG chart dynamically. Several days ago, I got a project to build a 4 dimension chart with Google Chart. The project requires to build a combo dual-Y axis chart with 2 stacked columns and 1 line. In Google char help page, there are some example to explain how to build stacked column chart, line chart, dual-Y axis chart, or combo chart. But there is no example to show you how to build such complicated chart which has dual-Y axis, stacked columns and line at the same time. After several hours research and test, I successfully got it working with Google Chart library. I guess it could be very helpful if I post the source code here.
Read more