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!
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:
... 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.
Related
I have a line chart and I customized the legend symbol. In chart, the customization by using useHTML and style of the div as the legend symbol is working but I am struggled on exporting customization.
I tried something like this :
exporting:{
allowHTML : true,
sourceWidth:1024,
chartOptions: {
title: {
style: {
fontSize: '14px'
}
},
legend : {
symbolPadding: 0,
symbolWidth: 0,
symbolHeight : 0,
symbolRadius: 0,
useHTML : true,
labelFormatter : function () {
return '<div>' +
'<div class="legend-symbol-bar" style="background-color: ' + this.color +';"> </div>' +
"<span> " + this.name + " </span>" +
'</div>'
}
}
}
}
But the legend of exporting is kinda not effective.
Here is the js fiddle.
It seems that Highcharts exporting omits the styles defined in CSS file. They work if you assign them via JS though (load event):
chartOptions: {
chart: {
events: {
load: function() {
this.legend.update({
symbolWidth: 0,
labelFormatter: function() {
this.legendSymbol.css({
display: 'none'
});
return '<div>' +
'<div style="width: 18px; height: 12px; display: inline-block; background-color: ' + this.color + ';"> </div>' +
"<span> " + this.name + " </span>" +
'</div>'
}
});
}
}
},
(...)
Legend symbols can be hidden via JS code too (css function).
Live demo: http://jsfiddle.net/kkulig/efhyabzs/
API references:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
https://api.highcharts.com/highcharts/chart.events.load
I am using this script to get random background colors on my posts. It works fine when you load the page but when the new posts load the script doesn't work.
This is the code I used for the random background colors:
$(document).ready(function() {
$('.entry').each(function () {
var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
$(this).css("background-color", hue);
});
});
This is the infinite scroll / masonry code:
$(window).load(function () {
var $content = $('#posts');
$content.masonry({itemSelector: '.entry'}),
$content.infinitescroll({
navSelector : 'div#pagination',
nextSelector : 'div#pagination a#nextpage',
itemSelector : '.entry',
loading: {
finishedMsg: '',
img: 'http://static.tumblr.com/vk03xn8/Grsnluvip/ajax-loader.gif'
},
bufferPx : 600,
debug : false,
},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$content.masonry( 'appended', $newElems, true, function(){
$newElems.fadeIn(1300);
});
});
});
});
How can I combine both so that script works when new posts load?
Set your random color background logic in a function, call it on document ready and once new element are added. This could be for example:
function randColor() {
$('.entry:not(.randomized)').each(function () {
var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
$(this).addClass('randomized').css("background-color", hue);
});
}
// doc ready
$(randColor);
And in appended callback:
$content.masonry( 'appended', $newElems, true, function(){randColor(); $newElems.fadeIn(1300);} );
I have a simple MVC program that passes a list of user to my view, and inside the view i've looped through the array and assigned each users name to title attribute in an anchor tag. I'm using the tool tipster plugin to display the title(users name) when a user hovers over each link. However, for some reason the last item from the array is not assigned a 'tooltipstered' class.
html
<div class="map" style="height: 1114px; width:960px; position:relative; margin:0 auto; background: url('/Content/MAP.png') no-repeat top center;"></div>
javascript
$(function() {
var allData = #Html.Raw(#JsonConvert.SerializeObject(Model.AllDeskData));
var datatest;
function getDesks(coordsArr) {
for (var i = 0; i < coordsArr.length; i++) {
var element = $("<a href='#' class='deskBtn tooltip' title='" + coordsArr[i].Name + "' data-name='" + coordsArr[i].UserName + "'></a>");
$('.tooltip').tooltipster();
$(element).on('click', function() {
var user = $(this).attr("data-name");
$.ajax({
url: "/Home/GetUserData",
type: "GET",
data: { user: user },
success: function(data) {
//console.log(data.photos[0].value);
$(".desk-info-box").animate({
"margin-top": "0px"
}, 400);
$(".map .overlay").fadeIn(300);
$(".desk-info-data .name").text(data.displayName);
$(".desk-info-data .followers").text("who has " + data.followerCount + " followers");
$(".desk-info-data .email").text("email: " + data.jive.username + ".");
$(".desk-img").css({
'background-image' : 'url(' + '/Content/gopi_desk.jpg' + ')',
'background-size' : '100% 260px',
'background-repeat' : 'no-repeat'
});
$(".user-image").attr("src",data.photos[0].value);
}
});
});
$(".hide-detail").on("click",function(){
$(".desk-info-box").animate({
"margin-top": "-425px"
}, 400);
});
$(element).css({
"top": coordsArr[i].DeskYCoord,
"left": coordsArr[i].DeskXCoord
}).appendTo(".map");
}
}
getDesks(allData);
/* $(".deskBtn").on("click", function() {
});*/
});
I can't understand why the last item would not have that class assigned to it.
Call the tooltip after all elements appended,
function getDesks(coordsArr) {
for (var i = 0; i < coordsArr.length; i++) {
var element = $("<a href='#' class='deskBtn tooltip' title='" + coordsArr[i].Name + "' data-name='" + coordsArr[i].UserName + "'></a>");
$(element).on('click', function() {
var user = $(this).attr("data-name");
$.ajax({
url: "/Home/GetUserData",
type: "GET",
data: { user: user },
success: function(data) {
//console.log(data.photos[0].value);
$(".desk-info-box").animate({
"margin-top": "0px"
}, 400);
$(".map .overlay").fadeIn(300);
$(".desk-info-data .name").text(data.displayName);
$(".desk-info-data .followers").text("who has " + data.followerCount + " followers");
$(".desk-info-data .email").text("email: " + data.jive.username + ".");
$(".desk-img").css({
'background-image' : 'url(' + '/Content/gopi_desk.jpg' + ')',
'background-size' : '100% 260px',
'background-repeat' : 'no-repeat'
});
$(".user-image").attr("src",data.photos[0].value);
}
});
});
$(".hide-detail").on("click",function(){
$(".desk-info-box").animate({
"margin-top": "-425px"
}, 400);
});
$(element).css({
"top": coordsArr[i].DeskYCoord,
"left": coordsArr[i].DeskXCoord
}).appendTo(".map");
}
$('.tooltip').tooltipster();
}
I'm new to jQuery and I can't figure out a solution for my problem.
I'm using jQuery easytooltip on some SVG objects in my website. Everything is working fine but I need to change some attributes of the tooltip on runtime. My document.ready function is like this:
$(document).ready(function () {
$("polygon").easyTooltip({
tooltipId: "easyTooltip2",
content: 'hello'
});
});
I want to be able,( on mouseover on my polygons) to read out attributes from my polygons and pass them into the content attribute, which is showed when the tooltip is showing... How can I access the content value to change it on runtime?
my plugin code now looks like this:
(function ($) {
$.fn.content = function (_content) {
$(this).easyToolTip({ content: _content })
};
$.fn.easyTooltip = function (options) {
// default configuration properties
var defaults = {
xOffset: 10,
yOffset: 25,
tooltipId: "easyTooltip",
clickRemove: false,
content: "",
useElement: ""
};
var options = $.extend(defaults, options);
var content;
this.each(function () {
var title = $(this).attr("title");
$(this).hover(function (e) {
content = (options.content != "") ? options.content : title;
content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
$(this).attr("title", "");
if (content != "" && content != undefined) {
$("body").append("<div id='" + options.tooltipId + "'>" + content + "</div>");
$("#" + options.tooltipId)
.css("position", "absolute")
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX + options.xOffset) + "px")
.css("display", "none")
.fadeIn("slow")
}
},
function () {
$("#" + options.tooltipId).remove();
$(this).attr("title", title);
});
$(this).mousemove(function (e) {
$("#" + options.tooltipId)
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX + options.xOffset) + "px")
});
if (options.clickRemove) {
$(this).mousedown(function (e) {
$("#" + options.tooltipId).remove();
$(this).attr("title", title);
});
}
});
};
})(jQuery);
You could do:
$("polygon").mouseover(function() {
$("polygon").easyTooltip({
tooltipId: "easyTooltip2",
content: 'changedContent'
});
});
this would recreate the tooltip: a better option would be to modify only the content, i'll look into the api to see if it's possible. (it's not possible to do with the api provided by the plugin i think, re-create the tooltip)
Check out .live():
$("polygon").live("mouseover", function() {
$("polygon").easyTooltip({
tooltipId: "easyTooltip2",
content: 'hello'
});
});
More info.
Sorry for my English
I updated my uploadify to recent version (Uploadify-v2.1.4) and that broked my uploadify:
I can't upload anything . FireBug console returns this erroe when I'm trying to call "Error calling method on NPObject!".
What am I doing wrong?!
Here's my code:
http://pastebin.com/bHeYHxHw
Thanks,
Daniil.
/* Original code */
uploadifyCancel:function(ID) {
jQuery(this).each(function() {
document.getElementById(jQuery(this).attr('id') + 'Uploader').cancelFileUpload(ID, true, true, false);
});
},
/*New code */
uploadifyCancel:function(ID){
jQuery(this).each(function(){
document.getElementById(jQuery(this).attr("id")+"Uploader").cancelFileUpload(ID,true,false)
});
},
/*Original code */
jQuery(this).bind("uploadifyComplete", {
'action': settings.onComplete
}, function(event, ID, fileObj, response, data) {
if (event.data.action(event, ID, fileObj, unescape(response), data) !== false) {
jQuery("#" + jQuery(this).attr('id') + ID).find('.percentage').text(' - Completed');
if (settings.removeCompleted) {
jQuery("#" + jQuery(event.target).attr('id') + ID).fadeOut(250,function() {
jQuery(this).remove()
});
}
jQuery("#" + jQuery(event.target).attr('id') + ID).addClass('completed');
}
});
/* New code */
jQuery(this).bind("uploadifyProgress", {
'action': settings.onProgress,
'toDisplay': settings.displayData
}, function(event, ID, fileObj, data) {
if (event.data.action(event, ID, fileObj, data) !== false) {
jQuery("#" + jQuery(this).attr('id') + ID + "ProgressBar").animate({
'width': data.percentage + '%'
},250,function() {
if (data.percentage == 100) {
jQuery(this).closest('.uploadifyProgress').fadeOut(250,function() {
jQuery(this).remove()
});
}
});
if (event.data.toDisplay == 'percentage') displayData = ' - ' + data.percentage + '%';
if (event.data.toDisplay == 'speed') displayData = ' - ' + data.speed + 'KB/s';
if (event.data.toDisplay == null) displayData = ' ';
jQuery("#" + jQuery(this).attr('id') + ID).find('.percentage').text(displayData);
}
});