I have a drop-down/multi-level CSS menu on a page. The menu however doesn't appear over a flash chart I have. The apparent fix seems to be to put wmode:transparent (or opaque), but that doesn't work for me. I have also tried setting the z-level in the CSS to very high values (2000) but that doesn't work either.
In addition, I'm using open-flash-chart-v2 to generate the chart. (though I don't think it matters, but it limits my ability to pass variables as I'm not using the embed or object tag directly).
<script type="text/javascript">
swfobject.embedSWF("/ofc-library/open-flash-chart.swf", "chart", "100%", "100%", "9.0.0", "expressInstall.swf", {"wmode" : "transparent"});
</script>
Page showing problem (This doesn't currently show the z-index attempt to fix.)
The wmode tag has not been set correctly.
Here is the correct code:
<object width="100%" height="100%" style="visibility: visible;" id="chart" data="/ofc-library/open-flash-chart.swf" type="application/x-shockwave-flash"><param value="transparent" name="wmode"/></object>
Here is your code:
<object width="100%" height="100%" type="application/x-shockwave-flash" data="/ofc-library/open-flash-chart.swf" id="chart" style="visibility: visible;"><param name="flashvars" value="wmode=transparent"/></object>
Specifically:
<param name="flashvars" value="wmode=transparent"/>
should be:
<param value="transparent" name="wmode"/>
Here is how to do it correctly (note the empty hash before the params. wmode is a param not a flashvar):
swfobject.embedSWF("/ofc-library/open-flash-chart.swf", "chart", "100%", "100%", "9.0.0", "expressInstall.swf", {}, {"wmode" : "transparent"})
Because you are using swfObject, try this:
var so = new SWFObject("/ofc-library/open-flash-chart.swf", "chart", "100%", "100%", "9.0.0", "expressInstall.swf");
so.addParam("wmode", "transparent");
so.write("flashcontent");
Related
Here is my code for tabbed bar:
<Alloy>
<Window class="container">
<Label id="label" onClick="doClick">Hello, World</Label>
<TabbedBar id="bb1" platform="ios" backgroundColor="#369" top="50" height="25" width="200">
<!-- The Labels tag sets the TabbedBar.labels property. -->
<Labels>
<!-- Specify text with node text or the title attribute. -->
<!-- Can also specify the enabled, image and width attributes. -->
<Label>One</Label>
<Label>Two</Label>
<Label>Three</Label>
</Labels>
<!-- Place additional views for the TabbedBar here. -->
<Views>
<View backgroundColor='red'>1</View>
<View>2</View>
<View><Label>Does this work!</Label></View>
</Views>
</TabbedBar>
</Window>
</Alloy>
When I click on a tab, how can I make sure that the view corresponds to the button pressed - I know how to do this in titanium but not alloy.
Cheers.
I had the same problem yesterday. I'm sure there must be a better way but I couldn't see anything in the documentation, this was my solution:
var animation = require('alloy/animation');
var previousIndex = $.tabbedBar.getIndex();
$.tabbedBar.addEventListener('click', function(){
var currentIndex = $.tabbedBar.getIndex();
var viewArr = [];
viewArr[0] = $.view1;
viewArr[1] = $.view2;
viewArr[2] = $.view3;
animation.crossFade(viewArr[previousIndex], viewArr[currentIndex], 700)
previousIndex = currentIndex;
});
EDIT:
(In case you don't know, on Android there's a module to give you similar functionality: https://github.com/ricardoalcocer/viewpager but check issue #5 on the original repo as you'll have to incorporate that into any build. On the Android version, you don't need to handle the clicks yourself.)
I have this control, mx:Text, and I want to assign its htmlText member w/something like:
<div class="style_header">This text will have, say, Courier as its font</div>
<div class="style_body">And this one will be, oh I dunno, cuneiform</div>
Then, in the AS I had:
var oCSSHeader:CSSStyleDeclaration = new CSSStyleDeclaration;
var oCSSBody:CSSStyleDeclaration = new CSSStyleDeclaration;
oCSSHeader.setStyle('font-size', '12');
oCSSHeader.setStyle('font-family', 'Courier');
oCSSBody.setStyle('font-size', '14');
oCSSBody.setStyle('font-family', 'Cuneiform');
StyleManager.setStyleDeclaration('.style_header', oCSSHeader, true);
StyleManager.setStyleDeclaration('.style_body', oCSSBody, true);
Whatever I set the sizes and families to, both sets of text look exactly the same. I looked at examples and realized that you probably have to set an entire control to one style name. Which means
<mx:Text id="messageText" width="100%" styleName="style_header" />
should have worked, but it didn't! So what am I doing wrong? I'm not getting any error message or anything. And is it even possible to set different style names w/in one control?
I'm running Flex 3.5
Try Text.styleSheet,
Example:
<fx:Script>
<![CDATA[
private function getHtmlTextStyle():StyleSheet
{
var style:StyleSheet = new StyleSheet();
style.setStyle(".style_header", {fontSize: "12px", fontFamily: 'Courier'});
style.setStyle(".style_body", {fontSize: "14px", fontFamily:"Cuneiform"});
return style;
}
]]>
</fx:Script>
<mx:Text id="messageText" width="100%" styleSheet="{getHtmlTextStyle()}">
<mx:htmlText>
<![CDATA[
<p class="style_header">This text will have, say, Courier as its font</p>
<p class="style_body">And this one will be, oh I dunno, cuneiform</p>
]]>
</mx:htmlText>
</mx:Text>
The Style in Flex application is not doesn't apply to htmlText.
They are actually separated and not much related but just using the same syntax.
Also,
Tags allowed in Text.htmlText are very limited. <div> tag will not work, for example. See the document for more information.
I am using a DividedBox in Flex which contains only a datagrid at first. When I click on an Item on the Datagrid, a second element with a width of 0% (Spark Group) is added to the divided box to display an image.
The thing is, when the second element is added to the DividedBox, the image is partially displayed outside the DividedBox, and I don't want to have this behavior.
Here is the interesting code :
<mx:DividedBox direction="horizontal" id="divider" borderColor="red" borderStyle="solid" borderVisible="true" right="10" left="10" top="10" bottom="10">
<s:Group width="100%" height="100%">
<!--datagrid-->
</s:Group>
</mx:DividedBox>
And here is the piece of code that adds the second child of the dividedBox (simplified code) :
private var _pdf_preview:Group = new Group();
[Bindable]
[Embed(source="assets/image/llama.jpg")]
private var imgClass:Class;
protected function itemOnClickHandler(event:MouseEvent):void
{
_pdf_preview = new Group();
var img:Image = new Image();
img.source = imgClass;
_pdf_preview.addElement(img);
_pdf_preview.percentWidth = 0;
divider.addElement(_pdf_preview);
}
And here is a screen of the problem (Btw, don't notice my skills on Gimp :) ). As a new user I can't bind images to my post : screen showing my problem the red border show the limits of the dividedBox
Thank you.
I hope there are not too much fault, english is not my native language. Sorry for any english mistakes.
PS : I couldn't add the "DividedBox" tags because it was not existing before, and I'm a "new user" so I can't create new tags.
You can use the clipContent property to cut off the image at the edge of the DividedBox:
<mx:DividedBox clipContent="true" />
When using Spark containers, clipAndEnableScrolling is the property you need to achieve the same goal.
I would also like to note that you usually don't require to dynamically add components through ActionScript. You can use 'states' instead. For example:
<s:states>
<s:State name="normal" />
<s:State name="image" />
</s:states>
<mx:DividedBox clipContent="true">
<s:DataGrid />
<s:Image includeIn="image" />
</mx:DividedBox>
Now all you need to do to show the Image, is set the currentState to image.
Do you know any collapsible flex container that can handle dynamic content that works when pre-collapsed?
I tried the CollapsiblePanel component by Arc90 for Flex, but it did not work when pre-collapsed.
If I have a VBox inside the panel, and I set the "collapsed" property of the CollapsiblePanel to true, the size of the CollapsiblePanel cannot be restored. It seems like this is what is happening:
The CollapsiblePanel's collapsed property is pre-set to true in the MXML markup.
The VBox auto-adjusts its height to 0 since the CollapsiblePanel is collapsed.
When the CollapsiblePanel's collapsed property changes to false (i.e., it is expanded by the user), the VBox does not expand itself because its parent's content area is 0.
Therefore the CollapsiblePanel remains at the same height because its content's height is 0.
Therefore...
Note: This occurs only when the CollapsiblePanel is pre-collapsed, as seen in the markup below.
I've already tried this (didn't work):
<containers:CollapsiblePanel minimize="pnl_minimize(event)"
restore="pnl_restore(event)" height="100%" width="100%" collapsed="true">
<mx:VBox width="100%" height="100%" verticalGap="0">
<mx:LinkButton id="lnkSales1" label="Sales 1" />
<mx:LinkButton id="lnkSales2" label="Sales 2" />
</mx:VBox>
</containers:CollapsiblePanel>
private function pnl_restore(event:Event):void
{
var objPanel:CollapsiblePanel = event.target as CollapsiblePanel;
var objChildArray:Array = objPanel.getChildren();
for each (var obj:Object in objChildArray)
{
obj.invalidateSize();
}
objPanel.invalidateSize();
}
Is there anyone who has succeeded in doing something like this? What component did you use?
Finally got a solution, though it's a bit of a workaround. I allow all the panels to be loaded and then collapse them programmatically instead of pre-collapsing them in the markup. This way their size is already computed and can be restored without any issues when the user restores them.
Does anyone have a better solution?
I am having a hard time figuring this out...
How do you scroll an editable TextArea (Flex Hero) on a touch device?
I am referring to the situation where the text does not fit in the TextArea height.
When I try to tap and drag the text gets selected and not scrolled... Am I missing a something here? I am using verticalScrollPolicy = on (also tried auto).
I am testing the code in the Blackberry Playbook simulator (my targeted device for my app).
If you have any hints or suggestions please let me know.
Thanks,
A TextArea is an editable component. You should try using RichText instead if you don't want to edit the text.
Put it in a s:Scroller:
<s:Scroller id="prayerSc" width="100%" height="100%">
<s:RichEditableText id="prayerText" width="100%" height="100%" clipAndEnableScrolling="true" selectable="true" editable="true" textFlow="{PTFL}" />
</s:Scroller>
RichEditableText is not optimized for mobile
Use this instead Orig source
import spark.components.supportClasses.MobileTextField;
private var cnt:int = 0;
protected function addText():void
{
ta.appendText('More text... ' + cnt++ + '\n');
MobileTextField(ta.textDisplay).scrollV++;
}
<s:TextArea id="ta" width="95%" height="200" editable="false"/>