Gracefully Detect Old Browsers and Fallback from HTML5

Category : HTML5, JavaScript, Software development, web

HTML5 rocks! It even says so in this (highly recommended) great web tutorial, but there are still a lot of browsers out there, that still do not support HTML5, or some of it’s features.

First, What is HTML5?

Wikipedia defines HTM5 – HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997[1]) and as of September 2011 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.

How do I find out which features are supported in each browser?

HTML5Rocks keeps track for each features support in each browser another cool site to check would be caniuse.

Now, the really issue is what do you do at run-time? how do you gracefully fallback when there is no support for the great feature you have implemented using HTML5.

There are two way to detect and fallback from HTML5, the right way, and the wrong way

So here they are:

WRONG WAY – On the server-side, check the User Agent header and serve different pages based on the user agent header… Not recommended – first, there a lot of  User Agents, second, this is a very buggy approach because headers change and are not deterministic (FF can easily send IE headers).

RIGHT WAY – Use JavaScript to detect when there is no support for a HTML5 feature (AKA object detection) here is an example:

 function start(){ if(supports_canvas()){ // Do funky HTML5 canvas fun }else{ // fallback to boring old HTML } } function supports_canvas() { return !!document.createElement('canvas_bogus_name').getContext; } 

 

Have fun and support HTML5:

Javascript Object to String

Category : Deep Dive, JavaScript, Tips

Javascript is a little hard to debug, Firebug helps a lot, but sometime you just to need to convert a javascript object into a string.
In order to do that (in firefox) you could use the toSource() method.
Here is how you do it:


// create an object
var anyObject = {'someAtt':'someValue', 'otherAtt' : 'otherValue'};
// get the object to source
var anyObjectToString = anyObject.toSource() ;
// now write the string
document.writeln(anyObjectToString );

Here is the printout of this code in firefox:

In Internet Explorer and Chrome this will generate a Javascript error – but this is not for production so using it in Firefox would do fine.

JQuery AJAX POST Sending Only Partial Data? Try URL Encoding.

7

Category : AJAX, Deep Dive, JavaScript, jquery, Software development


JQuery is a great JavaScript framework that makes web developer life much easier. But like all framework, you need to learn its gotchas in order to work effectively with it. Here is one of those gotchas -

Jquery POST method lets you create Ajax HTTP POST request to the server. It is actually a shorthand to the JQuery Ajax method:


$.ajax({
  type: "POST",url: "save.php",
  data: "param1="+paramValue1
  +"&param2=paramValue2",
  complete: function(){ }, //manage the complete if needed
  success: function(){}}//get some data back to the screen if needed
});

The problem

When executing the AJAX call, only part of the data is passed to the server and the rest vanishes. You usually see that some or all of the parameters you tried to pass are missing or cut in the middle.

The cause

JQuery uses ‘&’ as a separator between the parameters. If you have a ‘&’ within your key or value parameters, then the JQuery AJAX request gets really messed up.

The solution

Encode the parameters, replace & with %26 which is the standard encoding for that character.

Semi-Automatic

Use .replace(/&/g, “%26″) -

Here is a working example:


$.ajax({
  type: "POST",url: "save.php",
  data: "param1="+paramValue1.replace(/&/g, "%26")
  +"&param2=paramValue2.replace(/&/g, "%26")",
  complete: function(){ }, //manage the complete if needed
  success: function(){}}//get some data back to the screen if needed
});
Fully Automatic

A more elegant way is to slightly change the way we call the meethod and let JQuery do that encoding for you -

Here is a working example:


$.ajax({
 type: "POST",url: "save.php",
 data: { "param1": paramValue1,
 "param2": paramValue2 },
 complete: function(){ }, //manage the complete if needed
 success: function(){}//get some data back to the screen if needed
});

How to Connect IPWEditor to the Server Side

11

Category : ajaxdo, IPWEditor, JavaScript, PHP, SAAS

I have been getting multiple support requests from developers who want to save the data edited in IPWEditor on the server side.

Saving information in the server-side is a server-side feature and out of scope for IPWEditor (which is a client-side JQuery plug-in), moreover, it is programming language depended – a java developer might handle this differently from a .NET or a PHP developer.

Despite all that, I will try to give general guide on how it is done, I will be using PHP for the server-side examples but you can use any server-side programming language you prefer.

Continue Reading

Make ThickBox Work with Other JavaScript Libraries / Resolve ThickBox Conflict Issues

13

Category : JavaScript, jquery, Open source, PHP, Software development

ThickBox is a cool visualization tool based on Jquery JavaScript library. ThickBox helps you display photos in a cool way and is useful in many web projects.

The problem

ThickBox does not work when the HTML pages has other JavaScript libraries such as Mootools.

Debuging the error reveals this:

$(domChunk) is null

Continue Reading

AutoSnippet – automatically generate HTML and javascript code snippets

4

Category : JavaScript, jquery, New Release, Open source, Software development


Code snippets posted online are a great source of knowledge and simple way to share experience and to reuse code. As developers we always look to see if there is a ‘code example’ which we can modify to our needs. As bloggers we find code snippets very useful to get our information out to the readers.

The problem is that creating these code snippets is a complex and cumbersome task. You need you replace all the < with &alt, wrap the code in <pre> and <code> tags and then use a Syntax Highlighter to make our code look nice. Every time we change or fix the code you need to reiterate this process.

AutoSnippet solves this problem by automatically generating the code snippet from the source code (HTML, CSS and Javascript). No more cumbersome repetitive tasks and no more inconsistencies between example and real code.

In this article I will show how to generate automatic snippets for your blog and source/code websites.




 

Usage:

HTML and javascript goes here

1) Example of code and its automatic snippet(with Syntax Highlighter)

The following code snippet on the left is automatically generated with SyntaxHighlighter. As a developer you just write the code and the autoSnippet generates the snippet itself.

Just write

code and the snippet is automatically

generated on the right ->

Here is how it is done:

2) Example of code snippet only (with Syntax Highlighter)

The following code snippet automatically generated with SyntaxHighlighter.
To get the ‘snippet only’ affect you need to put the source div over the target div.
again, as a developer you just write the code and the autoSnippet generates the snippet itself.


Just write

code and the snippet is automatically

generated here!

Here is how it is done:

3) Simple Example – with no Syntax Highlighter:

AutoSnippet can integrate with other Syntax Highlighter. Here is AutoSnippet at its simplest form.

just code :)

Here is how it is done:

Auto snippet is easy to use- it is a jquery plug-in and uses SyntaxHighlighter for syntax highlighting. Both of SyntaxHighlighter and jquery are common and well established open source projects. AutoSnippet is easily extendable and is released under the MIT open source license.

download and docs

Formal documentation and download can be found here.

How to check where your site visitors come from using javascript

Category : Deep Dive, JavaScript, Tips

Where do my visitors come from? That is always a question bloggers, site owners and advertisers want to know. Knowing who has referred the visitor to my site tells you a lot about that visitor. This information might help you drive better, more finely tuned content to this user.

Demo

Code


<script type="text/javascript">
if(document.referrer){
document.write("Hello, Thank you for arriving from: " + document.referrer);
}else{
document.write("Hello, Thank you for arriving directly to this page");
}
</script>

This topic is covered in detailed in this interesting article.

Tip: Solving the browser caching problem of AJAX applications

16

Category : AJAX, JavaScript, Tips

Browser caching is generally a good thing, why download the same image again and again while you can download it once and save it on the browser? In some cases, however, this is not a wanted behavior.

The problem:
AJAX application tends to frequently ask the server for the same URL (a stock quote, application status and so forth). The AJAX application expect a response form the server while, in fact, after the first request the browser returns the cached page and the AJAX application does not work as expected. Clearing the browser cache or setting “no cache” parameters on the page does not always work.

The solution:
Add a pseudo-random parameter to the URL the AJAX application is requesting. Doing so will fool the browser to think this is a new page that has not yet been cached.

For example, this is how I would add a pseudo parameter to a URL in JavaScript :

var url = “http://mydomain?myParameters=myValues&pseudoParam= “+new Date().getTime();

The Date().getTime(); returns a new value every millisecond (or so), the browser thinks this is a new page that has not been cached and requests the URL form the server.