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.

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.

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

Reset and clear the HTML form after submitting – when you hit browser’s back button

This is a small issue but sometimes important. Well this is not a major post by me nor a major find, but I did run into some trouble while trying this particular thing out. Hence thought of recording it somewhere, so that I do not have to re-invent the wheel again. Here is the use case – there is an HTML form which is to be filled up and submitted to a server side script (let’s say some PHP code). After successful submission the user hits the back button of the browser. All the form fields and values should be reset and set to its initial configuration.

I tried several different techniques and implementations but ran into some or the other problems mainly because of browsers – different browsers behaving differently. On some browsers something works while on the others it does not. Thanks to these differences in spite of a universal and a common W3C standard. But I finally found a rather easy solution and cached onto it. This post will talk on that particular method with an example.

So the clue is very simple – reset the form after it is submitted so that when the user hits the back button every field in the form is initialized and reset (no previous values are left behind). How?? Let’s see in this example,

Read More »

WEINRE – Web Inspector Remote Video by Patrick Mueller

Patrick Mueller is the man behind the Weinre tool – remotely inspect and debug mobile web applications. Here is a video of him talking about Weinre at PhoneGap Day US 2012.

If you would like to know more about Weinre and how to debug mobile web applications I have a few post on it. You can start from here.

And if you do not like setting up Weinre and working with servers you can have a look at Adobe Shadow which is a tool developed by Adobe on top of Weinre, functions similarly but you do not have to set up the dirty part. You can start from here.

CSS3 Coverflow animation for iOS – Adding Touch gestures

Here’s a sneak peak at the touch version of the Coverflow animation. The app is fully touch enabled, you can swipe across the screen to move the images or tap on any image individually to move it. The app works fine in iPhones, iPod touch and iPad’s. Have not tested it in Android 4.0 or greater. Since iOS browsers supports CSS3 3D transformations so it runs very smooth. In Androids < 4.0  it gives a horrible  look n feel.

Here’s the link to the demo. Check in an iOS device (open up in mobile safari),

Link: http://rialab.jbk404.site50.net/coverflowtouch/

and if you are looking for a desktop version of the Coverflow, you can check my previous post.

This is how it looks on an iPod touch

Read More »

Fluidic Sliding Panels – Auto adjust to any device screen without browser refresh

Let’s talk about creating a sliding panel system that adjusts automatically to any screen size or rather any device resolution. The sliding is implemented using CSS3 Transitions and I have targeted only webkit based browsers. So the app will run on any iOS, Android devices including computer browsers such as Google Chrome and Apple Safari. If you have seen a Sencha Touch app which uses a nested list or the sliding animated panels then you must have noticed that the same app adjusts itself to any screen size as well as the portrait and landscape mode. So our demo will do the same. I have a very simple implementation of auto adjusting sliding panels.

In one of my previous tutorials I talked on the same Sliding Panel concept but the problem was that it did not auto adjust. If you check the demo on Google Chrome you will notice that only first time the app adjusts itself to the window width and height. Now resize Chrome on your computer and check– the app goes haywire isn’t it. Same thing will happen if you check the app in a mobile webkit browser and go from portrait to landscape mode or vice versa. The content you are looking is cut off. You have to refresh Chrome again to adjust the app. Now look at the new demo below,

New Demo link – http://jsphkhan.github.io/fluidic_sliding_panel/ (the demo is specifically meant for webkit based browsers)

Open it in the same Google Chrome browser and resize it. You will notice all the contents auto adjusts and even the sliding is now bounded to the new window size. So, by now you must have got an idea of what I am trying to communicate.

Read More »

JavaScript Touch event or Mouse event – detect and handle according to device

You might have faced this issue before or even might have wondered – How to write a single piece of code that establishes correct event in the device i.e touch events for mobile web browsers and mouse events for desktop browsers. You need not hard code the events for your app code. Once you detect and handle those events, you can run your app everywhere – mobiles and computer browsers. Normally when we develop an app for mobile browsers we test it in a desktop browser, so if you have touch events hard-coded into your script then it is a pain to change the script and make it work for computer browsers(replacing touch events with mouse events) and then change it back again to touch for mobiles. So, here is a small script/trick to universally handle the event and need not worry about devices,

var isTouchSupported = 'ontouchstart' in window;
var startEvent = isTouchSupported ? 'touchstart' : 'mousedown';
var moveEvent = isTouchSupported ? 'touchmove' : 'mousemove';
var endEvent = isTouchSupported ? 'touchend' : 'mouseup';

If you see the first line of the script, it detects if ontouchstart property is available in the global window object. It it is available or it is a part of the window object, then it returns true else it returns false. Note that ontouchstart is a standard javascript touch event attribute. Now, if you are making this check in a computer browser (for e.g FF, Chrome or IE) then ontouchstart is not a property of the window object. So isTouchSupported will be set to false. Had it been a mobile browser (e.g iOS, Android) then ontouchstart would have been automatically a part of the window object and correspondingly isTouchSupported variable will set to true. This is all we need to detect. The next three lines establish a common platform for the touch vs mouse events i.e I am mapping the touch events to its corresponding mouse events.

Now, all you need is to register the event listener to your element so that some action is performed when the event is triggered on the element. Here is an example, (where myButton is the ID of my imaginary button)

document.getElementById("myButton").addEventListener(startEvent,function(){},false);

The startEvent variable acts as a placeholder. It will be replaced by mousedown for computer browsers and touchstart for mobile browsers. Similarly the other two events can be used. This way a single app can run everywhere.

Here is a good example with the usage (make sure you look at the javascript script code) – https://jbkflex.wordpress.com/2012/07/21/replicating-the-iphone-swipe-gesture-common-code-for-mobiles-and-desktop-browsers/

Here is another one – https://jbkflex.wordpress.com/2012/07/25/360-degree-car-rotation-common-code-for-mobiles-and-computer-browsers/

Please do suggest me if there are any better methods of mapping touch v/s mouse events.

Debugging mobile web applications remotely with WEINRE

I started mobile web development around eight months back and at times found it very difficult to debug my apps. Normally everybody would start off with a desktop browser, look up the app in a desktop web inspector and then try to debug it and finally make it ready for the mobile browser. Even I used to do the same. I used to check my mobile app in Chrome’s/Safari’s developer tools. There I used to inspect HTML elements, change DOM style properties and check the result out and also see the java script console log messages in the console tab. This would normally serve my purpose but I had to adjust a lot due to resolution differences. Still there was a frustration and a feeling of had there been a tool to directly debug the app in the mobile device itself. And after a little head scratching and Googling I discovered an open source package called Weinre – Web Inspector Remote. With Weinre I could debug my mobile web app remotely – the app would run on the mobile browser and I could modify the DOM remotely, see log messages of it on the Weinre inspector that runs on my computer. And I must tell you, it has helped me immensely. It’s a wonderful tool to have and in this tutorial I will share my experiences of debugging with Weinre. First I will start off with How to configure Weinre and then talk on debugging a mobile web app, but before that let’s see some basics – Weinre and its components.

The Basics
Weinre is a remote debugger for web pages and if you are familiar with Firefox’s Firebug or Google Chrome’s Web Inspector, then you will find Weinre very similar. What it means is that you can debug a web app that is running on your mobile device remotely i.e on your computer. So, in your computer you can select any DOM node, make changes to style properties of the mobile web app and it will reflect in the mobile device on the fly. You will get more familiar with the things once I talk in details later in the article. First let’s see what Weinre is composed of.
Weinre consists of three basic components/programs – Debug Server, Debug Client and Debug Target interacting with each other. Let’s see what each of them means,

1. Debug Server: This is the HTTP server that you run from the weinre.jar file. It’s the HTTP server that’s used by the Debug Client and Debug Target. I configured the server on a Windows machine so all the steps I will talk about are in reference to Windows. For Mac users details of configuration can be found in the Weinre site.

2. Debug Client: This is the Web Inspector user interface; the web page which displays the Elements and Console panels, for instance.

3. Debug Target: This is your web page that you want to debug running on the mobile device – iPhone, Android phone or iPads.

Both the Debug Client and the Debug Target communicate to the Debug Server via HTTP using XMLHttpRequest (XHR). Typically, you run both the Debug Client and the Debug Server on your desktop/laptop, and the Debug Target on your mobile device. The image below should help you.

Click for larger size
Weinre components

Read More »

Coverflow animation using CSS3 3D Transformations – Part1

Update
1) Coverflow for iOS with touch gestures: Sneak Peak at the touch gesture enabled Coverflow for mobiles(iOS) is ready. Have a look at it here. There is a demo and download link.

Back to the actual post:
Recently I worked on the famous Coverflow animation using CSS3 3D Transformations, and I must tell you that the results were very impressive. I was actually working on a mobile web version of the Coverflow animation meant for iPhone,iPod, Ipad. Well, I am still working on it and finishing on adding touch gestures to the animation.

Disappointingly, Android device’s web-kit browser does not support CSS3 3D animations as of now so the coverflow that I am trying to build is not working on Android devices. However, I read it somewhere that the next version-Android 3.0 will have support for it. So till then I could support only iOS device’s web-kit browser.

In this post I am presenting a desktop version of the Coverflow (no touch gestures). Right now it runs only in Safari. I must tell you once again that the app I built is mainly meant for web-kit browsers (since iPhone’s and Android’s run web-kit browsers). I have the link to the demo app below,

Demo: http://jbk404.site50.net/css3/coverflow/ (See in Chrome or Safari for best results)

Click to see demo

The demo has only 7 images as of now and the code has pre-defined values in it but it is fully functional. I am working on making it more dynamic so that any number of images can be used. I am finishing up on some nuances of the app and refining the code further, and till then I am posting only the demo. I will talk about the code in details later (very soon). Also I will come up with a part2 of this tutorial series where I will talk about the mobile version with touch gestures.

For the full code you can view the source of the demo.

Here are some of the features of the desktop version of the demo,

  • Click on any image to bring it to the center.
  • Use the previous and next button to see other images.
  • Image Reflections using CSS3 reflections.
  • CSS3 3D Transforms as I have already mentioned. This gives 3D look and feel.
  • Smooth movement of images using CSS3 Transitions.
  • No third party library or plugins. I have used pure CSS3 and JavaScript.

You can use the code and build on top of that.