Pages

Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Tuesday, May 6, 2014

jQuery multiple radio fields validation of groups

- I have below options for input radio fields:

<input type="radio"  name="option1" value="1" />
<input type="radio"  name="option1" value="2" />
<input type="radio"  name="option1" value="3" />
<input type="radio"  name="option1" value="4" />
                                           
<input type="radio"  name="option2" value="5" />
<input type="radio"  name="option2" value="6" />
<input type="radio"  name="option2" value="7" />
<input type="radio"  name="option2" value="8" />

<input type="radio"  name="option3" value="9"  />
<input type="radio"  name="option3" value="10" />
<input type="radio"  name="option3" value="11" />
<input type="radio"  name="option3" value="12" />

<input type="radio"  name="option4" value="13" />
<input type="radio"  name="option4" value="14" />
<input type="radio"  name="option4" value="15" />
<input type="radio"  name="option4" value="16" />


- Please write below jQuery for all radio fields:

var radioNames = []
    $('input[type="radio"]').each(function () {
        var radioName = $(this).attr('name');
        if ($.inArray(radioName, radioNames) == -1) radioNames.push(radioName);
    });

    // validation for each radio group
    $.each(radioNames, function (i, fieldName) {
        if ($('input[name="' + fieldName + '"]:checked').length == 0) {
            console.log('Please check ' + fieldName);
        }
    });

Monday, September 16, 2013

jQuery scrolling dynamic content Box


jQuery(document).ready(function($){
$(window).scroll(function() {
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var footerHeight = $(".footer-container").height();
if($(window).scrollTop() >= ($(document).height() - $(window).height() - footerHeight)) {
if($(".news_listing .news_showmore").length == 1){
if($(".news_listing .news_showmore").hasClass("hasloader") == false){
$(".news_listing .news_showmore").addClass("hasloader");
$(".loadmoreimg").show();
/* Write your ajax code here*/
}
}
}
});
});

Tuesday, August 27, 2013

Jquery input label toggle effect


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
(function($){$.fn.overlabel=function(options){var opts=$.extend({},$.fn.overlabel.defaults,options);var selection=this.filter('label[for]').map(function(){var label=$(this);var id=label.attr('for');var field=document.getElementById(id);if(!field)return;if(label.hasClass('cms-overlabel-active')==false){var o=$.meta?$.extend({},opts,label.data()):opts;label.addClass(o.label_class).addClass('cms-overlabel-active');var hide_label=function(){label.hide();label.data('shown',0);};var show_label=function(){if(!this.value&&label.data('shown')!=1){label.fadeIn('fast');label.data('shown',1);}else if(this.value&&label.data('shown')==1){label.hide();label.data('shown',0);}};var p=$(field).position();var h=parseInt($(field).height().toString().replace('px',''),10);var fsRaw=$(field).css('font-size');var fs=parseInt(fsRaw.replace('px',''),10);if(fs>h){fsRaw=$(field).parent().css('font-size');}
label.css({'top':p.top+'px','left':p.left+'px','padding-top':parseInt($(field).css("padding-top"))+'px','padding-left':(parseInt($(field).css("padding-left"))+2)+'px','font-family':$(field).css("font-family"),'font-size':fsRaw});$(field).focus(hide_label).blur(show_label).change(show_label).each(hide_label).each(show_label);}
return this;});return opts.filter?selection:selection.end();};$.fn.overlabel.defaults={label_class:'cms-label-dynamic',hide_css:{'text-indent':'-10000px'},show_css:{'text-indent':'0px','cursor':'text'},filter:false};})(jQuery);
</script>
</head>
<body>
<div class="cms-label-watermark-wrap">
<label for="first_name" class="cms-label-watermark">First Name</label>
<input class="" type="text" size="30" name="first_name" id="first_name" value="" />
</div>


<script type="text/javascript">
$(document).ready(function(){
$('label.cms-label-watermark').overlabel();
});
</script>

</body>
</html>

Tuesday, July 16, 2013

jQuery Countdown time - show timer with two digits

If you are using countdown jquery from "http://keith-wood.name/countdown.html" then please open "jquery.countdown.js" and replace below code:

line no: 520 - 528

Original Code

var showFull = function(period) {
var labelsNum = inst.options['labels' + whichLabels(inst._periods[period])];
return ((!inst.options.significant && show[period]) ||
(inst.options.significant && showSignificant[period]) ?
'<span class="' + plugin._sectionClass + '">' +
'<span class="' + plugin._amountClass + '">' +
self._translateDigits(inst, inst._periods[period]) + '</span><br/>' +
(labelsNum ? labelsNum[period] : labels[period]) + '</span>' : '');
};



New Code

var showFull = function(period) {
var labelsNum = inst.options['labels' + whichLabels(inst._periods[period])];

return ((!inst.options.significant && show[period]) ||
(inst.options.significant && showSignificant[period]) ?
'<span class="' + plugin._sectionClass + '">' +
'<span class="' + plugin._amountClass + '">' + ((self._translateDigits(inst, inst._periods[period]) <= 9 )?'0'+self._translateDigits(inst, inst._periods[period]):self._translateDigits(inst, inst._periods[period])) + '</span><br/>' +
(labelsNum ? labelsNum[period] : labels[period]) + '</span>' : '');
};