jQuery Series 4

Assalamualaykum Wr Br..Welcome to the jQuery Series 4
Lets code the html as shown below:
series4
Now its associated jQuery code can be written as:
series4_js
Let us traverse the code, line 2 depicts the selector “h1” when clicked calls a function which in turn have a selector “h2” which gets hided as per the action defined. The parameter inside the hide method is the milli seconds which allows to hide the selector with such speed or you can consider the parameter as the speed of the event. The following images shows the output as:
output_4
output_4_!
The heading3 is going to take place of heading 2 after clicking the heading 1 i.e., “Click Here”.
Lets explore jQuery beauty a bit deep…The above requirement was that the html page consists of 3 headings and clicking Heading 1 hides heading 2…Right??
Now lets reverse our requirement as on html page there should be 2 headings and clicking heading 1 should show heading 2 and at the ed the page should have 3 headings..
To implement this there is no need to change our html code but jQuery as shown below:
output_4_2
Check it out its output its very interesting….That’s all for the day…Hope enjoyed…

Advertisements

jQuery Series 2

Assalamualaykum Wr Br..Today we deal with Selector of jQuery..
What is Selectors in jQuery?
Selectors can be attribute or entity which selects entire content(s) it belongs and perform the required action.
The syntax of selectors in jQuery is as follows:
$(“”).;
Now lets us start with an example whose html code can be coded as shown below:
series2
and its associated jQuery code is shown as:
seriesjs
Lets traverse the code of jquery which is shown above:
The first line is the entry point of jquery execution as stated in Series1 post..
The next line is Selector which selects the id of control followed by “#”, here please refer the html code where button has id as followed by “#”. Continuing after selector action is specified here is click then again 3 line starts with Selector which selects all “div” tagged lines and then followed action to change its background color change to red. The next lines are specifies the syntax of closing.When you execute such code the output can as shown after clicking Test buttonoutputseries2.
Now we observe that only first two lines which are under div tag gets background color change on button test click…Here we add some more selectors to our jquery file as shown below:
$(“div,#testbutton,p”).css(“background-color”,”red”);//which results change in background color of button,all tagged entites..
$(“strong”).css(“background-color”,”red”);//changes background color for strong tagged entities
$(“div > p:first-child”).css(“background-color”,”red”);//changes background color for first div tagged entity.similarly $(“div > p:last-child”).css(“background-color”,”red”);
Now selecting Descending elements as: $(“div strong”).css(“background-color”,”red”);//here single space after div specifies that the descend strong tagged in parent div tagged entities.Now the selector for selecting even and odd tagged elements can be shown as “$(“p:even”).css(“background-color”,”red”);” note that the line index starts with 0.

Some more interesting stuff…. to the html page for third <p> tag, I gonna edit it as <p id=”third”>………save it and to the jquery file change the selector field as:

$(“#third”).css(“background-color”,”red”);

I hope you are enjoying…Now awesome feature of jQuery is here..Selecting based on “id” of an element is represented by “#” and for classes it is represented by “.”(dot symbol)..lets look our selector statement would be:

$(“.multiple”).css(“background-color”,”red”);

here multiple is the class name which we specify in html page as shown:
class

JQUERY Series 1

Assalamualaykum Wr Br…Lets quick start our journey towards the world of JQUERY which is quite simple to use than JavaScript. JQuery is a library of JavaScript. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

The prototype of jQuery is as follows:
1.$().ready();
2.Then modify step 1 as:$(document).ready(function () {//write code here
});
jQuery always start with symbol ‘$’ and ready keywords specifies that after all html code is loaded on browser then start executing the jQuery code. In other terms, jQuery controls all the execution of markup code and JavaScript. I understand that theory seems so boring…yeah now lets start our practical session.
step 1: Write the HTML code to display 2 headings, when clicked on first heading it shows corresponding paragraph text and on again click hides it. The next heading will be the static heading. The behavior is achieved from the jQuery code as shown below:
jq1
$(“p”).hide(); //this code specifies the browser not to display paragraph(

blah blah

)contents.
$(“h1”).click(function(){});//this piece code of code illustrates on click to heading 1 execute the function whose implementation is coded as:
$(this).next().slideToggle(300);//instructs that on click of heading toggle it to 300pxs..thats all in our jQuery code…save the file as “my_code.js”.
Step 2: Now write the simple html code that is shown as:
jq2
Please Note: It is simple html markup code written and in body tag we wrote two script tags, first is for referencing the library of jQuery which is kept in same directory location where all my files associated to this page is present and other script tag specifies the “my_code.js” jQuery file.
It is the protocol that these order of the scripts is must.
If you dont have the jQuery library with you then download it from http://jquery.com/ and reference it in src=”my_code.js” and close the script tag as show above.
When you open your html document using browsers then you would get is as shown:
jq3
Now click on Heading 1.
jq4
…Thats all for this series 1..we shall meet soon with various tips and tricks of jQuery..till then Enjoy..

 

Microsoft’s Powerful Service: WCF Walk through

Hi Everyone!!!
Today we are going to build a new WCF Service named WCF_Calculator in part 1 and in later sessions we consume this service in console application, Windows Application.

To create a new WCF Service, Start your visual studio 2010, Click on New Project–>Window gets populated..Select C# language and WCF from left most pane–>Select WCF Service Library and give name to your service(here I gave name as WCF_Calculator) as shown below:Untitled
Now Click on OK. The solution looks like as:

solution

IService1.cs and Service1.cs are auto-generated files. As we are building Service from scratch hence we delete IService1.cs and Service1.cs files in order to know the behavior of service very well. Select these two files from the solution then right click of mouse and select Delete.
Now add new item by right click solution then add interface named “ICalculator.cs” then code as shown:
Interfaace
We are very to near to pack up..have little patience please….As we have interface ready with us…
Every interface need to be implemented, so now right click your solution and a new item select class name it as “Calculator.cs”. Code the class as shown below:

Calculator
Now the very last step to fly is open App.Config file and change the interface name which was IService1 to ICalculator in endpoint tag Contract value and also change service tag attribute name=Calculator which is our class name which is implementing our interface. Here our App.Config should look as:

Appfile
Now Press F5 and your service is in the air…Microsoft Built in WCF Service Host Tool is available which runs our service shown as:
output1
To the left most pane we find our OperationContracts named Add,Sub,Mul and Div…Click on Add then supply values to arguments which is shown in below image as 234 and 432 and click Invoke Button which displays result as:
output2
similarly click each of the OperationContract and supply values and click Invoke button to retrieve result…
We are done in Creation of the Service…In next part WCF 2 we look at how to consume this Calculator service in Console and Windows Service…Thanks…Enjoy…

Sample Crystal Report in VS2010

Hi We explore sample crystal report creation in visual studio 2010 using C# asp.net.We start first from database. I create a sample database by name Department and a table named Clg.In this table i have tuples as ID, Dept_name and HOD with 4 records.We display the entire table data as a report.
1. Now create an empty new web-project with name as Sample_crystal.
2. Add a webform named as webform1.aspx and add crystalreport which populates a wizard select Standard report and blank report then click ok.
3. Drag-drop the dataset1.xsd from toolbox and on which drop clg table from server explorer.
4. Drag-drop the crystalreportviewer on to the webform and in page_load event add the code as::
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(“Data Source=.\\sqlexpress;Initial Catalog=departmetn;Integrated Security=True;Pooling=False”);
SqlDataAdapter da=new SqlDataAdapter(“select * from clg”,con);
DataSet ds=new DataSet();
da.Fill(ds,”clg”);
CrystalReport1 o = new CrystalReport1();
o.Load(Server.MapPath(“CrystalReport1.rpt”));
o.SetDataSource(ds.Tables[“clg”]);
CrystalReportViewer1.ReportSource=o;
CrystalReportViewer1.DataBind();
}
5. click the field explorer (just as toolbox,server explorer) @ crystalreport.rpt screen select Database fields–>database expert then select our dataset.
6. Expand the database Fields and drag-drop the columns of table on the crystal report Section 3(Details).
Run the application which yields the exact report from database.