Author: amolwable

Javascripts, JQuery

Collection of Open Source Javascript Libraries: Google API

Posted on by amolwable

The Google AJAX Libraries API allows to include most popular javascript libraries into web application with correctly setting cache headers and up to date with bug fixes.
By using google.load() method we can include most popular, open source JavaScript libraries.

Google AJAX Libraries has collection of following libraries,

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • Ext Core
  • Yahoo! User Interface Library (YUI)
  • Ext Core
  • Chrome Frame

How to load libraries

To use API we need to add API library as,

<script src="http://www.google.com/jsapi"></script>

google.load() method is used to load library into application as,

<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.2");
google.load("mootools", "1.2.4");
google.load("dojo", "1.3.2");
google.load("swfobject", "2.2");
google.load("yui", "2.8.0r4");
google.load("ext-core", "3.0.0");
</script>

e.g.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1");

</script>

References:

WebSite: https://developers.google.com/speed/libraries

0
Html & CSS

CSS Hacks

Posted on by amolwable

In this post we’ll see how to apply browser specific CSS using CSS hacks.

Why

As we know that Each browser has its own default styling of HTML elements also
some of the CSS properties are supports only limited number of browsers.

So to remove default styling we can use either reset CSS which will applied to all browsers or we can use CSS hacks for particular browser.

How to use

1. Internet Explorer

Using Conditional comments we can easily target IE.Conditional comments only works in Internet Explorer.
e.g. for IE 8 ,

<!--[if IE 8]><style type="text/css"> selector {property:value} </style><![endif]-->

The selector is HTML element/tag name or can be css class name,
property is the css attribute and value indicates attribute value.

Conditional comments are also applicable in page body,
e.g

<body>
<!--[if IE 8]>
 This is Internet Explorer 8<br />
<![endif]-->
</body>

Following are the syntax of Conditional comments for IE

<!--[if IE]>IE      <![endif]-->
<!--[if IE 5]>IE 5 <![endif]-->
<!--[if IE 6]>IE 6<![endif]-->
<!--[if IE 7]>IE 7<![endif]-->
<!--[if IE 8]>IE 8<![endif]-->
<!--[if gte IE 5]>IE 5 and up<![endif]-->
<!--[if lt IE 6]>IE  lower than 6<![endif]-->
<!--[if lte IE 6]>IE  lower or equal to6<![endif]-->
<!--[if gt IE 6]>IE greater than 6<![endif]-->

2. Firefox

/* Only Firefox 1 - 2 */ body:empty selector {property:value}
/* All Firefox */ @-moz-document url-prefix() { selector {property:value} }

3. Safari and Chrome

The Safari CSS hack works similar to the Firefox hack because it uses a Safari proprietary extension to CSS. By using the -webkit prefix we can target Safari and only Safari.

 @media screen and (-webkit-min-device-pixel-ratio:0) { selector {property:value} }

or

 body:nth-of-type(1) #safari { display: block; }

4. Opera

 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body selector {property:value} }

References:

http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
http://www.nealgrosskopf.com/tech/thread.php?pid=20

0
Html & CSS

CSS Formatter and Optimiser

Posted on by amolwable

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise. For optimization CleanCSS is using CSSTidy – an opensource CSS parser and optimiser.

Why optimise

CSS Optimiser reduces the size of CSS file more than 30% depending on various conditions, it causes faster loading pages and lower traffic costs.

How optimization works

  • Convert Values of CSS property into shorthand notations,
    e.g margin:1px 1px 1px 1px; becomes margin:1px;
  • All unnecessary whitespace is removed
  • Comments are removed
  • The last semicolon in every block can be removed
  • All duplicate properties are merged,
    e.g h1,h2,h3{color:##FF0000}
  • colors like “black” or rgb(0,0,0) are converted to #000000 or rather #000 if possible. Some hex-codes are replaced by their color names if they are shorter.

References:

http://www.cleancss.com
http://csstidy.sourceforge.net

2
JQuery

jQuery Watermark plugin

Posted on by amolwable

Watermark jQuery plugin will easily create watermark hints in input and textarea elements.

How to Use:

We can set watermark on an input element as,

$('#inputId').watermark('Required information');

//we can also set class name for appearance as,
  $('#inputId').watermark('Required information', {className: 'myClassName'});

Features:

  • Watermark style is controlled by CSS classes
  • Each input element can have its own independent watermark text and class/style
  • Plugin automatically removes all watermarks prior to form submission
  • Both watermark text and CSS class name can be changed dynamically
  • Visual Studio Intellisense-compatible documentation included in source
  • Minified version is very compact — under 3,000 bytes

watermarkPlugin

References:

WebSite: http://code.google.com/p/jquery-watermark
Download:http://code.google.com/p/jquery-watermark/downloads/list

0
Sql, Tools

Open DBDiff: open source database comparison tool

Posted on by amolwable

Open DBDiff is an open source database schema comparison tool for MS SQL Server 2005/2008.
It reports differences between two database schemas and provides a synchronization script to upgrade a database from one to the other.

Open DBDiff can synchronize:

  • Tables (including Table Options like vardecimal, text in row, etc.)
  • Columns (including Computed Columns, XML options, Identities, etc.)
  • Constraints
  • Indexes (and XML Indexes)
  • XML Schemas
  • Table Types
  • User Data Types (UDT)
  • CLR Objects (Assemblies, CLR-UDT, CLR-Store Procedure, CLR-Triggers)
  • Triggers (including DDL Triggers)
  • Synonyms
  • Schemas
  • File groups
  • Views
  • Functions
  • Store Procedures
  • Partition Functions/Schemes
  • Users
  • Roles

OpenDBDiff

References:

WebSite: http://opendbiff.codeplex.com
Download: http://opendbiff.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=31876

1
Asp.net

ASP.NET AJAX callbacks to Web Methods in ASPX pages

Posted on by amolwable

In my previous post we have seen basic steps to create AJAX-Enabled WCF Service in web application.
Now in this post, We will see how to implement AJAX web methods.

Why Web Method?? Some times, we need functionality that are logically dedicated to specific ASPX page, in such situation we can use web methods.

How to create:

Step 1: Implementing Web Method

Write WebMethod as below into your code file (.aspx.cs)

[System.Web.Services.WebMethod]
    public static List GetStudents(int schoolID)
    {
        //TODO: Write your logic to get student list 
    }

Step 2: Add ScriptManager into page

Set EnablePageMethods property of ScriptManager to true as,



 


Step 3: Calling WebMethod from javascript


Call the web method through the PageMethods as below,


function GetStudents(schoolID) {
            PageMethods.GetStudents(schoolID, OnSucceeded, OnFailed);           
        }

        function OnSucceeded(result) {
            //TODO: Write logic to display the result from  JSON results to HTML           
        }

        function OnFailed(error) {
            // Alert user to the error.
            alert(error.get_message());
        }




Download Sample Application



							

							

				1											

			




				
					


	

		
Asp.net
					
AJAX-Enabled WCF Service
				Posted on  by amolwable
	

	

					

				
In this post we will see how to create an AJAX-enabled Windows Communication Foundation (WCF) service and an ASP.NET client that accesses the service.


How to create


Step 1: Right-click the WebSite in the Solution Explorer window and select Add, then New Item, and then AJAX-enabled WCF Service.


Step 2: Give the Namespace for ServiceContractAttribute as,

Here I have given Namespace as DemoServices ,


[ServiceContract(Namespace = "DemoServices")]


Step 3: Implementing methods


Add [OperationContract] attribute to each of the service methods/operations.

As,


 [OperationContract]
        public string GetName(int studentID)
        {
           //TODO: Implement method which return name of student
            return "Amol";
        }


Step 4: Configure ScriptManager to access the service


Now to access service we need to add service reference in the aspx page where we want to access service,




Step 5: Calling service methods from java script To call service we need to create an object of Service class and then call service methods as,


function GetStudent(id) {
            var service = new DemoServices.MyService();
            service.GetName(id, onSuccess, OnFailed);
            return false;
        }


While calling service, we have passed two parameters (onSuccess and OnFailed) which is nothing but java scripts functions.

onSuccess function is called when service execute successfully, OnFailed function is called when exception occurred in service method.


Step 6: Results and Error handling


function onSuccess(result) {
            //TODO: Write logic to display the result
            alert(result);

        }

 function OnFailed(error) {
            // Alert user to the error.
            alert(error.get_message());
        }




Download Demo





							

							

				3											

			




				
					


	

		
JQuery
					
Input Limiter: jQuery plugin
				Posted on  by amolwable
	

	

					

				
Input Limiter jQuery plugin will allow you to limit input into form fields. It can

display a message as the user types to let them know how many

characters they have remaining.


InputLimiter


Use:


Step 1: Add javascripts references into your page


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jquery.inputlimiter.1.1.js"></script>


Step 2: Add textbox or textarea


<input type="text" id="text3" size="30" />
<textarea rows="3" cols="30" id="textarea1"/>


Step 3: Apply input limit to input element


$(function() {
    $('textarea').inputlimiter({limit: 100});
});



Input Limiter also provides various options like remText to customizing remaining text message, limitTextShow  which Determines whether the limitText will be displayed after the remText etc.




References:


WebSite: http://rustyjeans.com/jquery-plugins/input-limiter

Demo: http://rustyjeans.com/jquery-inputlimiter/demo.htm

Download: Download Now

							

							

				1