admin管理员组文章数量:1026250
i found a good jQuery script here on stackoverflow that i want to put in a separate .js file.
I want to do this because i want to use the file on more than 1 page.
If i place this code inside script tags on a specifik page it works, but when i refer to it in the head it doesent.
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
fortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + ofortZone) >= minWidth ? testerWidth + ofortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
}; })(jQuery); $('input').autoGrowInput();
This is how i do it:
I put this in a separate file:
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
fortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + ofortZone) >= minWidth ? testerWidth + ofortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
};
})(jQuery);
then i call it from the Layout like this:
<head>
<script src=".9.1.min.js"></script>
<script src=".1.1.min.js"></script>
<script src="~/Scripts/Forms/dynamicFormSize.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('input').autoGrowInput();
});
</script>
// REST OF SITE HERE...
</body>
It still doesen't work, i may add that i use the MVC FrameWork.
Console error: Uncaught TypeError: Object [object Object] has no method 'autoGrowInput'
I also can say that the .js file is included in source, same for $('input').autoGrowInput();
i found a good jQuery script here on stackoverflow that i want to put in a separate .js file.
I want to do this because i want to use the file on more than 1 page.
If i place this code inside script tags on a specifik page it works, but when i refer to it in the head it doesent.
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
fortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.fortZone) >= minWidth ? testerWidth + o.fortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
}; })(jQuery); $('input').autoGrowInput();
This is how i do it:
I put this in a separate file:
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
fortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.fortZone) >= minWidth ? testerWidth + o.fortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
};
})(jQuery);
then i call it from the Layout like this:
<head>
<script src="http://code.jquery./jquery-1.9.1.min.js"></script>
<script src="http://code.jquery./jquery-migrate-1.1.1.min.js"></script>
<script src="~/Scripts/Forms/dynamicFormSize.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('input').autoGrowInput();
});
</script>
// REST OF SITE HERE...
</body>
It still doesen't work, i may add that i use the MVC FrameWork.
Console error: Uncaught TypeError: Object [object Object] has no method 'autoGrowInput'
I also can say that the .js file is included in source, same for $('input').autoGrowInput();
Share Improve this question edited Mar 21, 2013 at 23:49 Kev 120k53 gold badges306 silver badges393 bronze badges asked Mar 21, 2013 at 22:48 user1973285user1973285 3- are you sure, you included the script correctly ? – Adil Shaikh Commented Mar 21, 2013 at 22:50
- Did you include the/this in the external file AFTER the link/inclusion of jQuery? – Mark Schultheiss Commented Mar 21, 2013 at 22:52
- What's the error in the Console? – DACrosby Commented Mar 21, 2013 at 22:55
4 Answers
Reset to default 2You have to call $('input').autoGrowInput(); after the document has been loaded.
Try this:
$(function(){
$('input').autoGrowInput();
});
Your references to the autoGrowInput in your code should e after you have defined it inline or specified an external script tag which contains it.
Also you have to use it on elements which were already loaded.
Try using the document ready event like so:
$(function(){
$('input').autoGrowInput();
});
First make sure you reference jquery and then your script
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
Then call function after document is ready.
<script type="text/javascript">
$('document').ready(function(){
$('input').autoGrowInput();
});
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
<script type="text/javascript">
$('document').ready(function(){
autoGrowInput();
});
</script>
clear cache on browser .... and test again .
i found a good jQuery script here on stackoverflow that i want to put in a separate .js file.
I want to do this because i want to use the file on more than 1 page.
If i place this code inside script tags on a specifik page it works, but when i refer to it in the head it doesent.
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
fortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + ofortZone) >= minWidth ? testerWidth + ofortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
}; })(jQuery); $('input').autoGrowInput();
This is how i do it:
I put this in a separate file:
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
fortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + ofortZone) >= minWidth ? testerWidth + ofortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
};
})(jQuery);
then i call it from the Layout like this:
<head>
<script src=".9.1.min.js"></script>
<script src=".1.1.min.js"></script>
<script src="~/Scripts/Forms/dynamicFormSize.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('input').autoGrowInput();
});
</script>
// REST OF SITE HERE...
</body>
It still doesen't work, i may add that i use the MVC FrameWork.
Console error: Uncaught TypeError: Object [object Object] has no method 'autoGrowInput'
I also can say that the .js file is included in source, same for $('input').autoGrowInput();
i found a good jQuery script here on stackoverflow that i want to put in a separate .js file.
I want to do this because i want to use the file on more than 1 page.
If i place this code inside script tags on a specifik page it works, but when i refer to it in the head it doesent.
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
fortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.fortZone) >= minWidth ? testerWidth + o.fortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
}; })(jQuery); $('input').autoGrowInput();
This is how i do it:
I put this in a separate file:
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
fortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.fortZone) >= minWidth ? testerWidth + o.fortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
};
})(jQuery);
then i call it from the Layout like this:
<head>
<script src="http://code.jquery./jquery-1.9.1.min.js"></script>
<script src="http://code.jquery./jquery-migrate-1.1.1.min.js"></script>
<script src="~/Scripts/Forms/dynamicFormSize.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('input').autoGrowInput();
});
</script>
// REST OF SITE HERE...
</body>
It still doesen't work, i may add that i use the MVC FrameWork.
Console error: Uncaught TypeError: Object [object Object] has no method 'autoGrowInput'
I also can say that the .js file is included in source, same for $('input').autoGrowInput();
Share Improve this question edited Mar 21, 2013 at 23:49 Kev 120k53 gold badges306 silver badges393 bronze badges asked Mar 21, 2013 at 22:48 user1973285user1973285 3- are you sure, you included the script correctly ? – Adil Shaikh Commented Mar 21, 2013 at 22:50
- Did you include the/this in the external file AFTER the link/inclusion of jQuery? – Mark Schultheiss Commented Mar 21, 2013 at 22:52
- What's the error in the Console? – DACrosby Commented Mar 21, 2013 at 22:55
4 Answers
Reset to default 2You have to call $('input').autoGrowInput(); after the document has been loaded.
Try this:
$(function(){
$('input').autoGrowInput();
});
Your references to the autoGrowInput in your code should e after you have defined it inline or specified an external script tag which contains it.
Also you have to use it on elements which were already loaded.
Try using the document ready event like so:
$(function(){
$('input').autoGrowInput();
});
First make sure you reference jquery and then your script
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
Then call function after document is ready.
<script type="text/javascript">
$('document').ready(function(){
$('input').autoGrowInput();
});
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
<script type="text/javascript">
$('document').ready(function(){
autoGrowInput();
});
</script>
clear cache on browser .... and test again .
本文标签： javascriptjQuery function in separate file Stack Overflow
版权声明：本文标题：javascript - jQuery function in separate file, - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1744158780a2084073.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论