lesson 8

image hover effect in wpf

2012-02-13T09:15:00.001-08:00

image hover effect in wpf like 50% Transparent

like this way

private void image1_MouseEnter(object sender, MouseEventArgs e)
{
  DoubleAnimation brdAninamtion = new DoubleAnimation();
  brdAninamtion.From = 1.0;
  brdAninamtion.To = 0.5;
  brdAninamtion.Duration = new Duration(TimeSpan.FromMilliseconds(1));

  Storyboard.SetTargetName(brdAninamtion, "image1");
  Storyboard.SetTargetProperty(brdAninamtion, new PropertyPath(Border.OpacityProperty));

  Storyboard bdrStory = new Storyboard();
  bdrStory.Children.Add(brdAninamtion);
  bdrStory.Begin(image1);
}

private void image1_MouseLeave(object sender, MouseEventArgs e)
{
  DoubleAnimation brdAninamtion = new DoubleAnimation();
  brdAninamtion.From = 0.5;
  brdAninamtion.To = 1.0;
  brdAninamtion.Duration = new Duration(TimeSpan.FromMilliseconds(1));

  Storyboard.SetTargetName(brdAninamtion, "image1");
  Storyboard.SetTargetProperty(brdAninamtion, new PropertyPath(Border.OpacityProperty));

  Storyboard bdrStory = new Storyboard();
  bdrStory.Children.Add(brdAninamtion);
  bdrStory.Begin(image1);    
}

Text box auto select all text in jquey

2012-02-08T05:45:00.000-08:00

Text box auto select all text for all text box with jqery in asp.net

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

// Text box auto select all text for all text box
        $(document).ready(function () {
            $("INPUT[type='text']").click(function () { selectAllText(jQuery(this)) });

        });

        function selectAllText(textbox) {
            textbox.focus();
            textbox.select();
        }

Live Demo : Here

Check box list with jquery

2012-02-08T05:38:00.000-08:00

Check box list with jquery

Select all with jquery in asp.net
check box list select all by jquery

<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
            $('#chkAll').click(
             function () {
                 $("#CheckBoxList1 INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));
             });
        });
</script>

<asp:CheckBox ID="chkAll" Text="Select All" runat="server" />
<br />
<hr />
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
     <asp:ListItem>asp.net</asp:ListItem>
     <asp:ListItem>html5</asp:ListItem>
     <asp:ListItem>wpf</asp:ListItem>
     <asp:ListItem>java</asp:ListItem>
     <asp:ListItem>jquery</asp:ListItem>
     <asp:ListItem>csharp</asp:ListItem>
</asp:CheckBoxList>

model dialog asp.net

2012-02-08T05:29:00.000-08:00

Model Dialog Asp.Net With Jquery

asp.net dialog open with aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>load aspx page into modal dialog</title>
    <link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#menuitem').click(function () {
                var mydiv = $('#dialog');
                mydiv.dialog({ autoOpen: false , height: 400, width:400 });
                // Load the content using AJAX
                mydiv.load('Default.aspx');
                // Open the dialog
             
                mydiv.dialog('open');
               
                return false;
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="dialog">
        </div>
        <input id="menuitem" type="button" value="Click" />

    </div>
    </form>
</body>
</html>

Live Demo : Here
Download : Here

wpf link button

2012-02-02T05:38:00.000-08:00

Link button in wpf

you want to make a button to look like hyper link.

<Button Margin="3,0,0,0" Content="Visit Website" Cursor="Hand" x:Name="VisitWebsite" Click="VisitWebsite_Click">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <TextBlock TextDecorations="Underline"> 
                <ContentPresenter />
                            </TextBlock>
                        </ControlTemplate>
                    </Button.Template>
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="Foreground" Value="Blue" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Foreground" Value="Red" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>

In style :

<Style 
    x:Key="LinkButon" 
    TargetType="Button"> 
    <Setter 
        Property="Template"> 
        <Setter.Value> 
            <ControlTemplate 
                TargetType="Button"> 
                <TextBlock 
                    TextDecorations="Underline"> 
                <ContentPresenter /></TextBlock> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
    <Setter 
        Property="Foreground" 
        Value="Blue" /> 
    <Style.Triggers> 
        <Trigger 
            Property="IsMouseOver" 
            Value="true"> 
            <Setter 
                Property="Foreground" 
                Value="Red" /> 
        </Trigger> 
    </Style.Triggers> 
</Style>

Contact Management System

2012-02-01T09:34:00.000-08:00

Contact Management System

it very easy to use anyone , user can add new contact and manage contact, contact includes fields name,birth date,age,image,address,phone no,email id and remarks.user can back up database and restore database also export data in csv,pdf,html file.

Config
.net 4.0
wpf
C#
XML
linq

Features :

One Search box
Birth date reminder
Export Data in csv,pdf,html format
Address Show in Google maps
Back up database
Restore database
Easy manage contact and Great UI

Download Free : Contact Management System

Screenshot :

The Data Attribute

2012-01-31T07:10:00.000-08:00

Retrieve Value of the Custom Attribute

It can also even be used in your CSS, like for this silly and lame CSS text changing example.

<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Sort of Lame CSS Text Changing</title>
<style>

h1 { position: relative; }
h1:hover { color: transparent; }

h1:hover:after {
	content: attr(data-hover-response);
	color: black;
	position: absolute;
	left: 0;

}
</style>
</head>
<body>

<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>

</body>
</html>

Not In HTML5

2012-01-31T07:05:00.001-08:00

NOT In HTML5

People can be forgiven for assuming that awesome JavaScript-less transitions are grouped into the all-encompassing HTML5. Hey — even Apple has inadvertently promoted this idea. For non-developers, who cares; it’s an easy way to refer to modern web standards. However, for us, though it may just be semantics, it’s important to understand exactly what is not HTML5.

SVG: Not HTML5. It’s at least five years old.
CSS3: Not HTML5. It’s…CSS.
Geolocation: Not HTML5.
Client Storage: Not HTML5. It was at one point, but was removed from the spec, due to the fact that many worried that it, as a whole, was becoming too complicated. It now has its own specification.
Web Sockets: Not HTML5. Again, was exported to its own specification.

Regardless of how much distinction you require, all of these technologies can be grouped into the modern web stack. In fact, many of these branched specifications are still managed by the same people.

Mark Element html5

2012-01-31T07:00:00.000-08:00

Mark Element html5

Think of the <mark> element as a highlighter. A string wrapped within this tag should be relevant to the current actions of the user. For example, if I searched for “Open your Mind” on some blog, I could then utilize some JavaScript to wrap each occurrence of this string within <mark> tags.

<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Free your Mind"</mark>.</p>

Regular Expressions html5

2012-01-31T06:58:00.000-08:00

Regular Expressions html5

Thanks to the new pattern attribute, we can insert a regular expression directly into our markup.

<form action="" method="post">
 <label for="username">Create a Username: </label>
    <input type="text"
    name="username"
    id="username"
    placeholder="4 <> 10"
    pattern="[A-Za-z]{4,10}"
    autofocus
    required>
 <button type="submit">Go </button>
</form>

If you’re moderately familiar with regular expressions, you’ll be aware that this pattern:
[A-Za-z]{4,10} accepts only upper and lowercase letters. This string must also have a minimum of four characters, and a maximum of ten.

Display Controls html5

2012-01-31T06:51:00.000-08:00

Display Controls html5

If you’re working along with each of these tips and techniques, you might have noticed that, with the code above, the video above appears to be only an image, without any controls. To render these play controls, we must specify the controls attribute within the video element.

<video preload controls>

Preload Videos html5

2012-01-31T06:35:00.000-08:00

Preload Videos html5

The preload attribute does exactly what you’d guess. Though, with that said, you should first decide whether or not you want the browser to preload the video. Is it necessary? Perhaps, if the visitor accesses a page, which is specifically made to display a video, you should definitely preload the video, and save the visitor a bit of waiting time. Videos can be preloaded by setting preload="preload", or by simply adding preload. I prefer the latter solution; it’s a bit less redundant.

<video preload>

Video Support html5

2012-01-31T06:29:00.000-08:00

Video Support html5

<video controls preload>
 <source src="ogvfileformat.ogv" type="video/ogg; codecs='vorbis, theora'" />
 <source src="mp4fileformat.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
 <p> Your browser is old. <a href="mp4fileformat.mp4">Download this video instead.</a> </p>
</video>

Much like the <audio> element, we also, of course, have HTML5 video as well in the new browsers! In fact, just recently, YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn’t specify a specific codec for video, it’s left to the browsers to decide. While Safari, and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats.

Chrome can correctly display video that is encoded in both the “ogg” and “mp4″ formats.

There are a few things worth noting here.

We aren’t technically required to set the type attribute; however, if we don’t, the browser has to figure out the type itself. Save some bandwidth, and declare it yourself.
Not all browsers understand HTML5 video. Below the source elements, we can either offer a download link, or embed a Flash version of the video instead. It’s up to you.
The controls and preload attributes will be discussed;

Audio Support html5

2012-01-27T04:54:00.000-08:00

Audio Support

For the time being, only the most recent of browsers offer support for HTML5 audio. At this time,

<audio autoplay="autoplay" controls="controls">  
    <!--<source src="file.ogg" />-->  
    <source src="Ishq Sufiyana.mp3" />
    <a href="Ishq Sufiyana.mp3">Download this file.</a>
</audio>

In Chorme :

html5 audio support

Mozilla and Webkit don’t fully get along just yet, when it comes to the audio format. Firefox will want to see an .ogg file, while Webkit browsers will work just fine with the common .mp3 extension. This means that, at least for now, you should create two versions of the audio.

When Safari loads the page, it won’t recognize that .ogg format, and will skip it and move on to the mp3 version, accordingly. Please note that IE, per usual, doesn’t support this, and Opera 10 and lower can only work with .wav files.

Autofocus Attribute in HTML5

2012-01-20T05:56:00.000-08:00

Autofocus Attribute in HTML5

HTML5 removes the need for JavaScript solutions. If a particular input should be “selected,” or focused, by default, we can now utilize the autofocus attribute.

<input type="text" name="txtemailid" placeholder="Please Email id" required autofocus>

Required Attribute In HTML5

2012-01-20T05:51:00.000-08:00

Required Attribute in HTML5

Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute in one of two ways:

<input type="text" name="txtname" required>

<input type="text" name="txtbod" required="required">

For Example :

<form method="post" action="">
 <label for="someInput">Your Name :</label>
 <input type="text" id="txtname" name="someInput" placeholder="Please Enter Name" required>
 <button type="submit">Submit</button>
</form>

If the input is left blank, and the form is submitted, the textbox will be highlighted.

hgroup

2012-01-20T05:42:00.000-08:00

hgroup

<header>
    <hgroup>
        <h1> Recall Fan Page </h1>
        <h2> Only for people who want the memory of a lifetime. </h2>
    </hgroup>
</header>

Internet Explorer and HTML5

2012-01-20T05:40:00.000-08:00

Internet Explorer and HTML5

Unfortunately, that dang Internet Explorer requires a bit of wrangling in order to understand the new HTML5 elements.

All elements, by default, have a display of inline.

In order to ensure that the new HTML5 elements render correctly as block level elements, it’s necessary at this time to style them as such.

header, footer, article, section, nav, menu, hgroup {
   display: block;
}

Unfortunately, Internet Explorer will still ignore these stylings, because it has no clue what, as an example, the header element even is. Luckily, there is an easy fix:

document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  
document.createElement("hgroup");  
document.createElement("nav");  
document.createElement("menu");

Strangely enough, this code seems to trigger Internet Explorer. To simply this process for each new application, Remy Sharp created a script, commonly referred to as the HTML5 shiv. This script also fixes some printing issues as well.

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->