Posts Tagged ‘Javascript’

script.aculo.us – JS libraries

Posted: December 22, 2011 in Javascript
Tags: , , , , , ,
0

script.aculo.us provides JS libraries for animation, drag and drop, Ajax controls, DOM utilities, and unit testing. Good to know.

http://script.aculo.us/

Simple HTML/JS/CSS code for animation effect

Posted: December 12, 2011 in CSS, Javascript, JQuery
Tags: , , , ,
0

<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js&#8221; language=”javascript”></script>
<script language=”javascript”>
$(document).ready(function() {
window.setTimeout(function() {$(‘#box’).removeClass(“box1”).addClass(“boxCls”);}, 5000);

});

</script>
<style type=”text/css”>
.boxCls {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 200px;
background-color: white;
border: 10px solid black;
}

.box1 {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background-color: yellow;
border: 2px solid red;
float:left;
}
</style>
</head>
<body>
<div id=”box” class=”box1″>Box</div>
</body>
</html>

ExtJS – JS Framework with Charts, UI Widgets, MVC & Cross Browser Compatibility

Posted: November 6, 2011 in Javascript, Web Development
Tags: , ,
0

http://www.sencha.com/

http://docs.sencha.com/ext-js/4-0/#/guide/getting_started

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/

Javascript – window.showModalDialog

Posted: November 6, 2011 in Javascript, Test Automation, Web Development
Tags: , , ,
0
In IE/Firefox we can use window.showModalDialog to show modal popup window. 
Use window.returnValue in the popup window to pass the selections to parent window.
Main Page Code ...
<script type="text/javascript">
    function ModalPopup() {
        var retValue = window.showModalDialog('popup.htm', 'height=200,width=150');
        alert(retValue);
    }
    </script>
    <a href="#" onclick='javascript:ModalPopup()'>Click</a>
Popup Window Code ...
<script>
        function dosubmit() {
            window.returnValue = document.getElementById("txtName").value;
            window.close();
        }
    </script>
    <a href='#' onclick='javascript:dosubmit()'>Close</a>
    <input value="hi" type="text" id="txtName" />
But this showModalDialog has disadvantages like it will not work in Chrome and some other browsers and also test automation of UI using Selenium software will not.
Refer the below links for solution on Selenium issue ...
http://seleniumdeal.blogspot.com/2009/01/handling-modal-window-with-selenium.html
http://seleniumdeal.blogspot.com/2010/04/working-with-modal-dialogs-and-selenium.html

JSON to C# object to JSON

Posted: September 8, 2011 in C#, Javascript, JQuery, JSON
Tags: , , ,
0

[DataContract]
public class SearchFilter
{
[DataMember]
public string SearchCol { get; set; }
[DataMember]
public string SearchOp { get; set; }
[DataMember]
public string SearchText { get; set; }
[DataMember]
public int PageNo { get; set; }
}
using System;
using System.IO;
using System.Runtime.Serialization.Json;
using System.Text;
public class JSONHelper
{
public static T Deserialise<T>(string json)
{
T obj = Activator.CreateInstance<T>();
using (MemoryStream ms = new MemoryStream(Encoding.Unicode.GetBytes(json)))
{
DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
obj = (T)serializer.ReadObject(ms);
ms.Close();
return obj;
}
}

public static string Serialize<T>(T obj)
{
DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
using (MemoryStream ms = new MemoryStream())
{
serializer.WriteObject(ms, obj);
return Encoding.Default.GetString(ms.ToArray());
}
}
}
Usage –

SearchFilter lSearchFilter = JSONHelper.Deserialise<SearchFilter>(“{‘SearchCol’:’Col1′,’SearchOp’:’contains’,’SearchText’:’hi’}”);
lSearchFilter.SearchCol
lSearchFilter.SearchOp

Simple JS functions 2 form JSON String

Posted: September 8, 2011 in Javascript, JSON
Tags: ,
0

function ToJSONKeyValueFormat(pKey, pValue, pIsString) {
return ((pIsString)? (“\”” + pKey + “\”:\”” + pValue + “\””) : (“\”” + pKey + “\”:” + pValue));
}
function ToJSONFormat() {
var lJSONString = “”;
for (var i = 0; i < arguments.length; i++) {
lJSONString = ((i === 0)? “{” + arguments[i] : lJSONString = lJSONString + “,” + arguments[i]);
}
return ((lJSONString !== “”) ? lJSONString + “}” : “”);
}

Usage:

ToJSONFormat(ToJSONKeyValueFormat(“Key1”, “Val1”, true), ToJSONKeyValueFormat(“Key2”, 2, false))

Output:

{\”Key1\”:\”Val1\”,\”Key2\”:2}

String format function in Javascript – similar to C#

Posted: August 26, 2011 in Javascript
Tags: , ,
0
String.prototype.format = function() {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function(match, number) {
        return typeof (args[number] != 'undefined') ? args[number] : '{' + number + '}';
    });
};
Extending javascript global object is not a good idea. This can be defined as a utility funciton with in your application's global js object/file.

Extending  Reference - http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format

Firebug Console – UI development / Script Debugging

Posted: July 19, 2011 in Best Practices, Javascript, JQuery
Tags: , , , , ,
0

Do you know how to use Firebug’s console effectively?

Execute jQuery/javascript statement at the console, with your page loaded in the browser, and you will instantly see the array of matching elements that are returned. If that result set isn’t correct, press the up-arrow key to retrieve the last command entered, refine the statement, and test it again

It works in conjunction with Firebug’s debugger. When execution is paused, switching to the console tab allows you to interrogate and manipulate the state of the DOM as it was at the time execution was halted. As you step through JavaScript code in the debugger, the execution context of the console remains in sync with the debugger’s.

JSLint – Check javascript code quality

Posted: July 4, 2011 in Dev Tools, Javascript
Tags: , ,
0

Check your javascript code quality using http://www.jslint.com/

Revealing Module Pattern – Javascript

Posted: July 1, 2011 in Design Patterns, Javascript
Tags: , ,
0

Define all your functions and variables in the private scope and return an anonymous object at the end of the module with pointers to the private variables and functions you want to reveal as public. Check more @

http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/

Ex: Singleton pattern using Revealing Module Pattern

var singleton = function () {
var privateVar = 10;
function privateMethod1() {
return privateVar;
};
function SetVal1(val) {
privateVar = val;
};
function GetVal1() {
return privateVar;
};
function GetVal2() {
return privateMethod1();
};
return {
SetVal1: SetVal1,
GetVal1: GetVal1,
GetVal2: GetVal2
};
} ();

var obj1 = singleton;
var obj2 = singleton;
alert(obj1.GetVal1());
obj1.SetVal1(20);
alert(obj2.GetVal1());

Older Entries