We Keep Coding

Kendo UI Tooltip Will Sometimes Remain Visible When it should Disappear

I have been playing around with this for quite some time, and I do not know what is wrong. When I have a few links in a row, and keep fluttering my mouse cursor over them quickly every so often a tooltip will remain visible when it should go away (it is visible even after the cursor is no longer on the link).
I believe my code is logically valid, can someone else see if they know why a tooltip here and there would remain visible?
For a link of this type:
Link
Here is the code:
function tooltip(e) {
var ticketType = j$(e).data("ticket-type");
var ticketID = j$(e).data("ticket-id");
j$.post("/Some/Url/", { "ticketID":ticketID, "ticketType":ticketType },
function(r) {
var title = r["tt"];
var tooltip = j$(e).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip");
}).always(function() {
if (j$(e).is(":hover")) { j$(e).data("kendoTooltip").show(); }
else { j$(e).data("kendoTooltip").hide(); }
});
j$(e).hover(function() {},
// Handler for when the pointer is leaving an element
function(e) {
if (j$(e.target).data("kendoTooltip") != undefined) {
j$(e.target).data("kendoTooltip").hide();
.log(e.target.innerHTML + ": was hidden.");
}
}
);
}

I think the problem is that sometimes you mouseout before ajax post returns, therefore the tooltip is shown after you leave a link. As well as hiding on mouseout, how about setting a data attribute on the target link so that the AJAX return can check the attribute before showing the tooltip:
function tooltip(e) {
j$(e).data("hover", "true"); //turn on hover data-attribute
var ticketType = j$(e).data("ticket-type");
var ticketID = j$(e).data("ticket-id");
j$.post("/Some/Url/", { "ticketID":ticketID, "ticketType":ticketType },
function(r) {
var title = r["tt"];
var tooltip = j$(e).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip");
}).always(function() {
if (j$(e).data("hover") == "true") { j$(e).data("kendoTooltip").show(); }
else { j$(e).data("kendoTooltip").hide(); }
});
j$(e).hover(function() {},
// Handler for when the pointer is leaving an element
function(e) {
j$(e).data("hover", "false"); //turn offhover data-attribute
if (j$(e.target).data("kendoTooltip") != undefined) {
j$(e.target).data("kendoTooltip").hide();
.log(e.target.innerHTML + ": was hidden.");
}
}
);
}
DEMO
NOTE: demo uses a setTimeout to fake an ajax call

JavaScript local storage for pages

I have here a little script that I found and am using it to create a simple game of sorts...
/*
Here add:
'image_path': ['id_elm1', 'id_elm2']
"id_elm1" is the ID of the tag where the image is initially displayed
"id_elm2" is the ID of the second tag, where the image is moved, when click on the first tag
*/
var obimids = {
'http://www.notreble.com/buzz/wp-content/uploads/2011/12/les-claypool-200x200.jpg': ['lesto', 'les'],
'http://rs902.pbsrc.com/albums/ac223/walkingdeadheartbreaker/Muzak/Guitarists/LarryLalondePrimus.jpg~c200': ['lerto', 'ler'],
'http://www.noise11.com/wp/wp-content/uploads/2014/07/Primus-Alexander-200x200.jpg': ['timto', 'tim']
};
// function executed when click to move the image into the other tag
function whenAddImg() {
/* Here you can add a code to be executed when the images is added in the other tag */
return true;
}
/* From here no need to edit */
// create object that will contain functions to alternate image from a tag to another
var obaImg = new Object();
// http://coursesweb.net/javascript/
// put the image in element with ID from "ide"
obaImg.putImg = function(img, ide, stl) {
if(document.getElementById(ide)) {
document.getElementById(ide).innerHTML = '<img src="'+ img+ '" '+stl+' />';
}
}
// empty the element with ID from "elmid", add image in the other element associated to "img"
obaImg.alternateImg = function(elmid) {
var img = obaImg.storeim[elmid];
var addimg = (elmid == obimids[img][0]) ? obimids[img][1] : obimids[img][0];
$('#'+elmid+ ' img').hide(800, function(){
$('#'+elmid).html('');
obaImg.putImg(img, addimg, 'style="display:none;"');
$('#'+addimg+ ' img').fadeIn(500);
});
// function executed after the image is moved into "addimg"
whenAddImg();
}
obaImg.storeim = {}; // store /associate id_elm: image
// add 'image': 'id_elm1', and 'image': 'id_elm1' in "storeim"
// add the image in the first tag associated to image
// register 'onclick' to each element associated with images in "obimids"
obaImg.regOnclick = function() {
for(var im in obimids) {
obaImg.storeim[obimids[im][0]] = im;
obaImg.storeim[obimids[im][2]] = im;
obaImg.putImg(im, obimids[im][0], '');
document.getElementById(obimids[im][0]).onclick = function(){ obaImg.alternateImg(this.id); };
document.getElementById(obimids[im][3]).onclick = function(){ obaImg.alternateImg(this.id); };
}
}
obaImg.regOnclick(); // to execute regOnclick()
FIDDLE
When clicking the items it adds them to a container where I'd like them to be stored if the user navigates to another page. I have seen some local storage cookie code on another script
FIDDLE
var $chks = $('.compare').change(function () {
console.log('c', this)
if ($(this).is(':checked')) {
var img = $('<img>'),
findimg = $(this).closest('.box').find('img'),
data_term = findimg.data('term');
img.attr('src', findimg.attr('src'));
img.attr('data-term', data_term);
var input = '<input type="hidden" name="imagecompare" value="' + data_term + '">';
$('#area').find('div:empty:first').append(img).append(input);
} else {
var term = $(this).data('term'),
findboximage = $('#area > div > img[data-term=' + term + ']')
findboximage.parent('div').empty();
}
localStorage.setItem("imagecookie", $chks.filter(':checked').map(function () {
return $(this).data('term')
}).get().join(','));
});
$(document).on('click', '#area > div', function () {
$(this).empty();
localStorage.clear();
});
var cookie = localStorage.getItem("imagecookie");
if (cookie) {
var terms = cookie.split(',');
if (terms.length) {
$chks.filter($.map(terms, function (val) {
return '[data-term="' + val + '"]'
}).join()).prop('checked', true).change();
}
}
but can't figure how to apply something similar to this one. I would be grateful for any help or to be pointed to some useful places for help.

Store a selector in a variable Javascript and then use a method on it

I have check some others post, and document myself but I dont know what is the problem here.
I have 2 image (would like to have like 20 at the end) where you can click on an icon and show and hide and image in the webpage. If you click on image A it should show image A, if you click on image B image A should hide and image B should be sown.
var firsttime = 1;
var $lastletter;
$(function() {
$('#A').click(function() {
if (firsttime = 0){
$lastletter.toggle();
$('#AL').toggle();
$lastletter = $( '#AL' );
}
else
{
firsttime = 0;
$('#AL').toggle();
$lastletter = $( '#AL' );
}
});
});
$(function() {
$('#B').click(function() {
if (firsttime = 0){
$lastletter.toggle();
$('#BL').toggle();
$lastletter = $( '#BL' );
}
else
{
firsttime = 0;
$('#BL').toggle();
$lastletter = $( '#BL' );
}
});
});
This is the solution im using:
$(function() {
$('.imgLetter').click(function() {
if (lastletter != this.id) {
$('#' + lastletter + 'L').toggle();
lastletter=this.id;
}
$('#' + this.id + 'L').toggle();
});
});

Assuming you're conventionally assigning the "last letter" by appending an "L" to the ID: this could get a lot simpler. Decorate all of your #<x> elements with a class name that makes it easy to select all of them at once. I'm going to choose "letter".
I don't think you even need to track the "first time". It sounds like you just want one element to toggle another. That would look like:
$(function() {
$('.letter').click(function() {
$('#' + this.id + 'L').toggle();
});
});

Toggling Button States

I am attempting to implement toggling functionality into a program I am working on. Specifically, there are 3 possible scenarios when a user clicks a button.
Tool clicked while no other tool is currently active.
Tool clicked while another tool is currently active
Same tool is clicked to toggle it on/off
I am having trouble implementing this. Here is my code so far:
var toolState = {
img_draw_point: false,
img_draw_line: false,
img_draw_rectangle: false,
img_draw_ellipse: false,
img_draw_FreehandPolygon: false,
img_draw_FreehandPolyline: false,
img_draw_text: false,
img_draw_eraser: false,
};
var lastActiveTool;
on(dom.byId("div-tools-draw"), "click", function (evt) {
function disableActiveCSS() {
for (var property in toolState) {
$("img#" + property + ".k-button.single").removeClass("buttonSelected");
$("img#" + property + ".k-button.single").removeClass("buttonHoverState");
}
}
function enableCSS() {
$("img#" + evt.target.id + ".k-button.single").addClass("buttonSelected");
$("img#" + evt.target.id + ".k-button.single").addClass("buttonHoverState");
}
toolState[evt.target.id] = !toolState[evt.target.id];
if (toolState[evt.target.id] == toolState[lastActiveTool]) {
toolState[lastActiveTool] = false;
}
disableActiveCSS();
enableCSS();
if (evt.target.id == lastActiveTool) {
disableActiveCSS();
}
}
Any help would be greatly appreciated.

I see that your code contains the '$' notation so I used jQuery in my response. It also assumes that we only care if another tool is currently "ON". So the 3 options in my response are:
Turn on the selected tool if no tool is on.
Turn off the current tool and turn on the selected tool.
Turn off the current tool if it is currently on.
var lastActiveTool = false;
$.click("#div-tools-draw", function(evt) {
// Disable Active CSS
$("img.k-button.single").removeClass("buttonSelected").removeClass("buttonHoverState");
if (!lastActiveTool) {
activateTool(evt.target.id);
} else if (evt.target.id == lastActiveTool) {
sameToolToggle(evt.target.id);
} else {
otherToolToggle(evt.target.id);
}
};
var activateTool = function (id) {
$("img#" + id + ".k-button.single").addClass("buttonSelected")addClass("buttonHoverState");
lastActiveTool = evt.target.id;
};
var otherToolToggle = function(id) {
$("img#" + id + ".k-button.single").addClass("buttonSelected")addClass("buttonHoverState");
lastActiveTool = evt.target.id;
// Whatever else you need to do to toggle between tools
}
// Only gets called when the same tool is currently toggled ON
var sameToolToggle = function(id) {
lastActiveTool = false;
}

Cannot intercept context menu item click

Can anyone tell me what is wrong with this code?
When user selects a word and does a right-click he can choose 'Open Wiki-Link' -
that's working fine. But for some reason nothing happens on a click,
the code in onMessage is not been executed. Why?
exports.main = function() {
var tabs = require('tabs');
//var sel = require('selection');
var cm = require('context-menu');
var menuItem = cm.Item({
label: 'Open Wiki-Link',
context: cm.SelectionContext(),
contextScript: 'self.on("click", function() {' +
'var text = window.getSelection().toString();' +
'self.postMessage(text);' +
'});',
onMessage: function(text) {
if (text.length === 0) {
throw ('No text selected');
}
tabs.open('http://de.wikipedia.org/wiki/' + text);
}
});
};

Your code seems correct and matches the examples from the documentation pretty closely. I think that the only issue is a typo: it should be contentScript, not contextScript.