How to scroll up the page to the bottom using jquery

Step1:

Welcome to  designer dairy blog, here we are going to discuss how to scroll down the page to the bottom using jQuery.

Step2:

Html Mark-up

<div id ="heightdiv" style=" text-align:center; font-size:34px; color:#fff; height:1000px; background-color:red;">
click the window
</div>

Step3:

The following JavaScript will scroll the page to the bottom using jQuery:

<script>

$(document).ready(function()
{
  $('#heightdiv').bind("click", function () {

         var heights = $('#heightdiv').height();

         $('html, body').animate({ scrollTop: heights },"fast");
          return false;
           });

      });
   
     </script>

Otherway hard coding scroll top value :

$('#heightdiv').bind("click", function () {

$('html, body').animate({ scrollTop:3031 },"fast");

return false;


});

Step4:

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com  for more updates on Jquery.

All in one roof - jQuery script

Step1:

Welcome to designer blog, We have added necessary JQuery functionalities, which is require to develop the web applications. 

Step2:

We have developed all the scripts under one roof called myScript.js

myScript.js:

var contractManagement = (function () {

function MaxHeights() {
if ($(window).width() <= 767) {


$("#left").css('height', 'auto');
$("#right").css('height', 'auto');

} else {
$("#left").height("");
$("#right").height("");

var MaxHeight = Math.max($("#left").height(), $("#right").height());
$("#left").height(MaxHeight);
$("#right").height(MaxHeight);
}
}


$(window).resize(function () {
MaxHeights();

});

function fileinput() {

$('#filecount').filestyle({
input: false,
buttonName: 'btn-add btn-sm',
iconName: 'glyphicon glyphicon-plus'
});
$("#filecount").change(function () {
MaxHeights();
});
}

function datetimepickers() {
$('.datetimepicker').datetimepicker({
format: 'DD/MM/YYYY'
});

}

function icheck() {
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue'
});
//Red color scheme for iCheck
$('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass: 'iradio_minimal-red'
});
//Flat red color scheme for iCheck
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass: 'iradio_flat-green'
});
}

// Setup form validation on the #register-form element

function formValidation() {
$("#register-form").validate({

// Specify the validation rules
rules: {
customername: "required",
nextaction: "required",
email: {
required: true,
email: true
},

password: {
required: true,
minlength: 5
},
'test[]': {
required: true,
maxlength: 2
},
agree: "required",
duration: "required",

expanded: "required",
projecttype: "required"



},

// Specify the validation error messages
messages: {
customername: "Please enter your customer name",
nextaction: "Please enter next action ",
lastname: "Please enter your last name",
password: {
required: "Please provide your feedback",
minlength: "Your feedback must be at least 60 characters long"
},
contentarea: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
'test[]': {
required: "You must check at least 1 box",
maxlength: "Check no more than {0} boxes"
},
email: "Please enter a valid email address",
expanded: "Please enter expanded character attributes",
selected: "Select anyone field",
projecttype: "Please select the project type",
dates: "myselect",
duration: "Please enter your duration"

},

highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
$(element).closest('.datetimepicker').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
$(element).closest('.datetimepicker').removeClass('has-error');
},

submitHandler: function (form) {
form.submit();
}


});

$('#register-form').on('submit', function () {
MaxHeights();
});
$('.clear').on('click', function () {
return false;
});

}

function datatables() {
$('#meeting-list').DataTable({

responsive: true,
"bLengthChange": false,
autoWidth: false,

"fnDrawCallback": function () {


$('th').each(function () {

if (($(this).hasClass('sorting')) || ($(this).hasClass('sorting_desc'))) {
$(this).attr({
title: 'Sort Ascending'
});


} else {
$(this).attr({
title: 'Sort Descending'
});
}
});
},

            initComplete: function () {
this.api().columns().every(function () {

var column = this;


if (column[0] != 5) {
var optionValues = [];

var list = $("").text();

 var select = $('<select onclick="event.stopPropagation()"><option value="">Choose</option></select>')
.appendTo($(column.header()).empty())

.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});

column.data().unique().sort().each(function (d, j) {

var divEle = $('<div />');
var objs = $(d).selector;
divEle.html(d);
divEle.find('i').remove();

optionValue = divEle.text().trim();




optionValues.push(optionValue);

});

optionValues.filter(function (item, pos) {

if (optionValues.indexOf(item) == pos) {
select.append($('<option>', {
value: item
}).text(item));
}

});

}


});
}


});

$('#meeting-list').on('responsive-resize', function (e, datatable, columns) {
var count = columns.reduce(function (a, b) {
return b === false ? a + 1 : a;
}, 0);
});
MaxHeights();
}

function selectcontrols() {
$("select option[value='']").each(function (index, item) {
if (index == 0) {
$(this).empty();
key = "Contract ID";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}

if (index == 1) {
$(this).empty();
key = "Contract Type";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}

if (index == 2) {
$(this).empty();
key = "Customer Name";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}

if (index == 3) {
$(this).empty();
key = "Valid until";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}

if (index == 4) {
$(this).empty();
key = "Signed On";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}

if (index == 5) {
$(this).empty();
key = "View";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}

});
}

function scrollbars() {
$('.content-scroll').mouseover(function () {
$('.content-scroll').removeAttr("style");
if ($('.content-scroll').height() > 609) {
$('.content-scroll').css({
"overflow-y": "scroll",
"height": "608px"
});
}
})
$('.content-scroll').mouseout(function () {

$('.content-scroll').removeAttr("style");
$('.content-scroll').css({
"overflow": "hidden",
"height": "608px"
});

})
}

function menuNavigation() {
$('.sidebar-menu li').on('click', function () {
$('.sidebar-menu li.active').removeClass('active');

$(this).first().addClass('active');
});
}

  function ScrolltoTop() {

   $('a[href^="#"]').not('[href=#]').click(function(e){
   var anchorTag=$(this).attr('href').replace('.','\\.');   
    $('html, body').animate({scrollTop: $(anchorTag).offset().top - ($('.searchbar').outerHeight()+5) },      1000);
     return false;
});

}

function ScrolltoBottom()
    {         
     var heights = $('#heightdiv').height();
       
      $('#heightdiv').bind("click", function () {
        $('html, body').animate({ scrollTop:heights },"fast");
        return false;
     });
    }

return {
MaxHeights: MaxHeights,
datetimepickers: datetimepickers,
icheck: icheck,
formValidation: formValidation,
fileinput: fileinput,
datatables: datatables,
selectcontrols: selectcontrols,
scrollbars: scrollbars,
menuNavigation: menuNavigation,
 ScrolltoTop :ScrollTop,
 ScrolltoBottom : ScrollBottom
};
})();


Step3:

To invoke the declare function in script.js. We have to call the script.js  and also make sure Html Dom is loaded.

<script>

$(window).on("load", function ()
{
     contractManagement.MaxHeights();
     contractManagement.scrollbars();
});

</script>

Step4:

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com  for more updates on Jquery.

jQuery foreach: Using jQuery $.each

Step1:

Welcome to designers dairy, here we are going to discuss about jquery foreach and $.each

Learn how to loop through elements, arrays and objects with jQuery using the $.each() function, jQuery’s foreach equivalent.

jQuery’s foreach equivalent can be very useful for many situations. These examples will get you started and teach you how you can loop through arrays, objects and all kinds of HTML elements.

Step2:

Loop through an Array with jQuery foreach

With most languages you are probably going to need to loop through an array at some point, this is where foreach often becomes very useful. Below is some example jQuery that will loop through an array and output each entry to the console.

$(function () {
    var myArray = ["one", "two", "three", "four", "five"];
    $.each(myArray, function (index, value) {
        console.log(value);
    });
});

The output of the above will be:

one
two
three
four
five

Step3:

 Loop through Objects with jQuery foreach

As well as arrays, you will often want to loop through objects, or arrays of objects, especially when working with JSON data. The following code is an example of looping through some JSON objects.

$(function () {
	var myObjects = [
	{
	id: 1,
	firstname: "Gandalf",
	lastname: "Greyhaem"
	},
	{
	id: 2,
	firstname: "Bilbo",
	lastname: "Baggins"
	},
	{
	id: 3,
	firstname: "Frodo",
	lastname: "Baggins"
	}
	];
	$.each(myObjects, function () {
	console.log("ID: " + this.id);
	console.log("First Name: " + this.firstname);
	console.log("Last Name: " + this.lastname);
	console.log(" ");
	});
	})

The output of the above would be:

ID: 1
First Name: Gandalf
Last Name: Greyhaem
ID: 2
First Name: Bilbo
Last Name: baggins
ID: 3
First Name: Frodo
Last Name: Baggins

Step4:
Loop through a list with jQuery foreach

The ability to be able to loop through elements in a list can be very useful for all kinds of tasks. The code below will loop through every <li> element that has a parent with the .myList class.

$(function () {
	$('.myList li').each(function () {
	$(this).css("color", "green");
	});
	});

Step5:

Loop through other HTML elements with jQuery foreach

As-well as list elements there are benefits to being able to loop through all kinds of HTML elements. Below are a range of examples to demonstrate a few things that are possible.

	$(function () {
	//Loop through all links on the page
	$('a').each(function(){
	//Disable the link
	$(this).prop("href", "#");
	});
	//Loop through all elements with the class .hide
	$('.hide').each(function(){
	//Hide it
	$(this).hide(); //Alternative would be $(this).css("display", "none");
	});
	//Find all pre tags an add a class to them
	$('pre').each(function(){
	$(this).addClass("prettyprint");
	});
	});

So, there you have a load of examples that should get you started. There are many ways you can utilise the jQuery $.each method.

How to Check, if title attribute has content or not using jquery

Step1:

Welcome to designers dairy, here we are going to Check, if  the title attribute has content or not using
jquery


Step2:

Excepted Screen:







Step3:

Html Code:

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td title="hello">John</td>
        <td title =" "></td>
         <td><a href="#" title="July"> july </a></td>
      </tr>
      <tr>
            <td title="hello">John</td>
        <td title="  "></td>
     <td><a href="#" title="July"> july </a></td>
      </tr>
       
         <tr>
        <td title="hello">Mary</td>
        <td title="  "></td>
         <td><a href="#" title="July"> july </a></td>
      </tr>
      <tr>
           <td title="hello">John</td>
       <td title="  "></td>
          <td><a href="#" title="July"> july </a></td>
     
      </tr>
            <tr>
           <td title="hello">John</td>
         <td title="  "></td>
        <td><a href="#" title="July"> july </a></td>
      </tr>
    </tbody>
  </table>


Step4:

There are the two methods to check the attribute title has content or not.

                                           1. Each Method() .prop() method provides a way to explicitly retrieve property values
                                          2. Filter Method()


Let us see in the script 


<script>

$(document).ready(function()
{

      Step1 :- Method using filter option: 

       $("td").filter(function(){
        
        var tittleStatus = ($(this).attr('title') || "hello").trim().length==1;
        
        return $(this).find('a').length <= 0 && tittleStatus;   

            }).css("background-color", "red");
            

        });

      Step2 :-  Method using each and prop method option:

        $("td").each(function(){

           if($(this).prop("title").trim().length == 0 && $(this).prop("title")!= "") {

             $(this).css("background-color", "blue")
         
             }
            
            else {
                
                 $(this).css("background-color", "red");
            }
                             
        });

      Step3 :-  Simple Method using filter method:

          $("td").filter(function()
             {
         return ($(this).attr('title') || '').trim().length == 0  &&  $(this).find('a').length <= 0;
                

            }).css("background-color", "red")
 });

</script>


Step5:

To check if <img> tag has title attribute set:

if($("img#someID").attr("title") !== undefined) {
    // ....
}

To select images that have title attribute:

$("img[title]")

Note:

• Since jQuery 1.6 the attr() method returns undefined if the attribute was not present and ""if the attribute was present but empty
• In e arlier versions of jQuery the attr() method returns "" if attribute was not present or it was present but empty

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com  for more updates on Jquery.