CODEWITHSUNDEEP
javascriptjquery
Thomas
Thomas

Reputation: 5089

Combine js functions for input and textarea elements

So I need to add tooltips for some input fields and textareas. Currently, I have it setup like this:

$(document).ready(function(){
    $('input').focus(function(){
       var p = $(this);
       var position = p.position();
       var input_name = $(this).attr('id');
       var name = '#'+input_name+'_help'; 
       $('#apply_tooltip').css("left", position.left - 310 );
       $('#apply_tooltip').css("top", position.top -15 );
       $(name).show();
       $('#apply_tooltip').show();


    });
    $('input').blur(function(){
        $('.tooltip_inner').hide();
        $('#apply_tooltip').hide(); 


    });


    $('textarea').focus(function(){
       var p = $(this);
       var position = p.position();
       var input_name = $(this).attr('id');
       var name = '#'+input_name+'_help'; 
       $('#apply_tooltip').css("left", position.left - 310 );
       $('#apply_tooltip').css("top", position.top -15 );
       $(name).show();
       $('#apply_tooltip').show();


    });
    $('textarea').blur(function(){
        $('.tooltip_inner').hide();
        $('#apply_tooltip').hide(); 


    });


});

This works, but obviously there is probably a more efficient solution than simply duplicating the functions... Is there anyway to target both input fields and textareas with the same functions?

Upvotes: 0

Views: 144

Answers (3)

AKnox
AKnox

Reputation: 2635

My approach would be to do the alignment with CSS (with position: absolute if necessary) and set the tool tip to:

display: none;

Then in jquery you would only have to navigate the DOM and show/hide (or fadeIn fadeOut if you want to get sexy with it).

$('input').focus(function(){
    $(this).siblings('.tip').show();
}).blur(function(){
    $(this).siblings('.tip').hide();
});

Upvotes: 0

Dave Newton
Dave Newton

Reputation: 160191

Another option is to refactor. In this specific case, jfriend00's answer is suitable, but if you needed to pass arbitrary arguments, e.g., the top or left positions, you can always pull out a method. 

function tt(p) {
   var position = p.position();
   var input_name = p.attr('id');
   var name = '#'+input_name+'_help'; 
   $('#apply_tooltip').css("left", position.left - 310 );
   $('#apply_tooltip').css("top", position.top -15 );
   $(name).show();
   $('#apply_tooltip').show();
}

$('input').focus(function() {
   tt($(this));
});

$('textarea').focus(function() {
   tt($(this));
});

Upvotes: 2

jfriend00
jfriend00

Reputation: 707328

Instead of this:

$('input').focus(function(){

you can use this to get both types of objects with the same jQuery object and thus the same function:

$('input, textarea').focus(function(){

Though this isn't needed here, you ought to know that you can also put common code in a function and call that one function from multiple places rather than copying code into multiple places. Basically, you should pretty much never copy the same block of code into multiple places.

Upvotes: 4

Related Questions