Practise

Thursday, August 12, 2021

Media Query

<!doctype html>

<head>

<title>media query</title>

<style>

@media only screen and (max-width:600px) {

.tp{

background-color: red;

}

@media only screen and (min-width:600px) {

.tp{

background-color: green;

}

@media only screen and (min-width:768) {

.tp{

background-color: blue;

}

@media only screen and (max-width:992) {

.tp{

background-color: pink;

}

@media only screen and (min-width:1200) {

.tp{

background-color: yellow;

}

</style>

</head>

<body>

test media query

</div>

</body>

</html>

Thursday, July 15, 2021

ajax

$.ajax({

url : ".php file path.php",

method : "POST",

data : JSON.stringify(param),

success : function(res){

res = JSON.parse(res);

if(res.result == 200)

{

}

}).fail(function(){

});

xhttp request

//Kirtishil Patil

var xhttp = new XMLHttpRequest();

xhttp.open("POST", "filename with complete path.php", true);

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

var res = this.responseText;

var res_arry = JSON.parse(res);

if (res_arry["result"] == 200) {

//write here

} else {

//write here

}

};

var param = {//write param here};

xhttp.send(JSON.stringify(param));

Tuesday, July 13, 2021

Modal events

$("#my_modal").on('show.bs.modal',function(){

//before modal open

})

$("#my_modal").on('shown.bs.modal',function(){

//after modal open

})

$("#my_modal").on('hide.bs.modal',function(){

//before modal close

})

$("#my_modal").on('hidden.bs.modal',function(){

//after modal close

})

</script>

Loader css

//Kirtishil Patil

.loader,.loader {

font-size: 15px;

text-indent: -9999em;

width: 1.5em;

height: 1.5em;

border-radius: 50%;

background: #585858;

background: -moz-linear-gradient(left, #585858 10%, rgba(255, 255, 255, 0) 42%);

background: -webkit-linear-gradient(left, #585858 10%, rgba(255, 255, 255, 0) 42%);

background: -o-linear-gradient(left, #585858 10%, rgba(255, 255, 255, 0) 42%);

background: -ms-linear-gradient(left, #585858 10%, rgba(255, 255, 255, 0) 42%);

background: linear-gradient(to right, #585858 10%, rgba(255, 255, 255, 0) 42%);

position: relative;

-webkit-animation: load3 1.4s infinite linear;

animation: load3 1.4s infinite linear;

-webkit-transform: translateZ(0);

-ms-transform: translateZ(0);

transform: translateZ(0);

}

.loader:before {

width: 50%;

height: 50%;

background: #585858;

border-radius: 100% 0 0 0;

position: absolute;

top: 0;

left: 0;

content: '';

}

.loader:after {

background: #fff;

width: 75%;

height: 75%;

border-radius: 50%;

content: '';

margin: auto;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

}

@-webkit-keyframes load3 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

@keyframes load3 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

Active List Elements

//Kirtishil Patil

this code is used to display active element with blue background from lists

$('#ul_id').on('click', 'li', function()

{

$(this).addClass('active').siblings().removeClass('active');

});

Saturday, June 26, 2021

restrict user to enter only alphabates

<-- KIRTISHIL PATIL-->

<!doctype html>

<head>

<title>Title</title>

<style>

.small {

color: #b0aeb8;

text-transform: capitalize;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.small-err {

color: #ff2525;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.input-err,

.input-err:focus {

border: 1px solid #ff2525;

box-shadow: 0 0 0 0.2rem #ff00003b;

}

</style>

</head>

<body>

<h1>User unable to enter alphabets strict to numbers only</h1>

<small class="small limiterr mt-2">Limit</small>

</div>

function isNumber(val, elem) {

val = val.trim();

var reg = /^\d+$/;

if (reg.test(val)) {

//normal css

$("#limit").removeClass("input-err");

$(".limiterr").removeClass("small-err");

} else {

//red css

$("#limit").addClass("input-err");

$(".limiterr").addClass("small-err");

$(elem).val("");

}

</script>

</body>

</html>