I have a dijit dialog created declaratively in my static html page.
If I open this dialog as soon as my page is loaded it opens properly in the center of the page, but if I perform some actions available on the page and then load the dialog then the dialog gets padded to the bottom of the page.
This happens ONLY THE FIRST TIME the dialog is loaded and ONLY if the first time happens to be after performing some actions on the page. All the other times the dialog is loaded properly in the center of the page.
There's a similar question here:
Dojo and dijit.Dialog not centered
but the solution given there is not working for me because I'm already using dialog.startup() and dialog.show().
This happens in Firefox, Chrome and IE and I'm using Dojo 1.8
Related
Intro
I have a chrome extension I am working on, that uses the background page to listen to the following window and tab events:
chrome.tabs.onActivated
chrome.tabs.onUpdated
chrome.windows.onFocusChanged
The background process basically retrieves the HTML source from each qualifying page the user visits, via a content script injection and messaging.
Once the message with the HTML source is received in the background page, it performs specific tests which may take anywhere from few to several of seconds, depending on the source size.
The Problem
I found that each time I click on the extension icon to open the popup.html view, it renders my background page again and runs the HTML collection and analysis. The issue is the popup view window doesn't open until the background has finished, which on certain pages may take 5-10 seconds.
I tried running the entire background page async with setTimeout(function(){..},0) which didn't work..
How can I solve this?
Is there a way that the popup page will not render the background again? This happens anyway when the user views the tab, so I don't need it?
If not, is there a way for the popup to display regardless of the background operation?
any other suggestions?
Thanks!
In FireFox extensions, the Panel/Popup that opens on the Toolbar sizes itself outside the browser window, if needed, so that we see every populated elements in the panel. In Chrome however, the popup/panel is only drawn until the browser window's boundaries. So, if the user resizes the browser window small enough, you don't see the entire popup.
I checked the documentation and couldn't find anything. Is there anything that can be done to show the entire popup?
This seems to be OS-dependent (can be reproduced on Linux and Win7, but not Win10).
As an extension author, there is nothing you can do to control it, this is just how the browser renders its content. You could submit a bug report.
The default behavior for browsers on page reload is to scroll back to the position where you last were on the page.
Let's say you scrolled to features section and then you hit F5. The browser will reload the page but it will remember the position you were at and scroll to features section.
Does anyone know how to reset this scroll state in browsers? In my application I need the browser to load page naturally and position the page on top on every page refresh.
There is not something that you can "configure" to avoid that behavior because that's the browser behavior.
What you can do is to add a simple javascript when the page has been loaded to scroll to the top (if you already are on the top, this will do nothing):
window.scrollTo(0, 0);
To know when the page has been loaded, you can use jQuery document on load functionality if you are using jQuery, the equivalent on your javascript framework or the body onload property to place a function that execute the above code.
I am developing a chrome extension that would like to add a tab at the bottom of the page to manipulate DOM elements. Chrome 'manifest.json' file doesn't provide such feature. So how to do it or rather how does Firebug add a tab at the bottom of the Chrome?
I would suggest inserting a panel in every page through a content script. You can style it in order to appear at the bottom of the page and be always visible.
In order for it to retain its state between navigation from one page to another, you need to persist it some how (example use chrome.storage or a similar mechanism through the background page to persist the content (or whatever you need).
See this answer on how to insert (and style) a toolbar-like div or iframe in a page through a content script. (It is fixed to the top of the page, but you can easily modify the code to fix its position at the bottom.)
I have an image within an extension pages dialog box that I would like to magnify when the mouse pans over the image.
I found this bit of js and css:
http://www.nihilogic.dk/labs/mojomagnify/
It works great if the image is on the main page. But if the image is within an extension pages dialog box, the dialog box is popped up, and the mouse is moved over the image, the mouse pointer does not change to the cross hairs and the image is not magnified.
Any theories as to why? Or now to fix it?
Any image magnifies that would work within a dialog box?
The dialog is probably loaded and triggered dynamically and using partial refresh so your JavaScript is loaded before the dialog box is available.
The onClientLoad events are only triggered when the xpage loads. Not on partial refreshes
What you need to do is to make sure your JavaScript loads after the dialog is available. This can be done using another JavaScript that listens to partial refresh events found here
http://dontpanic82.blogspot.se/2010/01/xpages-hijackingpublishing-partial.html