Feeds:
Posts
Comments

Archive for the ‘JavaScript’ Category

 

 

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

Advertisements

Read Full Post »

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”><a 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 .

Read Full Post »

%d bloggers like this: