HTML5 SVG Support check using JavaScript – the simple way

My last post talked about how you can detect whether your browser supports HTML5 Canvas or not using simple JavaScript technique. Based on the same principles, this post illustrates how you can detect if your browser supports SVG elements. You may note SVG is Scalable Vector Graphics and HTML5 has native support for SVG tags. The difference with Canvas is that in case of SVG elements, they become a part of the DOM and you can manipulate each SVG elements, whereas in case of Canvas, the entire <canvas></canvas> tag becomes one node in the DOM and anything inside the Canvas <canvas> tag (for eg. a Rectangle) cannot be manipulated individually using standard DOM methods. Browse the web and you will find a hell lot of topics on this.

Alright, now back to the detection code. Just copy/paste this inside your window load / body load or in case of JQuery the $(document).ready() method,

if(!document.createElement('svg').getAttributeNS){
  document.write('Your browser does not support SVG!');
  return;
}

So, if your browser does not support SVG, then it will not process further (in case your application cannot live without SVG). But if you have a back up plan and you can live without SVG in your browser, then you can add an else block along with the if so that you can write your backup logic.

Explanation
Well, the code is very simple. Inside the if condition I create a SVG element using the standard DOM createElement() method. Now this will create a <svg></svg> object. Now next thing I do is to check if the getAttributeNS() method is defined or not. If you browser does not support <svg> then there is no way it will understand getAttributeNS() and that’s the catch.

Advertisements

HTML5 Canvas Support check using JavaScript – the simple way

This is how you can check for HTML5 Canvas support in your browser by using JavaScript, there’s no need of an external library like Modernizer to do a simple check like this. In fact most of the feature checks can be done natively, that’s what I prefer.

Here is the code,

var canvasEl = document.createElement('canvas'); //create the canvas object
if(!canvasEl.getContext) //if the method is not supported, i.e canvas is not supported
{ 
  document.write("HTML5 Canvas Not Supported By Your Browser");
  return;
}

As you can see in the first line I create a HTML5 Canvas element by using createElement() DOM method. As you might know that to work with Canvas, you have to get it’s context object (2d for now), which can be retrieved by the getContext() method. So, if a browser does not support the <canvas> tag or the canvas element, then no way the getContext() method will be defined for it. That’s what I check in the second line – the if condition. Remember that a function/method name is a variable which holds a reference to the function block. So we can check whether it is defined or not, in a normal way like we do for object properties. IE8 doesn’t support HTML5 Canvas. So try this code in IE8 for a quick test.

How can I use it with my code?
Use this code block inside the window load event handler or when the DOM ready event is triggered (using document.onreadystatechange, more). You can modify it as per your need.
Leave behind a comment if you are upset with this attempt.

RIA Lab is Pom Pom Labs now

Only the name has changed. The spirit still remains the same.

But just to let you know RIA Lab (https://jbkflex.wordpress.com) is moving to its new home base – Pom Pom Labs (http://pompomlabs.wordpress.com/). We are currently in the process of moving our stuff and things might be here and there till we settle down, which is normally what happens when you are shifting your house isn’t it? 4 to 5 days of random crap lying everywhere.

Augmenting the String object by extending its prototype – JavaScript

Every function in JavaScript has the prototype property which enables you to enhance the functionality of the current Object definition (the Class definition) either through adding properties or through methods. This stands true for both custom Objects as well as JavaScript defined Objects like Strings, Arrays.
Using prototypes to add functionality also has one more advantage and is performance optimized. Whatever methods or properties are defined using prototypes, they belong at the class level which means that all the instance of the Object (or rather the Class, in JavaScript there is no concept of Class, we say it Objects) will share the same copy of the method or property, rather than having their own individual copies.

In this post I am going to enhance the String Object which is already defined in JavaScript and has a lot of useful methods already available such as the split(), indexOf(), replace() etc and properties like length etc.

Now let’s add our new method to the String Object just to enhance its functionality. Let’s add a method that will remove the empty spaces between the words of a string value. For eg.

input value = The weather is very nice
output value = Theweatherisverynice

Defining our custom method
As you guessed it right we will be using the prototype property. Let’s try this thing out,

I have named our custom method as – removeEmptySpaces()

if(typeof(String.prototype.removeEmptySpaces) !== 'function'){ //you expect it to be a function if it is already there
    String.prototype.removeEmptySpaces = function(){                    
        return this.replace(/\s+/g,'');                   
    }
}

As you can see above, first we check if the removeEmptySpaces() method is already defined. If not (which is true in this case since we are adding out custom method. But the check is good to have if you do not want to overwrite a predefined method) then we define it inside the if block. So using the prototype property we add the custom method and from now on it is available to all the instances of the String Object. Inside the method definition we have a String.replace() method implemented. This will remove every occurrence of space between the words and will join them. I am using a regular expression inside the replace() method to match the spaces between the words. Once the match is found, it will be removed. You can also see the use of this keyword. This will represent the current instance that is calling our custom method – removeEmptySpaces(). 
You can learn more about the replace() method from w3schools.com

Putting it to test
Now let’s use our new method and see if it is actually doing the stuff that we wanted.

 var testStr = new String("The weather is very nice");   //create a new instance
 var newStr = testStr.removeEmptySpaces(); //call our custom method
 alert("New string after removing empty spaces is : " + newStr);

First we create a String Object instance – testStr and pass it a value. Then we call our custom method and store the returned value in newStr. Now if you alert the new value you can see that the empty spaces between the words have been removed. Here we have seen using our customized method with a String instance. What about String literals or constants? Well, we can use for them as well. Here is an example,

  var strConstant = "I am a String constant"; //defining our string literal
  var newStrConstant = strConstant.removeEmptySpaces(); 
  alert(newStrConstant); //alerts "IamaStringconstant"

So, we have seen how using prototypes we can add new functionality to our Objects. This was a simple example that I presented. You can customize any Objects as per your need.

Cooler modal popup example – how to open multiple popups, scrolling pop ups per page

Some time back I came up with a cooler modal pop up window using CSS3 and JavaScript specifically for mobile webkit browsers. The example that I presented had only a single button, a click on it would open a modal pop up window.

In this post I have a similar example but this time multiple pop ups can be opened from the same page. Opening multiple pop up’s from a single page was requested by some of my readers. And here it is. I will not go deep into explaining the bits and parts of how to create a pop up window. You can go through my previous post for that. But first let’s check a demo (meant only for web-kit based browsers):

Demo link (open in iOS or Android’s browser, you can also test this in Chrome or Safari in your computer) :  http://rialab.jbk404.site50.net/coolermultiplemodalpopup/

Open multiple pops from a single page

How to run this in Firefox, IE and other browsers?
For this you need to make changes in the CSS file. Add CSS3 prefixes for other browsers similarly as it is there for -webkit- . CSS3 junkies would already know what I am talking about.

CSS3 Transformations showing content outside overflow:hidden region in Firefox/Android

Some time back I was implementing a functionality for Firefox browsers on Android devices and I found a strange problem – For Firefox > 18 on Android devices if I move an element using CSS3 Transformations inside a parent container with overflow:hidden, then part of the element being moved is displayed outside the overflowed region. It seems like when you move the element it just discards the overflow:hidden property and everything is revealed rather. Normally the content outside overflow:hidden should be cut off from view.

I have a simple demo http://rialab.jbk404.site50.net/ffandroidissue/ – an image which is bigger than the container div is moved using CSS3 Transformations. The  div has a overflow:hidden set to it. There are two buttons. Click on them to see the various results. The first button causes the issue whereas the second button resolves it.

So this is what causes the issue – moving the image using CSS3 Transformations (for eg. transform:translateX(value);) inside a container with overflow:hidden

And this is what solves it – strange !!
Adding a background color and an opacity to the container element like this,

#container.noissue{
-moz-perspective: 1000px;
overflow: hidden;
background:#ccc;
width: 100px;
height: 50px;
display: block;
position:absolute;
top:50px;
right:50px;
  background:#ccc;
  opacity:0.99;
}

Check out the demo in Firefox on an Android device. I am not sure if anybody has encountered this situation. But this definitely seems to be a bug in Firefox for Android’s. This is not seen for other browsers.

How to install Phonegap Facebook plugin for iOS

This post has come out of my recent struggle to integrate the Facebook Connect plugin by Dave Johnson and make it work with my Phonegap iOS app. I had a hard time figuring things out as I was new to Phonegap iOS development. I was already doing Android apps with Phonegap, but iOS has given me some tough time. Nevertheless, around 2 days of gloomy and sad face was finally rewarded with a big smile. So, better I document it somewhere so that I do not struggle again and that’s where the inspiration for this post lies. And I must say, the official documentation is pathetic for newbies.
Alright, let’s get started. I will go step by step into the process with all details and screenshots so that it is very easy for you. In this post however, I will not be talking on how to create a Phonegap iOS app, or how to create Phonegap iOS plugins. For that you still need to look at the official documentation. I will only discuss on how we can install the Facebook plugin with a Phonegap iOS app and get started using it.
Before moving further I would like to inform you that I am using Phonegap 2.2.0 for my demo. There are new versions available – 2.5.0 being the latest at the time of writing. So you might want to check the official pages if you are using the latest version of Phonegap. But the steps mentioned below should work with the new versions of Phonegap as well. OK, time to start now.

Note: Phonegap and Cordova are the same (well, at least for me..). I prefer calling Phonegap.

1) Do I need a Mac? Simple answer – Yes, you need a Mac. I have heard and read thousand times about  people asking if iOS apps can be developed in a Windows machine. Simply, I just did not research, instead I have a Mac and I started on it. But the answer is you need a Mac definitely, since you will use XCode and the iOS SDK for development.

2) Create a Phonegap iOS App – I am using Phonegap 2.2.0. I am not going to show how to create a Phonegap iOS app. For that look at this pdf documentation here. If you cannot open it, check out this link which is the pdf source. This should get you started. However I have some screenshots below which should also help you out.
a) I have created a basic Phonegap app – FacebookPluginTest inside Cordova22FacebookTest folder under Documents. See the screenshot below. I have used the Terminal to create the app. You can find details about the command in the document above. So make sure you go through it once.
Create a basic Phonegap app with Terminal Continue reading “How to install Phonegap Facebook plugin for iOS”

Authoring “Adobe Edge Inspect Starter”…

My book “Instant Adobe Edge Inspect Starter” on mobile web debugging and testing has been published and it is now available online. For more details and to purchase you can visit here.

My book on mobile web debugging and testing.

Mobile web testing is currently a really time consuming and cumbersome process as there are no direct debugging tools available with mobile web browsers. Since mobile devices vary so much it is important to ensure that your web page looks as intended across the multiple mobile devices that you are targeting for your audience. Edge Inspect is a perfect tool for web developers and designers who are developing for mobile devices, allowing them to simultaneously test on numerous devices in real time as they develop without learning anything new.

“Instant Adobe Edge Inspect Starter” is a practical, hands-on guide that provides you with a number of detailed steps, which will help you to get started on testing and previewing all your mobile web projects on multiple mobile devices. This book will also show you how to use all the other available features of Edge Inspect and make the entire testing process on mobile devices very simple, effortless, and faster.

This book starts with an introduction to Edge Inspect and will take you through a number of clear and detailed steps needed to set up a working installation, and get up and running with testing your web pages on mobile devices.

You will also learn why traditional ways of testing mobile web applications are not very helpful and how Adobe Edge Inspect overcomes it. You will have a look at connecting single and multiple mobile devices with your computer and how to browse in sync.You will learn about remotely inspecting and previewing mobile web pages on a targeted device and directly see the changes taking place on the device itself. The book discusses in detail about creating your very own simple mobile web application, running it from a local server and testing it across mobile devices. You will also take a look at how to use the Edge Inspect web inspector window and do some basic HTML, CSS, and JavaScript debugging. And then finally you will have a look at using your own local Weinre debug server with Edge Inspect and some other very important features. If you want to take advantage of Adobe Edge Inspect and make mobile web testing a lot easier, then this is the book is for you.

“Instant Adobe Edge Inspect Starter” will guide you in getting started with Edge Inspect and will make testing on mobile devices a lot simpler and faster. The book is packed with a lot of examples and diagrams that will help you to test all your mobile web projects without any hassle.

Who this book is for?
This book is for frontend web developers and designers who are developing and testing web applications targeted for mobile browsers. It’s assumed that you have a basic understanding of creating web applications using HTML, CSS, and JavaScript, as well as being familiar with running web pages from local HTTP servers. Readers are also expected to have a basic knowledge of debugging web applications using developer tools such as the Chrome web inspector. And of course you need some mobile devices for running the example in this book and testing it.

Reviews

Ben Forta (Adobe Systems Inc‘s Director of Developer Relations): http://forta.com/blog/index.cfm/2013/4/12/Instant-Adobe-Edge-Inspect-Starter

Creative and Codehttp://creativeandcode.com/review-adobe-edge-inspect-starter-ebook/


Handy eBook to have available – by Chris.M
Overall, the book does a great job of getting you up and running with Edge Inspect. The first couple of chapters focus on getting the application installed on your computer, and then getting it set up on your mobile devices. Though the installation is fairly straightforward, the instructions they provide are detailed with plenty of screenshots, so you should have no issues getting set up.
They also give an overview of the best features of Edge Inspect. I’ve been using Edge Inspect for a while now and even I learned a few new things. The application really does make mobile testing incredibly easy with remote inspection and console log.
The eBook wraps up with some great resources for using Edge Inspect. If you are thinking of working on Responsive Web Design, Adobe Edge Inspect is an invaluable tool. I think the eBook is super handy to have as a reference, and for 5 bucks, why not?

worth having it as a reference – by Siddarth Kalyankar
“Instant Adobe Edge Inspect Starter” indeed is a starter for developers who wish to explore the possibilites of using Adobe Edge Inspector tool during their day to day development activity. It talks about Step-by-step, hands-on recipes to debug, test, and preview web applications on multiple mobile devices with Adobe Edge Inspect (Previously known as “Adobe Shadow” ).
This book assumes that the person who reads this is already into mobile web development and address some of his/her problems which are faced during the development cycle. This book is not intended to help you start doing mobile web development, but if you are web developer and willing to do mobile web development, this could come in handy for you as well.
The books briefs you about what is Adobe Edge Inspect, What are the reasons to use it and What you can do with with it. The main focus is on installation of the required components on your computer, the Edge inspect client on mobile device , how to pair mobile device with your computer and how to debug and preview. I found this information quiet useful as the entire installation process has been very well illustrated with screen shots focusing on Mac/ Windows operating systems, and Android/IOS for mobile device. The author has also provided with the code which can be used by first time developers to get started on their mobile web development venture.
If you are looking at speeding up your mobile web development, Adobe Edge Inspect is the tool and this book is worth having it as a reference.

More reviews from – Amazon

Replicating the iPhone Swipe Gesture – Vertical swiping

For those who wanted a vertical swiping feature to the the swipe gesture gallery that I created earlier, this post has a new demo and minimal explanation about a vertical swipe gesture gallery. Now you can swipe the images up or down.
I will not go through the basics once again as I have explained them in details in my previous posts. You can refer them once again in these two tutorials – post 1, post 2. Check out the demo below. Open the link in a webkit browser in either your mobile device or your computer.

Demo link: http://rialab.jbk404.site50.net/swipegesture/vertical/

Below is a screenshot of the gallery in action. You can see that the images are being moved vertically.

Screenshot of vertical swiping through images
Screenshot of vertical swiping through images

Continue reading “Replicating the iPhone Swipe Gesture – Vertical swiping”

Adding Calendar Events – Phonegap Android plugin

Alright, I worked on this sometime back and I will share this with you. I was looking to programmatically  add events to the native Android calendar from a Phonegap android app. There is not an official plugin that is available as of now. So I wrote a custom workaround for this. Again, I am not a Java developer and there might be better ways of writing the plugin code. But just wanted to share the code, and any feedback would just be appreciated.

Alright, let’s get started. So, there are two files that I developed. One is the CalendarEventPlugin.java file which has the plugin’s JAVA code. The other one is the CalendarEventPlugin.js file which is the javascript interface of the plugin. At this point, if you are not sure of what goes into writing a custom Phonegap plugin for Android, then you might want to have a look at this. I am using Phonegap 2.2.0 for my purpose. There has been newer version of Phoengap that is available now, 2.4.0 being the latest at the time of writing. So you can use the latest version as well, but do check the documentation once, there might be some changes.

Check the two files out. I have inline comments that will help you to understand. Rest, is very simple to grasp. Now let’s check how to use and implement this plugin into your Phonegap Android project.

1) Firstly you have to add these two files to your Phonegap Android project. Add the CalendarEventPlugin.js file inside assets/www/ folder and provide a reference to it in your index.html file, like this

<script type="text/javascript" charset="utf-8" src="CalendarEventPlugin.js"></script>

2) Then create a directory inside your project’s src folder that matches the package name of CalendarEventPlugin.java class. For our case make a directory – /org/apache/cordova/plugin inside src and then paste CalendarEventPlugin.java file inside it. If you change the package name, make sure to change the directory structure as well. The package name can be found at the top of CalendarEventPlugin.java file.

3) Next thing to do is to register the plugin in the config file – open res/xml/config.xml and then add the plugin details given below to the <plugins></plugins> section of the XML file. The name attribute is the Java class name and the value is the path of the class. This should match the package name.

<plugin name="CalendarEventPlugin" value="org.apache.cordova.plugin.CalendarEventPlugin"/>

4) And then call the plugin inside your javascript (your script.js file or so) code like this. (You can call this inside a button click handler or so),
   window.addcalendareventplugin(function(val){
        alert(val);   //once success message come and you have tested it, you can remove this alert.
    });

Once everything runs fine, you will see that when you click a button or so in your demo app and it calls the callback function in step 4, the native Calendar Add event is popped up with values already set in it (which you can change in the java file of the plugin). From there on its just the normal way of adding events to Calendar.
Hope this helps!!

Note

  • I have tried this on an Android 4.0 device (Galaxy S3) and it works. I have not really tried this on lower Android versions.