Script – Mehta Websolution's Blog

Print selected webpage data using Javascript

22 February 2016 / By Amish Bhundiya

Many times we would like to place a button on webpage to print the content of that web page via an actual printer. JavaScript helps you to implement this functionality using the print function of window object. The JavaScript print function window.print() prints the current web page when executed. You can call this function directly

Slicebox : A fresh 3D image slider

17 February 2016 / By Amish Bhundiya

Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don’t support the new properties. With the CSS 3D Transforms we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and

jQuery Display Progress Bar on Button Click in Asp.net

13 October 2014 / By Dhwani Rathod

Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery show progress bar on button click asp.net</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
.sample
{
background-color:#DC5807;
border:1px solid black;
border-collapse:collapse;
color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="DisableDiv"> </div>
<input type="button" id="btnClick" value="Get Data" />
<div id="testdiv"></div>
</form>
<script type="text/javascript">
$(function() {
$('#btnClick').click(function() {
$('#DisableDiv').fadeTo('slow', .6);
$('#DisableDiv').append('<div style="background-color:#E6E6E6;position: absolute;top:0;left:0;width: 100%;height:300%;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);"><img src="loading.gif" style="background-color:Aqua;position:fixed; top:40%; left:46%;"/></div>');
setTimeout(function() { GetData() }, 1000)
})
});
function GetData()
{
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "ShowLoadingImageonButtonClick.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function(data) {
var theHtml = data.d;
$('#testdiv').html(theHtml)
$('#DisableDiv').html("");
},
error: function(result) {
alert("Error");
}
});
}
</script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<title>jQuery show progress bar on button click asp.net</title>

.sample

{

background-color:#DC5807;

border:1px solid black;

border-collapse:collapse;

color:White;

}

</style>

</head>

<body>

</form>

$(function() {

$('#btnClick').click(function() {

$('#DisableDiv').fadeTo('slow', .6);

$('#DisableDiv').append('<div style="background-color:#E6E6E6;position: absolute;top:0;left:0;width: 100%;height:300%;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);"><img src="loading.gif" style="background-color:Aqua;position:fixed; top:40%; left:46%;"/></div>');

setTimeout(function() { GetData() }, 1000)

})

});

function GetData()

{

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "ShowLoadingImageonButtonClick.aspx/BindDatatable",

data: "{}",

dataType: "json",

success: function(data) {

var theHtml = data.d;

$('#testdiv').html(theHtml)

$('#DisableDiv').html("");

},

error: function(result) {

alert("Error");

}

});

}

</script>

</body>

</html>

Default.aspx.cs

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string BindDatatable()
{
GridView gv = new GridView();
System.IO.StringWriter stringWriter = new System.IO.StringWriter();
HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true"))
{
using (SqlCommand cmd = new SqlCommand("select UserId,UserName,Location from UserInformation", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
}
}
gv.HeaderStyle.CssClass = "sample";
gv.DataSource = dt;
gv.DataBind();
gv.RenderControl(htmlWriter);
return stringWriter.ToString();
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

using System;

using System.Data;

using System.Data.SqlClient;

using System.Web.Services;

using System.Web.UI;

using System.Web.UI.WebControls;

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static string BindDatatable()

{

GridView gv = new GridView();

System.IO.StringWriter stringWriter = new System.IO.StringWriter();

HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);

DataTable dt = new DataTable();

using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true"))

{

using (SqlCommand cmd = new SqlCommand("select UserId,UserName,Location from UserInformation", con))

{

con.Open();

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(dt);

}

gv.HeaderStyle.CssClass = "sample";

gv.DataSource = dt;

gv.DataBind();

gv.RenderControl(htmlWriter);

return stringWriter.ToString();

}

jQuery Higlight Table Row & Column on Mouseover in Asp.net

13 October 2014 / By Dhwani Rathod

Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Asp.net Bind Data to Datatable using JQuery or JSON</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function(data) {
for (var i = 0; i < data.d.length; i++) {
if (i % 2 == 0) {
$("#tbDetails").append("<tr class=tg-even><td>" + data.d[i].Tagid + "</td><td>" + data.d[i].TagName + "</td><td>" + data.d[i].Noofarticles + "</td></tr>");
}
else {
$("#tbDetails").append("<tr><td>" + data.d[i].Tagid + "</td><td>" + data.d[i].TagName + "</td><td>" + data.d[i].Noofarticles + "</td></tr>");
}
}
$('td').mouseover(function() {
$(this).siblings().css('background-color', '#EAD575');
var ind = $(this).index();
$('td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575');
});
$('td').mouseleave(function() {
$(this).siblings().css('background-color', '');
var ind = $(this).index();
$('td:nth-child(' + (ind + 1) + ')').css('background-color', '');
});
},
error: function(result) {
alert("Error");
}
});
});
</script>
<style type='text/css'>
.tbl {
border-collapse: collapse;
border-spacing: 0;
}
.tbl td, .tbl th {
background-color: #fff;
border: 1px #bbb solid;
color: #333;
font-family: sans-serif;
font-size: 100%;
padding: 10px;
vertical-align: top;
}
.tbl .tg-even td {
background-color: #eee;
}
.tbl th {
background-color: #ddd;
color: #333;
font-size: 110%;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table id="tbDetails" class="tbl">
<tr >
<th>UserId</th>
<th>UserName</th>
<th>Location</th>
</tr>
<tbody>
</tbody>
</table>
</form>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

<title>Asp.net Bind Data to Datatable using JQuery or JSON</title>

$(function() {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default.aspx/BindDatatable",

data: "{}",

dataType: "json",

success: function(data) {

for (var i = 0; i < data.d.length; i++) {

if (i % 2 == 0) {

$("#tbDetails").append("<tr class=tg-even><td>" + data.d[i].Tagid + "</td><td>" + data.d[i].TagName + "</td><td>" + data.d[i].Noofarticles + "</td></tr>");

}

else {

$("#tbDetails").append("<tr><td>" + data.d[i].Tagid + "</td><td>" + data.d[i].TagName + "</td><td>" + data.d[i].Noofarticles + "</td></tr>");

}

$('td').mouseover(function() {

$(this).siblings().css('background-color', '#EAD575');

var ind = $(this).index();

$('td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575');

});

$('td').mouseleave(function() {

$(this).siblings().css('background-color', '');

var ind = $(this).index();

$('td:nth-child(' + (ind + 1) + ')').css('background-color', '');

});

},

error: function(result) {

alert("Error");

}

});

</script>

.tbl {

border-collapse: collapse;

border-spacing: 0;

}

.tbl td, .tbl th {

background-color: #fff;

border: 1px #bbb solid;

color: #333;

font-family: sans-serif;

font-size: 100%;

padding: 10px;

vertical-align: top;

}

.tbl .tg-even td {

background-color: #eee;

}

.tbl th {

background-color: #ddd;

color: #333;

font-size: 110%;

font-weight: bold;

}

</style>

</head>

<body>

<tr >

<th>UserId</th>

<th>UserName</th>

<th>Location</th>

</tr>

<tbody>

</tbody>

</table>

</form>

</body>

</html>

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
[WebMethod]
public static UserDetails[] BindDatatable()
{
List<UserDetails> details = new List<UserDetails>();
DataTable dt = new DataTable();
dt.Columns.Add("Tagid", typeof(Int32));
dt.Columns.Add("TagName", typeof(string));
dt.Columns.Add("Noofarticles", typeof(string));
dt.Rows.Add(1, "Asp.Net", 100);
dt.Rows.Add(2, "C#.Net", 10);
dt.Rows.Add(3, "SQL Server", 30);
dt.Rows.Add(4, "jQuery", 20);
dt.Rows.Add(6, "javascript", 15);
dt.Rows.Add(7, "XSLT", 50);
foreach (DataRow dtrow in dt.Rows)
{
UserDetails user = new UserDetails();
user.Tagid = dtrow["Tagid"].ToString();
user.TagName = dtrow["TagName"].ToString();
user.Noofarticles = dtrow["Noofarticles"].ToString();
details.Add(user);
}
return details.ToArray();
}
public class UserDetails
{
public string Tagid { get; set; }
public string TagName { get; set; }
public string Noofarticles { get; set; }
}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

using System;

using System.Collections.Generic;

using System.Data;

using System.Web.Services;

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static UserDetails[] BindDatatable()

{

List<UserDetails> details = new List<UserDetails>();

DataTable dt = new DataTable();

dt.Columns.Add("Tagid", typeof(Int32));

dt.Columns.Add("TagName", typeof(string));

dt.Columns.Add("Noofarticles", typeof(string));

dt.Rows.Add(1, "Asp.Net", 100);

dt.Rows.Add(2, "C#.Net", 10);

dt.Rows.Add(3, "SQL Server", 30);

dt.Rows.Add(4, "jQuery", 20);

dt.Rows.Add(6, "javascript", 15);

dt.Rows.Add(7, "XSLT", 50);

foreach (DataRow dtrow in dt.Rows)

{

UserDetails user = new UserDetails();

user.Tagid = dtrow["Tagid"].ToString();

user.TagName = dtrow["TagName"].ToString();

user.Noofarticles = dtrow["Noofarticles"].ToString();

details.Add(user);

}

return details.ToArray();

}

public class UserDetails

{

public string Tagid { get; set; }

public string TagName { get; set; }

public string Noofarticles { get; set; }

}

Slider with Slideshow (jQuery)

8 October 2014 / By Dhwani Rathod

1. Javascript Code

<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function ($) {
        //Define an array of slideshow transition code
        var _SlideshowTransitions = [
        { code1 },
        { code2 },
        { code3 }
        ];
        var options = {
            $AutoPlay: true,
            $SlideshowOptions: {
                    $Class: $JssorSlideshowRunner$,
                    $Transitions: _SlideshowTransitions,
                    $TransitionsOrder: 1,
                    $ShowLink: true
                }
        };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

jQuery(document).ready(function ($) {

//Define an array of slideshow transition code

var _SlideshowTransitions = [

{ code1 },

{ code2 },

{ code3 }

];

var options = {

$AutoPlay: true,

$SlideshowOptions: {

$Class: $JssorSlideshowRunner$,

$Transitions: _SlideshowTransitions,

$TransitionsOrder: 1,

$ShowLink: true

}

};

var jssor_slider1 = new $JssorSlider$('slider1_container', options);

});

</script>

2. HTML code

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
</div>

1

2

3

4

5

6

7

</div>

jQuery Show Hide Password Characters or Field without Any Plugin

8 September 2014 / By Dhwani Rathod

From around the world

SlimAPI Framework Installation

What is Ransomware? What is WannaCry Ransomware? How it spreads? What can you do to prevent infection?

Simple PHP anti-brute-force login

How to install NginX on cPanel/WHM Server

Convert PDF Documents with Able2Extract Professional 11

Print selected webpage data using Javascript

Slicebox : A fresh 3D image slider

jQuery Display Progress Bar on Button Click in Asp.net

jQuery Higlight Table Row & Column on Mouseover in Asp.net

Slider with Slideshow (jQuery)

jQuery Show Hide Password Characters or Field without Any Plugin

Categories

Mehta Websolution Since 2007