If I run following code in the playground:
var button1 = new qx.ui.form.Button("First Button", "icon/22/apps/internet-web-browser.png");
var doc = this.getRoot();
doc.add(button1, { left : 100, top : 50 });
button1.addListener("execute", function(e) { alert("Hello World!"); });
button1.setToolTipText(new qx.ui.core.Command("Control+D").toString());
qx.locale.Manager.getInstance().setLocale("en");
The Button-Tooltip shows Ctrl+D.
If I change the locale to "de" the tooltip still shows Ctrl+D. On the second run it shows Strg+D, the correct string.
How can I make it to show the correct string on the first run?
An even better example which shows my problem is this:
var doc = this.getRoot();
var button1 = new qx.ui.form.Button("Deutsch", "icon/22/apps/internet-web-browser.png");
doc.add(button1, { left : 100, top : 50 });
button1.addListener("execute", function(e) { qx.locale.Manager.getInstance().setLocale("de"); });
button1.setToolTipText(new qx.ui.core.Command("Control+D").toString());
var button2 = new qx.ui.form.Button("English", "icon/22/apps/internet-web-browser.png");
doc.add(button2, { left : 200, top : 50 });
button2.addListener("execute", function(e) { qx.locale.Manager.getInstance().setLocale("en"); });
button2.setToolTipText(new qx.ui.core.Command("Control+E").toString());
Have a look at the tooltips.
Is this a bug or am I not setting the locales the correct way?
/Kind regards
Christian
The problem with both of your snippets is that of evalutation and order. For one thing, qx.ui.core.Command("Control+D").toString() just returns a plain string, given the current locale. After that, the value is "fixed" and is not changed automatically anymore. In your first snippet, you first set the tooltip, and then change the locale. That means, the tooltip is set according to whatever locale is in effect before switching to "en". If you then re-run the snippet (I presume you are using the Playground), setting the tooltip is executed under the new locale and the tooltip shows the English version.
In the second snippet, changing the locale in the "execute" listener has no effect on the tooltip, as its value is already "hard-wired" using whatever locale was in effect at the time the code is evaluated (and not when one of the buttons is pressed!). Of course, if you press one of the buttons and then re-run the code in Playground, the new locale is then being picked up and displayed in the tooltips.
One way to work around this is to set the tooltip in the "execute" listener. See this Playground example.
(It's not very sensible, but I think you can work from this onward).
Related
I am trying to reset after choosing some of the individual's bar.
index.html: (line no. 62)
<span>
reset
</span>
This seems not to work. I was able to reset all the graphs pie chart, line chart, etc but not this one.
Those two ordinal graphs are created in index.js like this:
var focus = new dc.barChart('#focus');
var range = new dc.barChart('#range');
https://blockbuilder.org/ninjakx/483fd69328694c6b6125bb43b9f7f8a7
Update:
It looks weird now Coz it's showing a single bar and all the bar have got invisible but I want them to be visible (in gray colour) but not clickable.
This example replaces the built-in filtering functionality of the bar chart with its own implementation of ordinal selection, because the chart has a linear scale.
The example uses a global variable focusFilter to store the current selection. We need to empty this out and we also need to update the dimension filter as the original filterAll would do, pulling that code out of the click handler:
focus.applyFilter = function() { // non-standard method
if(focusFilter.length)
this.dimension().filterFunction(function(k) {
return focusFilter.includes(k);
});
else this.dimension().filter(null);
};
focus.filterAll = function() {
focusFilter = [];
this.applyFilter();
};
This will also allow dc.filterAll() to work, for a "reset all" link.
Fork of your block.
For some reason, I could not get the original
reset
links to work at all in this block, so I replaced them with the equivalent D3 click handlers:
d3.select('#reset-focus').on('click', () => {
focus.filterAll();
dc.redrawAll();
})
d3.select('#reset-all').on('click', () => {
dc.filterAll();
dc.redrawAll();
})
I also updated the focus ordinal bar example. Note that automatic hiding/showing of the reset link doesn't work because the chart still has an irrelevant range filter inside of it.
I want to change the label of a widget when user click it, then I write the code looks like this:
var widgets = require("sdk/widget");
var statusBar = widgets.Widget({
id: "patchouliStatus",
label: "Wait Page Loading...",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(){
this.contentURL = "http://www.google.com/favicon.ico";
this.label = "Clicked";
}
});
When I click the widget, the icon has changed, but nothing happen to the label.I move the mouse to the widget and it still show "Wait Page Loading...".Is there a way to dynamically change the label?
Firefox: v27.0.1
Add-on SDK: v1.15
Widget's label is read-only. You must use tooltip attribute to show the user a text on mouse hover, this way:
var widgets = require("sdk/widget");
var statusBar = widgets.Widget({
id: "patchouliStatus",
label: "Wait Page Loading...",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(){
this.contentURL = "http://www.google.com/favicon.ico";
this.tooltip = "Clicked";
}
});
As docs says somewhere in this section -I think it could be more clearly documented-, tooltip value is an "optional text to show when the user's mouse hovers over the widget. If not given, the label is used". Also, examples in that section don't make it clear enough as I think they should.
Ok man thanks for the XPI, change changeLabel function to this, my above was really bugged.
function changeLabel(str){
var DOMWindows = Services.wm.getEnumerator('navigator:browser');
while (DOMWindows.hasMoreElements()) {
var aDOMWindow = DOMWindows.getNext();
var myWidget = aDOMWindow.document.getElementById('widget:jid1-njALX8gXKY872g#jetpack-patchouliStatus');
if (myWidget) {
Services.appShell.hiddenDOMWindow.console.info('myWidget:', myWidget);
myWidget.setAttribute('label', str);
myWidget.setAttribute('tooltiptext', 'tooltip changed');
} else {
Services.appShell.hiddenDOMWindow.console.info('myWidget null:', myWidget);
}
}
}
It also seems that the id of your widget starts with tyour addon id name.
Now I gave you the enumerator function because that goes over all windows and you can add event listener. But really if you just want to target the one that was clicked just get the most recent window, as that will obviously hold the correct window with your widget as we just clicked there and the event listener fires on click.
Change changeLabel to this:
function changeLabel(str){
var aDOMWindow = Services.wm.getMostRecentWindow('navigator:browser');
var myWidget = aDOMWindow.document.getElementById('widget:jid1-njALX8gXKY872g#jetpack-patchouliStatus');
if (myWidget) {
Services.appShell.hiddenDOMWindow.console.info('myWidget:', myWidget);
myWidget.setAttribute('label', str);
myWidget.setAttribute('tooltiptext', 'tooltip changed');
} else {
Services.appShell.hiddenDOMWindow.console.info('myWidget null:', myWidget);
}
}
Also that Services.appShell.hiddenDOMWindow.console.info is just something nice to debug, I left it in there so you can see how it works. It logs to "Browser Console" (Ctrl+Shift+J).
As a final note I used a non-sdk solution by requiring chrome. they advise you not to do that because they want you to use the SDK functions I don't know about SDK but you can use the getEnumerator and recentWindow function by requiring window/utils it looks like:
Read window/utils article here
I'll give you non-sdk solution here but someone will have to help convert it to sdk solution. You can paste this in your code it will work though.
Im not sure how the element is inserted into the dom but I guessed.
var {Cu, Ci} = require('chrome'); //if you want to paste this into scratchpad with with Environemnt set to Browser than dont need this line, this line is for sdk
var DOMWindows = Services.wm.getWindowEnumerator(null);
while (DOMWindows.hasMoreElements()) {
var aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
var myWidget = aDOMWindow.querySelector('#patchouliStatus'); //im not exactly sure how the element is inserted in the dom but im guessing here
if (myWidget) {
myWidget.label = 'rawr';
}
}
I have a really annoying issue with Autocomplete with Prototype 1.6. I set up and dialog-style div with a form, which contains an Autocomplete. Everything works fine until I click the scroll bar, or drag it; it closes the list of suggestions. I checked this solution but now I got an javascript error
event.srcElement is undefined
I was checking the controls.js and tried to catch the event object inside the onBlur event, but it travels empty. Printed the offsetX property and is undefined. Looks like the event doesn't exist anymore. either way, it prevents that the list closes but, If I click outside the area, the list now doesn't close. And that's kinda of issue too
Anyone with this same issue? Any idea?
Thanks in advance
I was having the exact issue yesterday, but after doing some r&d I got a pretty handy fix for this.
By default this script was hiding the result div (Suggestion List) on the blur event on the search text box so as soon as we click on result div's scroll bar focus gets lost from input element & result div closes. So I did a small edit in controls.js to change the behavior of script, so now result div close method doesn't invoke on blur (focus out) from input element but triggered on the click on the document except the text input element.
For your convenience I've put the edited controls.js here.
If you like to know what has changed in JS file, here it is;
Added a event listener to the document. Just below this line
"Event.observe(this.update, "keypress", this.onKeyPress.bindAsEventListener(this));"
Event.observe($(document), "mouseup", this.onMouseup.bindAsEventListener(this));
Added a new onMouseup method.
onMouseup: function(event) {
if(!this.hasFocus) {
this.hideTimeout = setTimeout(this.hide.bind(this), 250);
this.hasFocus = false;
this.active = false;
}
},
Modify the onBlur method (Comment out two line in block)
onBlur: function(event) {
//this.hideTimeout = setTimeout(this.hide.bind(this), 250);
//this.active = false;
this.hasFocus = false;
}
I hope this will solve your issue.
Thanks
Vinod Kumar
I am developing a website that parses rss feeds and displays them based on category. You can view it here: http://vitaminjdesign.com/adrian
I am using tabs to display each category. The tabs use ajax to display a new set of feeds when they are clicked.
I am also using two other scripts- One called equalheights, which re-sizes all of the heights to that of the tallest item. And the other script I am using is called smart columns, which basically resize your columns so it always fills the screen.
The first problem I am having is when you click a new tab (to display feeds within that category). When a new tab is clicked, the console shows a jQuery error:
$(".block").equalHeights is not a function
[Break On This Error] $(".block").equalHeights();
The main problem is that each feed box fills up the entire screen's width (after you click on a tab), even if there are multiple feed boxes in that category.
MY GUESS - although all of the feeds (across all tabs) are loaded on pageload, when a new tab is selected, both jQuery scripts need to be run again. any ideas on how I can make this work properly?
One thing to note - I used the ajaxSuccess method for making equalHeights work on the first page...but it wont work after a tab is clicked.
My jQuery code for the tabs are below:
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
$("#cities li:nth-child(1)").addClass('zebra');
$("#column li ul li:nth-child(6)").addClass('zebra1');
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
$(".block").equalHeights();
return false;
});
Thanks to Macy (see answer below), I have brought my jQuery script to the following: (still does not work)
$(document).ajaxSuccess(function(){
var script = document.createElement('script');
script.src = 'js/equalHeight.js';
document.body.appendChild(script);
equalHeight($(".block"));
I found some small problems in your code. I am not sure that my suggestions will solve all the problems, but I decide to describe my first results here.
1) You should remove comma before the '}'. Currently the call look like $("#column").sortable({/**/,});
2) The function equalHeight is not jQuery plugin. It is the reason why the call $(".block").equalHeights(); inside your 'click' event handler follows to the error "$(".block").equalHeights is not a function" which you described. You should change the place of the code to equalHeight($(".block")); like you use it on other places.
3) The script http://vitaminjdesign.com/adrian/js/equalHeight.js defines the function equalHeight only and not start any actions. Once be loaded it stay on the page. So you should not load it at the end of every ajax request. So I suggest to reduce the script
$(document).ajaxSuccess(function(){
var script = document.createElement('script');
script.src = 'http://vitaminjdesign.com/adrian/js/equalHeight.js';
document.body.appendChild(script);
equalHeight($(".block"));
$("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {
$(this).attr("target", "_blank");
});
});
to
$(document).ajaxSuccess(function(){
equalHeight($(".block"));
$("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {
$(this).attr("target", "_blank");
});
});
4) I suggest to change the code of http://vitaminjdesign.com/adrian/js/equalHeight.js from
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
to
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
to eliminate the usage of global variables tallest and thisHeight. I recommend you to use JSLint to verify all your JavaScript codes. I find it very helpful.
5) I recommend you to use any XHTML validator to find some small but sometime very important errors in the markup. Try this for example to see some errors. The more you follow the XHTML standards the more is the probability to have the same results of the page in different web browsers. By the way, you can dramatically reduce the number of the errors in your current code if the scripts included in the page will be in the following form
<script type="text/javascript">
//<![CDATA[
/* here is the JavaScript code */
//]]>
</script>
I didn't analysed the full code but I hope that my suggestions will solve at least some of problems which you described in your question.
Essentially, when you add a new element to the document, the equalheights script has not attached its behavior to that new element. So, the "quick fix", is probably to re-embed the equalheights script after an ajax request has completed so that it re-attaches itself to all elements on the page, including the elements you just added.
Before this line: $(".block").equalHeights(); , add a line of script which re-embeds/re-runs your equalheights script.
$.getScript('<the location of your equalHeightsScript>');
$.getScript('<the location of your smartColumnsScript>');
$(".block").equalHeights();
or
var script = document.createElement('script');
script.src = '<the location of your script>';
document.body.appendChild(script);
A better solution would be to upgrade the plugin so it takes advantage of live. However, I'm not up to that at the moment :)
Some Error Here
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
.
.
.
});
Should be re-written like this
$("ul.tabs li").click(function() {
$(this).addClass("active").Siblings("li").removeClass("active");; //Remove any "active" class Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
.
.
.
});
I don't think you need to run the scripts again after the ajax, or at least that's not the "main" problem.
You seem to have some problems in the script smartColumn.js
Right now it seems to only operate on the ul with the id "column" ('#column'), and it is working on the one UL#column you do have, but of course your HTML has many other "columns" all of which have the class "column" ('.column') that you want it to work on as well.
Just to get the beginning of what you are trying to do, change all the selectors in smartColumn.js that say 'ul#column' to say 'ul.column' instead, and then alter the HTML so that the first "column" has a class="column" rather than an id="column".
That should solve the 100% wide columns at least.
That should solve your "Main" Problem. But there are other problems.
I'm doing some Mac development in a WebView. I want to expand URLs that have been shortened by a url shortener, and display that expanded URL to the user. So, given a link whose src attribute is set to http://is.gd/xizMsr, when the user hovers over the link I want the title tooltip to display http://google.com
My link tag looks like this:
Here's a shortened link to google
And here's the relevant javascript, which will use XMLHttpRequest to fetch the expanded URL and then update the title
var myRequest;
var mousedOverElement;
var isLoading = false;
function myFunction(anObject) {
if (isLoading == false) {
isLoading = true;
mousedOverElement = anObject;
var link = anObject.getAttribute('href');
var encodedURL = encodeURI(link);
var url = 'http://is.gd/forward.php?format=simple&shorturl=' + encodedURL;
myRequest = new XMLHttpRequest();
myRequest.open("GET", url);
myRequest.onreadystatechange = onStateChange;
myRequest.send();
}
}
function onStateChange() {
if (myRequest.readyState==4) {
if (myRequest.status==200) {
mousedOverElement.setAttribute('title',myRequest.responseText);
}
isLoading = false;
}
}
The problem is, when I hover over the link, and then stop moving the cursor, the title attribute is set properly, but the tooltip is not shown. I have to move the mouse again to make the tooltip show up. I don't necessarily have to move the cursor off of the link and then back over it, but simply moving a few pixels while remaining hovered over the link will do the trick.
I know that the title is being set properly from a combination of using the Web Inspector and the Javascript debugger in Safari. In fact, pretty much as soon as I hover over the link, I see the Web Inspector's view of the DOM in the "elements" tab update with the new title. But, if I take my hand off of the mouse, the tooltip never shows.
My assumption here is that WebKit only shows a tooltip when the user is moving the mouse. Is there a way to sort of "wake up" webkit, even if the cursor is not moving? Or am I better off implementing this with some of my own DHTML-ish magic instead of relying on the title attribute?
What about an element (move it over the anchor) or a wrapper (positive z-index) with a transparent background which will (onmouseover):
first add the anchor's title (you will have to modify your function)
and then change its (negative for the covering element) z-index (effectively putting the anchor in the foreground)
This way the title will be readily available. If necessary you can add a setTimeout() between step 1 and 2.
Or you could simply use setAttributeNode to modify the title attribute value.
You said
"The problem is, when I hover over the
link, and then stop moving the cursor,
the title attribute is set properly,
but the tooltip is not shown."
Its likely that because the title did not exist when you started the mouse hover, it could not display any tooltip (there was nothing to display). So no tooltip will appear. When you move the mouse again, this time it does have a title attribute, so it can display a tooltip. Theres not much you can do about that, its just how the browser works.
Instead your could try using a jQuery tooltip: http://www.reynoldsftw.com/2009/03/10-excellent-tooltip-plugins-with-jquery/
With jQuery you should be able control it so that a tooltip appears as soon as the title is set.