I've really strange behavior and I spent a couple of days to try to figure out what is a problem.
MooTools methods makes my input fields not clickable, and I don't know why.
$$('.class1.class2').makeResizable({
});
Above piece of code needs to make all children of div which has class 'class1' & 'class2' to be re-sizable, and that works perfectly but beside that it also makes input fields not clickable.
Does anybody had the similar problem?
Any kind of help will be appreciate.
Thanks
so the problem is that you have no handle passed in. when you fail to do that, the whole element becomes a listener for mousedown and attempts to click into any child element will not bubble correctly, resulting in weird behaviour.
I also found a bug in the logic for adding handlers, which seems to not evaluate handles correctly
https://github.com/mootools/mootools-more/blob/master/Source/Drag/Drag.js#L66 is wrong on many levels - it expects a collection / array of elements but looks in the global document and not child elements - yet it ends up picking element anyway and ignores passed collections like $$('.class1 .resizer')
i did a small change to accept a string for a child selector and added a resize handler.
http://jsfiddle.net/pbu5uzho/
you should submit this bug to https://github.com/mootools/mootools-more/issues though i doubt it will get picked up.
$$('.class1').makeResizable({
handle: '.resizer'
});
the change I did to make this work was:
this.handles = this.element.getElements(this.options.handle);
alternatively, you can use something like InteractJS to handle this.
I'm not 100% sure but can you try this one
I think you are missing (,)
$$('.class1,.class2').makeResizable({
});
Related
EDIT2: It seems that the big numbers are created because the movieclip doesnt hold any bipmapdata, but Im yet not sure about it, but my real mistake was that I just forgot "this" infront of one "getBounds" ... project size was to big and I couldnt find the bug =)
EDIT: tried to use seperate containers, for the movieclips, and did all this in the root class ... everything worked fine, when I used seperate containers and attached everything to the charakter class it got screwd up again
OLD:
Hey I am making a game right now and I want to get the bounds of the charakter body.
To understand how I did set the whole thing up I explain the hirarchy.
The class of my flash document is "game.as". "game.as" adds a Child of the class Charakter
my Charakterclass has a Movieclip for every body part, for example the "head"
every bodypart has a movieclip which contains the picture of the bodypart, in this case "head".
When I now try to use the getBounds(head.mc) inside the "head" class I get really weird results. ussualy something around x=64001, y=64001, width = 0, height = 0;
I found a way how to solve this problem by simply using the getBounds(head.mc) function not inside the head, but inside the Charakter class .... but this is not what I actually want to do, I would like to use the getBounds(head.mc) function inside the head class.
Any ideas why the results are so weird or what I have to do? Im very thankfull for every opinion, because this doesnt seem logical to me xD
getBounds() is inaccurate. Please read the following posts to understand the issue.
getBounds "wrong" results (Source)
When getting bounds of an object relative to it's OWN coordinate system,
those values will NOT be scaled.
getBounds() returning incorrect height (Source)
From inside head_mc, try getBounds(this.parent); (you may want to test to see if the parent exists first) - this should give you the bounds of your head_mc as its container sees it, which I think is what you want, but called from inside head_mc, as you request.
bitmapdata is right, though - getBounds() can sometimes give some odd results. It looks to me like you might be asking the question before you add head_mc to the stage, and are therefore getting the undefined values for width/height/x/y.
Ok since I'm not good with css, I am using a free css template and somewhere I messed up, because now the textfields isnt displaying an initial value.
I tested a plain textfield everywhere on the page and the value isnt showing however when I created a new html file, linked the css and created a textfield it displays the value.
Can you please point out what's causing this and how i can fix it, or explain how i can override what's causing this?
TEXTAREAs do not use the value attribute. They display what is contained between the opening and closing tags.
E.g.,
<textarea name="comment">I really like this article!</textarea>
You Can use jquery selector and val() to init value.
Just like $("[name=pageDescribe]").val("here a value");
Hopefully a quick question here. I have setup a "LayoutPage" custom class (based on MovieClip) and I am attemptimg to create a "selected" behaviour.
When I assign my "addEventListener(MouseEvent.CLICK,toggleSelection)" from within my custom class, everything works as expected, clicking any object of that class does display the correct behaviour.
Now, I would like to extend the functionality by adding keyboard modifyer to either extend the selection or replace it.
For this, I thought of moving the "addEventListener" out of the class and put it inside the parent instead (my "PageLayout" class where all the "LayoutPage" live). But by doing so, the click event no longer register on the "LayoutPage" class but rather on its individual children (Page icon, Page number text field, Page Highlight shape, etc.)
Can anybody explain why this is happening and how I can circumvent it?
TIA
This should be happening no matter where you put your addEventListener. It is because mouseChildren is switched on by default. It is probably best to turn it off inside your LayoutPage class like so:
myLayoutPage.mouseChildren = false;
The actual issue is that use are probably using currentTarget to reference the item that was clicked on in your event handler method. Take a look at the descriptions for currentTarget and target to get a good idea of how they differ.
A good option would be to add your listener at the PageLayout level, but add it specifically to each LayoutPage child like so:
myLayoutPage.addEventListener(MouseEvent.CLICK, toggleSelection);
This way you can just use target in your handlers. But it would probably be best to still switch mouseChildren to false on each of your LayoutPage instances.
I have a DataGrid populated via an Array. The last column in the DataGrid uses an ItemRenderer (Button). I want to show the Button in certain rows but not in others (leave those empty). I've looked everywhere for an example or even a clue how to do this (tried labelFunction on DG, etc.) but can't find anything about it. Any help would be appreciated. Thanks!
Okay... with (lots of) help, figured it out.
First off, I'm not sure why the itemRenderer requires a container but it does. The array must also be checked from the itemRenderer and not from the main application... again, I don't know why since the debugger shows it going through the exact same loop/events, etc.).
If interested here's the relevant parts of the code:
Main App:---
{col1:'', col2:'', col3:'', col4:'', col5:'', col6:'', col7: '', col8:'', col9:'', col10:'', col11:'yo'}];
public function initData():void
{ xferSchedule.dataProvider = schedArray; }
]]>
an item renderer does not have to be a container, it has to implement IDataRenderer (a Button does not). One could extend Button and implement this interface to get a simple button renderer. If you want it to display conditionally, you will accomplish this by handling those conditions within the renderer based on the data.
Now this might get slightly complex. I would recommend you to define you an XML instead of Array of Objects. If the node has the type property button, then it would create button at that cell whose value type is button.
How to create a button dynamically inside a grid which is yet again dynamic?
This might end into the whole component being dynamic.
I'd like to conditionally hide a tab in a TabNavigator. It seems that setting visible doesn't work properly (presumably because this is how the TabNavigator hides the tabs that aren't currently selected).
What's the right way to do this?
You can do this by making use of TabNavigator's getTabAt() method which returns the Button that makes up the visual tab. You can then set that Button's visible property. It's a little tricky to get this setup with a bindings, but it's doable.
You could also consider just disabling the tab instead, which you can do by setting enabled on the corresponding TabNavigator child (for which visible didn't work).
What do you mean by hide? If you actually mean remove, then just take your array that's bound to the data in the TabNavigator, and remove the applicable element from it.
If you want to just have them removed temporarily, create a component of your own that encapsulates the TabNavigator and has an array of removed tabs and an array of actual tabs. Then handle this as you see fit.
You might want to check out the flexlib project. They have a component called SuperTabNavigator that adds a lot of functionality to the base Flex TabNavigator, including hiding tabs (I think).
If you do have to create your own component, though, it's a bit more tricky. The thing to know is that "tabs" are actually specially styled buttons, contained within a TabBar component (the TabBar is then contained within the TabNavigator). What you'll have to do then, is subclass TabNavigator and have some property on your views (i.e. the canvases, etc. that are added to the TabNavigator) that is bound to the visible and includeInLayout properties of the TabBar buttons.
In essence, what you'll have is something like:
BindingUtils.bindProperty( tabButton, "visible", view, "someProperty" );
BindingUtils.bindProperty( tabButton, "includeInLayout", view, "someProperty" );
I don't know about TabNavigator, but in other containers, you can set the includeInLayout property to false and it will be ignored. You probably still need to combine it with visible.
var secondTab = tabNavigator.removeChildAt(0);