External links to open InAppBrowser or System Browser in Phonegap webView application

I had a problem in my phonegap application that open external link within my application. The problem is that my webview page was replaced by external link. What I wanted is that my external link should open up on safari or system browser instead.

So, to resolve the issue here's what I did.

First, we need to add cordova.js in all our pages. The latest cordova.js or phonegap.js can be downloaded from the phonegap website - http://www.phonegap/install.

<script src="js/cordova.js" type="text/javascript"></script>


You might need to install the inappbrowser plugin if needed but I believe on the latest cordova version, this was already part of the framework but just in case you needed, you can execute this command via console on your application directory to install the plugin.

phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Next, is to add the 2 javascript function below. I have here 2 function to choose from whether you want the link to open InAppBrowser or System Browser.

<script type="text/javascript" charset="utf-8">
    function openURLInApp(href) {
        var w = window.open(href, '_blank');
        w.opener = null;
        w.document.write('<META HTTP-EQUIV="refresh" content="0; url='+href+'">');
        w.document.close();
    }

    function openURLToBrowser(href) {
        var url = encodeURI(href);
        window.open(url, '_system');
    }
</script>


Finally, we need to call the function above on every external link we want to open on either system browser or in app browser. Please see below.

<a href="#" onclick='openURLInApp("http://www.google.com");'>Google</a>


Hope this will help a lot on developing device application. Happy coding!!

Setting up shadow boxes on your website.

This is just a short post for you to put shadow inside and outside of your website's page elements such as input text box, text area, buttons, images, etc..

Inside Shadows:

.in-shadow {
        box-shadow: inset 1px 1px 1px #a2a2a2;
        -moz-box-shadow: inset 1px 1px 1px #a2a2a2;
        -webkit-box-shadow: inset 1px 1px 1px #a2a2a2;
}

Outside Shadows:

.out-shadow {
        box-shadow: inset 1px 1px 1px #a2a2a2;
        -moz-box-shadow: inset 1px 1px 1px #a2a2a2;
        -webkit-box-shadow: inset 1px 1px 1px #a2a2a2;
}

Hope you like this. Happy coding!!

How to parse an XML return across browser and return an XML object via jQuery.

I came to across to a problem where I can't parse the XML return from the REST URL using jQuery on IE browser.

Since our best friend IE has another way of thinking, I come up with a function that cater all XML parsing (across browser).

The function below parseXMLToObj will accept parameter xmlData, which can either be an object or an XML string.

The function will return the converted XML object which you can use in doing some jQuery stuff.

You can download jQuery from here: http://code.jquery.com/jquery-latest.js


function parseXMLToObj(xmlData) {
        if ($.isXMLDoc(xmlData) || !$.browser.msie || ($.browser.msie && document.documentMode == 9)) {
                return $(xmlData);
        } else {
                var xmlDoc = $.parseXML(xmlData);
                return $(xmlDoc);
        }
}


Sample Usage:

var xmlData = "<results><data>1</data><data>2</data></results>";
parseXMLToObj(xmlData);


Goodluck! Happy coding!!

IE 101: Misalignment of element on IE browsers

In web development, most developers have issues on IE compatibility. One of the problem I encountered are the misalignment of the element in IE browser, specially the IE8.

This is due to the styling you made on alignment. We normally use vertical alignment in CSS to align our element vertically.

Problem here is that the value "text-top" is not working on IE8. Hence, you have to use "top" instead, which is the same behavior with "text-top".

In your CSS entries, instead of using this one:

vertical-align: text-top;

You have to use this one:

vertical-align: top;


Hope this helps.

I'll be posting more of IE issues to help other developers to get through with it. Follow IE 101 for more of IE posts.

CSS class for transparency that all browsers support

Personally, one of my favorite in web designs are transparency. It gives life to your site as you will have layers of texts and images in one look.

It's great thing haa!! but did you know that having that in your site is a challenge for us programmers? That is because we have to consider all browsers to support transparency in one time setting.

Good thing..!! The class below will resolve the implementation of transparency for all browsers.

.transparency {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

Below are the CSS properties we used:

• opacity: 0.5; - This is the current standard in CSS transparency settings. This will work in most versions of Firefox, Safari, and Opera.
• filter: alpha(opacity=50); - This one is for our best friend IE.
• -moz-opacity: 0.5; - This one you need for way too old version of Mozilla.
• -khtml-opacity: 0.5; - This one you need for old Safari (1.x).

Resource: css-tricks.com