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.
Related
The new facebook page plugin has the minimum width at 280px (inserted by a data-width:280px).
However when I inspect the element created by the script with firebug i see an element with id="u_0_0" with the width at 280 but i can modify it from console to be as i need (227px).
I've tried to modify it with a little script made with jquery (i can only work with jquery 1.2...an old version of it...) but it doesent seams to work since the element is inserted dinamicaly into the DOM.
I also tried an method finded by google but also it doesn't work:
jQuery(document).ready(function(){
jQuery('#u_0_0').live('DOMNodeInserted', function(){
alert(jQuery('#u_0_0').html());
});
});
The above method doesn't work and if i dont use live it alerts me with undefined...
So, how can i get the element so i can modify it's css ? Maybe jquery 1.2.1 is too old but maybe i can get and modify it with clasic javascript...
The plugin renders in an iframe which is a separate DOM from yours.
Because of that reason, its not possible to run scripts on the plugin from your website
In your script:
jQuery('#u_0_0') is not able to find the div, since that doesn't exist on your DOM.
I think you can't use javascript or css on an object inside a iframe.
If you look upside on code you will see the iframe.
You can do that only if the location of the iframe target is cross-domain but i'm not sure.
I'm very new to javascript, so this is confusing me. All of the settings charm tutorials only show how to put the controls into the settings charm, but none of them say how to find the information gotten in them.
I tried to do one of these (like I do in the main program):
var muteToggle = document.GetElementById("Mute");
where "Mute" is the id in the separate html file.
muteToggle just ends up being null all of the time. I tried putting it after
WinJS.UI.ProcessAll().then(function completed() {...
but that didn't work either. Everything else is the same as in this page: http://msdn.microsoft.com/en-us/library/windows/apps/hh780611.aspx
Make sure you're doing it in the ready function of the js file that is referenced from your settings HTML. Try opening the JavaScript console or QuickWatch while broken at that line and also look at the DOM Explorer to see if you can find your toggle control. You should be able to access it though. Also, try element.getElementById instead of document.getElementById. Either should work actually, but as long as you're troubleshooting. Good luck.
Your problem is that you are trying to get a reference to the HTML element from the code running during the app activation. Although that piece of code may define the HTML to be loaded for a settings pane, it does Not actually load the HTML into the DOM. You just simply can't get the instance from that location.
What you need to do is have the settings flyout have its own js file that implements IPageControlMembers. In particular, you need to implement the ready method. This method is called once all the HTML and controls are loaded for the page, including your toggle. The link has an example of how to do this.
Also see:
WinJS.UI.Pages.define
Using single page navigation
At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div
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
I hope I can explain what I would like to do a bit better than how I did with the question's title :)
I have a page whose content is dynamically generated. I would like to:
a- grab certain divs out of it,
b- wrap them with the markup of a standard html page (html, head, body, ...)
c- load the result into a separate browser window
I can do a & b but not sure how to do c. Any thoughts on how this can be done would be appreciated.
thanks
You can open an "empty" html document in a popup window, and then add the elements to that document. So, rather than creating a document and then displaying it, display an empty shell, and then fill in the content.
Found this tutorial after some quick googling: http://www.openjs.com/tutorials/advanced_tutorial/popup.php
(just don't use global variables like they do)