Feeds:
Posts
Comments

This is small yet useful thing.

I was looking to add Google +1 button to my blog, which is hosted on wordpress.com. And it doesn’t give access to edit the code .

There are many widgets available for google +1 button on web (like  : http://wordpress.org/extend/plugins/google-1-widget/), but it requires to edit the code, so its not helpful if blog is hosted on wordpress.com.

Finally i fund the solution, there is a section under Settings tab in Dashboard called Sharing (Settings > Sharing)  where you can find options of adding Google +1 button , facebook share/like , twitter , linked-in, print button etc. and few other options too.

 

 

This is just a re-sharing of my past article @GatewayTechnolabs Blog.

For whom the client side scripting becomes a headache OR for those who loves client side scripting… jQuery is a great way of doing client side scripting with ease and fun. Playing with HTML DOM elements using jQuery is really a fun and as easy as writing ABCD :)

 

Introduction:  jQuery is actually an Open Source cross-browser JavaScript library which is allows faster and easier JavaScript development then the traditional JavaScript development.

There are 7 things which gives power to the developers for building robust and excellent client side scripts.

1 – Cross browser support :

Those who have ever written traditional JavaScript, they must have faced problems with diff. browser support and it becomes a tedious stuff for detecting browser behaviors and writing separate logics for all , but jQuery has wiped out all those problem by giving cross browser support. So no more cross-browsing compatibility issues here.

2 – jQuery selectors , manipulation & Traversing

Every web developers must have used CSS and its syntax for defining styles by class (with DOT) / elements  / element ID (using #), jQuery also uses all common CSS syntax for selecting a set of DOM elements which is called jQuery Selectors.

i.e. $(“#sample”)  will return all the DOM elements with [ ID = sample ]

$(“div.xyz span#abc”) will return only those <span> elements with ID= abc and are child of a <div> with class name “xyz”

To learn more you can visit : http://api.jquery.com/category/selectors/

3 – jQuery EventBinding

jQuery supports all such events like click ,mouse over/move,load, etc. Writing event on any set of DOM elements are also becomes easier with JQ, by just passing a function as a parameter in event binding.

its as easy as this : $(“#sample”).click(function(){ alert(‘Hi there !’); });

To learn more you can visit : http://api.jquery.com/category/events/

4 – Callback functions

jQuery also facilitates the callback functions in many methods which becomes useful while working with animations or any timer based functionalities.

i.e. : $(“#sample”).show(“slow”, [ optional callback function ] );

5 – Utilization of JSON

JSON stands for “JavaScript object notation”. Use of JSON everywhere as an optional parameters makes jQuery more flexible and powerful for passing a set of parameters.

Jquery utilizes JSON format widely in most of inbuilt functions ,all AJAX methods and in jQuery plug-in development as well.

i.e. : $(“#sample”).css({height:”40px”, color:”black” });

6 – jQuery AJAX

jQuery gives a variety of AJAX functionalities to the developers with extensive use of callbacks for different AJAX events, and a good thing about jQuery AJAX is that we don’t have to take care about cross-browser compatibility issues. and no need to take care of xmlHTTP object n all.

It gives different functions for all kind of developer’s needs

i.e. $(“#sample”).load( [ URL] ); – a very basic function, which will load the HTML from the specified URL into #sample.

To learn more visit : http://api.jquery.com/category/ajax/

7 – jQuery plugins

jQuery plug-in is a concept or we can say a mechanism of making our own functionality generalized by packaging it all together as a plug-in.

jQuery plug-in offers great portability to the code and of course code re-usability with ease.

To learn more visit : http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery#Plug_me:_Writing_your_own_plugins

8 – JQuery UI

jQuery UI is an Open Source library which is built on core jQuery.

It can be used to built highly interactive web applications,

jQuery UI offers a wide range of inbuilt functions for animations, effects , themes mechanism , rich  UI widgets and complex behaviors like Drag-Drop , resizing , selection & sorting.

  • jQuery UI categories all functionalities in main 3 section given below
    • Interaction: Covers complex behaviors like Drag-Drop elements, Resizing and Sorting. And provides a wide range of options for handling different behaviors and scenarios
    • Widgets: Fully functional rich UI elements (ultimately jQuery plug-ins) with a Rich User Interface and flexible theming options.
    • Effects: Enables supports of various animation and transition effects like slide,blind,bounce, drop,fade etc.

To learn more visit : http://jqueryui.com/demos/

Enjoy playing with jQuery :)

Code Project

Implementing Model popup Plug In

As shown in above screen, developing Model Popup will require 2 layers:

  1. Disabled Back ground
  2. Popup content Panel

We will implement a plug In and call it on Popup Panel element.

Somewhat like: $(“div.popupDiv”).ShowPopup();

ShowPopup();
Is a plug-In method which will initiate an instance of the plug-In which we going to implement as next step.

Prior to that a CSS for Disabled background needs to be developed

Which we can achieve as below:

.popupbackGround

{

position: absolute;

height: 100%;

width: 100%;

left: 0px;

top: 0px;

background-color: #000;

z-index: 1;

opacity: 0.5;

filter: alpha(opacity =50);

display: none;

}

We don’t have to assign this CSS class anywhere in HTML, but we will use this class while implementing Plug-In.

Next to this, we will implement Model Popup J-Query Plug-In.

Parameter to be passed to Plug-In: closeButtonCSS

The plug in will be called on the popup panel itself and take one parameter called CloseButtonCSS which will be used to close the Model popup.

We will create close event on the specified close button in parameter.

model-popup.js (Plug-In file)

jQuery.noConflict();

(

function($K){

$K.fn.ShowPopup=function(data)

{

/* Parameters: closeButtonCSS */

$K(this).each(function(i)

{

var dbBack,intTopAxis=0;

var objCloseButton= $K(“.” + data.closeButtonCSS);

var objPopup= $K(this);

var a;

objCloseButton.click(function(){ HidePopup(); });

$K(window).scroll(function(){

var xTop= parseInt($K(window).scrollTop()) + intTopAxis ;

objPopup.animate({top:xTop+ “px”},{queue: false, duration: 350});

});

initBackGround = function(){

dbBack = $K(“<div></div>”).attr(“class”,“popupbackGround”).css(“height”,$K(document).height()).hide();

$K(“body”).append(dbBack);

intTopAxis= parseInt(($K(window).height())/2)-(objPopup.height()/2); }

ShowPopup = function(){ initBackGround();

dbBack.fadeIn(function(){objPopup.show();

});

objPopup.css({“left”: (($K(window).width())/2)-(objPopup.width()/2),“top”: (($K(window).height())/2)-(objPopup.height()/2)+parseInt($K(window).scrollTop())});

}

HidePopup = function() {

objPopup.fadeOut(); dbBack.fadeOut();

}

ShowPopup();

});

}

})(jQuery);

How to call Model Popup

Popup Plug-In can be called on any Div object. And the DIV itself will get displayed as a popup like shown in the above screen.

For example:

Target popup DIV class is popupDiv.


<div class=”popupDiv”>

<div>Popup Content Goes Here.. </div>

<div class=”close”><class=”lnkClose”> <img src=”resource/small-closelabel.gif” /></a>

</div>

</div>

We can popup by placing the following javascript :

$k(“div.popupDiv”).ShowPopup(

{

closeButtonCSS:“lnkClose”

});

Here “closeButtonCSS:“lnkClose” is used to treat lnkClose as close button of popup.

Playing FLV

To play any FLV file in HTML will require a flash based FLV player. There are many FLV players available among of those we will use one, which is a flash file and we can play FVL using the flash FLV player.

Here we will require 2 flash (SWF) files:

  1. flvplayer.swf (download )
  2. SteelExternalAll.swf (needs to be placed on same path of container HTML page) (Download)

Below is how to embed object in HTML page to play FLV using above FLV player.

<object id=”Object1″ height=”380″ width=”400″ classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://macromedia.com/cabs/swflash.cab#version=6,0,0,0″&gt;

<param name=”movie” value=”flash/flvplayer.swf” />

<param name=”FlashVars” value=”flvurl=../flash/test.flv” />

<param name=”quality” value=”high” />

<param value=”true” name=”autoplay” />

<embed height=”380″ width=”400″ src=”flash/flvplayer.swf” flashvars=”flvurl=../flash/test.flv” type=”application/x-shockwave-flash” />

</object>

Above code will take FLV file path as a parameter, that is been specified at 2 places.

  1. flashvars=”flvurl=../flash/test.flv”
  2. <param name=”movie” value=”flash/flvplayer.swf” />

Your FLV file path will go here.

Putting all together

Now we got both things ready with us.

  1. Implemented J-Query plug-In for model popup
  2. FLV player

Simply placing the <object> tag inside the Popup Div will result in our targeted output.

In addition to that we will require a Button to be clicked to show model popup. Like shown below

<a class=”lnkPopup”>Play FLV in Popup</a>

Let’s create a simple J-Query click event of the above link and call popup plug-In inside click event, like shown below.

<script type=”text/javascript” language=”javascript”>

var $k=jQuery.noConflict();

$k(document).ready(function(){

$k(“a.lnkPopup”).click(function()

{

$k(“div.popupDiv”).ShowPopup(

{

closeButtonCSS:“lnkClose”

});

});

});

</script>

You can also download full source code ZIP file by clicking here .

CSS3 gives a great flexibility to designers to create optimized HTML by utilizing CSS3 features.

CSS3 selectors gives rich amount of DOM element filtering, which will let designers to minimize inline attributes and inline styles in HTML code.

Here I am giving an overview of how to utilize CSS3 to develop an HTML form as shown below.

We will try to optimize HTML as much as possible by giving all styles and attributes through CSS3 in css file itself.

Form Concept:

As shown in below screen, we will be dividing form into 4 pieces,

  1. Header part (<th> )
  2. Left side labels (<td>)
  3. Right side textbox area (<td> & <input type=”text” /> )
  4. Bottom Buttons ( <input type=”submit”/> )

Generating Simple HTML form:

As shown in below HTML, we will not give any attributes to TABLE or TD.

Just a simple Table with only one class which is assigned to TABLE, like class=”tblform”. Very neat HTML without any kind of attributes assigned.

HTML file code

<table class=”tblform”>

<tr>

<th colspan=”2″>Please enter your details below.</th>

</tr>

<tr>

<td>Name</td>

<td><input type=”text”/></td>

</tr>

<tr>

<td>Email</td>

<td><input type=”text”/></td>

</tr>

<tr>

<td>Mobile</td>

<td><input type=”text”/></td>

</tr>

<tr>

<td>

</td>

<td><input type=”submit” value=”Submit”/> <input type=”submit” value=”Cancel”/></td>

</tr>

</table>

Developing CSS file:

Once we got the above HTML ready, our all focus will be now on CSS to make it look like as shown in above screen shot,

In HTML there is only 1 CSS class assigned to TABLE which is tblform.

Further will be doing all stuffs in the CSS as given below,

CSS file code

.tblform

{

border-collapse: collapse;

width: 100%;

font-family: Calibri;

font-size: 11pt;

}

.tblform td

{

padding: 5px;

border: solid 1px #E1E1E1;

}

.tblform th

{

padding: 5px;

border: solid 1px #E1E1E1;

font-weight: normal;

text-align: left;

background-color: #E1E1E1;

font-weight: bold;

}

.tblform td input[type=text]

{

border: 1px solid #CCCCCC;

width: 180px;

height: 20px;

padding-left: 5px;

}

.tblform td:first-child

{

padding: 5px;

border: solid 1px #E1E1E1;

background-color: #F2F2F2;

}

.tblform td input[type=submit], .tblform td input[type=submit]:hover

{

background-image: url(button-bg.gif);

background-repeat: repeat-x;

line-height: 22px;

height: 25px;

font-family: Verdana, Arial,Helvetica,sans-serif;

font-weight: bold;

font-size: 11px;

color: #333333;

padding: 0px 10px 0px 10px;

border: 1px solid #999999;

cursor: pointer !important;

}

That’s it, it will result in a nice form with all CSS applied and HTML will remain neat as it is.

Understanding sys.objects:

Sys.objects is a system VIEW in SQL Server 2005, for each SQL database there is a separate sys.object view which gets stored within databse itself.

Using Sys.objects returns list of all database objects and its types, type can be either of given below:

DB OBJECT TYPES

F     FOREIGN_KEY_CONSTRAINT

IT    INTERNAL_TABLE

PK    PRIMARY_KEY_CONSTRAINT

S     SYSTEM_TABLE

SQ    SERVICE_QUEUE

U     USER_TABLE

V     VIEW

How to DELETE all User Tables , stored procedures , UDF’s and Views using cursor

Use [database name]

declare @q nvarchar(max)

declare @name nvarchar(max);

declare @type nvarchar(max);

declare cur cursor for

select name ,type from sys.objects where type in(‘p’,‘fn’,‘v’,‘u’);

open cur;

fetch next from cur into @name,@type

while @@fetch_status = 0

begin

if(@type=‘p’)

begin

set @q=N‘drop procedure ‘ + @name;

end

if(@type=‘fn’)

begin

set @q=N‘drop function ‘ + @name;

end

if(@type=‘v’)

begin

set @q=N‘drop view ‘ + @name;

end

if(@type=‘u’)

begin

set @q=N‘drop table ‘ + @name;

end

exec sp_executesql @q;

fetch next from cur into @name,@type

end

close cur;

deallocate cur;

Encapsulation: is an ability of hiding data or methods from the rest of the world.

Inheritance: is a concept of passing and using attributes of base class into derived class.

Polymorphism: single name – multiple use, it can be achieved via Function overloading & operator overloading.

Class & object: a class is a definition which describes all attributes of entity or an object. And object is an instance of a class.

Overloading: is the concept of using function or class with same name but different implementation by changing types of parameters

Static or shared: a keyword to define static class, members of static class doesn’t require creating instance of that class.

Virtual: indicated that this base class method is to be overridden. [Without specifying virtual keyword also method can be override, but it makes code more understandable]

Sealed: indicates that this base class method not to be override.

Overriding: is a concept of implementing a method in derived class with same definition of the base class method

Shadowing: without overriding a method derived class can do new implementation where parameters, return type & access modifier may differ from the base class implementation, Shadow is the keyword in C#

Constructor: is a method with same name as class, it gives a way to initiate the class members to default values at the time of object creation, automatically calls whenever class object is created

Static constructor: a type of constructor, calls at the first time object creation.

Serialization: is the process of converting object into a stream of bytes. De-serialization is the reverse process.

Delegate: holds a reference to a function. Type safe pointer

Multicast delegate: holds reference to multiple functions, its return type must be void.

Interface & Abstract:

Abstract class Interface
Is a class to provide common fields/members to subclasses Is a collection of member definitions to be implemented in derived class
a class can inherit only 1 abstract class A class can implement many interface
Members of abstract class can have any access modifier All members are only public by default, it can’t be changed
Abstract class method may or may not have implementation Interface can have only definition of methods, no implementation


Normalization: is a process of organizing data and minimizing redundancy

De-normalization: is a technique to move from higher to lower normal forms of database modeling in order to speed up database access.

Stored Procedure: is a named group of T-SQL statements which can be created and stored in Database as an object.

Primary Key: is a unique identifier of a row in a DB table, [it can’t be NULL]

Unique key: forces uniqueness to a respective table column, [it can be NULL]

Foreign Key: a foreign key in 1 table refers to the primary key in other table, Used to force referential integrity.

Inner join: exists in both tables

Left Outer join: all records from left side table + matched rows from right side table (totals number of rows will be same as left table)

Right Outer join: all records from right side table + matched rows from left side table (totals number of rows will be same as right table), it’s a mirror image of left outer join

Full Outer join: all records from left side table + all records from right side table, weather matched or not

Cross join: returns [left table rows * right table rows], a Cartesian product of both tables

Self join: when table joins to itself using diff aliases to avoid confusion

Union: selects only distinct records from both tables

Union all: selects all records from both tables

View: is a subset of a table, can be used to retrieve data, insert or Update data. Can contain multiple select statements inside

Trigger: A trigger is a SQL procedure that initiates an action when an event (INSERT, DELETE or UPDATE) occurs.

Cursor: is a database object used to loop trough records on row by row bases.

Index: pointers to data records, represents structure of how data get stored physically in a table

Clustered index Non clustered index
Reorders physical data stored in table It contains pointers to data rows
A table can have Only 1 clustered index A table can have one OR many non-clustered index
Table is having By default a clustered index
Leaf nodes contains data Leaf nodes contains reference to data

Linked server: is a concept of adding other remote server to a group to query DB’s of both servers together

Collation: set of rules that determines how data stores & compares in database

Collation types: case sensitive, accent sensitive, kana sensitive, width sensitive

Data ware housing:

  1. Record should Never delete from DB
  2. All records must be linked
  3. Once committed records should be read-only
  4. All changes made must be tracked with time

User defined function (UDF): is a bunch of T-SQL statements which accepts 0 or more parameters and returns a scalar data value or table.

DDL: data definition language – e.g. TRUNCATE command is a DDL command

DML: data manipulation language – e.g. INSERT, UPDATE & DELETE are DML commands

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: