jQuery $.extend won't work
Question
I am trying to create a jQuery plugin but I've run into numerous issues. Let me show you my code.
jQuery Plugin:
//This plugin was created by Ben Allen. Website: http://thebenallen.net/
//This plugin uses the OpenDyslexic font. Get it at: http://opendyslexic.org/
(function($) {
$.fn.dyslexicSupport = function( options ) {
var settings = $.extend({
//Defualt settings in case you break it.
//backgroundColor : 'white',
//backgroundColorActive : '#BDBDBD',
//color : 'black',
//colorActive : '#00143E',
//alert : false,
//fontStyle : 'normal'
backgroundColor : 'white',
backgroundColorActive : '#BDBDBD',
color : 'black',
colorActive : '#00143E',
alert : false,
fontStyle : 'normal'
}, options);
return this.each(function() {
$("head").prepend("<style type=\"text/css\">" +
"@font-face {\n" +
"\tfont-family: \"opendyslexic\";\n" +
"\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Regular.otf');\n" +
"\tfont-weight: normal;\n" +
"\tfont-style: normal;\n" +
"}\n" +
"</style>");
$("head").prepend("<style type=\"text/css\">" +
"@font-face {\n" +
"\tfont-family: \"opendyslexic\";\n" +
"\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Italic.ttf');\n" +
"\tfont-weight: normal;\n" +
"\tfont-style: italic;\n" +
"}\n" +
"</style>");
$("head").prepend("<style type=\"text/css\">" +
"@font-face {\n" +
"\tfont-family: \"opendyslexic\";\n" +
"\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Bold.ttf');\n" +
"\tfont-weight: normal;\n" +
"\tfont-style: bold;\n" +
"}\n" +
"</style>");
$(this).css('font-family', 'opendyslexic')
//if(settings.fontStyle) {
$(this).css('font-style', settings.fontStyle);
//}
if(settings.color) {
$(this).css('color', color);
}
if(settings.backgroundColor) {
$(this).css('background-color', settings.backgroundColor);
}
$(this).mouseenter(function() {
if(settings.backgroundColorActive) {
$(this).css('background-color', settings.backgroundColorActive);
}
});
$(this).mouseleave(function() {
if(settings.backgroundColor) {
$(this).css('background-color', settings.backgroundColor);
}
});
$(this).mouseenter(function() {
if(settings.colorActive) {
$(this).css('color', settings.colorActive);
}
});
$(this).mouseleave(function() {
if(settings.color) {
$(this).css('color', settings.color);
}
});
if(settings.alert == true) {
$('document').ready(function() {
alert('This website is Dyslexia friendly.');
});
}
else {
return true;
}
$('#alertClose').click(function() {
$('#alertDiv').hide()
});
});
}
}(jQuery));
How I call it in the HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="jquery.dyslexicSupport.js" type="text/javascript"></script>
<script type="text/javascript">
$('document').ready(function() {
$('body').dyslexicSupport({
backgroundColor : 'white',
backgroundColorActive : 'black',
color : 'red',
colorActive : 'blue',
alert : true,
fontStyle : 'italic'
});
});
</script>
</head>
Ok, so let me explain what issues I'm having. The parameters when I call it won't override the default ones set in the .js file. Another issue is most options won't work. The only one that does is the settings.fontStyle option. I probably have so much more errors that I can't think of. But if anybody knows whats going on that would be greatly appreciated. Thanks!
2 answers
solution1
0 2016-05-05 23:12:12
... most options won't work. The only one that does is the settings.fontStyle option. ...
That's because your default options and the ones you are sending to your plugin are the same except the fontStyle :
// Plugin settings
{
backgroundColor : 'white',
backgroundColorActive : '#BDBDBD',
color : 'black',
colorActive : '#00143E',
alert : false,
fontStyle : 'italic'
}
// Code settings
{
backgroundColor : 'white',
backgroundColorActive : '#BDBDBD',
color : 'black',
colorActive : '#00143E',
alert : true, // Only these two
fontStyle : 'normal' // are different!
}
Update:
$.extend() will amend the first object that is passed to it as an argument. So, you should be calling it like so:
var settings = {
backgroundColor : 'white',
backgroundColorActive : '#BDBDBD',
color : 'black',
colorActive : '#00143E',
alert : false,
fontStyle : 'normal'
};
$.extend(settings, options);
There are other issues with your code. For example: you are adding several styles into head for each element in the selector. Probably, you don't want to do that.
solution2
0 ACCPTED 2016-05-05 23:40:38
If you look at the console you will spot the error, which is at
if(settings.color) {
$(this).css('color', color);
}
It should be
if(settings.color) {
$(this).css('color', settings.color);
}
otherwise the error causes all the following code to fail
See the fixed demo
//This plugin was created by Ben Allen. Website: http://thebenallen.net/ //This plugin uses the OpenDyslexic font. Get it at: http://opendyslexic.org/ (function($) { $("head").prepend("<style type=\\"text/css\\">" + "@font-face {\\n" + "\\tfont-family: \\"opendyslexic\\";\\n" + "\\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Regular.otf');\\n" + "\\tfont-weight: normal;\\n" + "\\tfont-style: normal;\\n" + "}\\n" + "</style>"); $("head").prepend("<style type=\\"text/css\\">" + "@font-face {\\n" + "\\tfont-family: \\"opendyslexic\\";\\n" + "\\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Italic.ttf');\\n" + "\\tfont-weight: normal;\\n" + "\\tfont-style: italic;\\n" + "}\\n" + "</style>"); $("head").prepend("<style type=\\"text/css\\">" + "@font-face {\\n" + "\\tfont-family: \\"opendyslexic\\";\\n" + "\\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Bold.ttf');\\n" + "\\tfont-weight: normal;\\n" + "\\tfont-style: bold;\\n" + "}\\n" + "</style>"); $.fn.dyslexicSupport = function(options) { var settings = $.extend({ //Defualt settings in case you break it. //backgroundColor : 'white', //backgroundColorActive : '#BDBDBD', //color : 'black', //colorActive : '#00143E', //alert : false, //fontStyle : 'normal' backgroundColor: 'white', backgroundColorActive: '#BDBDBD', color: 'black', colorActive: '#00143E', alert: false, fontStyle: 'normal' }, options); return this.each(function() { $(this).css('font-family', 'opendyslexic') //if(settings.fontStyle) { $(this).css('font-style', settings.fontStyle); //} if (settings.color) { $(this).css('color', settings.color); } if (settings.backgroundColor) { $(this).css('background-color', settings.backgroundColor); } $(this).mouseenter(function() { if (settings.backgroundColorActive) { $(this).css('background-color', settings.backgroundColorActive); } }); $(this).mouseleave(function() { if (settings.backgroundColor) { $(this).css('background-color', settings.backgroundColor); } }); $(this).mouseenter(function() { if (settings.colorActive) { $(this).css('color', settings.colorActive); } }); $(this).mouseleave(function() { if (settings.color) { $(this).css('color', settings.color); } }); if (settings.alert == true) { $(document).ready(function() { alert('This website is Dyslexia friendly.'); }); } else { return true; } $('#alertClose').click(function() { $('#alertDiv').hide() }); }); } }(jQuery)); $(document).ready(function() { $('body').dyslexicSupport({ backgroundColor: 'white', backgroundColorActive: 'black', color: 'red', colorActive: 'blue', alert: true, fontStyle: 'italic' }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> How I call it in the HTML:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JQuery + setTimeout won't work
jQuery delegate() won't work with $(this)
JQuery animate won't work
jQuery setTimeout won't work
jQuery Datatables won't work
Why won't this jquery work?
Jquery toggleclass won't work
Tabs won't work in jQuery?
jQuery .load() won't doesn't work
jQuery: Why Won't This For Loop Work?
Related Tags