I've started using Wheelnav.js. Currently my Wheel is toogled on/off with pressing and releasing X. I also got some hover effects, my Problem is that my NavItems are Clickable.. if i click a item it is "selected" and i cant hover over it anymore.
https://gyazo.com/29f73fd2fb0f8bbf1f634931686c3ec6
In this example i clicked on Item1
You have to set the selected property to false and refresh the wheel.
window.onload = function () {
wheel = new wheelnav("wheelDiv");
wheel.createWheel();
wheel.animateFinishFunction = disableSelected;
};
var disableSelected = function () {
for (var i = 0; i < this.navItemCount; i++) {
if (this.navItems[i].selected) {
this.navItems[i].selected = false;
this.navItems[i].refreshNavItem(true);
}
}
}
Related
I've tried to disable click on the 'Spreader' button. Cant seem to stop it from closing. I have an onmousedown event i want to keep but i don't want to close the spreader. Anyone know the best way to disable click on spreader?
You can set the minPercent property to achieve your needs.
var wheel;
window.onload = function () {
wheel = new wheelnav("wheelDiv");
wheel.spreaderEnable = true;
wheel.createWheel(["This", "is", "custom", "spreader"]);
wheel.spreadWheel();
var wheelspreader = document.getElementById("wheelnav-wheelDiv-spreader");
var wheelspreadertitle = document.getElementById("wheelnav-wheelDiv-spreadertitle");
wheelspreader.onmousedown = function() {openSpreader();}
wheelspreadertitle.onmousedown = function() {openSpreader();}
};
var openSpreader = function() {
wheel.minPercent = wheel.maxPercent;
}
Here is a JS Bin for that.
Hi I'm creating a basic game and I need the most simple "PAUSE" menu in the world!!! I am using this:
pauseButton = this.game.add.sprite(10, 10, 'pauseButton');
pauseButton.inputEnabled = true;
pauseButton.events.onInputUp.add(function () {this.game.paused = true;},this);
game.input.onDown.add(function () {if(this.game.paused)this.game.paused = false;},this);
pauseButton.fixedToCamera = true;
I just want to see "Game Paused" when the pause button is pressed that's all! please just tell me the most simple code that will display "game paused" when i click on pause.
Thank you in advance!
Something along the lines of this:
var text;
var pauseButton = this.game.add.sprite(10, 10, 'pauseButton');
pauseButton.inputEnabled = true;
pauseButton.events.onInputUp.add(function () {
this.game.paused = true;
var style = {fill : '#FFF'};
text = game.add.text(game.width * 0.5, game.height * 0.5, "Game Over!", style);
text.anchor.set(0.5, 0.5);
}, this);
game.input.onDown.add(function () {
if (this.game.paused) {
this.game.paused = false;
text.destroy();
}
}, this);
pauseButton.fixedToCamera = true;
Added it right in your code, you may want to adjust what is a local variable and what is a field. You can include text properties in the style variable or you can set them later on via text.font, text.fontSize and so on, see the API documentation.
I am creating a simple app using Sencha Touch where I'm dynamically creating container with textfields, textareafields etc. when the user needs to add new container with components. The problem now is when the clear icon on the textareafield is tapped it clears the text, but I would like to know which textareafield has been cleared. Can anyone help me in this please?
This is how I created container .
var childObj2 = {};
childObj2.xtype = 'container';
var type = 'vbox';
var layout = {}
layout.type = type;
childObj1.layout = layout;
var txtarea= {};
txtarea.xtype = 'textareafield';
txtarea.id = "txt51";
txtarea.flex = 3;
txtarea.maxRows = 7;
txtarea.placeHolder = 'Type here';
txtarea.value = value['notes'];
txtarea.inputCls = 'txtareaStyle'
txtarea.clearicontap = "clearText";
How to add clearicontap listener to this?
When you you create a textfield simply add a listener to it for the clearicontap event and that callback will get executed for each of the fields.
For example:
var container = Ext.create('Ext.Container', {});
for (var i=1; i<=3; i++) {
var field = Ext.create('Ext.field.Text', {
id: 'textfieldnumber' + i,
listeners: {
clearicontap: function() {
alert("Tapped clear icon on text field number: " + i + "!");
}
}
});
container.add(field);
}
[EDIT]
I answer the question you make after your edit:
I am using the standard way of creating Sencha components through Ext.create(), and I would suggest you to switch to the same way. It is not clear by the code you posted how those Javascript objects are actually transformed into Ext components. Anyway, they are very likely components configurations, so I guess you could try:
txtarea.listeners = {
clearicontap: function() {
alert("Tapped clear icon on text field");
}
}
I am reading through titanium best practises and i was wondering why this doesnt appear to work can some one tell me whats changed with the api?
https://wiki.appcelerator.org/display/guides/Mobile+Best+Practices
ui/ToggleBox.js - A custom check box
function ToggleBox(onChange) {
this.view = Ti.UI.createView({backgroundColor:'red',height:50,width:50});
//private instance variable
var active = false;
//public instance functions to update internal state, execute events
this.setActive = function(_active) {
active = _active;
this.view.backgroundColor = (active) ? 'green' : 'red';
onChange.call(instance);
};
this.isActive = function() {
return active;
};
//set up behavior for component
this.view.addEventListener('click', function() {
this.setActive(!active);
});
}
exports.ToggleBox = ToggleBox;
Sample usage in app.js
var win = Ti.UI.createWindow({backgroundColor:'white'});
var ToggleBox = require('ui/ToggleBox').ToggleBox;
var tb = new ToggleBox(function() {
alert('The check box is currently: '+this.isActive());
});
tb.view.top = 50;
tb.view.left = 100;
win.add(tb.view);
it doesn't seem to want to return the setActive method when called from the add event listener?
The "this" in your click listener isn't what you're expecting it to be. (It's probably the view.) Because your function is already the ToggleBox context, the easiest solution is to just use a direct reference to setActive. "this." is only necessary for the API you're exposing for other code.
function ToggleBox(onChange) {
var view = this.view = Ti.UI.createView({backgroundColor:'red',height:50,width:50});
//private instance variable
var active = false;
//public instance functions to update internal state, execute events
var setActive = this.setActive = function(_active) {
active = _active;
view.backgroundColor = (active) ? 'green' : 'red';
onChange.call(instance);
};
var isActive = this.isActive = function() {
return active;
};
//set up behavior for component
view.addEventListener('click', function() {
setActive(!active);
});
}
exports.ToggleBox = ToggleBox;
I have a little problem / question. I work on a little WYSIWYG editor. I use a div with the option contentEditable="true" and I would like to know when there is a click on a button which element in my div is modifying by the user.
For example if there is 3 paragraphs on the the div, and that user modifies the second, I would like to know when he clicks on a button that he is currently to modify the second paragraph to show the text content ! In this example "P2" :
<div contenteditable="true"><p>P1</p><p>P2</p><p>P3</p></div>
Thanks in advance for your help.
Nicolas
You could examine the selection in the mousedown event of the button. The following will work in all major browsers:
function getSelectionBoundaryContainerElement(start) {
var container = null;
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0);
range.collapse(start);
container = range.startContainer;
if (container.nodeType != 1) {
container = container.parentNode;
}
}
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
var textRange = document.selection.createRange();
textRange.collapse(start);
container = textRange.parentElement();
}
return container;
}
document.getElementById("yourButtonId").onmousedown = function() {
alert(getSelectionBoundaryContainerElement().innerHTML);
}