Floating an element on top in XUL - positioning

I am trying to create an auto-complete suggestion interface in a XUL window.
I have a <textbox> that I am generating suggestions for upon keypress and creating a <box> with the list of suggestions (<label>s). At the moment the <box> is displayed in-line as the next element after the <textbox> but that is pushing the rest of the window's content below the fold (i.e. disappears off-screen).
How can I create a suggestion list (much like StackOverflow uses for tags) that floats over the other content in the window? If that's not possible, a way to resize the window to include the new content or provide scrollbars would do.

A <textbox type="autocomplete"> uses a <panel> to display its suggestions. (Depending on what you need the autocomplete to be able to do, you might find that using an autocomplete textbox is easier than trying to create a custom textbox.)

Related

Is it possible to make text touchable in Libgdx

I am creating a menu screen for my game and instead of creating button there I just have text font. I want to know whether it is possible to to make them touchable.as i have 3 text in main menu so three different function.
I have very little experience making GUIs in LibGDX, and I'm sure this answer is too late anyway, but:
Why not just have a clickable object surrounding the text, and just don't render this?
In other words, do what you'd do normally for a button, just don't render it.

NSSplitView with toolbars

I'm trying to make an application that looks like the Messages app from Apple.
The NSSplitView has toolbars on both subviews of the NSSplitView. They blend in with the top toolbar. It's similar to the NSToolBar but that doesn't work in NSSplitView's. Is there any way to make this work?
I tried the CNSplitView but it doesn't provide the proper effect. Is there another way of doing this that I'm missing?
The interface i'm going for is here:
Instead of using NSToolbar, you can add your own views to the top of subviews in the NSSplitView to achieve this after hiding the existing titlebar.
NSWindow's titleVisibility can be used to hide the built-in titlebar, and by setting the window's styleMask to include NSFullSizeContentViewWindowMask you can cause the split view to take up the full height of the window.
To get the blur effect like toolbars/Messages you can use NSVisualEffectView in the top views. Setting the material NSVisualEffectMaterialTitlebar will give the same look as standard titlebars.
And finally, you can put NSStackViews inside the visual effect views, and then place the titlebar controls in there.
(And depending on the content that is below your fake toolbars, you might want to look into NSScrollView's contentInsets property to allow the scroll view to show all of the content, but still be able to scroll under your toolbar).

Set textarea height to height of text

I want to use a textarea on a form, but I want it to be a single line high when the content is empty (i.e. on a new form), and only resize to the height of the content on the edit form.
I've been playing around with a few css settings but I'm really not skilled with front-end development, can someone point me in the direction of the attributes I need to be setting to make this happen?
Preferably without JS, but that seems to be the only solution of any I've found thus far. It seems messy and slow when you add in multiple textarea's auto resizing on a single form.
You could use this plugin for jQuery: http://www.jacklmoore.com/autosize

Flex: TextArea attached Image

Is there any advance TextArea that can attached image(image is alligned with the text) and the image can be movable inside the text area.I know that text area can support html text and can insert image tag but it is very limited, I can't move the picture inside textArea by dragging it or even add events on it.Is there any approach or solution or suggestion that you can give me?Your help guys is very much appreciated.
It should be possible using the new(ish) TextLayoutFramework (TLF), that came with CS5 and Flash builder 4 http://labs.adobe.com/technologies/textlayout/
It has advanced location information for letter possitions, and also supports inline images more like the way html does.
Also look at the textflow options from this developer: http://guyinthechair.com/tag/flash-text-engine/
Seems like you would only need to add the interaction layer to achieve your desied results and it might be easier to use.
It sounds like you would need to build a custom component for that functionality. Dragging an image around a TextArea is very non-standard behavior.
Flex documentation on custom components
Examples of custom components including a custom TextArea
The solution is TLF (text Layout Framework).
With TLF you can use TLF markup to send formatted text and images to a TextFlow. It's very powerful, but also complex. Here is a list of the tags you can use:
http://blogs.adobe.com/tlf/2009/09/tlf-markup-overview.html
I created a HTML Editor using it, and I'm impress with it. It supports image resizing, drag-n-drop, advanced formatting, etc.
Hope this helps!

color of scrollbars within the page

I need help. My main page has a long table that will typically be approximately 2 screens "tall" (assuming a 1024x768 browser window).
I want
the user to be able to browse that table up and down, while always having a set of control buttons available in the currently visible portion of the page.
AND
to retain control over the color scheme of all elements on the page.
The problem is that both solutions I could think of that address the first point (using an overflown div or a frame) involve scrollbars that I cannot style. (At least on Firefox they will invariably be gray.)
I cannot implement a "pager" which breaks the data on the table into chunks which are served one at a time (eg, having a "next 40 results" link at the bottom). The user needs to refer to the full table to find and compare multiple rows throughout the table.
What are my options? My head hurts when I think of moving this entire page to Flash for this reason...
thanks in advance...
i would use jquery and a scrollable div.
Here are some resources to get you started.
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div
http://flowplayer.org/tools/demos/scrollable/vertical.html
http://logicbox.net/jquery/simplyscroll/vertical.html
Don't change the styling of scrollbars unless you really know what you're doing! However, if you understand the usability implications (and try to make them as user-friendly as possible), try the following options:
If you use jQuery, try jScrollPane.
If you use MooTools, try MooScroll or MooScroller.
The following StackOverflow threads might also be useful:
How do I change the browser's scrollbar colours using CSS?
What's the deal with CSS and scroll bars?
How can one use scroll bar images?

Resources