Web Development: jQuery

Showing posts with label jQuery. Show all posts

July 18, 2016

How to view web site in fullscreen using HTML5 and jQuery?

Please follow below step and refer this link for more help.

1: First include following two JS in header part between <head> tab,

2: HTML code for just link

<a href="javascript:;" class="fullscreen "><i class="fa fa-arrows-alt"></i> View Fullscreen</a>

3: jQuery API code

$(".fullscreen-toggle").on("click", function() {

    document.fullScreenElement && null !== document.fullScreenElement ||

    !document.mozFullScreen && !document.webkitIsFullScreen ?

    document.documentElement.requestFullScreen ?

    document.documentElement.requestFullScreen() :

    document.documentElement.mozRequestFullScreen ?

    document.documentElement.mozRequestFullScreen() :

    document.documentElement.webkitRequestFullScreen &&

    document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT):

    document.cancelFullScreen ? document.cancelFullScreen() :

    document.mozCancelFullScreen ? document.mozCancelFullScreen() :

    document.webkitCancelFullScreen && document.webkitCancelFullScreen()

});

For more details click Here!

Demo

Enjoy!

January 21, 2016

jQuery data Tables how to set record per page?

- If you want to set 10 records per page on jQuery data Tables then please see below example:

$('#tableID').dataTable( {

"pageLength": 10

} );

In above example define no of records you want per page on pageLength parameter,

Enjoy!

January 16, 2016

jQuery select chosen validation not working with PHP

- I find best solution for that and its very simple for select chosen validation,

- The jQuery validation ignore default hidden fields,

- Just pass one parameter as per below example like: ignore: hidden:not,

Example!

$(document).ready(function(){
$('#se;ectid').chosen();
$('#formid').validate({ ignore: ":hidden:not(select)" });
$('#validateIt').click(function(){
if($('#formid').valid())
alert('This is Valid');
else
alert('This is Invalid');
});
});

Enjoy!

November 24, 2015

jQuery validation for price field.

Please follow example for set jquery validation for price field.

HTML
<input id="price" maxlength="7" type="text" />

Javascript
$("#price").on("keyup", function(){
var valid = /^\d{0,4}(\.\d{0,2})?$/.test(this.value),
val = this.value;

if(!valid){
console.log("Invalid input!");
this.value = val.substring(0, val.length - 1);
}
});

Enjoy!

October 28, 2015

jQuery - Validation set custom message.

Add this code in a separate script included after the validation plugin to override the messages:

jQuery.extend(jQuery.validator.messages, {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});

For more read see <a href="http://stackoverflow.com/questions/2457032/jquery-validation-change-default-error-message" target='_blank'>Here:</a>

Enjoy!

July 18, 2015

jQuery how to append data-tip value when mouse hover?

If you want to set the data attribute with .attr() on mouse hover:

Example
jQuery('li#menu-item-75 a').attr('data-tooltip', 'value');

Demo: http://jsfiddle.net/fkdh8/13/

Enjoy!

July 12, 2015

jQuery ui datepicker set default calendar is a last month

Yes, it's possible using faultDate function:

<?php

$('#selectdate').datepicker({

defaultDate: '-1m' //Here you can define how many month(s) you want less from current month.

});

Enjoy!

June 23, 2015

How to Set a Dynamic Width / Height on Fancybox?

Yes it's possible first you can turn off "autoSize" and then set width as "auto":

$.fancybox.open({
content : 'Lorem ipsum dolor sit ame',
autoSize : false,
width : "auto",
height : "80%"
});

To see example <a href="http://jsfiddle.net/2VmrG/" target="_blank">click here!</a>

Enjoy!

June 21, 2015

jquery password validation with at least 8 characters, 1 number, 1 upper and 1 lowercase.

Regular expression offers an extremely powerful way of validation for forms password.

I guess your regular expression should look like:

<form id="register">
<label for="password">Password:</label>
<input name="password" id="password" type="password"/>
<span id="result"></span>
</form>

Here is some javascript/jquery code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#password').keyup(function(){
$('#result').html(checkStrength($('#password').val()))
});

function checkStrength(password)
{
//initial strength
var strength1 = 0;
var strength2 = 0;
var strength3 = 0;
var strength4 = 0;

//length is ok, lets continue.
//if length is 8 characters or more, increase strength value
if (password.length < 8) strength1 = 1;
//if password contains both lower and uppercase characters, increase strength value
if (!password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength2 = 1;
//if it has numbers and characters, increase strength value
if (!password.match(/([0-9])/)) strength3 = 1;
//if it has one special character, increase strength value
if (!password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength4 += 1
//if it has two special characters, increase strength value
//if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,",%,&,@,#,$,^,*,?,_,~])/)) strength += 1
//now we have calculated strength value, we can return messages
//if value is less than 2

if(strength1==1)
{
$('#result').text('Password too short.');
} else if(strength2==1) {
$('#result').text('Please used upper & lower case letter.');
} else if(strength3==1) {
$('#result').text('Please used number.');
} else if(strength4==1) {
$('#result').text('Please used any special character.');
} else {
$('#result').text('Strong!');
}
}
});
</script>

Enjoy!

June 17, 2015

jQuery condition to check responsive screen.

Yes, It's possible to check different media screen in jQuery for add condition.

Following example for different screen:

$(window).resize(function(){
if ($(window).width() <= 300)
{
// do something here
} else if ($(window).width() <= 800){
// do something here
} else if ($(window).width() <= 970){
// do something here
} else {
// do something here for desktop full screen
}
});

Enjoy!

May 18, 2015

jQuery select box onchange window.location

Give the same name of select box ID and jQuery ID.

<select id="redirect" onchange="window.location = jQuery('#redirect option:selected').val();">
<option value="http://www.google.com">Great Site</option>
<option value="http://www.yahoo.com">Better Site</option>
</select>

Enjoy!

Web Development