JavaScript conflicts

[BizSolSystems]

So I'm having some issues here. These two javascripts are conflicting with one another. When they are alone, they both work but when put on the same page, only the error box works, first code box below.

<script type="text/javascript">
            $(function() {
                    $('#overlay').fadeIn('fast',function(){
                        $('#box').animate({'top':'160px'},500);
                    });
                $('#boxclose').click(function(){
                    $('#box').animate({'top':'-200px'},500,function(){
                        $('#overlay').fadeOut('fast');
                    });
                });

            });
        </script>

and

<script type="text/javascript" charset="utf-8">$(document).ready(function(){ $("input.login_hint").ezpz_hint(); });</script>

Any reason why?

 

[ronaldroe]

The second one looks like it calls from a plugin. Do you have a plugin on the site as well? It's likely that your conflict is actually in there. How are they conflicting?

 

[BizSolSystems]

Plugin Code

Here's the code of the plugin :

(function($){
	$.fn.ezpz_hint = function(options){
		var defaults = {
			hintClass: 'ezpz-hint',
			hintName: 'ezpz_hint_dummy_input'
		};
		var settings = $.extend(defaults, options);
		
		return this.each(function(){
			var hint;
			var dummy_input;
			
			// grab the input's title attribute
			text = $(this).attr('title');
			
			// create a dummy input and place it before the input
			$('<input type="text" name="temp" value="" />').insertBefore($(this));
			
			// set the dummy input's attributes
			hint = $(this).prev('input:first');
			hint.attr('class', $(this).attr('class'));
			hint.attr('size', $(this).attr('size'));
			hint.attr('name', settings.hintName);
			hint.attr('autocomplete', 'off');
			hint.attr('tabIndex', $(this).attr('tabIndex'));
			hint.addClass(settings.hintClass);
			hint.val(text);
			
			// hide the input
			$(this).hide();
			
			// don't allow autocomplete (sorry, no remember password)
			$(this).attr('autocomplete', 'off');
			
			// bind focus event on the dummy input to swap with the real input
			hint.focus(function(){
				dummy_input = $(this);
				$(this).next('input:first').show();
				$(this).next('input:first').focus();
				$(this).next('input:first').unbind('blur').blur(function(){
					if ($(this).val() == '') {
						$(this).hide();
						dummy_input.show();
					}
				});
				$(this).hide();
			});
			
			// swap if there is a default value
			if ($(this).val() != ''){
				hint.focus();
			};
			
			// remove the dummy inputs so that they don't get submitted
			$('form').submit(function(){
				$('.' + settings.hintName).remove();
			});
		});
		
	};
})(jQuery);

 

[Brian Angel]

THing that pops out is, the plug in is running in no-conflict and yours isn't. Try wraping it with:

(function($){
     //Code like goodness
})(jQuery);

 

[notarypublic]

Have a link to the page in question?