In flex, I am using the following code:
mx:HBox id="box1" mouseOver="onBox('box1')" mouseOut="outofBox('box1')"
// adding label
// closing HBox
onBox adds an image as child of box1:
var crossImage:Image = new Image();
crossImage.source = "cross.png";
crossImage.id = "cross";
box1.addChild(crossImage);
and outofBox removes them.
I believe that image is child of HBox so mouseOut should not be triggered when I hover the mouse over image. But, the moment I hover my mouse pointer over image, mouseOut is triggered. Why is it so?
Set the mouseChildren property of the container to false
Related
To change the stylesheet to a dark one in my code I execute in Scene :
getStylesheets().add(FxFrame.class.getResource("/css/dark.css").toExternalForm())
This works fine.
I also have a canvas where some colors are configured using:
final StyleablePropertyFactory<FxDrawCanvas> FACTORY = new StyleablePropertyFactory<FxDrawCanvas>(FxDrawCanvas.getClassCssMetaData());
StyleableProperty<Color> calloutBackground1Color = FACTORY.createStyleableColorProperty(FxDrawCanvas.this, "callout-background1-color", "callout-background1-color", s -> s.calloutBackground1Color, Color.web("0xffffff" ));
The canvas should be repainted when the stylesheet css gets changed. How may I make the canvas aware of scene css change ?
Is possible to listen on css stylesheet changes in the canvas ?
Or fire any event in the scene which the canvas can intercept ?
I have three divs which i set float:left side by side.
In all these three divs, i have one textbox, one checkbox and one button. I have set checkbox set to visible = false initially. On click of button i am setting the checkbox visibility to true. by doing this div position gets adjust to left and causing layout problem. How can i set div style to avoid this layout displacement problem.I want there should not be any control displacement while show and hiding the checkbox I am newbie in css.
Here is my fiddle link Link
How about using the css property visibility? The visibility attribute allows the element to be hidden, but leaves the space where it would have been. For more information about it, read here.
DEMO: http://jsfiddle.net/Lppme028/22/
CSS
#txt
{
visibility: hidden;
}
JavaScript
$(document).ready(function () {
$("#btn").click(function (){
$("#txt").visibilityToggle();
})
});
jQuery.fn.visibilityToggle = function() {
return this.css('visibility', function(i, visibility) {
return (visibility == 'visible') ? 'hidden' : 'visible';
});
};
Hello i'm working on a project that requires canvas manipulation. I need to draw an image and have to move it within the canvas. Which was not so hard to accomplish.. However i need to change my cursor into "move" when hovering the image like
img{
cursor:move;
}
I couldn't find any way to do this. Any suggestion??
Thanks in advance..
When you drag an Kinetic.Image, you get dragstart and dragend events.
You can change the cursor type in those event handlers:
// starting to drag -- display the move cursor
image1.on('dragstart', function () {
document.body.style.cursor = 'move';
});
// done dragging -- display the regular cursor
image1.on('dragend', function () {
document.body.style.cursor = 'default';
});
Basically you need an element which you can style on the page but with display: none, then put that element onto the canvas like this:
var image = document.getElementById('image');
context.drawImage(image, 0, 0);
I have a modal QDialog, that on the click of a button slides a modeless child QDialog out from underneath it. The problem I have is that the child stays on top of its parent during the animation.
I think I could get away with applying a mask over the portion of the child that overlaps the parent, but it feels like I'm missing a more obvious way of just placing the child under the parent.
I'm using Qt 4.5. Here's some sample code:
void MainWindow::on_myMenu_triggered()
{
parentDlg = new QDialog(this);
parentDlg->setFixedSize(250, 250);
parentDlg->setModal(true);
parentDlg->show();
childDlg = new QDialog(parentDlg);
childDlg->setFixedSize(150, 150);
childDlg->show();
QTimeLine* timeLine = new QTimeLine(1000, this);
connect(timeLine, SIGNAL(valueChanged(qreal)), this, SLOT(childDlgStepChanged(qreal)));
timeLine->start();
}
void MainWindow::childDlgStepChanged(qreal)
{
int parentX = parentDlg->frameGeometry().x();
int parentY = parentDlg->geometry().y();
// Move the child dialog to the left of its parent.
childDlg->move(parentX - 150 * step, parentY);
}
Thanks in advance.
Child widgets are always rendered over the parent so you would have to break that relationship in order to achieve the affect you are looking for directly. Then you could use raise() or lower() if both dialogs had the same parent.
I want to use javascript to detect the mouse position once the mousedown event has fired. It appears I am not getting an onmousemove event when the left button is held down. The cursor is changing to some circle with a cross through it.
My whole goal is to detect the start position of the cursor on mousedown and change the top left style of a image in a div with overflow set (kind of fake pan effect).
Thanks
Set up an ondragstart handler:
function dragstart(ev)
{
if (!ev) ev = window.event;
ev.returnValue = false;
return false;
}
image.ondragstart = dragstart;