Im trying to change the cursor on differnet actions. Essentially like panning a map.
Default: Standard pointer cursor
Shift Press: Grab Cursor
Shift + Left Click(hold/dragging): Grabbing Cursor
However, this works great until i start to move, which then my cursor jumps back to Grab instead of staying on grabbing. What am I doing wrong?
$(document).keydown(function(event){
//spacebar = 8
if (event.keyCode == 16) {
$('#mysvg').css('cursor', '-webkit-grab');
}
});
$(document).keyup(function(event){
//spacebar = 8
if (event.keyCode == 16) {
$('#mysvg').css('cursor', 'pointer');
}
});
$( "#mysvg" ).mousedown(function(event){
if (event.shiftKey) {
$('#mysvg').css('cursor', '-webkit-grabbing');
}
});
Keydown fires repeatedly in many browsers until you lift the key. I know Chrome and Firefox have this behavior. So your keydown handler is resetting the cursor.
Related
I have a Composable Row that has some click listeners:
val action = { ... }
Row(Modifier.clickable(action) {
IconButton({ /* other, unrelated action */}) {}
Text("This isn't clickable")
Checkbox({ /* something that calls action() on toggle */ })
}
When tabbing through this UI, the focus goes to the IconButton, then the Checkbox, then the Row. I want it to skip the row. I've implemented that by adding to the Row modifier:
val manager = LocalFocusManager.current
Row(Modifier.clickable(action).onFocusChanged {
if (it.isFocused) manager.moveFocus(FocusDirection.Next)
}) { /* same content */ }
... which works when moving forward, but not when moving backward (using Shift-Tab). And of course that's because of the FocusDirection.Next, which should instead be Previous when moving backward. But how do I detect that? The focus event doesn't have a direction property.
Update
I tried doing this by manually detecting if shift is pressed, which feels more like a hack than a solution:
val keys = LocalWindowInfo.current.keyboardModifiers
/* in onFocusChanged */
manager.moveFocus(if (keys.isShiftPressed) FocusDirection.Previous else FocusDirection.Next)
.. and also, it doesn't work. Calling manager.moveFocus(FocusDirection.Previous) if shift is pressed causes an infinite loop and application crash, presumably because it's setting the focus back to where it came from.
My son and I are trying to implement one of the fun-science.org microbit tutorials - building a "tug of war" game. Essentially, 10 presses on button A moves the sprite closer to that button and the same applies on button B. When you hit the edge of the screen, music plays and a message is scrolled on the screen before the game restarts.
We've got it fully working, but once the game has been won, it doesn't seem to reset properly. It works fine on the simulator, but not on the physical device (a microbit 2).
Once the game is won, the behaviour is erratic. It usually puts the sprite back in the middle, sometimes not, but frequently, one button doesn't work in the next game. Occasionally both stop working. In every situation, a restart fixes things.
Is there something wrong with the code? I've wondered whether the music / message is corrupting something and I need to put a wait in for it to complete. I've re-downloaded the hex file and re-flashed the microbit several times, so I think I've eliminated a corrupt code file.
Javascript version of code shown below, but it was actually built in blockly using the Microsoft MakeCode tool.
input.onButtonPressed(Button.A, function () {
sprite.change(LedSpriteProperty.X, -0.1)
})
input.onButtonPressed(Button.B, function () {
sprite.change(LedSpriteProperty.X, 0.1)
})
let sprite: game.LedSprite = null
sprite = game.createSprite(2, 3)
basic.forever(function () {
if (sprite.get(LedSpriteProperty.X) == 0) {
music.startMelody(music.builtInMelody(Melodies.Birthday), MelodyOptions.Once)
basic.showString("liverpool wins")
sprite.set(LedSpriteProperty.X, 2)
} else if (sprite.get(LedSpriteProperty.X) == 4) {
music.startMelody(music.builtInMelody(Melodies.Entertainer), MelodyOptions.Once)
basic.showString("rb leipzig wins")
sprite.set(LedSpriteProperty.X, 2)
}
})
I found it was more reliable if I did game.pause() and game.resume() while scrolling the text and playing the music at the end of the game:
input.onButtonPressed(Button.A, function () {
sprite.change(LedSpriteProperty.X, -0.1)
})
input.onButtonPressed(Button.B, function () {
sprite.change(LedSpriteProperty.X, 0.1)
})
let sprite: game.LedSprite = null
sprite = game.createSprite(2, 3)
basic.forever(function () {
if (sprite.get(LedSpriteProperty.X) == 0) {
game.pause()
music.startMelody(music.builtInMelody(Melodies.Birthday), MelodyOptions.Once)
basic.showString("liverpool wins")
game.resume()
sprite.set(LedSpriteProperty.X, 2)
} else if (sprite.get(LedSpriteProperty.X) == 4) {
game.pause()
music.startMelody(music.builtInMelody(Melodies.Entertainer), MelodyOptions.Once)
basic.showString("rb leipzig wins")
game.resume()
sprite.set(LedSpriteProperty.X, 2)
}
})
You can also take a look at the following version of the game that does not use the game rendering engine https://makecode.microbit.org/projects/tug-of-led to see if that makes a difference.
I have a simple ScrollView (scrolling horizontal) with some items that each have a TouchableOpacity around them.
The onPress-method for them is just a console.log so I can see the output.
So far it works!
But I then have made a setInterval() that on each loop makes a scrollTo({x:xValue, y:0, animated:false}) on the ScrollView that increases the X-value.
This way I get like a Newsticker look and feel and it is scrolling nicely.
But when it runs, the click on each item stop working?!
I guess it has something to do with the time set for setInterval(func, time) because when I increase it to a high value it works (but ofcourse the scrolling is not nice).
So I tried made a loop-method that uses requestAnimationFrame() like below, but still nothing happens when I click on the items:
function loop(func, throttle) {
let running;
let speed = throttle || 0;
function insideLoop() {
if (running !== false) {
requestAnimationFrame(insideLoop);
speed--;
if(speed <= 0){
running = func();
speed = throttle || 0;
}
}
}
insideLoop();
}
Any ideas what I need to do?
I'm using the Tooltip() from Twitter-Bootstrap. When hovered over an element, a tooltip shows up. But it stays there unless you move your mouse away from it.
How can I make it dissapear after a few seconds it popped up, in stead of waiting until mouse moves away from the element?
Bootstrap provides methods for manipulating tooltips such as $('#element').tooltip('hide')
If you add the data-trigger='manual' attribute to your elements, you can control how the tooltip is shown or hidden.
$('.bstooltip').mouseenter(function(){
var that = $(this)
that.tooltip('show');
setTimeout(function(){
that.tooltip('hide');
}, 2000);
});
$('.bstooltip').mouseleave(function(){
$(this).tooltip('hide');
});
Fiddle
If multiple mouseEnter and mouseleave event happen within delay time 'hide' is called multiple times and may be the tooltip closes earlier than expected. Older calls must be discarded.
$('.bstooltip').on('shown.bs.tooltip', function () {
var that = $(this);
var element = that[0];
if(element.myShowTooltipEventNum == null){
element.myShowTooltipEventNum = 0;
}else{
element.myShowTooltipEventNum++;
}
var eventNum = element.myShowTooltipEventNum;
setTimeout(function(){
if(element.myShowTooltipEventNum == eventNum){
that.tooltip('hide');
}
// else skip timeout event
}, 2000);
});
Fiddle
setTimeout would only work once for the first tooltip, we need to use setInterval instead.
This works for me perfectly fine with Bootstrap 4 Tooltips
$(document).ready( function () {
$('[data-toggle="tooltip"]').tooltip();
setInterval(function () {
$('[data-toggle="tooltip"]').tooltip('hide');
}, 2000);
});
The tooltip would appear and disappear after 2 seconds.
Here is simple Answer
$(selector).tooltip({title:"somthing~", trigger:"hover", delay:{hide:800}, placement:"top"});
only give hide parameter in delay option.
it work fine also focus event not click event(I don't know why..)
I have a nestedList with a few levels that appears when the user presses a button on the screen. When the nestedList appears, there is no back button (because we're at the top of the tree, so understandably there is nowhere to go back to), whereas tapping on items in the list takes you to screens with a back button.
I'd like to add a back button to the first screen. I have managed to do this, but not without adding the same back button to every sublist in the nestedList - this has the effect of 1 back button at the top level, and 2 back buttons (one to take you out of the nestledList completely, and one to take you up a level) at every subsequent level.
Can anyone help me figure out how to have 1 back button on each screen, including the top level to close the list?
Many thanks
PS a nasty workaround that I'm using at the moment is to have a "close" button in the top right of every screen instead.
I don't know how comfortable you are with the inner workings of Sencha Touch so how you go about doing this is up to you--
The back button is there, hidden, when the nested list is shown (created in the initComponent function with hidden: true), and then onBackTap, onItemTap and setActivePath will all call syncToolbar near the end of their functions which is where the back button is hidden when you are at a depth of 0.
So there are 2 places you need to do something about, first is initComponent which is easy-- just implement initComponent in your nestedList, call the superclass' initComponent and then set the backButton visible
var myNestedList = new Ext.NestedList({
...,
initComponent: function() {
myNestedList.superclass.initComponent.call(this);
this.backButton.setVisible(true);
},
...
});
That takes care of showing it intially.. how you care to deal with fixing syncToolbar is up to you. You can use Ext.override, you can straight up copy and paste the whole syncToolbar function into your nestedList object which would also override it or you could do what you're told never to do and just edit the sencha-touch.js file directly. However you decide to do it, what you're looking to change is
syncToolbar: function(card) {
...
backToggleMth = (depth !== 0) ? 'show' : 'hide';
if (backBtn) {
backBtn[backToggleMth]();
if (parentNode) {
backBtn.setText(backBtnText);
}
}
... };
You can either change backToggleMth to = 'show' or just delete the if (backBtn {...} all together.
In the Sencha Touch 2.2 I had to use a different code:
Ext.create('Ext.NestedList', {
...,
listeners: {
initialize: function(obj) {
obj.getBackButton().show();
},
back: function(obj, node, lastActiveList, detailCardActive) {
switch(node.getDepth()) {
case 1:
obj.getBackButton().show();
break;
case 0:
alert("wohooooooo!");
break;
}
}
}
}