Dotnet Galaxy: January 2012

Here I am going to explain you how you can make a sliding image in your web application using jQuery. There are many ways to implement this feature in your web application but Using jQuery it will be very easy and you don't need to use any timer control for sliding it automatically.

Sliding Image using JQuery.

Let's start with step by step.
First we will download the required jQuery Library for this purpose.
Below are the library names to be downloaded for this purpose and the respective URL for that,

1. jquery-1.6.4.min.js
2. jquery.easing.1.3.js
3. jquery.cycle.all.js

Now we will start the coding

First Open a simple web application using your visual studio.

Go to the webapplication root folder and create two folder named "Scripts" and "images" to save jQyery Library which we downloaded and to save the image we will be using in the application.

Copy all the 3 jQuery library in your "Scripts" folder and all the images in your "images" Folder.

Once this is done we will open our web application and copy below lines in your head section of the .aspx page.

<head runat="server"><%--needs to download "jquery-1.6.4.min.js","jquery.easing.1.3.js" and jquery.cycle.all.js files from the net. Just search in google for this file directly --%>    <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>    <script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>    <script src="Scripts/jquery.cycle.all.js" type="text/javascript"></script>    <title>Sample jQuery Sliding Image Application</title>    <script type="text/javascript">        jQuery(document).ready(function ()         {            if (jQuery('#SlideImages').length > 0)             {                jQuery('#SlideImages').cycle(                {                    fx: 'curtainX', speed: 500, timeout: 5000, randomizeEffects: true, easing: 'easeInOutBounce',                    next: '.NextSlide',prev: '.PrevSlide',pager: '#SlideStyleNav',cleartypeNoBg: true                });            }        });   </script>   <%--Prev.png and Next.png are the two small buttons to navigate next and prev on click ImageCount.png is the image count we display at the bottom of the page.--%>   <style type="text/css">#SlideStyle{position:relative;width:400px;}#SlideStyle .PrevSlide, #SlideStyle .NextSlide{display:block;position:absolute;width:40px;height:40px;top:150px;z-index:9999;text-decoration:none;}#SlideStyle .PrevSlide{left:0;background:transparent url(images/Prev.png) no-repeat top left;}#SlideStyle .NextSlide{right:0;background:transparent url(images/Next.png) no-repeat top left;}#SlideStyleNav {position:absolute; bottom:0; z-index:9999;}#SlideStyleNav a{background:transparent url(images/ImageCount.png) no-repeat 0 0 ; float:left; height:15px; overflow:hidden; text-decoration:none; text-indent:-1234px; width:16px;}#SlideStyleNav a.activeSlide {background-position:-32px 0;}#SlideImages{overflow: hidden; position: relative;}</style></head>

Now in your body tag add below code.

<body>    <form id="form1" runat="server"><div id="SlideStyle">    <div id="SlideImages">    <%--Needs to add images in IMAGE folder, in this examle I have added 6 Images--%>    <%--Image size can be changed depends on the size of image you are using, my code shrinks the image according to the size you are mentioning --%>        <img src="images/1.jpg" alt="Image 1" width="400" height="300" />        <img src="images/2.jpg" alt="Image 2" width="400" height="300" />        <img src="images/3.jpg" alt="Image 3" width="400" height="300" />        <img src="images/4.jpg" alt="Image 4" width="400" height="300" />        <img src="images/5.jpg" alt="Image 5" width="400" height="300" />        <img src="images/6.jpg" alt="Image 6" width="400" height="300" />    </div>    <a class="PrevSlide" href="#"> </a>    <a class="NextSlide" href="#"> </a>    <div id="SlideStyleNav"> </div></div>    </form></body>

Below is the sample image you will get after creating this application.

In this code you may change the image name based on the images you are using. You don't need to worry about the size of the images as I am adjusting the size of the images to fit it into the space.

Below are the some of the fx: options you can try:

1. shuffle
2. Zoom
3. fade
4. turnDown
5. curtainX

Below are the some of the easing: options you can try:

1. easeOutBounce
2. easeInBounce
3. easeInOutBack
4. easeOutBack
5. easeInOutQuint

you can find many more options if you search over the net I have given you just 5 options in each category there are lot many...

WCF error: metadata contains a reference that cannot be resolved

This is one of the very common error you get when you develop your first WCF and try to consume the same in your client application.

One of this silly error may take long time to resolve because the error description is totally meaning less and our mind will always force us to look through the code to find out the issue.

cause:
Cause of this error is simple when you try to refer the WCF service IIS tried to access C:\Windows\Temp folder. If ASP.NET or IIS_IUSER(based on the windows version) account doesn’t have access to this folder you will see this error.

Solution:
Add ASP.NET or IIS_USER account to this folder or give admin rights to the user account you are running your application.

Sunday, January 22, 2012

Can we have primary key and clustered index on same table with different field?

Sliding Image using JQuery

Wednesday, January 11, 2012

WCF error: metadata contains a reference that cannot be resolved