Njinx Njinx - 6 months ago 6
Javascript Question

jQuery $.extend won't work

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!

Answer

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:

Comments