Archive for the ‘HTML’ Category

Where do you need to use javascript MV* framework

August 29, 2013 Leave a comment

I like following while I was reading an article on javascript frameworks: I thought it is worth repeating:

So, where will you likely need an MV* framework and where won’t you?

If you’re writing an application that will likely only be communicating with an API or back-end data service, where much of the heavy lifting for viewing or manipulating that data will be occurring in the browser, you may find a JavaScript MV* framework useful.

Good examples of applications that fall into this category are GMail and Google Docs. These applications typically download a single payload containing all the scripts, stylesheets and markup users need for common tasks and then perform a lot of additional behavior in the background. It’s trivial to switch between reading an email or document to writing one and you don’t need to ask the application to render the whole page again at all.

If, however, you’re building an application that still relies on the server for most of the heavy-lifting of Views/pages and you’re just using a little JavaScript or jQuery to make things a little more interactive, an MV framework may be overkill. There certainly are complex Web applications where the partial rendering of views can* be coupled with a single-page application effectively, but for everything else, you may find yourself better sticking to a simpler setup.

Categories: Frameworks, HTML, HTML5, JavaScript

How to resize and crop Image Using Coldfusion script

April 7, 2013 Leave a comment

I had requirement on my site  to resize Image after uploaded by user in two sizes one for view page and one as thumbnail, I found some script on web and improved it to fit in my requirement. here it is. I expect this code will reside in a CFC function


var l = {}; // local struct

/* Read file  and we will resize and crop it to make 200×200 */

l.img = ImageRead(“path of the image to be resized”);

l.resizeOriginalFlag = 0;
If( l.img.height GT l.img.width )
If( l.img.height GT 200)
ImageResize( l.img,’200′,”);
l.resizeOriginalFlag = 1;
l.fromX = l.img.Height / 2 – 100;
else if( l.img.width GT l.img.height )
If( l.img.width GT 200 )
ImageResize( l.img, ”,’200′);
l.resizeOriginalFlag = 1;
l.fromY = l.img.Width / 2 – 100;
ImageCrop( l.img,l.fromY,0,200,200);
If( l.img.height GT 200)
l.resizeOriginalFlag = 1;


<cfif l.resizeOriginalFlag>
<cfimage action=”write”
destination=”<path with filename>”
<!— <cfdump output=”/sites/resize.html” var=”#cfcatch#” format=”html”> —>

Magento Site builder and issues on Mac and PHP

May 20, 2012 Leave a comment

I decided to use Magento (eCommerce Platform for Growth) to build an e-commerce web site as it was suggested by one of my friends and I had seen good reviews of it. I downloaded community version and wanted to play with it. There is another option which they call Magento.go

I opted for the second option to download the site (Downloader).

The first problem I hit was the problem of mcrypt module for php which wasn’t included in my default php install on my Mac 10.6.8. I looked at web and found one solution which was to build the module and recompile the php from source.

Here is the link for the solution

It was little tricky to recompile as I had php version 5.3.8 and first I tried with the same version and it didn’t work and found some where that even I have 5.3.8 on my Mac 10.6 still I need to build mcrypt module using 5.3.6 (means had to do it twice:( ).

I had to put the directive in my php.ini file like this.


And another thing happened to me after this was my php tags like this stopped working

<?= phpinfo(); ?> Though following were working fine

<?php phpinfo(); ?>

Later I figured out that they call it short tag and to fix it I need to add following line in php.ini.

short_open_tag = On Here is the link for details reg this

Regarding Magento solution I was expecting it to be less painful experience but  it wasn’t the case. There aren’t good help/ tutorials available on web.

Hope my experience can help someone.

Write long tweets/post on Twitter or Facebook

December 18, 2011 Leave a comment

Launched web site

TweetFace helps you add rich content – text, photos, & videos to your tweets and facebook. It will hyperbolize your posts by adding visuals and simplifies the process by auto publishing to your account. Content limit won’t stop you from expressing yourself any more.

Maximize your marketing impact by reaching your audience on Facebook and Twitter. Save time and money by managing your strategies for both networks from one convenient platform that allows you to hyper market your product and make it viral.

Categories: General, HTML

Tips for Better use of JavaScript

September 18, 2011 3 comments

Variables notation and initialization

Object    var oObject = null;
Array    var aArray = [];
Number    var nNumber = -1;
String    var sString = ”;
Boolean    var bBoolean = false;
jQuery    $object

Cache results of DOM search

Twice the same DOM request, not efficient:

document.getElementById(‘tal’).style.display = ‘block’;
document.getElementById(‘tal’).value = ‘Could be cached’;

Better, save the element into a variable:
var oTal = document.getElementById(‘tal’); = ‘block’;
oTal.value = ‘Is cached’;

Example of a commented method

* This method does stuff, talk about it here.
* @author Author
* @member ClassName.prototype
* @param {type} oParam Describe the parameter.
* @returns {type} Describe the return value.
ClassName.prototype.aFunction = function(oParam){}

Reference: jsdoc-toolkit

jQuery to Native snippets

jQuery Native  
$(‘#idElement’); document.getElementById(‘idElement’);  
$(‘#idElement’).jQueryMethod(); $(document.getElementById(‘idElement’)).jQueryMethod()  ;
$(‘#idElement’).click(function(){}); $(document.getElementById(‘idElement’)).bind(‘click’, function(){});
$(‘.className’); more than one element:var aArray = $.makeArray($(‘.className’)) // turns a jQuery collection into an array of DOM elements;only one element:

$(‘.className’)[0] // returns the DOM element only;

$object.val() oObject.value;
$object.attr(‘name’) // Works for most the attributes of an element
$object.css(‘styleName’, ‘value’)[styleName] = ‘value’
$(‘.className’).each(); var aArray = $.makeArray($(‘.className’));var nArrayLen = aArray.length;var nCounter = 0; // Here initialized at 0 rather than -1!;

for(; nCounter < nArrayLen ; nCounter++){}

$object.addClass(‘className’); oObject.className += ‘ className’;
$object.removeClass(‘className’); oObject.className = oObject.className.replace(‘className’, ”);
$object.html(‘tal’); oObject.innerHTML = ‘tal’;
$object.append(”); oObject.innerHTML = ”;oroObject.appendChild(oChild);
Categories: HTML, JavaScript, jQuery

Browser Web Tools Tutorials

June 4, 2011 Leave a comment

I was going through few blogs to learn jQuery features and come across couple of cool browser developer tools tutorials.

1) This one coves all browsers:

Browser Dev tool tutorial – All Browsers
2) This one is from Google Chrome dev tools section by Paul Irish:
Introduction to The Chrome Developer Tools/

Categories: Browser, HTML, JavaScript

10 Useful Frameworks To Develop HTML-Based Webapps for Touch Devices

August 26, 2010 Leave a comment

I came across this article about different frameworks for building Mobile Apps/ Web sites by Antonio Lupetti

Intro of the Article is:

Make HTML-based touch applications. Easy.

In the last two years the rapid growth and diffusion of touch devices such as iOS or Android based platforms has forced developers and web designers to rethink the model of their own webapps for the new “touch experience” introduced by the iPhone in 2007.

During this period several frameworks have been released to help web developers implement quickly applications for this kind of touch devices. Here is a collection of some useful frameworks to develop easily HTML-based webapps that will work on all popular smartphone and tablet touch platforms.

Link to the article->

How to fire event from javascript (Dynamic)

August 13, 2010 Leave a comment

I had a requirement to call onchange event of a select box (combo box) from JavaScript and the function has an input param as event. I found one article which helped me to achieve this for one of my clients mobile web site (Land Rover UK), when I was working at

The article link is Firing Javascript Events (like onchange)

Here is the code which I had to change a little bit to fit in my code:

function fireEvent(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);

Here is the code for how to call this method:


Thanks to Jehiah

Categories: Browser, HTML, JavaScript Tags: , ,

iPhone – Mobile web site

July 27, 2010 Leave a comment

I had requirement to show number keyboard when on iPhone and user clicks on phone number input box and found this article which is very helpful and informative:
Thanks to Ben Nadel:


Another link which could be helpful, which I found on the above blog was from Raymond Camden.

Apple Docs on iPhone specific Safari web content

And third link for iPhopne HTML5 stuff, about storing large quantity of data on client side


HTML5 documentation on W3C Docs

Categories: HTML, iPhone Tags: ,

Few Handy Javascript functions for HTML forms

May 31, 2010 Leave a comment

Here are few handy javascript function, which I use on day today basis in my Web development:

// Returns string after trimming spaces from both sides
function AllTrim(str)
str = LTrim(str);
str = RTrim(str);
return str;
//Returns string after trimming spaces from left side
function LTrim(str)
return str.replace(/^\s+/g,”);
//Returns string after trimming spaces from right side
function RTrim(str)
return str.replace(/\s+$/g,”);
// validates email form field, if you pass true, it checks for empty field as well
function checkEmail(str, required)
regexPattern = /^[a-zA-Z_0-9-]+(\.[a-zA-Z_0-9-]+)*@([a-zA-Z_0-9-]+\.)+[a-zA-Z]{2,7}$/;
str = AllTrim(str);
if (required == ‘undefined’ || required )
if( str.length == 0 )
return false;
if( str.length == 0 )
return true;
return regexPattern.test(str);
// returns selected radio button value from a group of radio buttons in a form
function getSelectedRadioValue(formObj, obj)
var selected_radio_val = ”;
for (var i=0; i < document[formObj][obj].length; i++)
if (document[formObj][obj][i].checked)
selected_radio_val = document[formObj][obj][i].value;
return selected_radio_val;

Categories: HTML, JavaScript, RegEx