I am relatively new to Firefox extensions development.
I want to implement an add-on on the lines of "clearly". (https://addons.mozilla.org/en-US/firefox/addon/clearly/)
How does one get the addon to have an overlay on top of the displayed webpage? i.e. on button click, the addon should display some custom text on a layer above the currently open web-page.
Also, Is it possible to set the display of this overlay with HTML?
What are the available options to achieve this?
Help greatly appreciated.
create a panel and insert to chrom document.
then open it with this code:
https://developer.mozilla.org/en-US/docs/XUL/Method/openPopup
set anchor to gBrowser.selectedTab.linkedBrowser
set panel width and height to same as the linked browser so:
panel.height = gBrowser.selectedTab.linkedBrowser.getBoundingClientRect().height
do same for width
https://developer.mozilla.org/en-US/docs/XUL/panel
if u need more help let me know ill write the code, its real simple
Technically you wouldn't even need to make it a Firefox extension, see https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
Related
Is there a simpler way to do tool tip text when ever I hover thru the following button in Google App Maker?
Go to the Other section of the Property Editor. The title field should give you what you need.
This works well. I know there is a way to inject JQuery into the AppMaker, and from there its just determining when the DOM is loaded and you can modify the element with a script.
I thought the content would wrap to fit inside the WebView, but instead the right hand side is clipped off.
Sorry for asking such a noob question (WV should just wrap!).
Wrapping would be done in the HTML5 webpage, as it understands the device(PC or Mobile) and behaves accordingly, for others you need special webpage e.g. (m.facebook.com which acts as interface for mobile and www.facebook.com for PCs).
For displaying the complete screen in single screen webview(scaled down) use the following code
yourWebView.scalesPageToFit = YES;
My upcoming mobile web project requires viewing dynamically chosen pdf files inside the webpage. I am using iFrame to display the pdf file and the file can be scrolled using two-finger scrolling. But the problems I am facing are:
The first page of the file is not displayed completely on the iPad and gets cut off along the width unlike when I view it on the desktop browsers where the first page of the pdf is always entirely displayed although zoomed out to fit in the iFrame area.
There is no visual indication for the users that the pdf document can be scrolled, i.e., there is no scroll bar on the pdf document.
The controls (page navigation, zoom etc.) for the pdf viewer (Adobe reader) don't appear on the document unlike when I see it on the desktop browsers.
What is the best way to achieve what I am trying to do? Do any of you experts know any solutions/workarounds to the problems I am facing? An entirely different approach using anything other than iFrame can also be considered.
The reason why the pdf should be inside the html page is that, the list of pdf files will be on a menu bar on the left side of the page and the user can click on any of them to view on the same page. Ideally, they will have the capability to toggle between full screen view and that view.
Any help is appreciated.
I created a tiny JavaScript module that helps you to show a PDF inline and be able to scroll it. But I also couldn't figure out a way to make it fit the total width of the parent container.
Check it out: https://github.com/williamrjribeiro/ipdf-scroll
Cheers.
I came across this Recommended way to embed PDF in HTML? while researching on the web to find an answer.
The mentioned link discusses about some options that I can use and the google document viewer works for me though don't know if there is anything (like data limit) I need to be aware of before using it on the website. Also I have no idea if it is a good solution (though the full screen mode is not available, but zoom-in/zoom-out and next/prev page buttons are there are show up in the mobile safari on the iPad) to use for an web app that will be run on the iPad.
Anyway, I will keep researching for a better solution and if i don't find any, I'll stick to the google document viewer.
The issue appears to be a bug with Safari on the IPad.
I didn't find a solution for embedding the pdf in html but I did find this:
If you return FileStreamResult from your controller action instead of a view, the pdf will open in a new tab, it's not embedded html but at least your user is not having to download files and open them manually.
I had the same problem of the pdf not being displayed completely. The only thing I found to fix this was the change the size of the div containing the pdf.
For example if the element containing the pdf is a div then I change its width to any value and the rollback to the value it had before. Changing Width or height any one works.
Sometimes I had to wait a little using a setTimeout before calling my resizable method
I am trying to create tabs at the bottom of the screen, which has to be there through out the application and a list needs to be displayed above. Please help...
Go to this below link:
Advanced UI Components
Here you can get one zip file. In that see the UIExamplePillButtonScreen and understand it. If you want the tabs for all screens then
Write the code in one class(Ex: TabPannel.java) which extends Field and add this to any screen like:
setStatus(new TabPannel());
This below link also helpful to you:
Tab bar in blackberry without ToolBarManager
Enough.
I'm currently trying to create a suggestion UI in a web page targeted at Mobile Safari. The main components are a text box and a scrolling list that is displayed below the textbox that contains the list of suggestions.
To do this I need to 1) determine that the keyboard has shown and 2) determine the size of this in order to resize the suggestion list to fit in the available space.
I've been able to accomplish (1) by waiting for the focus event, but (2) is still problematic. I have not been able to find any way to measure the size of the keyboard as it doesn't seem to impact the window dimensions or anything else that I could think of trying to measure.
Is there anyway to programically determine the size of the iOS keyboard when it is displayed in mobile safari?
Unfortunately, there is no way to calculate the height of the keyboard. None of the window properties change when the keyboard comes up.
To determine that the keyboard is showing, you can use this solution:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
Then you'll need to add a device specific class and use media queries in your CSS along with these classes to style appropriately for device and orientation.
If someone has a better hack, I'd really love to hear about it.