Is it possible to create dynamically addressed LIKE button in XUL ?
Need to place it on XUL OVERLAY toolbar.
My idea is about IFRAME addressing like_button.html in chrome:// and changing src param inside. But there is javascript interaction with button, which can be problem, isn't it?
Thanks
as far as I know there won't be any problem in changing the parameters inside or outside using JavaScript and XUL. Using DOM you can manipulate anything & you can create any elements dynamically in XUL JavaScript.
https://developer.mozilla.org/en/Dynamically_modifying_XUL-based_user_interface
https://developer.mozilla.org/en/XUL_Tutorial/Document_Object_Model
https://developer.mozilla.org/en/XUL_Tutorial/Modifying_a_XUL_Interface
http://mb.eschew.org/15
These links will be more helpful for you to go on!!!!
Related
If I develop a Javascript widget that others can embed directly into their page without using an iFrame, is it somehow possible to prevent Javascript access to DOM-elements of the widget from the embedding page?
Suppose the widget is an image gallery and the embedding website selects all images via Javascript and changes both CSS attributes and any click handlers. How can I prevent the functionality or appearance of the widget from being changed without using an iFrame? I imagine this as a kind of firewall that allows/blocks Javascript access by DOM-source and destination.
The perfect solution is Shadow Dom
We initially had a web page that had HTML pull-down menus and an Applet. Each of these pull-down menus triggers a javascript function which calls an applet function. The applet also invokes a javascript function to enable/disable the pull-down menus.
Problem is that the HTML pull-down menus are getting cut off by applet because most browsers ignore the z-index for applets. The only solution I found was to place the Applet into an iFrame.
Now all javascript calls to the applet that were getting triggered by the HTML pull-down are broken. Javascript invoked by Applet is now broken.
All javascript functions are stored in one big javascript file loaded in the parent window.
I been doing something like this but it will be a lot of work and will make maintenance to difficult:
var appletIFRAME= document.getElementById('appletIFRAME').contentWindow;
appletIFRAME.executeAction1= executeAction1;
appletIFRAME.executeAction2= executeAction2;
...
...
This works ok but I believe I will also need to create wrapper javascript functions on both the parent window and the IFRAME web page. Also, our javascript functions are using jQuery to access HTML pull-down elements by ID's, which will also need to be refactored out. This will be too much work.
So is there an easier way to call javascript between parent window and IFRAME? I want to avoid doing all this function mapping between parent window and iframe object. All javascript functions are stored in one javascript file loaded in parent window.
Just want to add that the HTML pull-down menus are located in parent window and Applet in the iFrame. This is the only way the pull-down menus will not get cut off by Applet.
Thanks in advance.
I'm trying to create a small editor for a website. One of the features is a drag and drop interface. I'd like for the user to be able to drag elements to another position in the page. I was thinking of having an iFrame of the site, and applying JS and CSS to enable drag and drop ability.
Here's a screenshot of a CMS that does that:
The site is an iFrame. When I open the iFrame, you can't drag and drop elements. So, I'm assuming that they somehow apply changes in the parent page. Is there any way that I can basically add Javascript into the iFrame?
Thanks!
As long as the page that the iframe references is on the same domain, yes, you can. You can apply scripting and styling on elements within your iframe just like you'd do to any element in your main parent page. The main syntax is this:
var ifrm = document.getElementById("your_iframe_id");
/*ifrm.contentWindow.document is the document within the iframe
so let's try styling a div with an id 'mydiv' inside the iframe:*/
ifrm.contentWindow.document.getElementById("mydiv").style.color = "red";
Of course this is just a sample, you can use the same mechanism to do more complex stuff with elements within the iframe (including drag and drop!)
You could, as well, execute functions that are defined within the iframe from the parent page. The syntax is similar and intuitive:
ifrm.contentWindow.yourFunction();
I hope that helped you in any manner!
I am trying to create a layout/style editor similar to what is available on blogger. I noticed that they use an iframe, but the iframe has to refresh everytime you make a change. I am looking to do something more responsive. For example, if i change the width of a div I would like to see this change happening while I move the slider.
I was wondering if something like this is possible with the iframe setup using jquery/etc to modify the source of what is in the iframe, or is it better to not use an iframe?
The iframe would be used to load an existing webpage that is online.
The good thing with an iframe is that is not interfeering the rest of the page (you can use diffrent CSS, scripts, variable names and so on). TinyMCE and other editors uses iframe for its content. And yes its possible to access the iframe directly from jQuery:
See this link, http://jsbin.com/ajatix/edit#javascript,html,live
Im using DOM window ( http://swip.codylindley.com/DOMWindowDemo.html ) to create alerts. However the content that goes in the windows is under the id inline content.
However the js file doesnt do anything with this id and the content inside isn't showing up.
Is there a css file im missing because the window appears but with nothing in it?
p.s. I'm using example one
Unless you absolutely need to use this DOM Window plugin, I'd recommend just using simple javascript or jquery commands to achieve this rather simple task.
But anyways, since you're using example one, you need to make sure that the href on the a tag that you use for your Open DOMWindow function is pointing to the div that houses the content.