I have MXML s:View component that consists of action bar and 3 custom components that are 100% application width. I added a scroller like so:
section = new VGroup();
var scroller:Scroller = new Scroller();
scroller.percentHeight = 100;
scroller.viewport = section;
What happens is that I get both vertical and horizontal scroll bars. I want to remove the horizontal scrollbar. The horizontal scrollbar appears to be barely wider than the width of the application. As far as I see my content does not exceed application width.
How can I get rid of the horizontal scroll bar?
All you should have to do is set the horizontalScrollPolicy style to ScrollPolicy.OFF:
In Actionscript, you set styles using the setStyle() method:
section = new VGroup();
var scroller:Scroller = new Scroller();
scroller.percentHeight = 100;
scroller.viewport = section;
scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
In MXML, you just pass in a string that the ScrollPolicy class defines:
<s:Scroller horizontalScrollPolicy="off">
<s:VGroup>
</s:VGroup>
</s:Scroller>
Related
I have created a ScrollPane but there is no bar to scroll with (like the one on the side of your browser) you have to drag with your mouse. How can I get a scroll bar?
What I did to add a scrollbar was use libgdx's ScrollPane.ScrollPaneStyle to set the scroll bar as a ninepatch.
ScrollPane.ScrollPaneStyle scrollStyle;
/...
scrollTexture = new Texture(Gdx.files.internal("Scroll9.png"));
scrollNine = new NinePatch(new TextureRegion(scrollTexture,6,6),2,2,2,2);
then I created the vertical scroll knob
scrollStyle = new ScrollPane.ScrollPaneStyle();
scrollStyle.vScrollKnob = new NinePatchDrawable(box);
and applied the style to my scrollable table
scroll = new ScrollPane(test, scrollStyle);
source:
http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/ScrollPane.ScrollPaneStyle.html
The bar is enabled via the skin:
Skin skin = new Skin(Gdx.files.internal("data/uiskin.json"));
ScrollPane scrollPane=new ScrollPane(resultsTextArea, skin);
I tried. It works now...
This is untested!
It seems that using the following enables scrollbars for a scrollpane.
boolean enable_x = true;
boolean enable_y = true;
scrollpane.setForceScroll(enable_x,enable_y);
source: http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/ScrollPane.html
I'm working on a project for my UI design class and need help fixing an element to the top of a page on scroll.
Here's what I have so far: http://ieatthings.com/opinio/query.html
As you scroll, the search bar should move up, over the navbar, and fit nicely into place to let the user search while in the middle of a page. But the problem is that the search bar keeps going up!
I used the Javascript from this tutorial: Fix object to top of browser window when scrolling. I have tried all kinds of possibilities and combinations, but have unfortunately not gotten this damn thing to work.
Any suggestions?
You will have to use Javascript to test the position of your element ("myElement") on the page compared to how far the page has been scrolled. If the page has been scrolled up beyond your element then you alter your element's css to snap it to the top of the page. Note: mobile browsers don't like the "position: fixed;" style property.
Give your element the id of "myElement" and insert this into your tag.
<script type="text/javascript">
var yPosition; // save original y position of element here
window.onload = function(){ // once entire page is loaded this function is fired
// save original y position of element before it is scrolled
yPosition = document.getElementById("myElement").offsetTop;
}
window.onscroll = function(){ // scrolling fires this function
var myElement = document.getElementById("myElement"); // for cleaner code
// compare original y position of element to y position of page
if( yPosition <= window.pageYOffset ){
// snap element to the top by changing css values of element
myElement.style.position = "fixed";
myElement.style.top = "0px";
}else{
// re-position to original flow of content
myElement.style.position = "relative";
myElement.style.top = ""; // set to default
}
}
</script>
Hopefully this helps!
I am working on a Flex mobile Application and I am using s:List defined in actionscript component with MXML renderer.
In my sView:
var movieList:List = new List();
private function created(event:FlexEvent):void
{
movieList.itemRenderer = new ClassFactory(MovieRenderer);
movieList.dataProvider = new ArrayList();
movieList.useVirtualLayout = false;
movieList.pageScrollingEnabled = true; // if this is omitted scroll bar is invisible
this.addElement(movieList);
}
After HTTPService call is returned:
private function movieDataReady(event:events.ExternalDataEvent):void{
movieList.dataProvider.addItem(event.result);
}
Each event.result item is a custom Object.
The issue is that the scroller seems to be the full height of the list as opposed to the view/screen. This renders it useless as you cannot scroll. If you try it does scroll but goes back as soon as you release. Scroller seems to be about the height of the combined height of all list items.
I had it working before but I made some changes and can't figure out what I am missing this time.
I have an issue where using MXML, the height and width properties of myBox is correctly acquired but using ActionScript the correct height and width acquired is not correct.
my:Tab extends NavigatorContent (This is NOT the tab in a Tab Bar)
com:myBox extends BorderContainer.
<mx:ViewStack id="viewstack_main" width="100%" height="100%" creationPolicy="all">
<my:Tab label="My Tab">
<s:Scroller height="100%" width="100%">
<s:Group height="100%" width="100%">
<com:myBox>
</com:myBox>
</s:Group>
</s:Scroller>
</my:Tab>
</mx:ViewStack>
In the constructor of myBox I set the percentWidth and percentHeight to both 100.
In the creationComplete event of the same myBox, I need to access the height and width.
This works all ok with the MXML.
However using ActionScript I need to add another tab.
var navContainer:Tab = new Tab();
viewstack_main.addElement(navContainer);
var scroller:Scroller = new Scroller();
scroller.percentHeight = 100;
scroller.percentWidth = 100;
navContainer.addElement(scroller);
var grp:Group = new Group();
grp.percentHeight = 100;
grp.percentWidth = 100;
scroller.viewport = grp;
var box:myBox = new myBox();
grp.addElement(box);
But unfortunately, in the creationComplete event of box, the height and width properties are NOT what is expected (the height & width after setting 100%). It is 112.
Any ideas as to why this works with MXML but NOT ActionScript?
Referring to initialization sequence in Flex in the moment when your box is initialized with creationComplete parent components are still not fully initialized. In your situation it is better to override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void and use real size from there.
The answer was simple. All I had to do was call validateSize(false) before requesting for the height and width.
I'm using the last Flex 4 sdk Hero.
i setup a classic List component with InteractionMode="Touch". Thus, my vertical scroll bar is not visible until i drag the list ,which is normal.
My customer ask me to add some "page down" button on the list. I've done it as follow, which work perfectly :
private function handleDownButton(event:*):void {
var currentPosition:Number = wcList.scroller.viewport.verticalScrollPosition;
var nextPosition:Number = currentPosition+((wcList.dataGroup.layout) as VerticalLayout).getVerticalScrollPositionDelta(NavigationUnit.PAGE_DOWN);
var anim:Animate = new Animate(wcList.scroller.viewport);
anim.motionPaths = new <MotionPath>[
new MotionPath("verticalScrollPosition")];
anim.motionPaths[0].keyframes = new <Keyframe>[
new Keyframe(0), new Keyframe(500, nextPosition)];
anim.play();
if ((nextPosition+wcList.height)>=wcList.scroller.viewport.contentHeight) {
buttonDown.enabled=false;
}
buttonUp.enabled = true;
}
My big problem is that my customer also want the vertical scroll bar to be visible during the animation, but i can't find a solution for this (wcList.scroller.verticalScrollBar.visible = true don't work at all).
Any idea of how doing this?
Thanks.
A hack that might work for you...
http://flexponential.com/2011/06/21/using-drag-and-drop-with-a-spark-list-in-a-mobile-flex-application/