Computer Programming

Friday, October 9, 2015

October 09, 2015

JQuery: image tag created dynamically

In this article i will show you how to add image tag dynamically using JQuery. In this article i will show you how to add image tag using JQuery/JavaScript. First of all add a .JS script in the page. When we click on button then generate a jquery function. In this function, first to add a image tag with "$" sign. Also add image attribute with the image . Add dynamically created image in the division.

<!DOCTYPE html>

<head>

$(function () {

$("#btnimg").click(function () {

var img = $('<img id="runtime">');

img.attr('src', "image/12.png");

img.appendTo("#div1");

});

</script>

</head>

<body>

</div>

</body>

</html>

Code generate the following output:

Wednesday, October 7, 2015

c# WPF

October 07, 2015

open new form, close existing wpf form c#

This thread solve all realted questions which is generated on open new form, close existing wpf form c#. Also this thread solve other related thread like:

WPF Application still runs in background after closing.
My Windows Store app is still running in debug mode after I close it.
VS2012 Debugging fails on subsequent runs.
WPF Main application stops responding if a child window is being moved around.
Application doesn't exit if it creates a window which is not shown.
How main WPF window knows when secondary WPF window is closed.
When shutting down the application, not all windows are closed.
How to connect WPF Application project to Windows Game project?
Clarification on WPF Window.Show() and Window.Close() and how they work with Multiple Windows.
WPF App Doesn't Shut Down When Closing Main Window.

Now the solution of all thread is, following steps which is mentioned below:

Step-1 : Add two new window in wpf solution explorer. like first.xaml and second.xaml

Step-2 : Add a button control in first window from the toolbox.

Step-3 : Add this code into your first.xaml.cs file.

private void Button_Click(object sender, RoutedEventArgs e)

{

second sc = new second();

sc.Owner = this;

this.Hide();

sc.ShowDialog();

}

Step-4 : Also add this code into your second.xaml.cs file.

protected override void OnClosed(EventArgs e)

{

base.OnClosed(e);

Application.Current.Shutdown();

}

Now, run your application, but first to set the start page from app.xaml file.

How to set startup page in wpf:

1. Open app.xaml file; also set startupUri like

<Application x:Class="WpfApplication1.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="first.xaml">

<Application.Resources>

</Application.Resources>

</Application>

Tuesday, October 6, 2015

ASP.NET c# JQUERY

October 06, 2015

jQuery Crop Image in Asp.net using Jcrop jQuery and Upload to Folder

Introduction

In this article i will show you how to crop image using JQuery, In previous article i was show you how to define the crop section of the image using JQuery. In this article i will show you how to upload cropped image into specified directory using ASP.NET c#. Copy this code and paste into your page.

Source code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="cropimage.aspx.cs" Inherits="cropimage" %>

<!DOCTYPE html>

$(function () {

$("#cropimage1").Jcrop({

onSelect: croparea

});

function croparea(c) {

$("#coordinate_x").val(c.x);

$("#coordinate_y").val(c.y);

$("#coordinate_w").val(c.w);

$("#coordinate_h").val(c.h);

}

</script>

</head>

<body>

<div>

<asp:Button ID="Button1" runat="server" Text="Crop" OnClick="Button1_Click" />

</div>

</form>

</body>

</html>

Code behind code

using System;

using System.Collections.Generic;

using System.Drawing;

using System.IO;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Image = System.Drawing.Image;

public partial class cropimage : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Button1_Click(object sender, EventArgs e)

{

string filename = "12.PNG";

string filepath = Path.Combine(Server.MapPath("~/image"), filename);

Image outputfile = Image.FromFile(filepath);

Rectangle cropcoordinate = new Rectangle(Convert.ToInt32(coordinate_x.Value), Convert.ToInt32(coordinate_y.Value), Convert.ToInt32(coordinate_w.Value), Convert.ToInt32(coordinate_h.Value));

string confilename, confilepath;

Bitmap bitmap = new Bitmap(cropcoordinate.Width, cropcoordinate.Height, outputfile.PixelFormat);

Graphics grapics = Graphics.FromImage(bitmap);

grapics.DrawImage(outputfile, new Rectangle(0, 0, bitmap.Width, bitmap.Height), cropcoordinate, GraphicsUnit.Pixel);

confilename = "Crop_" + filename;

confilepath = Path.Combine(Server.MapPath("~/cropimag"), confilename);

bitmap.Save(confilepath);

cropimg.Visible = true;

cropimg.Src = "~/cropimag/" + confilename;

}

In this aricle i have two file for cropping the image , first to download the file from this url. Now in the code behind use Rectangle class is used to defined the section of the image. Now put the coordinate,which is retrieved from JQuery Jcrop function into the rectangle class.

Sunday, October 4, 2015

JQUERY

October 04, 2015

JQuery: ScrollTop Button in Bottom right corner

Introduction
In this article i will show you how to design Scroll Top button in bottom right corner also when we click on it then we reach at top position of web browser. I will give an example of ScrollTop button which is used to scroll the page at top position.

Description
First to design the button at bottom right corner using this line of code.

<div align="right">
<a href="javascript:;" id="scrolltop1">▲</a>
</div>
After that apply formatting on button using css class.

<style>
#scrolltop1{
cursor:pointer;
background-color:#00abcd;
display:inline-block;
height:50px;
width:50px;
color:#fff;
font-size:14px;
text-align:center;
text-decoration:none;
line-height:50px;

}
</style>

Now, scroll the page using script file, which is mentioned below.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$('#scrolltop1').bind("click", function () {
$('html,body').animate({ scrollTop: 0 }, 1000);
return false;
})

})
</script>
In this script function when we click on hyperlink button, which is mentioned in bottom right corner then run animate function. In animate function we have one property that is scrollTop which is used to scroll the page.

Complete Source code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ScrollTop Button in Bottom Right Corner</title>
<style>
#scrolltop1{
cursor:pointer;
background-color:#00abcd;
display:inline-block;
height:50px;
width:50px;
color:#fff;
font-size:14px;
text-align:center;
text-decoration:none;
line-height:50px;

}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$('#scrolltop1').bind("click", function () {
$('html,body').animate({ scrollTop: 0 }, 1000);
return false;

})

})

</script>

</head>
<body>
Welcome to dotprogramming.blogspot.com<br/>
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
v
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
<div align="right">
<a href="javascript:;" id="scrolltop1">▲</a>
</div>
</body>
</html>

JQUERY

October 04, 2015

JQuery: Define crop section area of image

If you want to crop image then use JQuery Crop plugin. Download JQuery Crop Plugin from Here. Here you get two file, first is jquery.JCrop.js and second one is jquery.Jcrop.css file. Both of these files are used to set the crop section area on image. Lets check the example of Jquery crop section area of image.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.Jcrop.js"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" />
<script>
$(function () {
$("#cropimage").Jcrop({
onSelect: croparea

});

})
function croparea(c) {
$("#coordinate_x").val(c.x);
$("#coordinate_y").val(c.y);
$("#coordinate_w").val(c.w);
$("#coordinate_h").val(c.h);

};

</script>
</head>
<body>
<div>
<img src="image/12.PNG" id="cropimage"/>
<input type="hidden" id="coordinate_x" />
<input type="hidden" id="coordinate_y" />
<input type="hidden" id="coordinate_w" />
<input type="hidden" id="coordinate_h" />

</div>

</body>
</html>

Code generate the following output

Saturday, October 3, 2015

c# Windows Forms

October 03, 2015

How to get information about drive and their properties using windows form

Using The DriveInfo Class

The DriveInfo class provides access to information related to a drive, such as space availabe on a drive, total storage space of the drive and drive name. The DriveInfo class can also be used to query the format of a drive, such as NTFS or FAT and type of the drive, such as fixed, CD-ROM, or removable. This class throws an exception if a drive is currently not ready. For example, if we want to get information of a CD-ROM that does not contain a CD in it, The DriveInfo class will throw an exception. We can avoid such exceptions by using the IsReady property of the DriveInfo class. If the DriveInfo property returns true, we can access a drive without an exception.
In previous example we have been accessed Logical drives of the system. See previous image

Now in this example we will access Logic drive information such as drive type , drive size and free space of the drive. So first we take four label control to the design window after that handle comboBox1_SelectedIndexChanged event in the program.

Complete code

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WindowsFormsApplication2
{
public partial class Form2 : Form
{
public Form2()
{
InitializeComponent();
}

private void button1_Click(object sender, EventArgs e)
{
string[] str = Directory.GetLogicalDrives();
foreach (string item in str)
{
comboBox1.Items.Add(item);

}

}

private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
{
try
{
string drive = comboBox1.SelectedItem.ToString();
label1.Text = "you have Selected Drive " + drive;
DriveInfo info = new DriveInfo(drive);
label2.Text = "Drive Type " + info.DriveType.ToString();
label3.Text = "Free space on drive " + info.AvailableFreeSpace.ToString();
label4.Text = "Total Size " + info.TotalSize.ToString();

}
catch (Exception exp)
{

label1.Text = exp.Message;

}
}
}
}

Output

Thursday, October 1, 2015

html5 JQUERY

October 01, 2015

Use pen paint tool online using html5 canvas with JQuery

Introduction
In this article i will show you how to draw using pencil, i mean to say your mouse cursor behaves like pencil on specific area of web browser. You can draw something on web browser using mouse cursor. Also you can use this for digital signature. Through this article i will explain how to design paint online for drawing something.

Description
In this article i will use Html5 canvas with JQuery. i will use canvas for drawing area and sketch.js file is used for drawing on it. I explained Button working as file upload control using JQuery, Open and close new window using Jquery , event inside event example in JQuery etc.

Source code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://intridea.github.io/sketch.js/lib/sketch.min.js"></script>
<script>
$(function () {
$('#sketch').sketch();

$(".digital a").eq(0).attr("style", "color:#ddd");
$(".digital a").click(function () {
$(".tools a").removeAttr("style");
$(this).attr("style", "color:#000");
});

$("#savebtn").bind("click", function () {
var base64 = $('#sketch')[0].toDataURL();
$("#imgc").attr("src", base64);
$("#imgc").show();
});
});
</script>

</head>
<body>
<div class="digital">
<a href="#sketch" data-tool="marker">marker</a>
<a href="#sketch" data-tool="remover">remover</a>
</div>

<br/>
<canvas id="sketch" width="600" height="300"></canvas>
<br/>
<input type="button" id="savebtn" value="image save"/>
<img id="imgc" alt="" style="display:none"/>

</body>
</html>

Code Generate the following output