6

I created a web app some months ago and tested it working fine in ie, ff & chrome.

i went to add something last night and noticed that my hide iframe function is no longer working in chrome.

If i inspect the element i can see the attribute is indeed changing, but the iframe is not hidden.

function hideIFrame(){
    document.getElementById("myFrame").style.visibility="hidden";
    self.focus();
}

function showIFrame(){
    document.getElementById("myFrame").style.visibility="visible";
}

the myFrame div starts off hidden. and is made visible successfully but when the visibility is changed to hidden chrome is not hiding it, ff and ie do hide it still.

any idea why?

The FIX:

function hideIFrame(){
    document.getElementById("myFrame").style.visibility="hidden";
    document.getElementById("myFrame").style.opacity=0;
    self.focus();
}

function showIFrame(){
    document.getElementById("myFrame").style.visibility="visible";
    document.getElementById("myFrame").style.opacity=1;
}
3
  • Could you please provide a jsfiddle. There must be something else going on…
    – Miha Rekar
    Oct 7, 2012 at 8:17
  • Having the same issue. Can you find a bug entry on Chromium? EDIT: found this entry: code.google.com/p/chromium/issues/detail?id=301376 Can you confirm the bug only occurs on pages that embed flash content?
    – Gyum Fox
    Oct 30, 2013 at 9:45
  • @Gyum Fox My page did embed flash yes
    – Vince Lowe
    Nov 8, 2013 at 20:24

4 Answers 4

4

There are problems with iframe visibility toggling ($('iframe').css('visibility','hidden') not working in google chrome). If you want it to disappear, use height, width:0. If you want it to simply be invisible, use opacity:0.

1

I didn't get your problem. May be you should post some more codes where you are calling the function. Here is a sample code works well in chrome.

<script type="text/javascript">
function hideIFrame(){
document.getElementById("myFrame").style.visibility="hidden";
self.focus();
}

function showIFrame(){
document.getElementById("myFrame").style.visibility="visible";
}
</script>

<input type="button" onclick="hideIFrame()" value="hide"/>
<input type="button" onclick="showIFrame()" value="show"/>

<iframe id="myFrame">

</iframe>
1
  • yes your right, i added to a fiddle and this works in chrome jsfiddle.net/SKFeC but for some reason not in my app
    – Vince Lowe
    Oct 7, 2012 at 9:13
1

use display.none instead

    function hideIFrame(){ 
document.getElementById("myFrame").style.display="none";
    self.focus();
}

function showIFrame(){
    document.getElementById("myFrame").style.display="inline";
   //or document.getElementById("myFrame").style.display="block";
}`
0

In my case I will just use JS onload to hide the element and I will be able to use JS to toggle visibility="visible"

window.onload = function() {
  document.getElementById("newDiv").style.visibility = "hidden";
}
function showHidden() {
  document.getElementById("newDiv").style.visibility = "visible";
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.