BEST JQUERY CODES YOU SHOULD KNOW WHILE DESIGNING A WEBSITE

Use of key up function

the key up function happen when you allow to leave a keyboard key, this function will run when a key up event take place.

This function will help for instant validate a form field, type text and show out put on different location and much more.

Please see the simple code to know the use of key up function.$(“input.form-field”).keyup(function() {
var itt= jQuery(“.form-field”).val();
$(‘#textval’).text(itt);
});
You can check our fiddle demo. Click Here

Remove .html from URL

if you want to remove .html from URL that you don’t want to show the .html in your webpage URL, and then check the bellow code how to remove the .htmljQuery(document).ready(function(e) {
var pg = jQuery(‘.link a’).attr(‘href’);
var p =’.html’;
var avoided = pg.replace(p,”);
jQuery(‘.link a’).attr(‘href’,avoided);
});
check demo Click Here.

Placeholder text field in jquery

basically placeholder text is used to website form fields instead of form label of the field to save extra space on your form. This is needed if you are developing a dynamic website in WordPress and don’t want to edit in the core file then you can add the placeholder text using the code bellow.$(document).ready(function() {
$(“#your-name”).attr(“placeholder”, “Your Name”);
});
can check our fiddle demo. Click Here

Set content for selected elements

to set content in your webpage you can use .text, .html, .Val

.text-it returns the simple text content for the selected element.

.html-it will return the html mark up.

.Val– to return the form field values.$(document).ready(function() {
$(“#text”).text(“This is a demo for set text”);
});
$(document).ready(function() {
$(“#html”).html(“This is demo for html mark up“);
});
$(document).ready(function() {
$(“#val”).val(“Hello CANCONIC”);
});

For demo Click Here.

Animate in jquery

you can animate the element using Jquey. By default the element of the webpage is static that can’t be move so to utilize this animate add the css position property for the element to relative, fixed and absolute.$(document).ready(function(){
$(“#click”).click(function(){
$(“.box”).animate({left: ‘250px’});
});
});