My donut chart works excellent I am using the wheel nav but I can't seem to find anywhere in the docs info on onmousedown for the spreader. When the spreader is in I'd like to add a pop up on mousedown. Any ideas?
I tried to use an on clock method but that didn't seem to work. Great library but very little info on how to manipulate it without changing the entire source.
You can achieve your needs via onmouseup event:
var wheel = new wheelnav("wheelDiv");
wheel.spreaderEnable = true;
wheel.createWheel(["This", "is", "custom", "spreader"]);
var wheelspreader = document.getElementById("wheelnav-wheelDiv-spreader");
var wheelspreadertitle = document.getElementById("wheelnav-wheelDiv-spreadertitle");
wheelspreader.onmouseup = function() {alert("spread it!");}
wheelspreadertitle.onmouseup = function() {alert("spread it!");}
Here is a JS Bin sample.
Related
I'm using dojo toolkit dijit.layout.TabContainer to switch 3 tabbed pages.
Right now I click on tabs to switch them, but I want to switch them by mouse over instead.
Can a TabContainer be configured to switch by mouse over, or should I write a code to handle mouse over events to explicitly switch tabs?
I'd appreciate any suggestions!
-Sari
Yes. For this functionality, we need to add the onmouseover event to the tabs label fields. Add this code inside the dojo/ready (or addOnLoad) function.
require(["dojo/ready","dojo/query"], function(ready,query){
ready(function(){
var tabs = dijit.byId("TabContainerID");
query("#TabContainerID.dijitTabInner").onmouseover(function(evt){
var tablabelid = dijit.getEnclosingWidget(evt.target).id;
var currentId = dijit.byId("TabContainerID").selectedChildWidget;
var tabwidid = tablabelid.split("_").pop();
if(tabwidid && currentId!=tabwidid) {
tabs.selectChild(tabwidid);
}
});
});
});
I can markup a Heading or ListItem to have a moveTo attribute and that transition works perfectly.
Is there a way perform a transition to a named view programmatically say, on a button click?
Somewhere on the net I found below code, but its not working. I need something similar to this -
function moveTo(){
var w = dijit.byId('currentView');
w.performTransition('#newView',1,"fade",null);
}
This code sample registers an onclick event handler on a button with the id "ButtonID". After pressing the button, a lookup in the dijit registry will be performed to find the displayed view.
You can call the function performTransition(...) on any dojox.mobile.View.
require(["dijit/registry"], function(registry) {
dojo.ready(function() {
// Button Listener
registry.byId("ButtonID").on("click", function(){
var oldView = dijit.registry.byId("ID_View1");
oldView.performTransition("ID_View2", 1, "slide", null);
});
});
But:
Changing "moveTo" parameters programmatically is much more difficult than performing transitions between views. You have to do some nasty things to override the moveTo Attribute of a widget like for example a Backbutton in a dojox.mobile.Heading
var heading1 = dijit.registry.byId("ID_Heading");
heading1.destroyDescendants();
heading1.moveTo = viewId;
heading1.backButton = false;
heading1._setBackAttr("Zurück");
I just started using Leaflet and Marker Clusterer to organize the markers.
Problem #1: When an unclustered marker is clicked, no popup appears.
Problem #2: When a cluster is clicked several times, all the markers within that cluster appears, and when one of this marker is clicked, its popup appears! However, after closing the popup by clicking on the map, clicking on any of these clustered markers do not open any popups!
If I only have 3 unclustered markers, the popup works fine. However, as more markers are added, once a cluster forms, clicking on the marker within any cluster will not cause the popup to open!
Initializing markerclusterer
markers = new L.MarkerClusterGroup();
map.addLayer(markers);
All markers added to markercluster markers
A loop calls on the render function to create the marker and add it to the markerclusterer's array markers. (ignore the backbone.js code)
ListingMarkerView = Backbone.View.extend({
template: _.template( $('#tpl_ListingMarkerView').html() ),
render: function() {
// Create marker
var content = this.template( this.model.toJSON() );
var marker = new L.marker(
[this.model.get('lat'), this.model.get('lng')],
{content: content});
marker.bindPopup(content);
// Add to markerclusterer
markers.addLayer(marker);
}
});
Without markerclusterer
If I add the marker directly to map instead of the markerclusterer array markers, the popups work fine, so I guess the problem has something to do with markerclusterer.
Did I do something wrong that resulted in such behavior of the popups? All help appreciated, thanks!
From what little I know of the cluster marker group, you should do this:
var markerGroup = new L.MarkerClusterGroup();
markerGroup.on('click', function(ev) {
// Current marker is ev.layer
// Do stuff
});
To add an event handler to the cluster layer instead, do this:
markerGroup.on('clusterclick', function(ev) {
// Current cluster is ev.layer
// Child markers for this cluster are a.layer.getAllChildMarkers()
// Do stuff
});
Oh, and read the github README carefully, it's all in there...
Make sure you have the right versions of everything in your Leaflet + Clusterer stack (Js and Css). Compare against the examples in the Clusterer Github repo.
I'm new with Appcelerator and I encountered an annoying problem regarding layout.
I have to do a menu bar that is very easy to do with plain html (ul>li>a and that's all). The problem is that it seems that all button-related functions are not... customizable. I want buttons to be displayed as plain text, not buttons.
The first thought was to use labels (instead of buttons). But... Is this a right way? I need a menu bar, not a text paragraph! Besides that, the menu is somehow flexible, not like labels.
This is one (of many!) things i tried:
var menu_color = Titanium.UI.createButton({
title:Ti.Locale.getString("menu_color") || "Color",
height:24,
top:10
});
I also added borderWidth:0 (no effect) and backgroundColor:none/transparent with no luck.
Help? :)
I usually use views when I need to create what you described above.
For example:
I use a view with a vertical layout, then add my child views. The child views then have listeners for the click or whatever event.
This allows you to have more control over the formatting. A side effect of this is you will need to create your own "press" ui cue in some cases.
var demo = {win : Ti.UI.currentWindow};
(function(){
//Create the container view
demo.vwMain = Ti.UI.createView({height:100, layout:'vertical', backgroundColor:'yellow'});
demo.win.add(demo.vwMain);
demo.fakebutton1 = Ti.UI.createView({height:40, backgroundColor:'blue',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton1);
demo.fakebutton2 = Ti.UI.createView({top:5,height:40, backgroundColor:'green',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton2);
demo.fakebutton1.addEventListener('click', function(e) {
alert('Clicked fake button 1');
});
demo.fakebutton2.addEventListener('click', function(e) {
alert('Clicked fake button 2');
});
})();
create a view with layout property is set to vertical and add label or button which you want.View is like in HTML.Hope you understand.
I'm a complete newbie at Dojo, and Adobe AIR, which is my target. I'm
trying to put some panes into an AccordionContainer like so:
var mainview = dijit.byId("mainview");
var rand = randomString();
var widg = gtd_create_entry_widget(rand)
air.trace(mainview);
air.trace(widg);
mainview.addChild(widg);
"mainview" is my AccordionContainer, and gtd_create_entry_widget() is:
function gtd_create_entry_widget(id) {
var entry = new dijit.layout.ContentPane();
entry.attr("id",id);
entry.attr("title","title "+id);
return entry;
}
The pane shows up in the container, with the correct id and title, and
no errors, however, if I try to add another pane, the next one shows
up too, but I get the error:
TypeError: Result of expression '_7' [undefined] is not an object.
I get the same error if I run
var mainview = dijit.byId("mainview");
mainview.destroyDescendants();
and also, only one pane is destroyed at a time, and I understand this
method should destroy all the children.
I can include full project code if required.
Thanks a lot
Garry
I'm not exactly sure if this is going to fix your problem, but you're supposed to use dijit.layout.AccordianPane (http://www.dojotoolkit.org/api/dijit/layout/AccordionPane.html) with the AccordianContainer.