I want to create a panel/frame that looks like the "History" panel that appears on the left of firefox when you punch in "Ctrl+H". I want my panel to be at the bottom.
I feel I must use panel but there's no function that tells me how to set it to the bottom of the currently opened webpage.
How to do it?
The show() method on a Panel object allows you to set an anchor for positioning the panel, `show(anchor). It requires an object in the browser DOM which you can get fairly easily.
You can use that to anchor the panel on any element in the browser. It might be tricky to find the element you want to use for exact positioning, I just opted for the status bar since you wanted the panel at the bottom.
Here's the SDK code that will position a panel at the bottom (left) of the page:
var wuntils = require('sdk/window/utils');
var panel = require("sdk/panel").Panel({
contentURL: 'http://stackoverflow.com/questions/15390974/firefox-addon-development-setting-the-panel-to-the-bottom-of-the-page'
});
panel.show(wuntils.getMostRecentBrowserWindow().document.getElementById("statusbar-display"));
This feature is not currently supported yet, but it will be soon. Here the proposal: https://github.com/mozilla/addon-sdk/wiki/JEP-Panel-positioning where you can follow the discussion and the bugs. I already have a prototype that hope will land soon.
Related
I am extremely new to Vaadin, and I don't know all controls, I tried to google but didn't find type of control. My question is which is control visible on this link
http://demo.vaadin.com/sampler/#foundation/cssinject
which is used for navigation (left and right arrow buttons on left and right side of screen which you press to change content in middle or something like this doesn't exist in vaadin by default and this is in jquery ?) ?
I need to implement this, to change content on click, to allow user to iterate through shopping cart like this.
They are probably just buttons. Imagine 3 columns Button | Content | Button
Button.onclick -> Load Content
I use this carousel add-on which does that. Buttons are bigger but can be changed using css.
It has a nice transition effect, sliding left and right.
Does anyone one know of a workaround/hack ;¬) to further customise jQuery custom select menu - i.e. when we've used
$(document).bind('mobileinit',function(){
$.mobile.selectmenu.prototype.options.nativeMenu = false;
});
to give us a nice list-item overlay in place of the standard listview page on selecting from a select menu.
The jQM docs here http://jquerymobile.com/demos/1.2.1/docs/forms/selects/custom.html - state:
When it has too many options to show on the device's screen, the
framework will automatically create a new "page" populated with a
standard listview for the options. This allows us to use the native
scrolling included on the device for moving through a long list.
I would like to prevent this and always show the custom overlay; obviously the problem is scrolling the options which are out of view. When my project is switched to landscape thus decreasing the screen height it swithces to the 'old school', clunky listview. I should imagine its down to 'absolute' screen metrics since i can see the custom menu overlay will (just about) fit without reverting to the standard view.
The custom view is a much nicer looking interface, and more intuitive from a UI/UX perspective also.
Anyone know of any tricks to keep this behavior??
I'm trying to edit Daniel Buchner's sidebar library so that the sidebar shows up on the right hand side. Do I do something along the lines of the following?
sidebar.browser.style.MozBoxDirection = 'reverse';
Your approach doesn't work because you would need to change the direction of the sidebar's parent box, not its children. However, that would cause unnecessary fallout (like the default sidebar appearing on the right side and developer tools on the left). So it is better to solve the problem by changing this line:
document.getElementById('browser').insertBefore(clone, splitter);
Instead of inserting your sidebar on the left side you can use appendChild to add it to the end of the container. You will also have to add your own splitter however - you can clone the sidebar splitter and change its ID.
I would like to make a jquery-mobile app having a left hand menu.
Is there a way to have it fixed like the fixed NavBar can be set? I think I need a vertical NavBar on the left side.
Thank you, F.
If you put the css "position:fixed" into the containing div of the list view, this produces a fixed effect.
Related:
JQuery mobile pageslide, new facebook menu
Examples:
http://jsfiddle.net/LwrqY/5/
http://jsfiddle.net/LwrqY/5/embedded/result/ (view on mobile)
Now these are just examples and will need to be tweaked to work, just a concept
we're using smartGWT for our web application. An the main page is a tabset that shows different tabs. What I want to do is do a button to the tab set with the setTabBarControls method which then is alligned to the left instead to the right. So it would somewhat look like the current Firefox version.
Is there a possibility to change the allignment of the TabBarControls? I couldn't find any.
If you want to create something like the Firefox corner button, just use TabSet.addChild(). That will place the button at the upper left, and you can use setLeft/setTop to move it elsewhere. If you want the control to appear to the left of the tabs, set a layoutStartMargin on the TabBar to leave space for it.