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();
Related
In my web-app, I implemented some tooltips on buttons with images. In Firefox, they work as expected, that is, they appear right below the button when you hover over that button. However, in Chrome, they appear far left of the button.
CSS:
.tooltip {
display: none;
}
button:hover .tooltip {
display: block;
position: absolute;
background: #ffffaa;
z-index: 10;
padding: 2px;
font-style: italic;
font-family: Times;
}
HTML:
<div id="simulationButtons">
<button id="playPauseButton">
<img
src="play.svg"
alt="play"
id="playImage"
style="display: inline"
/>
<img
src="pause.svg"
alt="pause"
id="pauseImage"
style="display: none"
/>
<span class="tooltip">Play/Pause</span>
<!--Didn't know modern browsers don't display alts automatically
when you hover over an image.-->
</button>
This works as expected in Firefox (this is Firefox for Android, but it looks similar on desktop):
However, for some reason, in Chrome, tooltips are moved to the left of the button (this is Chrome on Android, I haven't managed to install Chrome on my Linux, but I think it will look similar in Chrome on desktop):
So, what is going on in Chrome? How can I fix it?
You need to set position:relative in <button id="playPauseButton"> or in <div id="simulationButtons">
You are using position:absolute to position the tooltip so the parent "button" should have position:relative
Add this code in your css and it will work fine.
#playPauseButton, #fastForwardButton, #singleStepButton, #stopButton {
position: relative;
}
Whenever you make new buttons like these, make sure to add position:relative to that button too.
So there is this webpage:
<body class="" style="overflow: hidden;">
<div> <!-- stuff --> </div>
<div class="AbCde Zy1XW ">
<!-- unwanted crap -->
</div>
</body>
I want to remove
class="AbCde Zy1XW "
and
style="overflow: hidden;"
from
body
so I used this code:
d=document
e=d.getElementsByClassName("AbCde Zy1XW ")[0];
e.parentNode.removeChild(e);
document.querySelector('body').removeAttribute('style');
It works but the problem is that the scrolling of the webpage is buggy on iOS. You have to zoom in and out before you can scroll normally. But after a while, you can't scroll anymore and need to do the zoom out/zoom in trick again. Any ideas why? Thanks
EDIT:
Using
remove();
also has this same issue...
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.
I have a webpage containing several Divs which contain individual 'pages'. I have defined the following CSS styles:
#charset "utf-8";
/* CSS Document */
.hideDiv{
display:none;
}
.showDiv{
display: inline;
}
Everything worked fine and for a long while we had no problems either viewing our pages in Safari on our Macs or in IE6 (which our client uses).
We then updated Safari from 4.0.5 and we suddenly had page elements initially appearing incorrectly positioned. The first page is OK but when you click 'Next' an image positioned to the right of the layout appears initially offset considerably to the right mostly outside its containing Div clipping most of the image. However as soon as I resize the window the image jumps into it's correct position. If you click from say page 2 to page 3 and then click back again to page 2, so the image has been cached, it displays correctly.
We painfully downgraded Safari on some Macs and soldiered on with others hoping an update would fix it. Curiously everything works well on my new Mac Pro running Safari 6. The pages always display fine in IE6. My MacBook Pro running Safari 5.1.7 always offsets the images.
I don't believe it is a Browser issue but an area of my code which isn't very robust and some Browsers don't interpret the code as we would want it.
I created fresh html files which are identical to the multi-div page but contain only one 'page'. The layout is solid every time I display it in Safari 5.1.7 so I don't think it is my html/CSS which defines the position of the element. Here is a typical Div containing a single 'page':
<!-- Page 1 -->
<div class="showDiv clear" id="page1">
<div id="bgPic-components">
<!-- Sub-Heading -->
<h1>Sub-Heading</span></h1>
<!-- Page Content Area -->
<div class="contentTextArea fullWidth">
<div style="position:absolute; width:280px; z-index:2;">
<p>Some body text here.</p>
</div>
<table style="position:absolute; right:40px; bottom:40px; z-index:0;">
<tr><td>
<img src="../../medialibrary/3DI/3DI0315.02.01.jpg" style="display:block; position:relative; height:440px;"/>
<p class="padCaption">Annotation</p>
</td></tr>
</table>
<table style="position:absolute; bottom:24px; z-index:0;">
<tr><td>
<img src="../../medialibrary/photographs/P0825.01.01.jpg" alt="" style="display:block; position:relative; height:300px"/>
<p class="padCaption">Annotation</p>
</td></tr>
</table>
</div>
</div>
</div>
I would be very grateful for any suggestions to help me narrow down and find the problem.
Regards
Chris
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.