We are using EXTJS 3.1.0
There is a functionality where we have to add tooltip to an image, using code:
function loadToolTip(objImageId,entity_id,entity_type){
var objImage = document.getElementById(objImageId);
var tp = new Ext.ToolTip({
target: objImage,
autoLoad: {url: ‘some URL’},
showDelay:500
});
var extObjImage = Ext.get(objImageId);
tp.showAt([extObjImage.getX()+25,extObjImage.getY()+25]);
if(tp.anchorEl){
tp.anchorEl.hide();
}
}
This function is called on the mouseover event of a image.
It is possible that the user does mouseover on the image after changing some data and every time we have to get the tool-tip contents from the server.
The problem we are facing is, it creates multiple tool tips every time we do an mouse over.
Ideally we would want it to be displayed only once. We tried giving id to the tool tip object and then calling .destroy() method on that object when mouseout event occurs. This also does not work and at times gives JS error.
This or something similar should work for you:
function loadToolTip(objImageId,entity_id,entity_type){
var extObjImage = Ext.get(objImageId);
var tp = objImage.tp;
if(!tp)
{
var objImage = document.getElementById(objImageId);
tp = new Ext.ToolTip({
target: objImage,
autoLoad: {url: ‘some URL’},
showDelay:500
});
extObjImage.tp = tp;
}
tp.showAt([extObjImage.getX()+25,extObjImage.getY()+25]);
if(tp.anchorEl){
tp.anchorEl.hide();
}
}
Related
How to handle two or more linked Canvas-Charts with Chart.js? With this script the canvas-image is linked with a bigger version to present the big file in a fancybox or just two download it (right-click -> save). Easy.
<a HREF="#" id="canvas_link_1">
<canvas id="image1"></canvas>
</a>
<a HREF="#" id="canvas_link_2">
<canvas id="image2"></canvas>
</a>
To use toDataURL() with Chart.js it's a bit tricky, cause it will render the whole chart not before the animation has ended. If we do ask for the URL too early, it will present an empty (transparent) image. That's why we need onAnimationComplete in the options:
var options = {
onAnimationComplete: done
}
Later in the script, it will fire/change the new HREF, when the animation is over.
var ct1 = document.getElementById("image1").getContext("2d");
ct1.canvas.width = document.getElementById("image1").offsetWidth;
ct1.canvas.height = document.getElementById("image1").offsetHeight;
var Chart1 = new Chart(ct1).Line(lineChartData1,options);
function done() {
var url1=document.getElementById("image1").toDataURL();
document.getElementById("canvas_link_1").href=url1;
}
var ct2 = document.getElementById("image2").getContext("2d");
ct2.canvas.width = document.getElementById("image2").offsetWidth;
ct2.canvas.height = document.getElementById("image2").offsetHeight;
var Chart2 = new Chart(ct2).Line(lineChartData2,options);
function done() {
var url2=document.getElementById("image2").toDataURL();
document.getElementById("canvas_link_2").href=url2;
}
That works. But only with one canvas-image. If I delete the 2nd function done() it will work with the 1st canvas, if I delete the 1st function, only the 2nd canvas presents the url.
I think the problem is with "done", it's not a name, just like a situation, or? The "var options" is are general for all canvas-images (for sure I can change to options1 and options2 and also to "Line(lineChartData1,options1)" but without any change)... so "done" will fire all functions and - that's bad - appearently only the last function.
On the other side I cannot rename the entry of onAnimationComplete. It's null or done, nothing else. What is to do?
You can have different callbacks with different names. "done" is just an example name (a better name would probably be "completed").
For example - first create two option objects, one for each chart:
var options1 = {
onAnimationComplete: done1
};
var options2 = {
onAnimationComplete: done2
};
Then initialize the charts with those:
...
var Chart1 = new Chart(ct1).Line(lineChartData1, options1);
...
var Chart2 = new Chart(ct2).Line(lineChartData2, options2);
And finally define the callbacks:
function done1() {
var url = document.getElementById("image1").toDataURL();
document.getElementById("canvas_link_1").href = url;
}
function done2() {
var url = document.getElementById("image2").toDataURL();
document.getElementById("canvas_link_2").href = url;
}
Hope this helps (and that I understood the problem correctly) !
I have created a single page for all my reports and I am loading different versions of those reports (line, pie, chart, graph, etc) with a toolbar I made. All is working well there, except on the non-table type charts (line,pie,bar,etc). When those get rendered, I found that the text in the legends and series become blurry and through some research here and other places found that they are converted to images, which are then getting resized on me though a css class that is auto generated.
Firstly, what i'm trying to do:
I want to remove this class from the image that is generated at the time it is loaded. If i turn off async rendering on my report
AsyncRendering="false"
Along with this bit of jquery (targeting the div that contains the reportviewer):
$(document).ready(function () {
$('#reportDiv img').removeAttr('class');
});
Then the result is as expected. The image is not scaled and all is well. The problem, however, is that some of these reports may be quite large, resulting in the user not having any visual feedback of whether or not something is happening. I would like to continue using async rendering, so I started to look at the reportviewer javascript api.
Sys.Application.add_load(function () {
var reportViewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
reportViewer.add_propertyChanged(viewerPropertyChanged);
});
function viewerPropertyChanged(sender, e) {
var viewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
if (e.get_propertyName() === "isLoading") {
var button = document.getElementById("ctl00_mainContentPlaceHolder_ctlReportParamModuleId1_btnRunReport");
button.disabled = viewer.get_isLoading();
}
else {
if ($find("ctl00_mainContentPlaceHolder_ReportViewer1").get_reportAreaContent() == Microsoft.Reporting.WebFormsClient.ReportAreaContent.ReportPage) {
alert("here");
}
}
}
The first portion (isLoading) works as expected disabling the button. However immediately upon load I get
Object doesn't support property or method 'get_reportAreaContent'
Am I missing something obvious? These are the links from msdn that I used for reference:
reportviewer isLoading
reportviewer ReportAreaContentType
Bar graphs, Line graphs, pie charts, etc. are rendered as images. The images get re-sized based on the size of the report viewer control. Instead of using AsyncRendering="false", I created this javascript workaround and it has solved my problem.
var app = Sys.Application;
app.add_init(ApplicationInit);
function ApplicationInit(sender) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (!prm.get_isInAsyncPostBack()) {
prm.add_endRequest(EndRequest)
}
}
function EndRequest(sender, args) {
var reportViewerControlId = "ReportViewer1";
if (sender._postBackControlClientIDs[0].indexOf(reportViewerControlId) >= 0) {
var reportViewerControlContainer = "reportViewerContainer"; // Id of <DIV>
var renderedReportImage = $("#" + reportViewerControlContainer + " img");
renderedReportImage.removeAttr("style").removeAttr("class");
var styleAttr = renderedReportImage.attr("style");
var classAttr = renderedReportImage.attr("class");
if (typeof styleAttr === 'undefined') {
console.log("Successfully removed the style attribute from the rendered report image!");
}
if (typeof classAttr === 'undefined') {
console.log("Successfully removed the class attribute from the rendered report image!");
}
}
}
Basically, I am listening to the endRequest of the PageRequestManager for my ReportViewerControl's ID, then simply removing the style and class attributes from the image to display it unmodified.
As a part of a plugin that I'm writing for a client, there's a shortcode that shows a leaflet map. The static script & css are loaded in the footer, and I can pass parameters to it via wp_localize_script.
What I need is to add a layer on mouseover event and remove it on mouseout. And as long as there is only one leaflet map per page it works. But if there is more than one map present in the same page, then the mouse events are only applied to the last map.
This is the smallest piece of javascript code that works as I said:
if (typeof map == 'undefined'){
var map = {};
var layer_bg = {};
}
map[id] = L.map(id.toString(10)).setView([51.505, -0.09], 6);
layer_bg[id] = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
map[id].on('mouseover', function(e) {
console.log(id);
map[id].addLayer( layer_bg[id] ); });
map[id].on('mouseout', function(e) {
map[id].removeLayer( layer_bg[id] ); });
The script receives a different id parameter in each call, but the events apply only to the last id used.
I'm out of ideas to solve this, but I hope there's a simple solution that I've overlooked. Here is a very simple jsfiddle that simulates 2 consecutive calls to the script above:
http://jsfiddle.net/LTYvq/1/
It is a scope problem.
id is a global variable, so everytime you call console.log(id); it will use the global id, which was last set to "map2".
To fix it, put the creation code into a function like so:
function createMap(id) {
if (typeof map == 'undefined'){
map = {};
layer_bg = {};
}
map[id] = L.map(id.toString(10)).setView([51.505, -0.09], 6);
layer_bg[id] = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
map[id].on('mouseover', function(e) {
console.log(id);
map[id].addLayer( layer_bg[id] ); });
map[id].on('mouseout', function(e) {
map[id].removeLayer( layer_bg[id] ); });
}
and then call
createMap("map1");
createMap("map2");
For more about scopes, see What is the scope of variables in JavaScript?
I updated you Fiddle here: http://jsfiddle.net/LTYvq/3/
I have this script which should show the text "Loading..." while images are loading, then change the text to "loaded" when all images are loaded. I added a button to load new images to make sure that it works for dynamically loaded images as well.
This works perfectly in Chrome but in Firefox the "Loading..." text never appears. I have no idea why this would be. The page begins loading and not all images are loaded so it should create the text "Loading.." but it doesn't. Then when all images are done loading the text "Loading" appears.
I just don't get why one message would appear and the other wouldn't. Especially because there are no qualifications that have to be met before creating the "Loading..." text, it should just fire automatically.
jsfiddle Example | Full Page Example
$(document).ready(function() {
var checkComplete = function() {
if($('img').filter(function() {return $('img').prop('complete');}).length == $('img').length) {
$('.status').text('Loaded');
} else {
$('.status').text('Loading...');
}
};
$('img').on('load',function() {
checkComplete();
});
$('#button').click(function() {
$('img.a').attr('src' , 'http://farm9.staticflickr.com/8545/8675107979_ee12611e6e_o.jpg');
$('img.b').attr( 'src' , 'http://farm9.staticflickr.com/8382/8677371836_651f586c99_o.jpg');
checkComplete();
});
checkComplete();
});
You have several issues in the code.
First off, the checkComplete() function is not written correctly. It should be this:
var checkComplete = function() {
var imgs = $('img');
if(imgs.filter(function() {return this.complete;}).length == imgs.length) {
$('.status').text('Loaded');
} else {
$('.status').text('Loading...');
}
};
The main fix here is that the filter callback needs to refer to this.complete, not to $('img').prop('complete') because you are trying to filter a single item at a time.
Second off, you are relying on both .complete and .load working correctly AFTER you've changed the .src value. This is explicitly one of the cases where they do not work properly in all browsers.
The bulletproof way to work around this is to create a new image object for the new images, set the onload handler before you set the .src value and when both onload handlers have fired, you will know that both new images are loaded and you can replace the once you have in the DOM with the new ones.
Here is a version that works in FF:
$(document).ready(function() {
$('#button').click(function() {
var imgA = new Image();
var imgB = new Image();
imgA.className = "a";
imgB.className = "b";
var loaded = 0;
imgA.onload = imgB.onload = function() {
++loaded;
if (loaded == 2) {
$("img.a").replaceWith(imgA);
$("img.b").replaceWith(imgB);
$('.status').text('Loaded');
}
}
// the part with adding now to the end of the URL here is just for testing purposes to break the cache
// remove that part for deployment
var now = new Date().getTime();
imgA.src = 'http://farm9.staticflickr.com/8545/8675107979_ee12611e6e_o.jpg?' + now;
imgB.src = 'http://farm9.staticflickr.com/8382/8677371836_651f586c99_o.jpg?' + now;
$('.status').text('Loading...');
});
});
Working demo: http://jsfiddle.net/jfriend00/yy7GX/
If you want to preserve the original objects, you can use the newly created objects only for preloading the new images and then change .src after they've been preloaded like this:
$(document).ready(function() {
$('#button').click(function() {
var imgA = new Image();
var imgB = new Image();
var loaded = 0;
imgA.onload = imgB.onload = function() {
++loaded;
if (loaded == 2) {
$("img.a")[0].src = imgA.src;
$("img.b")[0].src = imgB.src;
$('.status').text('Loaded');
}
}
// the part with adding now to the end of the URL here is just for testing purposes to break the cache
// remove that part for deployment
var now = new Date().getTime();
imgA.src = 'http://farm9.staticflickr.com/8545/8675107979_ee12611e6e_o.jpg?' + now;
imgB.src = 'http://farm9.staticflickr.com/8382/8677371836_651f586c99_o.jpg?' + now;
$('.status').text('Loading...');
});
});
Working demo of this version: http://jsfiddle.net/jfriend00/ChSQ5/
From the jQuery API .load method
Caveats of the load event when used with images
A common challenge developers attempt to solve using the `.load()` shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
just a quick one, im using a oop style for my javascript game but for some reason when i add in a new class it kills any functions from other classes i have included.
Here is the script i am talking about which is my main file which i will include all my class files in:
$(document).ready(function(){
var canvas = document.getElementById("TBG");
var context = canvas.getContext("2d");
var ui = new Gui();
// var level = new Level();
//----------Login/Register Gui --------------
$('#TBG').hide();
$('#load-new').hide();
$('#reg').hide();
$('#login').hide();
//if login_but is clicked do ui.login function
$('#login_but').click(ui.login);
//if reg_but is clicked do ui.register function
$('#reg_but').click(ui.register);
$('#new_but').click(function(){
game_settings("new");
});
$('#load_but').click(function(){
game_settings("load");
});
//if login_sumbit button is clicked do ui.login_ajax function
$("#login_submit").click(ui.login_ajax);
$("#reg_submit").click(ui.register_ajax);
$("#welcome").on("click", "#logout_but", ui.logout);
//___________________________________________________________________
//Initialisation of game
function game_settings(state){
if(state == "load"){
ui.load_game();
//do ajax call to load user last save
level.level_init(0,1);
}
else{
//set beginning params
//Change screens
ui.new_game();
alert("new game");
}
}
});
in the context of the script above, my problem is when i just have the call to new Gui() without the call to new level underneath or commented like you can see, well then all of the functions below under the heading login/register gui works perfectly, but as soon as i put the call to new level in or uncomment it, it kills all of the functions under the login/ register gui heading.
Why is this?
EDIT: here is the level.js file in case you would like to see it and how i am constructing my classes:
function Level(){
this.level_init = function(level, location){
var saved_level = level;
var saved_location = location;
};
this.get_tileset = function(){
};
this.draw = function() {
}
}
Thanks
Tom
SOrry guys, it turns out it was a silly mistake on my behalf i didnt add the script in html!, i need more sleep i think haha! thanks for your input
TOm