I'm creating a popup dialog using jQueryUI. I have run into problems because I'm using exactly the same blocks of HTML and JavaScript code as on the page. (The application was not designed for that and I'm not going to recode it deeply). So I have two tags with same ID attributes in the document - on the page and in popup.
To avoid this I decided to open the dialog in an iFrame. Everything works, of course, but the popup opens too slowly (it has a long list of JS and CSS files to load). They are in cache of course, but the browser seems to send requests to check them.
The question: can anything be done as a quick help? I can connect the parent window using Javascript, so can I somehow import, or clone (deep copy), for example, jQuery library? What do you think of it?
(Please don't blame me if the question is crazy)
You don't need to clone jQuery, you may use it also from within the frame.
parent.$('selector', document).someMethod()
Related
Recently a friend of mine and I have been working on a Firefox extension. He handed the code to me today, and I've been trying to make it restartless. I used the tutorial from How to convert an overlay extension to restartless (on MDN). Since I don't have much experience working with JavaScript and extensions in general, I was wondering if anyone could help to understand what step number 6 means here in this tutorial. They are saying we can't use "no more XUL overlays", and I understand this. What I don't understand is that how to this part:
Figure out what XUL elements you need to create for your add-on to add your interface, where it needs to go into a XUL window, and how to do it. Docs: document.getElementByID(), document.createElement(), Element reference, Node reference (DOM elements are also nodes).
I decided against using document.loadOverlay, since it's very buggy. I'm not sure if this helps much, but here is the code for our overlay.xul. Again, sorry if the question is really basic, any help is much appreciated. If I need to provide more code please let me know. At this point I thought only the code for our overlay.xul file is important.
<?xml version="1.0" encoding="UTF-8"?>
<overlay id="my-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript;version=1.7" src="overlay.js"/>
</overlay>
XUL overlays can be used for a wide variety of things in Firefox. Step 6: No more XUL overlays focuses more on UI elements than other possible uses of overlays (e.g. loading scripts, as you are doing).
In an XUL overlay extension, the UI elements are generally added by providing an XUL overlay file for each portion of the interface which is modified. The XUL overlay extension does not need to consider removal of the interface elements, as they are only removed when the extension is removed or disabled.
In a restartless extension, all UI elements are added programmatically each time the extension is started. Some UI elements are added once; and some must be added both to each open window and when each new window is opened. When the extension is disabled, or removed, the UI elements must be programmatically removed completely from Firefox.
The portion you quoted is attempting to describe the process of converting an actual XUL overlay (used to modify the Firefox UI) to programmatically inserting (and removing) the UI elements. The most common UI element is probably a toolbar button, but it could be anything. Because it could be anything, the description is relatively vague.
That entire section, Step 6: No more XUL overlays, could definitely use some expansion. I remember planning to do so based on the code I used when converting an extension from XUL to overlay. I had wanted to clean the code up a bit, and account for more cases. However, having an example in there would be helpful. I'll see if I can update it in the next week or so (if someone else does not beat me to it).
In your case:
Based on the overlay code which you included in your question, this section is not talking as directly about how you are using your XUL overlay as might be desired. The part you quoted:
Figure out what XUL elements you need to create for your add-on to add your interface, where it needs to go into a XUL window, and how to do it. Docs: [document.getElementByID()][3], [document.createElement()][4], [Element reference][5], [Node reference][6] (DOM elements are also nodes).
is specifically talking about adding UI elements to Firefox, which is not what you are doing with your overlay.
What you are going to need to do is determine how you are going to apply your script, overlay.js, to whatever it is that you are adding it to. Remember, you also need to be able to remove it when your extension is disabled/removed/updated.
In order to provide more detailed information, we are going to need to know what it is that you are adding your script to. For this, we probably need you to include a copy of your chrome.manifest file. It might be helpful to know what your script does as the functionality may be more appropriately handled without applying the script in the way implied by an overlay. However, you should ask this as a new, separate question, not modify this question to ask something different.
For our website we would like to give users the availability to include content of our website on their own website in an iframe. For this we would like to give the user a little piece of javascript code that they can include on their page without the need of too much programming knowledge. (like e.g. Facebook does for adding facepile to your page)
There are two concerns from my side. I want the content to be loaded asynchronous so the inclusion of our code will not affect original page load times ans secondly I want the script to automaticaly sets the height of the iframe based on the loaded external content.
I do not want to make use of frameworks like jquery, again to make it as simple as possible for a non code aware user.
I hope that someone can point me to the right direction. I've seen a lot of partial answers on the net, but I am looking for a more all in one solution. Any help would be high appreciated!
Maybe this helps: http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance. Take a look at the "Dynamic async iframe" section. They are using a nice trick by putting a onload event in the iframe document.
Check out this little library for resizing iFrames.
https://github.com/davidjbradshaw/iframe-resizer
The code that goes into the iframe, has no dependancies and does nothing until called by the parent page. So it's a good guest on other peoples sites.
All you would need to do is give people a link the js file hosted on your site.
I need to implement a page of which many parts are dynamic widgets. Which widgets are loaded depend on user choice and are not known before hand. Each of these widgets include some HTML, and some javascript code (to initialize and attach event handlers on the HTML elements). I am wondering what is the best approach to implement such a page and widgets.
AJAX. I could construct response with some HTML followed by a <script> tag. Although returning js code in AJAX is not recommended, I found this works for me (the script get executed, with HTML widget properly initialized and handlers attached). An alternative is to include an 'all-included' script in the container page. In this script I wrap each of widget-specific script in a function, and when the widget is dynamically loaded, I call that function. However, this way I fetch a lot of js code that may not be used.
Iframe. I can also return the widget as a standalone HTML page to be loaded in iframes. This solves the javascript problem, but I need to make cross-domain calls to interacte with other part of the container page.
I think this should be a common problem faced by web developers. I am new to web development, could you share some 'best pratice' tips for my case?
You should be going ahead with jquery+ajax.. There are lots of drawbacks with iframes. Although you could handle each plugin in separate page and avoid any kind of conflict, usablitity becomes a great headache..
In the time of everything going HTML5 based to support mobile platforms, iframes are hard to cuztomise for mobile screens. Moreover iframe takes out the entire apple users as iframes are not supported by apple devices..
jQuery + Ajax(HTML5) along with CSS3 should be the way to proceed..
Sorry for the title.....bit difficult to word what I really want to ask.
Some websites allow a user to copy and paste some widget for use with their own site. For example, getsatisfaction. Yes, those feedback icons that I hope most of you see in various places.
If you have a look at twitterfeed, on the left there will be a feedback icon, once clicked on a nice modal window comes up. the modal windows content is in an iframe to an external source.
I really like this, but my question is:
I could do the same by using some jQuery library for the modal window and then linking the modal content to a site on my page, but how do I stop this from becoming obtrusive to a sites other javascript files?
For example, let's say i'm using my js code and the relevant jquery code, and i've minified it into one file. The user adds my widget to their site. If they're using jQuery, how do I make sure my code isn't going to interfere with theirs?
Would the best way be to use a modal window library which is not very popular?
Thanks very much. Hope that makes sense!
EDIT: I could write my own modal window functionality code, but i'd much rather use a library which already does it.
You can dynamically load jQuery only if it is needed.
First check for the existance of the jQuery object. If not add the script tag.
There are some challenges to this, as there is no onload event when adding a script tag to a page, that works consistently accross browsers, so you will have to poll to see if it fully loaded, and only then run your code.
There is an article on how to do this:
http://www.squidoo.com/load-jQuery-dynamically
You may still have an issue if the user has a differnt version of the jquery library though, although you can probably get around this with some additional checks.
jQuery UI has very nice dialog components that should fit your purpose. Inside them you can instantiate an iframe. see:
http://elijahmanor.com/demos/jqueryuidialogiframe/index.html
If I understand all this correctly, the iframe content is a separate page, so there is no case where your javascript code in that page would interfere with the javascript of the calling page, but maybe I haven't understood that part correctly?
EDIT:
I think I understand what you meant, in that you want to package up the code that you will write that opens the modal window with the iframe. SO you want to make sure that this code does not interfere with existing jQuery code that the user is using.
I think this is a good use case for a jQuery plugin. This way the user of the page can use your function like any jQuery function, so less likelyhood of collisions
I could write this, but before I do, I wanted to check to see if there are existing solutions out there since it seems a lot of websites already do this, so I was wondering if there was a quick way to do this.
Also, I am talking about "popout" windows, not "popup" windows. All JavaScript libraries support "popup" windows, but I want ones where they originally open as "popup" windows in the same browser window, but there is also a link to open them up in a brand new browser window.
Check out Cappuccino, it's more of a windowing framework than a web 2.0 framework. It's based off of Apples Cocoa, and uses a Superset of Javascript called Objective-J. Superset meaning that any JS is valid, but it extends on the language with additional syntax that is similar to Cocoa and Objetive-C.
http://cappuccino.org
var oDiv = document.getElementById('mydiv');
var oWindow = window.open("about:blank");
oWindow.document.body.appendChild(oDiv.cloneNode(true))
You will probably also need to move stylesheets there as well.
I don"t know a framework to do that for you. But the JS code to do that might be simple.
For the in-page-popup part, just open an absolute div. If you want the div to become a real popup, open a popup window then remove your div content from the main document and append it to the popup window document (you way have to clone it because JS may not like passing around DOM nodes between different documents).
JQuery - Look for Dialog.
http://docs.jquery.com/UI/Dialog
You can customize with CSS to control the title bar, if it can be moved or resized, etc.
PS: Follow the link for an example.
you can try http://mochaui.com/demo/, it's written in mootools