Dec 19, 2011

A simple jQuery slideshow

by
I have used jQuery animate() method to create a simple slideshow. I am toggling the opacity of the image from 0 to 1 and also changing the URL of the image. 

Script:

<script type="text/javascript">
function AnimateImg()
{

    var imgUrls = new Array("picture1.png", "picture2.png", " picture3.png ");
    var opacVal = 0;
    var currentImage = imgUrls[0];
    var index = 0;
    var DELAY = 1000;
    setInterval(function()
            {
            $("#animate-img").animate({ opacity: opacVal }, DELAY, function() {

                    if (opacVal == 0) {
                        opacVal = 1;
                    }
                    else {
                        opacVal = 0;
                    }

                    if (index == imgUrls.length) {
                        index = 0;
                    }

                    if (opacVal == 0) {
                        currentImage = imgUrls[index++];
                        $("#animate-img").attr("src", currentImage);
                    }
                });

            }, DELAY
       );
}
</script>
HTML:


<image id="animate-img" src="" style="height:200px"/>

DEMO:

Also check the jquery modal dialog here.

Dec 12, 2011

A jQuery modal wait dialog

by
The jQuery UI modal dialogs are great add-ons but they don’t necessary fit well when you just have to show a wait message. There are issues with removing the title bar and styling the dialog. BlockUI is another alternative but I find it little hard to style using css.

This is how I came up with a wait dialog. I am using two divs here. 
First div will cover the page content in such a way that the content is still visible but user cannot perform any action. For this, I need a div with near transparent background (opacity of 0.8)

  
   #loading-div-background 
    {
        display:none;
        position:fixed;
        top:0;
        left:0;
        background:black;
        width:100%;
        height:100%;
     }


The second div will contain an animated image and it can be positioned centrally in the page.

  
   #loading-div
    {
         width: 300px;
         height: 200px;
         background-color: #0c0b0b;
         text-align:center;
         position:absolute;
         left: 50%;
         top: 50%;
         margin-left:-150px;
         margin-top: -100px;
     }


Script

  
<script type="text/javascript">
        $(document).ready(function () {
            $("#loading-div-background").css({ opacity: 0.8 });
           
        });

        function ShowProgressAnimation() {
           

            $("#loading-div-background").show();

        }

    </script>


I am assigning the opacity property through jQuery css() funtion as it will take care of any browser compatibility issues.
Also, I have written a method which will bring up the background div. This can be invoked during form submit or whenever it is desired to block the page content. In this demo, I am triggering through a button click event.

HTML

  
<button id="show" onclick="ShowProgressAnimation();" >Show dialog</button>

<div id="loading-div-background">
    <div id="loading-div" class="ui-corner-all" >
      <img style="height:80px;margin:30px;" src="images/loading.gif" alt="Loading.."/>
      <h2 style="color:gray;font-weight:normal;">Please wait....</h2>
     </div>
</div>



Demo


Loading..

Please wait....

Also check the jQuery image slide show here.

Nov 24, 2011

Android PC ??

by
Looks like you will be carrying your PC in your pocket. A company has built a USB which connects your andriod phone to a display panel through HDMI interface. You can also connect it to your PC and android will appear as your virtualized desktop.

Jul 22, 2011

TFS Build Error Copying Silverlight XAP file

by
I was trying to automate build for Silverlight project using Team Foundation Server and build was failing with the following error.

Copying my.xap file failed. Access to path '..' denied.

Digging deep in the build log, I found that this is happening while copying the source files from TFS to the build folder for compilation. Since xap is an output file it is not required during the compilation. I avoided the download/copy of the xap file by denying access to the build agent. The steps are mentioned here.

May 6, 2011

Specifying Reference Paths in TFS 2010 build definition

by
While creating build definition using TFS 2008, we could specify the path(s) where the build server could look for the references. This was of great help as it avoided installing dependent assemblies in the GAC in the build server.
It was easily done by editing the project file and adding <AdditionalReferencePath> element.

In Team Foundation Server 2010, the build definition are workflow based and if you are creating any build definition using default template, there is no option to specify the additional reference paths.

Since, new template also supports the msbuild arguments, we have to specify the reference path as a build argument. For this we have to add "ReferencePath" as property to the msbuild arguments.

Go to Team Explorer >> Build Defintion >> Edit Build Definition >> Process >> Advanced Section >> MSBuild Arguments and Add the following: /p:ReferencePath=”{File path}”

We can specify multiple reference paths separated by ';'

Mar 4, 2011

The type 'System.Xml.IXmlLineInfo' is defined in an assembly that is not referenced. You must add a reference to assembly 'System.Xml, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e'

by
I have been getting this weird exception out of nowhere while compiling my solution. Turns out I had two projects in my solution using different System.Xml assembly. One using straight from .NET Framework 2.0 and other using assembly 2.0.5.0. ( from Silverlight runtime).

Referenced path were
C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.Xml.dll
&
C:\Program Files\Reference Assemblies\Microsoft\Framework\Silverlight\v4.0\System.Xml.dll respectively.

If a project file does not specify the exact reference assembly, compiler tries to use any matching assembly present in its cache. I could see the following reference in my csproj file.
<Reference Include="System.Xml"/>

I updated this reference with the correct version (along with the PublicKeyToken and Culture info) and made the SpecificVersion=True, enforcing compiler to use the specified assembly

<Reference Include="System.Xml, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089, processorArchitecture=MSIL">
<SpecificVersion>True</SpecificVersion>
<HintPath/>
</Reference>

This resolved my problem. Specifying strong references in project files will eliminate issues caused by same name assemblies.
Newer Posts Older Posts

Top Ad 728x90