CODEWITHSUNDEEP
jqueryfunction
Jessica
Jessica

Reputation: 451

Why is this jQuery not functioning?

I'm having trouble getting some additional jQuery to work.

I've narrowed it down to the following two lines of code in the original script, that when removed allow my new jQuery to work, obviously I need these for the original script to function though.

var J = jQuery.noConflict();
var $ = function (x) {return document.getElementById(x);}

The new code I'm attempting to add is:

$(function(){

// Contact form - animates fading labels

$formItems = $("input:text, textarea");

$formItems
    // fires after the page has loaded
    // if the field has already some value the label becomes invisible
    .each(function(){
        if ($(this).val() !== '') {
            $(this).prev().css({
                opacity: '0'
            });
        };
    })
    // fires on focus
    // if a focused field has no value label fades away
    .focus(function(){ 
        if ($(this).val() == '') {
            $(this).prev().stop().animate({
                opacity: '0'
            }, 200);
        }
    })
    // fires when the input field is no longer focused
    // labels fade in if there is no input in input fields
    .blur(function(){
        if ($(this).val() == '') {
            $(this).prev().stop().animate({
                opacity: '1'
            }, 200);
        }
    }) 

});

Upvotes: 1

Views: 58

Answers (1)

Dennis
Dennis

Reputation: 14465

(function($) {
$(function(){

// Contact form - animates fading labels

$formItems = $("input:text, textarea");

$formItems
    // fires after the page has loaded
    // if the field has already some value the label becomes invisible
    .each(function(){
        if ($(this).val() !== '') {
            $(this).prev().css({
                opacity: '0'
            });
        };
    })
    // fires on focus
    // if a focused field has no value label fades away
    .focus(function(){ 
        if ($(this).val() == '') {
            $(this).prev().stop().animate({
                opacity: '0'
            }, 200);
        }
    })
    // fires when the input field is no longer focused
    // labels fade in if there is no input in input fields
    .blur(function(){
        if ($(this).val() == '') {
            $(this).prev().stop().animate({
                opacity: '1'
            }, 200);
        }
    }) 

});
})(jQuery);

You script overrides the $ so that you cannot use it anymore to reference jQuery. With this anonymous function, you get a parameter $ again and pass jQuery to it. So, in your anonymous function you can again use $ to reference jQuery.

Hope this helps

Upvotes: 2

Related Questions