This is featured post 1 title

Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is

This is featured post 2 title

Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.

This is featured post 3 title

Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.

This is featured post 4 title

Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.

This is featured post 5 title

Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.

Tuesday, 31 July 2012

Grid layout with Background Image in WPF

22:38 Unknown

Introduction                              

The grid is a layout panel with Background Image that arranges its child controls in a tabular structure of rows and columns. Its functionality is similar to the HTML table but more flexible. A cell can contain multiple controls; they can span over multiple cells and even overlap themselves.

Description

To add controls to the grid layout panel just put the declaration between the opening and closing tags of the Grid. Keep in mind that the row- and column definitions must precced any definition of child controls.
The grid layout panel provides the two attached properties Grid. Column and Grid. Row to define the location of the control.




<Window x:Class="WpGridLayoutfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        d:DesignHeight="350" d:DesignWidth="525" SizeToContent="WidthAndHeight">
    <Grid   >
        <Grid.Background>
            <ImageBrush ImageSource="bg.jpg"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />

        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions >
            <ColumnDefinition Width="Auto"  />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0" Content="Name:" FontFamily="Trebuchet MS"
         FontWeight="Bold" FontSize="12" Foreground="White"/>
        <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:" FontFamily="Trebuchet MS"
         FontWeight="Bold" FontSize="12" Foreground="White"/>
     
        <Label Grid.Row="0" Grid.Column="1" Content="Sunil Gurjar" FontFamily="Trebuchet MS"
         FontWeight="Bold" FontSize="12" Foreground="White"/>
        <Label Grid.Row="1" Grid.Column="1" Content="sunilgurjar19@gmail.com" FontFamily="Trebuchet MS"
         FontWeight="Bold" FontSize="12" Foreground="White"/>
      

    </Grid>
</Window>


Downloads  
You can download the complete source code in WPF C# 
 

Asp.net - display progress bar button click asp net

06:33 Unknown

Introduction
                        This article is about showing load progress using jQuery and JavaScript. Often we perform high bandwidth operations like file upload, etc. To give a bit of relief to the website user, we need to show that something is happening. The best way is to show a progress message using JavaScript with overlay fade effect in the client area of browser.

Description

To show progress bar using jQuery, I'm using one .JS files. The .JS file is the latest version of jQuery file downloaded from Demo Code.CSS part which is used for styling overlay fade effect and progress message box style. A GIF image is used to make the progress box more effective.
Progress bar using jQuery can be attached with server side ASPX controls as well as HTML controls. For example, ASPX Link Button, Hyperlink, Menu, Button, Dropdown List, List Box, etc. and HTML Anchor, Select, Input, etc.





<%@ PageLanguage="VB"AutoEventWireup="false"CodeFile="Default.aspx.vb"Inherits="_Default"%>

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Display Progress bar using Javascript</title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">   
    varisProgressBarFlag = true;
    functionDisplayProgessBarEvent()
    {      
        var l, t;
        l = screen.width/2;
        t = screen.height/3;       
        ActiveDivPUid = 'divProgressBar';
        varDivContent=document.createElement('div');
            DivContent.innerHTML = GetProgressBar_PU('divProgressBar');
            document.body.appendChild(DivContent.firstChild);       
        varobjDiv=document.getElementById('divProgressBar');
            objDiv.className = 'dimming';
            objDiv.style.visibility = "visible";
            objDiv.style.left = l + 'px';
            objDiv.style.top = t + 'px';
        isProgressBarFlag = true;
          
       
    }
    functionHideProgressBarEvent()
    {
        varobjPU=document.getElementById('divProgressBar');
        $(document).ready(function(){
            $("#divProgressBar").fadeOut(500,function()
            {
                document.body.removeChild(objPU);
                isProgressBarFlag = false;
            });
        });
    }
    functionGetProgressBar_PU(divId)
    {
        varHtmlContent="<div id='" + divId + "' class='dimmer'  >"+
        "<table border='0' align='center' cellpadding='0' cellspacing='0' class='progress_tab'>"+
        "<tr><td ondblclick='void(0);' onmouseover='over=true;' onmouseout='over=false;'>&nbsp</td>"+
        "<td>&nbsp</td><td colspan='4'>&nbsp</td><td>&nbsp</td></tr><tr><td colspan='4'>&nbsp</td>"+
        "<td><img src='fb_small.gif' alt=''/></td><td colspan='4'>&nbsp</td><td>Processing</td>"+
        "</tr><tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr></table></div>";
        returnHtmlContent;               
    }
    </script>
  <style type="text/css">
    div.dimmer{visibility: hidden;position:absolute;left:0px;top:0px;font-family:verdana;
    font-weight:bold;padding:40px;background-image:url(honey.png);_background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='honey.png');}
    div.dimming{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;font-style:
    normal;background-color: #ffffff;position:absolute;z-index:10000;visibility: hidden;border-style:   
    solid;border-color: #999999;border-width: 1px;}
    .progress_tab{font:11px verdana; margin:0; padding:0; border:2px #e1e1e1 solid; width:120px;}

  </style>
</head>
<body onload="DisplayProgessBarEvent()">
    <form id="form1" runat="server">
    <div align="center">
    <input type="button" value="Show" onclick="DisplayProgessBarEvent()" />
    <input type="button" value="hide" onclick="HideProgressBarEvent()" />
    </div>
    </form>
</body>
</html>

Downloads
You can download the complete source code in C# 
AspnetProgressbar.zip


draggable div using javascript

03:47 Unknown


Introduction
                              How to implement a simple script to drag elements in a web page. So in this post I want to illustrate the simplest method I know and use to drag everything in asp.net pages, using just three rows of JavaScript code.

In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial.

Description
                        Have you ever tried doing some animation using JavaScript or moving DIVs here well, you know then how much pain it is as not only you have to tackle the difficult part of animation but also making it cross browser compatible.
Well you probably know why I am stretching up so hard is just to tell you how easy it is to use jQuery and JavaScript and do some really fantastic things without even bothering of knowing how it is done internally
In this small note, I will show you how to do Dragging of a DIV using jQuery and JavaScript. I will show you the demo of a DIV, which can be dragged here and there.

Call this JavaScript function on div then this div is movable


<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="moovPU.js" type="text/javascript"></script>
ondblclick='void(0);' onmouseover='over=true;' onmouseout='over=false;'
 



<%@ PageLanguage="VB"AutoEventWireup="false"CodeFile="Default.aspx.vb"Inherits="_Default"%>

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Dragable Div in Asp.Net Using Javascript by sunil gurjar</title>
   <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
   <script src="moovPU.js" type="text/javascript"></script>
    <script type="text/javascript">
    varActiveDivPUid=null;
    functionGetdiv()
    {
      var vLeft = 0;
      var vTop = 0;
      varvPopDivID = "div";   
      ActiveDivPUid = vPopDivID;   
      vLeft = screen.width/3;
      vTop = screen.height/4
      varvHtmlContent = '<div id='" + ActiveDivPUid + "' class='dimmer'>"+
      "<table cellspacing='0' cellpadding='0' border='0' align='center' >" +
      "<tr><td><table cellspacing='0' cellpadding='0' border='0' align='center' width='100%' class='legendPU'>" +
      "<tr><td style='background: url(bg.jpg) repeat-x; height: 20px; border-bottom: 1px solid rgb(204, 204, 204);'>" +
      "<table cellspacing='0' cellpadding='0' border='0' align='center' width='98%'>"+
      "<tr><td height='20'style='font: bold 11px verdana; cursor: move; height: 18px;' "+
      "ondblclick='void(0);' onmouseover='over=true;' onmouseout='over=false;'>&nbsp;</td>"+
      "<td width='25'><img height='15' width='25' onclick='HideActive_PU("+ $(this).parent().attr("id") + ");' "+
      "alt='' style='cursor: pointer;' src='close.gif' /></td> " +
      "</tr></table></td></tr>"+
      "<tr><td><div id='GSearchResults' class='legendbox' >"+
      " Hi this is Sunil Gurjar <br/>it is demo of dragable or movable "+
      "<div style='overflow: auto;'></td></tr></table></td></tr></table></div>';
           
      varDivContent = document.createElement('div');
      DivContent.innerHTML = vHtmlContent;
      document.body.appendChild(DivContent.firstChild)
      varobjDiv = document.getElementById(ActiveDivPUid);
      objDiv.className = 'dimming';
      objDiv.style.visibility = "visible";
      objDiv.style.left = vLeft + 'px';
      objDiv.style.top = vTop + 'px';
    }
    </script>

  <style type="text/css">
    div.dimmer{visibility: hidden;position:absolute;left:0px;top:0px;font-family:verdana;
    font-weight:bold;padding:40px;background-image:url(honey.png);_background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='honey.png');}
    div.dimming{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;font-style:
    normal;background-color: #ffffff;position:absolute;z-index:10000;visibility: hidden;border-style:   
    solid;border-color: #999999;border-width: 1px;}
   .legendPU{font:11px verdana; margin:0; padding:0; border:2px #e1e1e1 solid; width:320px;}
   .legendbox{width:300px;height:185px;margin:10px; padding:0;}
  </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="Show Div"  onclick="Getdiv()"/>
    </div>
    </form>
</body>
</html>

Downloads this tutorial

You can download the complete source code in C# 
 JavaScript Div Movable.zip

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger