pls see this by Chrome ver 65.
html
<!-- div display: block. NOT corrupted -->
<div id="block">
<iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
</iframe>
</div>
<input type="button" onClick="javascript:document.getElementById('none_to_block').style.display = 'block';" value="block!" />
<!-- div display: none - click block! button - to block. !!! corrupted !!! -->
<div id="none_to_block">
<iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
</iframe>
</div>
<input type="button" onClick="javascript:document.getElementById('hidden_to_visible').style.visibility = 'visible';" value="visible!" />
<!-- div visibility: hidden - click visible! button - to visible. !!! NOT corrupted !!! -->
<div id="hidden_to_visible">
<iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
</iframe>
</div>
css
#none_to_block {
display: none;
}
#hidden_to_visible {
visibility: hidden;
}
jsfiddle
First div is OK
Second div is NG
Third div is OK
cf. ALL OK by Chrome ver 64.
Chrome ver 65 iframe bug ? or Tableau bug ?
Great analysis of the problem!
Apart from chrome v65, This is also happening on Internet Explorer. #hyukawa your jsfiddle is able to recreate the problem in IE v11 too.
I am dealing with the same issue.
I have several iframes with embedded tableau viz (Tableau server v10.4) on my web page.
I use the same display:none/block mechanism to hide/show the charts on my page.
As a temporary workaround, I am calling the viz.setFrameSize(width,height) every time I toggle the display(none/block), seems to be working for now.
Problem with visibility:hidden is, it occupies white space for the viz.
and problem with display:block is, it is not rendering the viz completely.
I played a little bit with the jsfiddle provided by hyukawa.
So, in visibility:hidden option, added some css (position: absolute; top: 0; left: 0;) to viz parent. and it worked.
Here is the link for jsFiddle
HTML
<div class="viz-container">
<!-- div display: block. NOT corrupted -->
<div id="first" class="tableau-viz">
<iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
</iframe>
</div>
<!-- div visibility: hidden - click visible! button - to visible. !!! NOT corrupted !!! -->
<div id="second" style="visibility:hidden;" class="tableau-viz">
<iframe src="https://public.tableau.com/views/180315_class-culture_dotplots/lit-authors?:embed=y&:showVizHome=no&:host_url=https%3A%2F%2Fpublic.tableau.com%2F&:embed_code_version=3&:tabs=no&:toolbar=yes&:animate_transition=yes&:display_static_image=no&:display_spinner=no&:display_overlay=yes&:display_count=yes&:loadOrderID=0" width="1200" height="500">
</iframe>
</div>
</div>
CSS
.viz-container {
position:fixed;
}
.tableau-viz{
position: absolute;
top: 0;
left: 0;
}
JavaScript
var displayedViz = "first";
$(document).ready(function(){
function toggleViz(){
$(".tableau-viz").css("visibility", "hidden");
if(displayedViz == "first") {
$("#second").css("visibility", "visible");
displayedViz = "second";
} else {
$("#first").css("visibility", "visible");
displayedViz = "first";
}
console.log('displayed : ' + displayedViz);
}
$("#toggleBtn").on('click', function() {
toggleViz()
});
});
Related
I have som html that looks something like this...
html
<div class="container">
<div class="left-col">
</div>
<div class="right-col">
<iframe src="external-site" border="0" scroll="no">
</div>
</div>
css:
.container {overflow:hidden;}
.right-col iframe {margin-top:-100px;}
I wanted to hide the 100 first top pixels of external site that is shown in the iframe. It seems to works in those browsers I have tested, but testing it on a "smart tv" without knowing what browser is used, there's an issue that not all the iframe is shown... BUT my question is therefore...
Is there any other way of achieving what I want to do?
You can do following way.
.right-col iframe {
position: relative;
top: -100px;
}
Check Fiddle.
I'm working on a website and am using a presentation as a slideshow for concert images because it is easy and familiar for someone who is not programmatic proficient to edit what is shown during the slideshow. To hide the navigation i used CSS, and placed the IFrame in a div with the class .googleSlideshow.
The HTML:
<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
</div>
The CSS:
.googleSlideshow{
width:100%;
height:550px;
overflow:hidden;
}
.googleSlideshow iframe{
width:450px! important;
height:calc(100% + 29px);
}
easy enough! here comes the problem: when the IFrame is clicked, the presentation goes to the next slide and pauses! This is terrible, and since this is in an IFrame the components of the IFrame are not able to be effected by my CSS, or script. Is there an attribute I can add to the IFrame that will get passed down to the presentation and stop the image onclick navigation?
Adding rm=minimal
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000&rm=minimal" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
I have found a fix thanks to trial and error!
the HTML
<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
<div style="top:0px;left:0px;width:100%;height:579px;position:relative;margin-top:-583px;" onclick="return false;">
</div>
</div>
the CSS
.googleSlideshow{
width:100%;
height:550px;
overflow:hidden;
position:relative;
}
.googleSlideshow iframe{
width:450px! important;
height:calc(100% + 29px);
}
the idea of a div blocking the click is what worked, but putting it after the iframe and then moving it to cover the iframe was better than placing the div before the iframe. i hope this helps others in a similar situation!
I have the following code in the head section of my website. I have read this question but my css does not seem to have a z-index.The image and the like box display but nothing happens when I click them or I should say that the hyperlinks do not work. Please help out. Thanks
<div class="content-pad" style="float:left;">
<img src="http://www.startupsandfinance.com/wp-content/uploads/2012/06/Advertise-here-728x90.png" width="728" height="90" />
<span class="widget-pad" style="margin-left:25px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FStartupAndFinance&width=290&height=62&colorscheme=light&show_faces=false&border_color&stream=false&header=true&appId=384169901601437" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:62px;" allowTransparency="true"></iframe>
</span>
</div>
</div>
When you click on the header image, the default email application is launched as you have an href to:
mailto:developerfahaduddin#gmail.com
You can check it out live in here:
http://jsfiddle.net/MSRXU/
So, is something else that you haven't write the code for.
After looking at your page with Firebug, I see something else is messed up. If you add some height to:
<div class="content">
...
</div>
You will be fine, and the image will be clickable.
The problem is that .content has no height, and pointer events are not reaching the iframe because it is outside of it's parent element's boundaries.
Adding this rule to whatever else you have for your .content selector.
div.content {
height: 120px;
}
I have an iframe loaded within a page. This code works fine in firefox but not in ie - it does not load anything following the iframe. If i move the iframe to the bottom of the page everything loads correctly. Has anyone encountered this error before?
head----
<style>
iframe{
margin-left: 22px;
height: 112px;
width: 612px;
}
body{background-color:transparent}
</style>
body---
<img align="left" border="0" src="http://picurl.com"/><br />
<p>text</p>
<iframe frameborder="0" src='http://URL.com'</iframe><br />
<p>big load of text</p>
Text loads fine, content of iframe loads correctly but 'big load of text' does not. Why does this happen? I am using internet explorer 8 for this task, can't change this.
You missed a > from the end of your iframe tag:
<iframe frameborder="0" src='http://URL.com'></iframe>
With Safari you can disable most iframe scrolling by setting style="overflow: hidden;" on the iframe. However, if you click in the iframe and move the mouse the content scrolls anyhow.
Example:
<html>
<body>
<iframe style="width: 100%; height:100px; overflow: hidden;" scrolling="no" src="scrollcontent.html">
</iframe>
</body>
</html>
scrollcontent.html:
<html scroll="no" style="overflow:hidden;">
<body scroll="no" style="overflow:hidden;">
<div style="background-color: green; height:100px;">A</div>
<div style="background-color: red; height:100px;">B</div>
</body>
</html>
In this example, the iframe should only show a green area and it should be impossible to reveal the red area. This is mostly true: there is no scrollbar, the mouse wheel doesn't do anything and neither do the arrow keys.
However click and drag still scrolls the view. This is particularly noticeable when selecting text.
Does anyone know any trick to stop Safari from doing this?
You could add an window.onscroll method that does a window.scrollTo(0, 0);. It's not pretty but it should work.
In worst case I would try loading the content with jquery load()
and then you wrap everything with a <div style"overflow:hidden">your content...</div>