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;
}
Related
I would like to have the contents of an html webpage displayed in another (parent) html webpage, stretch the embedded webpage to the width of the parent and also remove the scroll bar of the embedded webpage while being able to scroll down the contents of the embedded webpage using the the scroll bar of the main page as the height of the embedded contents are too long to fit. I tried using code from answers to similar problems including this:
<iframe style='overflow:hidden; width:100%; height:100%' scrolling = "no" src="annotated list of courses.html" frameborder="0" width="100%" height="100%"> </iframe>
but I cannot achieve the desired outcome. I would like is to be able to scroll the contents of the embedded webpage using the scrollbar of the parent page. It is possible (with no need to copy code form the embedded HTML to the parent one instead) and how? Thanks.
I solved the problem by specifying a specific height for the embedded webpage which is greater than or equal to the height of the webpage like this:
<div id="content" class="content content-full" style="margin-top: -40px;">
<iframe style='overflow-y:hidden; width:100%; height:17560px' src="annotated list of courses.html" frameborder="0" width="100%" height="17560px" type="text/html"> </iframe>
</div>
I hope this can solve the problem also for others and any better or different slolution is also appreciated.
ps: You have to specify a height that is at least equal to the height of the contents of the embedded webpage or element for the scrollbar to disappear.
I've solved it by using two DIVs, one inside the other.
<div style="overflow-y: hidden; border: 2px solid black; width: 300px; height: 300px; position:absolute; left: 100px; top: 100px">
<div style="margin-top: -100px; width: 300px; height: 400px">
<iframe scrolling="no" style='pointer-events: none; width:100%; height: 100%' src="https://earth.nullschool.net/#current/wind/surface/level/orthographic=-325.19,32.21,3000/loc=35.073,31.923" frameborder="0" type="text/html"></iframe>
</div>
</div>
I've disabled The scrollbars by setting scrolling="no"
I've diasbled user clicks by setting style='pointer-events: none;'
Here is a working sample - https://jsfiddle.net/q46L1ynv/
I need to create a little html code that I will use in sharepoint in script editor. The idea is that I have some report from Microsoft BI in iframe (changed the address in code below) and it works fine. But I want to cover the "share buttons" in the bottom right of the site, so it can't be shared. The iframe should fill the whole WebPart in sharepoint, so I tried to allign the image simply to bottom right corner, but it doesn't seem to work. Any ideas?
<html>
<head>
</head>
<body>
<iframe src="https://www.google.pl/?gfe_rd=cr&ei=x5UEWO-yGaOh8welvY2IAQ" width="100%" height="700">
</iframe>
<img src="logo.jpg" align="bottom" align="right">
</body>
</html>
Ok, I've finally got it working. The "TOP" variable is static, it's the height of the displayed website minus the height of the image itself. Here is the code:
<html>
<head>
</head>
<body>
<div style="height:750px; position:relative">
<iframe style="border:none; width:100%; height:700px; z-index:1" src="website.com"></iframe>
<img style="top:663px; right:0px; position:absolute; z-index:9" src="testbar2.jpg">
</div>
</body>
</html>
The align attribute of <img> is not supported in HTML5. Use CSS instead.
img {
float: right;
}
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.
Firstly here's the fiddle
I am trying to integrate a iframe like a div, I know how do this if this was a normal iframe but this iframe has a slider inside it. As a result there are two scroll bars appearing on the right side.
HTML code:
<div class="container">
<div class="h_iframe">
<iframe src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS code:
html,body {height:100%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
Is there any way where I could make the iframe behave like a div so that the page will have a single scroll bar. overflow:none would remove the scroll from the iframe.
Any help would be appreciated.
The other answers already work well in this case, but I would just like to point out that the idea is to make the outer frame "non-existent", rather than making the iframe blend in with the page. This works in this case where the inner iframe is intended to fill the entire page.
However, unfortunately, there is no easy way to do "integrate an iframe like a div" in general (at point of writing).
There is an attribute <iframe seamless> that does exactly what you want (embed an iframe like a div), but that doesn't work in any major browser at the moment. See: http://caniuse.com/#feat=iframe-seamless. There are probably some ways to use Javascript to simulate this: e.g. https://github.com/ornj/seamless-polyfill has the page in the iframe use Javascript to communicate its scrollHeight (using postMessage) to the outer page, which then uses Javascript to change the height of the iframe so the entire page in the iframe can be shown without scrolling.
In this particular instance, with a full page iframe, set the margin of your body tag to 0:
html,body{
height:100%;
}
body{
margin:0;
}
.h_iframe iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div class="container">
<div class="h_iframe">
<iframe src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Add overflow:hidden to your CSS like this. I tried it in your fiddle and it works.
html,body {height:100%;overflow:hidden}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
You cannot write css to affect the inner contents of the iframe... but you can add an overflow: hidden; to your body.
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!