BlogForNet - Developers Blog http://blogfornet.com Sat, 22 Mar 2014 04:02:17 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 How to get random item from JavaScript array http://blogfornet.com/2014/03/how-to-get-random-item-from-javascript-array/ http://blogfornet.com/2014/03/how-to-get-random-item-from-javascript-array/#comments Sat, 22 Mar 2014 04:02:17 +0000 Nikunj Patel http://blogfornet.com/?p=1277 Hi, Today I have a requirement in project to retrieve a random value from javascript array. We can do this by using different method. I have used below code for it. HTML Button: Here I have called “ShowArrayItem” function on click event. Javascript Function: function ShowArrayItem() { alert(items[Math.floor(Math.random() * items.length)]); } Here is the javascript [...]

The post How to get random item from JavaScript array appeared first on BlogForNet - Developers Blog.

]]>
Hi,

Today I have a requirement in project to retrieve a random value from javascript array. We can do this by using different method.

I have used below code for it.

HTML Button:




Here I have called “ShowArrayItem” function on click event.

Javascript Function:


function ShowArrayItem()
{
    alert(items[Math.floor(Math.random() * items.length)]);
}

Here is the javascript static array; you can define it as per your requirement;


var items = Array('sachin', 'sehwag', 'virat', 'yuvraj', 'raina', 'dhoni', 'jadeja');

When you click on button then it will take random value from the javascript items array.

You can also check it online demo from here, random item from JavaScript array

That’s it.

The post How to get random item from JavaScript array appeared first on BlogForNet - Developers Blog.

]]>
http://blogfornet.com/2014/03/how-to-get-random-item-from-javascript-array/feed/ 0
how to display footer at bottom of page http://blogfornet.com/2014/03/how-to-display-footer-at-bottom-of-page/ http://blogfornet.com/2014/03/how-to-display-footer-at-bottom-of-page/#comments Sat, 22 Mar 2014 03:36:25 +0000 Nikunj Patel http://blogfornet.com/?p=1272 Hi Friends, Once in my project, I came across with CSS is dynamic layout. I need to develop footer which stick to the bottom of a page. For example, consider the condition of regardless the height of the content of a page, the footer should stick to the bottom of the page. When an HTML [...]

The post how to display footer at bottom of page appeared first on BlogForNet - Developers Blog.

]]>
Hi Friends,

Once in my project, I came across with CSS is dynamic layout. I need to develop footer which stick to the bottom of a page. For example, consider the condition of regardless the height of the content of a page, the footer should stick to the bottom of the page.

When an HTML page contains a small amount of content then footer comes halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen.

There are several ways to make a footer stick to the bottom of a page using CSS, but the cleanest and most well tested method I have come across is CSS Sticky Footer.

You will need to structure your webpage in the following way in order to manage footer at the bottom of page.

This is your HTML part:

 
Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

This is your CSS part:

html,body {
	margin:0;
	padding:0;
	height:100%;
}
#container {
	min-height:100%;
	position:relative;
}
#header {
	background:#c2dcf4;
	padding:10px;
}
#content {
	padding:10px 10px 80px 10px;
}
#footer {
	background:#ccc;
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	padding:0px 10px 0px 10px;
}

The above CSS will keep your footer at the bottom of the page but you will need to make a few tweaks to the code.

You need to make sure that height of your footer and bottom margin of your content should be same. you can see in the above example.

You can see online demo from here, sticky_footer

Hope this will help you !!!.

The post how to display footer at bottom of page appeared first on BlogForNet - Developers Blog.

]]>
http://blogfornet.com/2014/03/how-to-display-footer-at-bottom-of-page/feed/ 0
How to show table cell element as a separate table row element http://blogfornet.com/2014/03/how-to-show-table-cell-element-as-a-separate-table-row-element/ http://blogfornet.com/2014/03/how-to-show-table-cell-element-as-a-separate-table-row-element/#comments Sat, 22 Mar 2014 03:08:36 +0000 Nikunj Patel http://blogfornet.com/?p=1270 Hi friends, Once in my project I want to show table cell element as a separate table row element So I have searched on it and find the solution on same. Let me share it with you; we can do it by using css style properties See the below example: First Second Third Fourth Here, [...]

The post How to show table cell element as a separate table row element appeared first on BlogForNet - Developers Blog.

]]>
Hi friends,

Once in my project I want to show table cell element as a separate table row element So I have searched on it and find the solution on same.

Let me share it with you; we can do it by using css style properties

See the below example:



First Second Third Fourth

Here, you can see that there are one table row and four table cell. Now I want to all table cell as a separate table row element.

You can see that I have defined class in table cell i.e. “row”. In this class i have display element as a table-row which fulfill my requirements.

Hope this will also work for you !!!!.

The post How to show table cell element as a separate table row element appeared first on BlogForNet - Developers Blog.

]]>
http://blogfornet.com/2014/03/how-to-show-table-cell-element-as-a-separate-table-row-element/feed/ 0
file extension validation in jQuery http://blogfornet.com/2014/02/file-extension-validation-in-jquery/ http://blogfornet.com/2014/02/file-extension-validation-in-jquery/#comments Mon, 24 Feb 2014 06:42:19 +0000 Rajkiran Sanchaniya http://blogfornet.com/?p=1250 Hello Friends, Recently one of my project require file extension validation. I am using jquery to achive this. So, i have done it in simple way with jquery as follow $(function () { $('#btnSubmit').click(function () { var ext = ['jpeg', 'jpg', 'png', 'gif']; var file = $("file").val(); if ($.inArray(file.split('.').pop().toLowerCase(), ext) == -1) { alert ('Only [...]

The post file extension validation in jQuery appeared first on BlogForNet - Developers Blog.

]]>
Hello Friends,

Recently one of my project require file extension validation. I am using jquery to achive this. So, i have done it in simple way with jquery as follow

$(function ()
{
   $('#btnSubmit').click(function ()
   {
      var ext = ['jpeg', 'jpg', 'png', 'gif'];
      var file = $("file").val();
      if ($.inArray(file.split('.').pop().toLowerCase(), ext) == -1)
      {
          alert ('Only jpg, png and gif are allowed.');
      }
   }
}

Include HTML as follow.



It is work with jQuery js. So, include jQuery js file. Hope it will help someone!!!!

The post file extension validation in jQuery appeared first on BlogForNet - Developers Blog.

]]>
http://blogfornet.com/2014/02/file-extension-validation-in-jquery/feed/ 0
How to download file in asp.net http://blogfornet.com/2014/02/how-to-download-file-in-asp-net/ http://blogfornet.com/2014/02/how-to-download-file-in-asp-net/#comments Sat, 15 Feb 2014 05:37:21 +0000 Nikunj Patel http://blogfornet.com/?p=1246 Hi Friends, Today I am going to describe file download functionality in asp.net. we can download file using different methods in asp.net. Today I am going to describe Response.TransmitFile method of asp.net Lets see how can we do it public void Downloadfile(string fileName, string filePath ) { FileInfo file = new FileInfo(filePath + "\\" + [...]

The post How to download file in asp.net appeared first on BlogForNet - Developers Blog.

]]>
Hi Friends,

Today I am going to describe file download functionality in asp.net.

we can download file using different methods in asp.net.

Today I am going to describe Response.TransmitFile method of asp.net

Lets see how can we do it


public void Downloadfile(string fileName, string filePath )
{
    FileInfo file = new FileInfo(filePath + "\\" + fileName);
    Response.ClearContent();
    Response.AddHeader("Content-Disposition", "attachment; filename=" + fileName);
    Response.AddHeader("Content-Length", file.Length.ToString());
    Response.ContentType = "application/octet-stream";
    Response.TransmitFile(filePath + "\\" + fileName);
    Response.Flush();
    Response.End(); 
}

You can download file easily by using above function.
Note:
1. You need to pass fileName and filePath parameters
2. Here, I have used general content type “application/octet-stream”. Change it as per your requirement
3. Add reference for System.IO

Hope this will help you !!!!

The post How to download file in asp.net appeared first on BlogForNet - Developers Blog.

]]>
http://blogfornet.com/2014/02/how-to-download-file-in-asp-net/feed/ 0
File Upload plugin with jCrop in c# http://blogfornet.com/2014/02/file-upload-plugin-with-jcrop-in-c/ http://blogfornet.com/2014/02/file-upload-plugin-with-jcrop-in-c/#comments Sun, 09 Feb 2014 11:26:13 +0000 Rajkiran Sanchaniya http://blogfornet.com/?p=1240 Hello Friends, I want to add jCrop in my previous blog. I have describe how we use jquery file upload plugin in my previous blog. I want to add image crop functionality. To add crop you need jCrop which is also available in Github from https://github.com/tapmodo/Jcrop or go to http://deepliquid.com/content/Jcrop.html. First add jquery file upload [...]

The post File Upload plugin with jCrop in c# appeared first on BlogForNet - Developers Blog.

]]>
Hello Friends,

I want to add jCrop in my previous blog. I have describe how we use jquery file upload plugin in my previous blog. I want to add image crop functionality.

To add crop you need jCrop which is also available in Github from https://github.com/tapmodo/Jcrop or go to http://deepliquid.com/content/Jcrop.html.

First add jquery file upload then add jcrop js and css in your project.





After uploading of image reference image file to “imgCrop”. Here, i have not allow user to resize in crop you can give them by simple allowResize parameter to true same way you can allow reselect too.

Now, add following to html.

        

Add some code to cs file

        protected void btnCrop_Click(object sender, EventArgs e)
        {
            String path = Server.MapPath("~/Files");
            string cropImagePath = "";
            string cropImageName = "";

            string ImageName = hdImageName.value;
            int w = Convert.ToInt32(hdW.Value);
            int h = Convert.ToInt32(hdH.Value);
            int x = Convert.ToInt32(hdX.Value);
            int y = Convert.ToInt32(hdY.Value);

            byte[] CropImage = Crop(path + "\\" + ImageName, w, h, x, y);
            using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))
            {
                ms.Write(CropImage, 0, CropImage.Length);
                using (System.Drawing.Image CroppedImage = System.Drawing.Image.FromStream(ms, true))
                {
                    cropImageName = GetPhysicalFileName("c" + ImageName, path);
                    cropImagePath = path + "\\" + cropImageName;
                    CropImage.Save(cropImagePath, CropImage.RawFormat);
                }
            }

            ScriptManager.RegisterStartupScript(this, typeof(Page), new Guid().ToString(), "CloseCrop();", true);
        }

        static byte[] Crop(string tImg, int Width, int Height, int X, int Y)
        {
            try
            {
                using (System.Drawing.Image orgImage = System.Drawing.Image.FromFile(tImg))
                {
                    using (System.Drawing.Bitmap tbmp = new System.Drawing.Bitmap(Width, Height))
                    {
                        bmp.SetResolution(orgImage.HorizontalResolution, orgImage.VerticalResolution);
                        using (System.Drawing.Graphics Graphic = System.Drawing.Graphics.FromImage(tbmp))
                        {
                            Graphic.SmoothingMode = SmoothingMode.AntiAlias;
                            Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
                            Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
                            Graphic.DrawImage(orgImage, new System.Drawing.Rectangle(0, 0, Width, Height), X, Y, Width, Height, System.Drawing.GraphicsUnit.Pixel);
                            MemoryStream ms = new MemoryStream();
                            bmp.Save(ms, orgImage.RawFormat);
                            return ms.GetBuffer();
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
        
        protected string GetPhysicalFileName(string fileName, string directoryPath)
        {

            string orgFileName = fileName;
            string phyFileName = fileName;

                if (File.Exists(directoryPath + "\\" + orgFileName))
                {
                    int count = 1;
                    string fileNameWithoutExt = Path.GetFileNameWithoutExtension(orgFileName);
                    string extension = Path.GetExtension(orgFileName);
                    string tempName;

                    while (true)
                    {
                        tempName = fileNameWithoutExt + count.ToString() + extension;

                        if (!File.Exists(directoryPath + "\\" + tempName))
                        {
                            phyFileName = tempName;
                            break;
                        }
                        else
                        {
                            count += 1;
                        }
                    }
                }

            return phyFileName;
        }

You are ready with code. May it will help you.

The post File Upload plugin with jCrop in c# appeared first on BlogForNet - Developers Blog.

]]>
http://blogfornet.com/2014/02/file-upload-plugin-with-jcrop-in-c/feed/ 0
Example of jQuery File Upload in c# http://blogfornet.com/2014/02/example-of-jquery-file-upload-in-c/ http://blogfornet.com/2014/02/example-of-jquery-file-upload-in-c/#comments Fri, 07 Feb 2014 12:04:21 +0000 Rajkiran Sanchaniya http://blogfornet.com/?p=1236 Hello all, Today i want to share you example of jQuery File Upload plugin. You can download jQuery file upload plugin from github here. There are some example provided by them in .net also. But my requirement is not set with that so, i have prepared one example. First include some necessary files like following. [...]

The post Example of jQuery File Upload in c# appeared first on BlogForNet - Developers Blog.

]]>
Hello all,

Today i want to share you example of jQuery File Upload plugin. You can download jQuery file upload plugin from github here.

There are some example provided by them in .net also. But my requirement is not set with that so, i have prepared one example.

First include some necessary files like following.













Here you can exclude ifrmae-transport if you are not using cross domain. Also, process is used for processing and validate use to validate file.

Now, initialize the fileupload

        $(function ()
        {
            var tbodyList = "";
            var trListRowClone = "";
            'use strict';

            var url = '/Handler/Handler.ashx';
            // Initialize the jQuery File Upload widget:
            $('#fileupload').fileupload({
                url: url,
                dataType: 'text',
                autoUpload: true,
                acceptFileTypes: /(jpg)|(jpeg)|(png)|(gif)|(pdf)$/i, // Allowed file types
                progress: function (e, data)
                {
                    var bar = $('.bar');
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    var percentVal = progress + '%';
                    bar.width(percentVal);
                },
                done: function (e, data)
                {
                    var newRow = trListRowClone.cloneNode(true)
                    newRow.physicalFileName = this.files[0].name; // data
                    newRow.cells[0].getElementsByTagName("span")[0].childNodes[0].data = this.files[0].name;
                    tbodyList.appendChild(newRow);
                }
            });            
        });

Now, we write html

        
File-Name  

The Last thing is handler.


public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Expires = -1;
        
        foreach (string file in context.Request.Files)
        {
            HttpPostedFile hpf = context.Request.Files[file] as HttpPostedFile;
            string FileName = string.Empty;
            if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE")
            {
                string[] files = hpf.FileName.Split(new char[] { '\\' });
                FileName = files[files.Length - 1];
            }
            else
            {
                FileName = hpf.FileName;
            }
            if (hpf.ContentLength == 0)
                continue;
            
            string savedFileName = context.Server.MapPath("~/Your-folder-name/" + FileName);
            hpf.SaveAs(savedFileName);

            context.Response.Write(FileName);
            context.Response.StatusCode = 200;
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

Now, everything is ready. You can find your file at “your-folder-name”. Enjoy!!!

The post Example of jQuery File Upload in c# appeared first on BlogForNet - Developers Blog.

]]>
http://blogfornet.com/2014/02/example-of-jquery-file-upload-in-c/feed/ 0
How to show div vertical/horizontal scroll http://blogfornet.com/2014/01/how-to-show-div-verticalhorizontal-scroll/ http://blogfornet.com/2014/01/how-to-show-div-verticalhorizontal-scroll/#comments Mon, 20 Jan 2014 06:09:10 +0000 Rajkiran Sanchaniya http://blogfornet.com/?p=1230 Hello All, All we know that by overflow property we can handle overflow of element. Sometime we want overflow only vertical or horizontal. To achieve this we can set overflow-x and overflow-y. /* For vertical scroll */ scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text.... scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text.... /* For [...]

The post How to show div vertical/horizontal scroll appeared first on BlogForNet - Developers Blog.

]]>
Hello All,

All we know that by overflow property we can handle overflow of element. Sometime we want overflow only vertical or horizontal. To achieve this we can set overflow-x and overflow-y.

/* For vertical scroll */
scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text.... scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....
/* For horizontal scroll */
scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text.... scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....

Here white-space is also important to set overflow. With white-space we can set wrap and nowrap default white-space is wrap or normal.

Hope it will help someone.

The post How to show div vertical/horizontal scroll appeared first on BlogForNet - Developers Blog.

]]>
http://blogfornet.com/2014/01/how-to-show-div-verticalhorizontal-scroll/feed/ 0
Age validation in asp.net http://blogfornet.com/2014/01/age-validation-in-asp-net/ http://blogfornet.com/2014/01/age-validation-in-asp-net/#comments Mon, 20 Jan 2014 05:34:18 +0000 Rajkiran Sanchaniya http://blogfornet.com/?p=1227 Hello Friends, Recently i have requirement to validate sign up age +18. I have search many sites to how it will calculate age on date. I found simple RangeValidator to accomplish this. Now, in back end set RangeValidator minimum date and maximum date. To set it use following rvDOB.MinimumValue = DateTime.Today.AddYears(-60).ToString("MM/dd/yyyy"); rvDOB.MaximumValue = DateTime.Today.AddYears(-18).ToString("MM/dd/yyyy"); You [...]

The post Age validation in asp.net appeared first on BlogForNet - Developers Blog.

]]>
Hello Friends,

Recently i have requirement to validate sign up age +18. I have search many sites to how it will calculate age on date. I found simple RangeValidator to accomplish this.


Now, in back end set RangeValidator minimum date and maximum date. To set it use following

rvDOB.MinimumValue = DateTime.Today.AddYears(-60).ToString("MM/dd/yyyy");
rvDOB.MaximumValue = DateTime.Today.AddYears(-18).ToString("MM/dd/yyyy");

You can set your years in AddYears as per your requirement. Hope it will help you!!!

The post Age validation in asp.net appeared first on BlogForNet - Developers Blog.

]]>
http://blogfornet.com/2014/01/age-validation-in-asp-net/feed/ 0
how to call server side button event in jquery dialog http://blogfornet.com/2014/01/how-to-call-server-side-button-event-in-jquery-dialog/ http://blogfornet.com/2014/01/how-to-call-server-side-button-event-in-jquery-dialog/#comments Sun, 19 Jan 2014 11:30:22 +0000 Nikunj Patel http://blogfornet.com/?p=1222 Hi All, Generally we are using jquery modal dialog for modal popup window in our application. Sometimes we need to call server side button event from modal popup window and it creates problem for us. Today I am going to describe how can we call asp.net button event from jquery modal popup window. lets take [...]

The post how to call server side button event in jquery dialog appeared first on BlogForNet - Developers Blog.

]]>
Hi All,

Generally we are using jquery modal dialog for modal popup window in our application.

Sometimes we need to call server side button event from modal popup window and it creates problem for us.

Today I am going to describe how can we call asp.net button event from jquery modal popup window.

lets take an simple example:

Asp.Net Button Code:



Jquery Modal Popup Script:


 

Code Behind Button Event:


protected void Button1_Click(object sender, EventArgs e)
{
    //your button click event code comes here
    //you can do anything here
}

Please note that you need to add jquery modal popup related script reference in your code.

The post how to call server side button event in jquery dialog appeared first on BlogForNet - Developers Blog.

]]>
http://blogfornet.com/2014/01/how-to-call-server-side-button-event-in-jquery-dialog/feed/ 1