ASP.NET, C#,SQL SERVER,MYSQL,PYTHON,HTML,JAVASCRIPT,JQUERY,AJAX,ANGULARJS : html

Showing posts with label html. Show all posts

Friday, July 24, 2020

SVG percentage circle pie chart

Wednesday, September 4, 2019

How get selected value and text from dropdown on select event using jquery

<html>
<head>
<title>How get selected value and text from dropdown on select event using jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(function () {
$("#selectedId").change(function () {
var selectedValue = $(this).val();
var selectedText = $("#selectedId option:selected").html()

alert("selected Value "+selectedValue+" selected Text "+selectedText);
});
});
</script>
</head>
<body>
<div style='padding: 2rem; text-align: center;'>
Select option :
<select id="selectedId">
<option value="0">----Choose Option--- </option>
<option value="1">Text 1 </option>
<option value="2">Text 2 </option>
<option value="3">Text 3 </option>
</select>
<br>
<label id="txtContent" style="color: green;"></label>
</div>
</body>
</html>

Tuesday, August 27, 2019

Checkbox onchange event jquery

<html>
<head>
<title>Checkbox onchange event using jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(function(){
$("#chkCheck").change(function(){
if ($(this).is(':checked')) {
$("#txtContent").html("Checkbox Checked!");
} else {
$("#txtContent").html("Checkbox Unchecked!");
}
});
});
</script>
</head>
<body>
<div style='padding:2rem;text-align:center;'>
Check on the Check box <input type="checkbox" id="chkCheck"/>
<br>
<label id="txtContent" style="color:green;"></label>
</div>
</body>
</html>

How to redirect one web page another web page after 5 second using javascript

Use the following code in your page header

window.onload = function(){setTimeout("location.href='page1.html'", 5000);}

</script>

Friday, August 23, 2019

Range slider using jquery ui

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Range Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
$(function () {
var divSlider = $("#slider");
divSlider.slider({
range: true,
min: 1,
max: 100,
values: [1, 100],
slide: function (event, ui) {
$("#txtMinRange").val(divSlider.slider('values', 0));
$("#txtMaxRange").val(divSlider.slider('values', 1));
},
stop: function (event, ui) {
$("#txtMinRange").val(ui.values[0]);
$("#txtMaxRange").val(ui.values[1]);
}
});
$("#txtMinRange").val(divSlider.slider('values', 0));
$("#txtMaxRange").val(divSlider.slider('values', 1));
$("#slider").animate({
background: 'blue',
width: 700,

}, 1000);
});
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<div style="padding: 2rem;width:100%;">
<input type="text" id="txtMinRange" style="width:10%;float:left;" />
<div id="slider" style="width: 75%;float:left;margin-left:1rem;margin-right:1rem;"></div>
<input type="text" id="txtMaxRange" style="width:10%;float:left;" />
</div>
</div>
</form>
</body>
</html>

Thursday, August 8, 2019

How to reload page after click on back button in browser using javascript

How to go particular div in html page by click on the anchor tag.

<a class="button button-primary has-img" href="page1.html#gotoDiv">

<div id="gotoDiv">
<h2>INSPIRATION FOR AN EXTRAORDINARY WORLD.</h2>
</div>

Thursday, January 17, 2019

How to disable before today date in html 5

In this article i have explain how to disable today before date in html 5 calendar

Step 1-
Add the input filed in your html page

<input type="date" name="mydate">

which has input type date

Step 2-

Now i want disable date before today date . for doing this add following javascript code into your page

var today = new Date().toISOString().split('T')[0];

document.getElementsByName("mydate")[0].setAttribute('min', today);