Browsed by
Category: JavaScript

Exploring some interesting fact of java-script and some js framework and libraries.

JavaScript Utility

JavaScript Utility

Below are few Java Script methods to help you.

Debugging in JavaScript:
Debugging in JavaScript is now become easier with modern browsers.But still you will be facing issues in many cases so the alternative can be writing print statments in javaScript (i.e. console.log(“Message”)).

But in IE browser if you console is not opened (it can be opened with Developer tools (F12)) then it will show function undefined error and will stop further javascript execution. To prevent this you can use console as below.

window.console && console.log (“Message To Log”);

Getting Param From URL
function getParam(name) {
name = name.replace(/[\[]/, “\\\[“).replace(/[\]]/, “\\\]”);
var regexS = “[\\?&]” + name + “=([^&#]*)”;
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return “”;
else
return results[1];
}

Example :

You must either modify your dreams or magnify your skills …

getParam(“load”) will return true;

Reload the Page Native Method
location.reload();

Lot more come.. Stay tuned…

YUI Handbook

YUI Handbook

Note : AUI (Alloy User Interface) is a wrapper to YUI (Yahoo User Interface), so all JavaScript syntax will remain same.

Lets explore some features of YUI.

1. Loading Libraries on demand
In YUI you can load the libraries that are required for your Website.

ex :

2. Node Selector
As of Jquery YUI comes with a powerful node selector feature. Lets see few examples.

Syntax.

Note : If the element is not preset if DOM then Y.one will give NullPointer Error, but Y.all will not show any error. So while using Y.one you can wrap it with a if block for safety.

Few Selector Examples

Few more Examples :

Ref

AUI Ajax Call and Periodic Refresh

AUI Ajax Call and Periodic Refresh

Below code demonstrate how to use Ajax Call in your Liferay Code/Yahoo Code.

Example 2 : A Generic Method to Manage Your Ajax Calls

Note : ajaxPushStartEventManager/ajaxPushSuccessEventManager/ajaxPushFailureEventManager These are callback methods and contains the start/success/failure of ajax call. Like in ajaxPushStartEventManager method you can put a loading Mask to the targetDiv and helps user to understand something is being loaded via ajax.

YUI (Yahoo! User Interface)

YUI (Yahoo! User Interface)

YUI is one of finest work from YAHOO!. That’s the reason why Liferay Alloy UI is based out of it.
So a default question comes to your mind, how I can start using YUI library. Here it goes.
If you know JQuery very well and its just a matter of time for you. Just Visit the URL and get started with YUI.

Your expression doesn’t look comfortable, so you want another site to start with YUI. Here it goes.

Are you a Liferay User ? waana want to start with, this link may help you find your answer.

IOS Iframe Scaling Issue

IOS Iframe Scaling Issue

Here is the big question ?

The iframe’s content is scaled up correctly, but when I try to touch any of the controls in the iframe, then it seems that the touch event is being received at the wrong location (I can see that the control’s “shadow” is highlighted at the wrong place upon touch). Therefore event handlers are not working (I suspect they aren’t getting called, because the touch is detected at the wrong place). Has anybody encountered this issue? Can it be resolved?

If you google it you will find lots of suggestion in stackoverflow and other forum. But unfortunately none will work. Below solution may help.

Instead of applying scaling to Iframe you can scale the entire page by meta tag and apply zoom non-iframe area.

Scaling by Meta Tag

var viewport_scale = 0.25; // scaling value as required
var content_width = 800; // carefully set this width

A.one(‘#viewport’).set(‘content’, “user-scalable=yes, width=”+ content_width +”, minimum-scale=0, maximum-scale=5.0, initial-scale=”+viewport_scale);

Zooming Other Elements
A.one(‘#nonIFrameElements’).setStyle(‘zoom’,’2.5′);

These fixes are only for IOS device so use below checks.
var isDevice = navigator.userAgent.match(/(iPhone)|(iPod)|(iPad)/i);
var isMobile = navigator.userAgent.match(/(iPhone)|(iPod)/i);
var isPad = navigator.userAgent.match(/(iPad)/i);

Note : You have to do bit of tricky work in between to make this work as per you need.