Develop Reference

Canvas: Detect if it is visible in browser

I have a list of charts. I use Chart.js to create those charts. Since my list can have 1 to 100 or more entries initializing all charts at once would not be smart because that would make the ui freeze for a long time. So instead I thought it would be much better to only initialize those charts which are visible inside the view bounds of the browser so that for example only the first chart is getting initialized and when the user scrolls down and the second canvas becomes visible the second is getting initialized and so on.
I have everything setup but the only problem that I have right now is: how can I create an eventlistener or anything similiar which I can add to each canvas element that gets triggered when a canvas becomes visible inside the view bounds of the browser so that i can perform the chart initialization for that canvas?

I'm the author of OnScreen, a small library that can call a callback function when a HTMLElement enters the viewport or the boundaries of its container.
// Uses ES6 syntax
import OnScreen from 'onscreen';
const os = new OnScreen();
os.on('enter', 'canvas', (element) => {
if (!element.chartInitialized) {
// Initialize the chart
// Update the `chartInitialized` property
// to avoid initializing it over and over
element.chartInitialized = true;
}
});
For more information, take a look at the documentation. Don't forget to check the demos repo for a couple simple examples.

I have used the onScreen jQuery plugin.
It is very easy. You just have to call for each canvas this:
$('elements').onScreen({
container: window,
direction: 'vertical',
doIn: function() {
// initialize canvas
},
doOut: function() {
// Do something to the matched elements as they get off scren
},
tolerance: 0,
throttle: 50,
toggleClass: 'onScreen',
lazyAttr: null,
lazyPlaceholder: 'someImage.jpg',
debug: false
});

How to animate selection / deselection in ace editor?

I'm working on live configuration tool for Apache Ignite.
UI organized in two columns. In left column I have various inputs, checkboxes, dropdowns... and in right column I have ace editor where I show preview of generated configuration.
I want to implement selection of changed parts by selecting them in ace edit.
And I already do that. But for better user experience I would like to select changed lines with fade-in / fade-out animation.
Could anyone give me some advice how to implement this.
Code for selection:
editor.selection.addRange(new Range(start, 0, end, 0));
I guess I need some how tweak CSS?
Or may be I should change selection color in loop and select with different colors several times with short pauses?
Update: after several hours of digging ace I found that animation part of css is ignored by ace. So I go to http://www.perbang.dk/rgbgradient, configure gradient with 10 steps and create 10 styles in my css. And apply them in loop for range. Here my code (I use AngularJS, so, it is a part of my controller):
var animation = {editor: null, stage: 0, start: 0, stop: 0};
function _clearSelection(editor) {
_.forEach(editor.session.getMarkers(false), function (marker) {
editor.session.removeMarker(marker.id);
});
}
function _animate() {
animation.stage = animation.stage + 1;
animation.editor.session.addMarker(new Range(animation.start, 0, animation.stop, 0),
'preview-highlight-' + animation.stage, 'line', false);
}
function _fade(editor, start, stop) {
var promise = editor.animatePromise;
if (promise) {
$interval.cancel(promise);
_clearSelection(editor);
}
animation = {editor: editor, stage: 0, start: start, stop: stop};
editor.animatePromise = $interval(_animate, 100, 10, false);
}

I've got an answer from one of Ace developers "nightwing":
Using css animations or transitions would be the best solution, but it doesn't work for now since marker layer uses innerHTML which removes all marker nodes restarting animation.
As a workaround it is possible to add dom node with animation to editor.container and use code similar to https://github.com/ajaxorg/ace/blob/master/lib/ace/line_widgets.js#L271 to position them inside the editor

Cannot implement dynamic height jQuery Wookmark

I have some divs that have dynamic heights controlled by a 'click' function as below:
$('.expand').click(function() {
$(this).next('.collapse').slideToggle();
});
I am attempting to apply the jQuery wookmark plugin to the divs, and it works, apart from when their heights are dynamically resized by expanding one of the sections. From the documentation, I copied over one of the examples to my code, and the dynamic height works
$(document).ready(new function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#container'), // Optional, used for some extra CSS styling
offset: 30, // Optional, the distance between grid items
itemWidth: 300 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('.outerwrapper');
// Call the layout function.
handler.wookmark(options);
// Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
$(this).css('height', newHeight+'px');
// Update the layout.
handler.wookmark();
});
});
You can see this working here. How can I make it so that when you click one of the headings inside the divs, the layout updates, as it does in the example. Thanks in advance.

Usually third party jQuery plugins include some kind of "Refresh" or "Resize" function.
Taking a quick look at the function, it doesn't appear to have one; however, since there is an "autoResize" option (which will reload the layout on browser resize), you could simply create a click event that triggers the "resize" event like so:
JAVASCRIPT:
$("h1.resize").live("click", function()
{
$(window).trigger('resize');
});
http://api.jquery.com/trigger/
http://api.jquery.com/resize/
EDIT:
Re-reading the question again,
Looks like this:
handler.wookmark();
should refresh the layout (based on your posted code). So you should be able to use that instead of the resize trigger.
$("h1.resize").live("click", function()
{
handler.wookmark();
});

How to enable and disable a DIV

I am using the Prototype JavaScript library and have this div:
new Element('div', {id: 'summaryGraph', style: 'width: 100%; height:90px;'});
Inside that div, I am showing a graph:
summaryGraph: function (data, bounds) {
var p = Flotr.draw(
$('summaryGraph'),
[data],
{
}
);
return p;
}
Now my question is, is it possible to disable and enable the div depending on the conditions?

If you want to "disable" the Graph you have 2 possibilities:
hide the Graph and show a placeholder (image, text) stating that the Graph is not accessible at the moment
overlay the Graph with a semi-transparent DIV, which will prevent any interaction with it

I'm not sure what you mean by 'disabling' the graph. But you may want to take a look at hide() (relevant docs) or show() (relevant docs).
If your graph should not respond to mouse events, add a disable flag and in the mouse event listener, return false if the flag is set.

Tooltip (qTip) is not closed, jQuery

with following code qTip works for me and generates tooltips:
$('a.ppname[rel]').live('mouseover', function() {
$(this).qtip( {
content : {
url : $(this).attr('rel')
},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true, // Give it a speech bubble tip with
// automatic corner detection
name : 'cream' // Style it according to the preset
// 'cream' style
}
});
});
});
But the qTip is not removed from the dom, well sometimes it just disappears and appears again and I get a lot of opened tooltips:
I looked at the dom, the qtip seems not to be removed but just set invisible. I need some simple logic to destroy the tooltip. E.g. if a.ppname was focused and is not focused any more I could destroy it. But how would that look like in javascript? Any Ideas?
Update: I downgraded my jQuery to 1.3.2 recommended for qTip. I don't get tooltips that stay open anymore but there is another problem now:
The tooltips, which for now I can not delete seem to appear when I hover the next item. Please, provide some suggestions how to destroy the tooltip.
Update: using
$('a.ppname[rel]').each(function(){
in the first line of the code the problem is solved. But that leads to another problem another problem that I describe here qTip tooltip does not appear, jQuery. seems to be a dilemma^:D

I think what you want is
$('a.ppname[rel]').qtip({
content : {stuff},
style : {stuff},
position: {stuff},
show: 'mouseover',
hide: 'mouseout'
})

You can remove the tooltip from the DOM by calling the destroy method when the tooltip is hidden. Try this (kudos to Matt for his example that I copied and ammended):
$('a.ppname[rel]').qtip({
content : {stuff},
style : {stuff},
position: {stuff},
show: 'mouseover',
hide: 'mouseout',
onHide: function() { $(this).qtip('destroy'); }
});