I have an iframe that acts as a big button. The entire content inside of the iframe is one click target.
What I'd like to do is hover some piece of HTML over the iframe kind of like in this example.
<html>
<head>
<style>
iframe {
height: 100px;
width: 300px;
}
div {
position: relative;
}
a {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<iframe src="frame.html"></iframe>
<a id="text">Image</a>
</div>
</body>
</html>
You can also see a live example here http://dev.gjcourt.com/iframe
The problem is that I'd like to have click events from the anchor bubble down into the iframe. Is there any way to make this possible?
Position the iframe absolutely, make the background of the iframe transparent and give it a z-index higher than the text/other content.
Why are you using an iframe for this?
This is an example of possible Clickjacking and most browsers attempt to prevent it.
As #Zikes mentioned this is a clickjacking attack, but it is still possible nowadays. All you need to do is to overlay your iframe with SVG element and set pointer-events="none", so it will flow all cursor events through SVG element down to iframe. You can find more examples and crossbrowser solutions in this article.
Related
I have an iframe that I would like to align perfectly within the container on my website. Right now, there is still a border when I inspect the container containing the iframe element:
The iframe is embedded as following:
<style>
iframe {
width: 100%;
min-height: 500px;
}
</style>
<iframe id="myIframe" frameborder="0" height="100%" width="100%"src="path_to_my_file"></iframe>
I would also like for the height of the iframe to automatically be adjusted to the height of the container. That would mean that it would need to be adjusted every time the window size changes, so I would probably need a javascript method. Is there an efficient way to achieve that?
Through this great forum I have managed to find a solution for expanding an iframe with a click through HTML and Jquery.
But it does not solve my problem completely. Where I am now I manage to expand the iframe using a text, but I want to use the input fields in the iframe as the trigger for the function.
I found this thread on how to use the iframe window itself as a trigger and it seems to use this plugin (iFrame Tracker): https://github.com/vincepare/iframeTracker-jquery
Sadly, this does not seem to work on mobile or other touch devices. Therefore, a click on the input field would be the optimal solution.
This is where I am now with a simple text that expands the height of the iframe when clicked:
HTML:
<iframe class="frame" iframe id="bestillframe"
src="iframe source goes here"
height="200px" width="200px"></iframe>
<div id=kilden>
Click here to enlarge the iframe
</div>
Javascript:
$(function(){
$('#kilden').click(function(){
$('#bestillframe').animate({'height':'300'})
})
});
Fiddle with iframe link and mentioned input fields.
http://jsfiddle.net/b6qfJ/51/
Does anyone know how I can get this to work with a click on the input field?
Thanks to the great help of #zer00ne I managed to work this out.
The only issue was that the above section seemed to scale along with the iframe automatic without proper formatting. This lead to an issue where all elements below the iframe would be overlapped and not moved accordingly downwards.
The solution was to give the section an ID and add another .animate function in the expand function so that they both would be triggered at the same time. Not sure if this is the correct way, but it works. And the solution would then be
Solution
Javascript
$(function() {
$('section').on('click', expand);
});
function expand(e) {
$('#ramme').animate({
'height': '300'
})
$('#iframe').animate({
'height': '300'
}).css('pointer-events', 'auto');
$('section').off('click', expand);
}
HTML
<section id=ramme>
<iframe id="iframe" src="iframe source goes here" height="200"
width="900" scrolling="no";></iframe>
</section>
CSS
section {
position: relative;
height: 200px;
width:600px;
padding: 0;
}
#iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none;
}
DEMO
From fiddle:
http://jsfiddle.net/b6qfJ/92/
This is a great forum. Thanks!
I reread the question and realized that your objective is different than what I initially thought.
Just wrap the iframe in a block element and
make sure that the first thing the user clicks is the block element containing the iframe and not the iframe itself by making it unclickable with pointer-events:none.
Once the iframe has successfully enlarged, remove the click handler and enable the iframe to be clickable with pointer-events:auto.
Also, it helps to keep container and iframe together by using position: relative on the container and position:absolute on the iframe.
I'm well aware that you wanted the actual inputs to be event.target but besides the fact that it's impractical, the fact that at a height of 200px the user doesn't even see any inputs in the first place.
Demo
$(function() {
$('section').on('click', expand);
});
function expand(e) {
$('#iframe').animate({
'height': '300'
}).css('pointer-events', 'auto');
$('section').off('click', expand);
}
section {
position: relative;
height: 200px;
width: 200px;
padding: 0;
outline: 1px dashed red
}
#iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<iframe id="iframe" src="iframe source goes here" height="200" width="200"></iframe>
</section>
I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.
I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/
PROBLEM:
The contents of my div are positioned 'absolute' and the width of the contents are larger than the div.
As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !
I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}
I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?
You must use
$("element").on('mousedown', function(e) {}
Just change live to on
I have an iframe problem. firstly I search the keyword iframe height in https://stackoverflow.com/search?tab=relevance&q=iframe%20height but I did not find someone I need.
How to make an iframe wicth height with 100% and no scroll. Scroll-y in body.
<body style="scroll-x:hidden;scroll-y:auto;">
<iframe frameborder="0" id="iframe" scrolling="no" src="http://www.google.com" style="width:960px;height:100%" height="100%" width="960"></iframe>
And if I search something via http://www.google.com in the iframe, after turn to the google search result page. the iframe will calculate the new height and still with iframe height 100%, the scroll bar in the body part. (I wish some help could work perfect not only in ie and firefox, but also in safari and chrome ). Thanks a lot.
This should do what you're looking for:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<style type="text/css" media="screen">
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
* {
padding: 0;
margin: 0;
}
iframe {
width: 960px;
height: 100%;
overflow: hidden;
border: none;
}
</style>
</head>
<body>
<iframe src="http://google.com" scrolling="no"></iframe>
</body>
</html>
The keys here are to:
Make the BODY and HTML elements 100% of the browser window so when you make the iFrame 100%, it has something to be 100% of.
Set the BODY and HTML elements to overflow:hidden so that no scrollbars are shown
Make sure there is no padding
Hope that helps
Use my JQuery Plugin :
$.fn.resizeiframe=function(){
$(this).load(function() {
$(this).height( $(this).contents().find("body").height() );
});
$(this).click(function() {
$(this).height( $(this).contents().find("body").height() );
});
}
then , use it as following :
$('iframe').resizeiframe();
Don' forget to adjust attributes of iframe as following :
<iframe
src="islem.html"
frameborder="0"
width="100%"
marginheight="0"
marginwidth="0"
scrolling="no"
></iframe>
I was searching for the same effect and I found a way. If you look with 'examine element' in Chrome (or firebug) in the metrics section, then select the <html>. You should see if the html area is smaller than the whole document. If you set the html at height: 300%, it should work. Here are the important features:
html {height:300%;
}
body {height:100%;
}
#frame {height:90.74074074074074%;}
***watch for any max-height you might have coded, it would screw the effect up.
In my case, I had to split the frame height with another element in my container, so it could fully strech without scrollbars appearing. So I had to calculate the % of height remaining in my container, using firebug.
------- Another way, easier:
Try not specifying any height for BOTH your html documents,
html, body {}
then only code this:
#some-div {height:100%;}
#iframe {height:300%;}
note: the div should be your main section.
This should relatively work. the iframe does exactly calcultes 300% of the visible window height. If you html content from the 2nd document (in the iframe) is smaller in height than 3 times your browser height, it work. If you don't need to add content frequently to that document this is a permanent solution and you could just find your own % needed according to your content height.