Is it possible?
I have tried to move it, but iframe contents dissapear.
Tried to get contents of iframe and place them in the new place but all handlers ofc dissapear.
Tried to do the same, but with new jQuery 1.4.2 feature, that clones all events along with it.
But it doesn't work :)
So I have decided to ask here for help.
How to move the damn iframe to another place in the document without losing it's contents? ^_^
Thanks
Added:
txtad_iframe = ad_container.find('iframe');
its_contents = txtad_iframe.contents();
its_body = its_contents.find("div:first").clone(true).insertAfter(cthis.find('#photos'));
Here i'm trying to copy contents to new ad container. But it doesn't work. Context banner doesn't react on click event.
I have tried to move ad_container to container, but iframe body content dissapears.
I believe that items in an iframe aren't bound unless done so explicitly in that iframe. in other words, the iframe contents don't inherit the binding events from the parent window. you will have to bind first in the iframe and then move stuff around.
i think.
EDIT
I think you may want to do something like
its_body = its_contents.find("div:first").clone(true);
$(its_body).insertAfter(cthis.find('#photos'));
Related
this is the situation.
I have a complex UI inside an iframe in which a user can perform several actions before submitting. During the process, the user can switch to another page (in the iframe) and come back. That means 2 postbacks inside the iframe.
Obviously, I don't want the user to lose everything but since all the actions have been done on the client-side, I can't reload the previous state from the server.
So now, I'm trying to move the first page content to the iframe parent and put it back in place when we come back. I'm half way there since the elements show back in the page but they lose their data attributes and event handlers.
I'm using this to move the content on the parent :
$("#resp").clone(true).attr("id", "refillResp").appendTo(window.top.$("#global"));
And this to put it back :
window.top.$("#global").find("#refillResp").clone(true).attr("id", "resp").appendTo($("#tdResp"));
Is there anyone who knows a way to do this ?
PS: I've tested how the content react when simply moved on the parent and data and events are already gone.
It is more a comment, but it does not fit in there.
Moving DOM element around different documents around is alway a little bit risky. Because it could lead to unexpected behavior (memory leaks, elements that behave strange). In current browsers it most of the time works, but i would not recommend it.
If you use jQuery you have another problem. jQuery has a cache for storing informations about data and event that are assigned to an Object, this cache is stored with the documents window. For further details please read this answer, to another question:
How to set jQuery data() on an iFrame body tag and retrieve it from inside the iFrame?
So if you move element with jQuery between different document, you will currently on the one hand loose these informations, on the other hand it could result in memory leaks.
With events it is even more complicate. e.g. if you have delegated events it could be become completely messy.
If you need to exchange data between iframe and parent you should think of some other logic.
I also mention this in a comment to the other answer of me, where i referred to this post:
How to set jQuery data() on an iFrame body tag and retrieve it from inside the iFrame?
I need to navigate to the element 'divElem1', on click of a button. Is it possible?
If we enter this link in browser, http://myUrl#divElem1, browser will navigate to the page and to the DIV element 'divElem1'. The same behavior has to be obtained through javascript.
The hash change will not work in my application, as there are other events will be fired on hash change.
So, the following will not work.
document.button.onclick = function () {
location.hash = "#divElem1";
};
document.getElementById("divElem1").focus() is also not working since the element is a div
You can use scrollIntoView for that:
document.getElementById("divElem1").scrollIntoView()
This doesn't give fine grain control over where exactly the target element will end up but it WILL be moved into the view-port. Even more, if the element is inside a scrollable container, both the container and the element inside it will be moved into a position so they are visible in the view-port.
If you want "plain" Javascript, use scrollIntoView(). But it really jumps to that position, see this question and answer.
Using jQuery, it can be done jumpy or with some easing, as explained here.
Easing is recommended to provide a better user experience and to let visitors see and understand what is happening.
I'm using JQuery sortable list where I dyanmically I can modify the content inside each element (ie, textfield, color, etc). Either I indluce each element content as an iframe of div then this content is refreshed each time I move/drag and drop this element into another position. Which is weird is that it doesn't happend when I move another different element, so my question would be: is there anyway to avoid currentItem to be refreshed/reloaded after draggin it to another position?
Thanks in advance for your help (!)
This is a known bug. See: http://bugs.jqueryui.com/ticket/5575
I have a in an iframe, that calls a function from the parent page. The function is window.location, however this does not change the url. Is there a way to have the iframe call a function from the parent page, that will cause the iframe to change url? I also had a basic qustion, if I have an iframe, and click on a link that brings me to a new page, does the parent page remain open?
Thanks in advance for your help. Sorry if I sound like a complete idiot, I am new to javascript.
Dave
window.location is not a function, it s an object.
To do what you want, first make the iframe call a special function from it's parent.
parent.sendMeToGoogle();
And in the function (in parent) do something like:
function sendMeToGoogle(){
document.getElementById('iframeID').src="http://google.com/";
}
If what you really need is to change the parent URL, you can use window.top.location.href='http://anotherURL.com' even if they are in different domains, from the iframe page.
I assume that you want to do more in the function of your parent page; if not you can just change the url of the iframe without calling the parent of course...
As for your second question, the iframe behaves like an ebmedded page: you can browse all you want in the iframe without affecting the parent (except of course with javascript calls like the one you want to use), but browse with the parent page and you will lose teh iframe as well.
Hope that was the explanation you were looking for :)
Is this possible?
Very much in need of the window.scrollTo() function, but it seems that sites like Facebook and others have removed them (or at least removed the references).
They have not removed them. It does matter when you call them though.
Since most content if FB is brought in the page by ajax, if you call the scroll before the content is fetched, there is nowhere to scroll..
If you open firebug (or whatever javascript console you use) and issue a window.scrollTo(0,1000) while a page is displayed, it will scroll just fine. So it is there.
So be more specific about what you are trying to do, so we can see if we can help.
update after comment
For orkut specifically: They have created a wrapper div of the whole content that is 100% width and height. So the window does not have any room to scroll, as all content is isnide the wrapped and the scroll happens there. So the window.scrollTo does nothing (it exists though).
To actually scroll in there you need to find the container div which is the parent of the one with id gwtPanel and use its scrollTop property.
var scrollingNode = document.getElementById('gwtPanel').parentNode;
scrollingNode.scrollTop=500;