menu
Ad goes here

Friday, 28 August 2015

7 jQuery functions which require almost every day

Lets make your life more easy during develop any application by discussing about few functions which needs almost every day. You must know that before working any function you have to include jQuery library. If you are a beginner then please see our previous post.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

I will recommend you to bookmark this page so that you can get it easily during development.

In our daily life we get issues during development and sometimes we forget to apply simple function to solve big issues, so I have added most useful seven functions which may save your development time.

I am adding following seven functions for now and have a plan to add more in next post and hope these will be useful for daily uses.

  1. Add or remove class on click or hover
  2. Add active class based on URL
  3. Append overlay DIV during display a popup content
  4. Replace missing image with company logo or hide it.
  5. Hide empty elements
  6. How to check if checkbox is checked?
  7. Clear Search field on focus

1.Add active class based on URL

To create user friendly website, you have to add active class for the particular page menu item so that user can easily understand where they are now. This is actually very easy when you are going to use it in static html base website but if you are going to active page menu for dynamic websites then the blow function will help you.
<nav>
<ul>
<li><a href="http://www.24xhtml.com">Home</a></li>
<li><a href="http://www.24xhtml.com/search/label/HTML ">HTML</a></li>
<li><a href="http://www.24xhtml.com/search/label/CSS ">CSS</a></li>
<li><a href="http://www.24xhtml.com/p/contact-us.html ">Contact Us</a></li>
</ul>
</nav>

$(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

2.Add active class based on URL

The add or remove class function can solve big issues if we apply it in right place. If we use click function to remove or add class then we can highlight a area or can hide or show a panel by using CSS properties with this.
$('.highlight).click(
       function(){ $(this).addClass(active) },
       function(){ $(this).removeClass(active) }
)
$('.mousehover').hover(
       function(){ $(this).addClass('hover') },
       function(){ $(this).removeClass('hover') }
)

<style>
.active, .hover {background:red; color:white}
</style>

3. Append overlay DIV during display a popup content

If you are going to use custom popup then this function will help to create beautiful modal popup.
$(function() {

   var docuHeight = $(document).height();

   $("body").append("
"); $("#overlay") .height(docuHeight) .css({ 'opacity' : 0.6, 'position': 'absolute', 'top': 0, 'left': 0, 'background-color': '#000', 'width': '100%', 'z-index': 1200 }); });

4. Replace missing image with company logo or hide it.

This is mostly useful in product base website where thousands pages available and quite difficult to find missing images. Just use below function and add suitable image which will replace the missing image.
$('img').error(function(){
        $(this).attr('src', '24xhtml_logo.png');
});
Or you can hide instead of replacing.
$("img").error(function(){
        $(this).hide();
});


5. Hide empty elements

You have seen lots of website which showing extra blank space and you can imagine how it looks bad, but you can resolve this by using below function.
$('*').each(function() {
         if ($(this).text() == "") {
                   //hide or replace or anything which you like
         }
});


6. How to check if checkbox is checked?

This will help you during using custom checkbox or radio button and during passing value.
$('#checkBox').attr('checked');
$('input[type=checkbox]:checked');


7. Clear Search field on focus

These days most of the developer use placeholder, but do you know it’s still doesn’t support in IE9 so I will recommend using below function which will support in all leading browsers.
$("#s")
    .val("Search...")
    .css("color", "#ccc")
    .focus(function(){
        $(this).css("color", "black");
        if ($(this).val() == "Search...") {
            $(this).val("");
        }
    })
    .blur(function(){
        $(this).css("color", "#ccc");
        if ($(this).val() == "") {
            $(this).val("Search...");
        }
    });

No comments:

Post a Comment

Books for you (Crafted with )