Practise: jquery

Showing posts with label jquery. Show all posts

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>

input box value trim and show error

<-- 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>Input box trim whitespaces if value="" display error in red</h1>

<small class="small titleerr mb-4"> Enter title </small>

</div>

function onKeyUpTitle(val, e) {

val = val.trim();

if (val == "") {

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

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

} else {

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

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

}

</script>

</body>

</html>

toastr - easiest way to display notifications

<-- KIRTISHIL PATIL-->

<!doctype html>

<head>

<title>Toastr Example</title>

</link>

</head>

<body>

<h1>This is toastr(notifications)</h1>

function raiseToasterMessage(type, msg, title) {

toastr.options = {

closeButton: false,

newestOnTop: true,

positionClass: "toast-bottom-right",

preventDuplicates: false,

onclick: null,

};

toastr[type](msg, title);

}

var a = 11;

for (let i = 0; i < a; i++) {

if (i == 1) {

raiseToasterMessage("warning", "This is warning", "warning");

} else if (i == 2) {

raiseToasterMessage("error", "This is error", "error");

} else if (i == 3) {

raiseToasterMessage("success", "This is success", "success");

}

else if(i==4)

{

raiseToasterMessage("info", "This is info", "info");

}

</script>

</body>

</html>

Jquery basic events

<-- KIRTISHIL PATIL-->

<!DOCTYPE html>

<head>

<title>JQuery Basic</title>

integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="

crossorigin="anonymous"></script>

</head>

<body>

<h1>JQuery Basic</h1>

<h3>Kirtishil Patil</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, modi sed, enim temporibus nisi ducimus alias, exercitationem provident ipsum sit esse voluptates! Asperiores, repudiandae. Maxime sit laborum et inventore fugiat!</p>

<button id="but3">fadeOut</button>

<button id="but4">fadeIn</button>

</div>

<button id="but1">addClass</button>

<br>

<button id="but2">Submit</button>

<br>

<button id="slide">Slide</button>

</div>

<br>

datepicker()

draggable()

droppable()

$("img").attr("border","5px solid black")

$(document).ready(function(){

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

alert("Name: "+ $("#name").val());

})

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

$("img").addClass("styleClass");

})

$("img").click(function(){

$(this).hide();

})

$("input").on("keypress", function(){

$("p").hide();

})

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

$("img").fadeOut("slow");

})

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

$("img").fadeIn("fast");

})

$("#slide").on("click", function(){

$("#one").slideUp("slow");

})

$("#slide").on("click", function(){

$("#one").slideDown("fast");

})

</script>

<style>

.styleClass{

border: 5px solid red;

}

</style>

</body>

</html>