how to change a div from an iframe in another div - javascript

I have two divs
<div id="leftdiv"><!--#exec cgi="test.cgi"--></div>
<div id="rigthdiv" >
<iframe name="rigthdiv" class="contentiframe"allowTransparency="true" frameborder="0" src="iframebg.html"><body STYLE="background- color:transparent"></iframe>
</div>
I am trying to change the leftdiv from iframe. I called the js below from the iframe but nothing changed. What's wrong? Thanks
function test() {
parent.document.getElementById("leftdiv").innerHTML = 'Processing complete.';
}

It won't work on chrome, but it can work on firefox or IE. Chrome doesn't support iframe normally when you use javascript. You can try to use JQuery.

Related

Iframe don't fits JQuery UI dialog

When I try to open a URL using Iframe in a dialog JQuery box, I got this: http://s15.postimg.org/7qzx5y8vv/Sem_t_tulo.png
Here is my code: http://pastebin.com/Wqf0mGhZ
I want to make the dialog shows ALL the content, thanks...
EDIT:
Hey guys, I achieved this by putting the iframe in a div tag, like this:
<div id="imgWindow" title="this is a dialog" style="display:none;">
<iframe width="100%" height="100%" id="iframeImg" marginheight="0" frameborder="0>
</iframe>
</div>
I didn't go through all of your code, but maybe you
can just add autoResize call to open callback (on Dialog):
function openDialog(stringURL) {
$("#imgWindows").attr("src", stringURL);
$("#imgWindows").dialog("open", {
callback: function() {
autoResize('imgWindows');
}
});
}

Cannot get parent window

Hi I have the following problem:
I open an url in an iframe:
<iframe name="framenamex" id="frameidx"
<a href="urlx.." target="framenamex">..xxx..
then I want to hide the iframe from the iframe:
<div onclick="javascript:parent.document.getElementById('frameidx').style.visibility='hidden'">
but it does not work, it seems like this frame has no parent, because when i call parent.location or window.top.location I get nothing.
please help. thanks in advance.

Javascript this.firstChild .nextSibling Not Working in Internet Explorer

In the following markup, the "tip1"'s visibility is supposed to change from 'hidden' to show when the parent is moused over. Then when "tip1" is clicked, "line1" is supposed to appear. It works fine in Firefox and Chrome but, of course, not in IE.
<div id="product-description" style="position:relative; float:left; width:35%">
<div onmouseover="display(this.firstChild)" onmouseout="getRid(this.firstChild)" style="position:absolute; left:146px; top:29px; z-index:2000">
<div id="tip1" onclick="showTip(this.nextSibling)">
<img "shadow.png" />
</div>
<div id="line1" style="position:absolute; left:15px; top:-5px;" onclick="closeTip(this)">
<img "fb.png" />
</div>
</div>
</div>
And here is the corresponding javascript:
<script>
function display(items){items.style.visibility = "visible";}
function getRid(items){items.style.visibility = "hidden";}
function showTip(tip){tip.style.visibility = "visible";}
function closeTip(tip){tip.style.visibility = "hidden";}
</script>
Your code won't work in any modern browser. firstChild returns the first node in an element. This node can also be a textnode, in your case it's a new line + TAB. Textnodes don't have style to set, hence the code will fail.
Use firstElementChild instead.
The same stands for nextSibling, use nextElementSibling instead.
A live demo at jsFiddle.
This turned out to be an issue of z-indexing on IE. I had an image under the hover s which for whatever reason kept covering up my hover buttons. So I removed that image and created another div with a background-image.

IE10/Safari Cannot Hide an Object/Flash inside of iFrame

I have a Flash Animation inside of iFrame. And when I try to hide it, IE10 keep it displayed and overlapping other content.
<body style="background-color: #EEE">
Testing IE10
<div id="swfDiv">
<iframe src="swf.html" width="500" height="50"></iframe>
<br />
<button onclick="document.getElementById('swfDiv').style.display='none'">Hide</button>
</div>
<div style="background-color: #DDD">
This try to hide the animation, but it is not working on IE10. <br/> It works fine in others browsers and earlier versions of IE.
</div>
</body>
Update 02/08/2013
I found the same problem in Safari (5.1.7)
Apparently the best solution will be move it off the screen:
.xhide
{
display: block;
position: absolute;
left:-9999px;
}
We can add this class on click to hide it, something like:
document.getElementById('swfDiv').className = "xhide";
Navigating away before closing the iframe solved my problem on a XBAP, I think it will work for flash too
var $iframe = $("#id");
$iframe[0].src = 'about:blank';
$iframe.remove();

display:none; displays 'none' in browser

This jsFiddle example works in Google Chrome, but in Internet Explorer then when the close icon is clicked the browser removes the pop-up element but results in the text 'none' being displayed in the browser window. Please explain how I can resolve this issue.
HTML:
<div id="popup">
<!-- Close popup link -->
X
</div>
Use onclick for the event handler instead of href http://jsfiddle.net/AE2X3/4/
<div id="popup">
<p>This is a pop-up.</p>
</div>
I think what's happening is that the assignment is returning its result, and the browser is then displaying that. If you add void(0) to the end of your JavaScript, it won't be displayed.
Let me add that amit_g's answer is more correct than mine. He correctly points out that this sort of behaviour belongs in the OnClick handler, not in the href attribute.
This works:
<div id="popup">
<p>This is a pop-up.</p>
</div>
Demo

Categories