<div class="LHSChunk" style="width:690px;float:left;">
<div class="DetailComments" runat="server" id="CommentVisible">
<iframe id="iframeComments" runat="server" scrolling="no" frameborder="0" style="width: 700px; height: 400px; visibility: visible;"></iframe>
</div>
</div>
Here I wanted to set my iframe's height as dynamic one based on the page displayed in iframe. For your info I'm using same domain page in iframe.
This helped me,
<script type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight;
}
</script>
in aspx,
<iframe id="iframeComments" runat="server" scrolling="no" frameborder="0" style="width: 690px; visibility: visible;"></iframe>
in aspx.cs,
iframeComments.Attributes.Add("onload", "resizeIframe(this)");
Thanks.
Related
I'm trying to make a slideshow on my webpage that will iterate through a list of html projects and showcase them using an iframe. I'm stuck on how to make the loop that will change the src each time and open the new project.
This is the code I've been able to come up with:
<div class="buttns">
<button id="previous" type="button"><</button>
<div>
<iframe
style="
width: 480px;
height: 270px;
position: relative;
left: 0px;
top: 0px;
overflow: hidden;
"
frameborder="0"
type="text/html"
src=""
width="100%"
height="100%"
allowfullscreen
>
</iframe>
</div>
<button id="next" type="button">></button>
</div>
<script type="text/javascript">
$("#next").click(function () {
$("#p_elem").attr("src", function (data) {
var webpages = [
"../Wolfie873.github.io/Test Projects/DissapearingCircles.html",
"../Wolfie873.github.io/Test Projects/GuessTheNumber.html",
"../Wolfie873.github.io/Test Projects/TestReaction.html",
];
for (var i = 0; i < webpages.length; i++) {
return webpages[i];
}
});
});
</script>
If someone can point me in the right direction, I would greatly appreciate it as I am new to coding.
I have a popup which contains the facebook iframe and its seems like the inline stylesheet method in not work
<div data-html="allow" >
<iframe style="border: 0px; display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
</div>
I am trying to increase the width and height of the iframe but its not work.any clue?
Any help is appreciated.
thanks,
I'd use JS for this, like so:
<div data-html="allow" >
<iframe id="iframe1" style="border: 0px; display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
</div>
<script type="application/javascript">
function resizeIframe {
iframe.width = iframe.contentWindow.document.body.scrollWidth;
iframe.height = iframe.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iframe = document.getElementById( 'iframe1' );
resizeIframe;
} );
</script>
First of all, sorry for my english I'm still learning so I will try to explain myself as best as possible.
My question is, how can I fit the iframe height at 100%? I tried different solutions but anything works. This is my code:
HTML:
<div id="header_PA">
<div id="menu_PA">
<div id="logo_PA">
<img src="_images/1.png" title="Local PA" id="logo">
</div>
<div id="sections_PA">
...
</div>
<div id="user_box">
...
</div>
</div>
<div id="sub_menu_PA"> </div>
</div>
<iframe id="iframe_PA" src="_local_pa/dashboard.php" ></iframe>
<div class="smallFooter">
...
</div>
CSS:
#header_PA{
position: fixed;
width: 100%;
height: 70px;
z-index: 999;
}
#iframe_PA{
width: 100%;
height: 100%;
margin-top: 73px;
}
.smallFooter {
background: #121212;
}
I have skipped unnecessary parts of the HTML and CSS code.
The result of that, you can see it in this picture:
Screen Capture
Apparently the width property works but the height no. Anybody knows how can I solve it?
Thanks in advance!
Try this code to set the iframe width and height,
<iframe src="_local_pa/dashboard.php" width="100%" height="200"></iframe>
You need a little bit of javascript to adjust the height of the iframe element.
this works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>auto iframe height adjust</title>
<style>
</style>
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
</head>
<body>
<iframe width="100%" id="myFrame" src="thispage.htm" scrolling="no" frameborder="0">
An iframe capable browser is
required to view this web site.
</iframe>
</body>
</html>
Original source: http://w3schools.invisionzone.com/index.php?s=59fbfe0376deb43204ffff5aaf04736f&showtopic=26417#entry145317
Can we make the following Google Map interactive provided the frame image is showing.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="button" onclick="$('#frame_image').show();" value="Show frame layer">
<input type="button" onclick="$('#frame_image').hide();" value="Hide frame layer">
<br /><br />
<div style="position: absolute; z-index: 1;">
<iframe frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.ca/maps?f=q&source=s_q&hl=en&geocode=&q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&aq=&sll=43.656877,-79.32085&sspn=0.852471,2.113495&ie=UTF8&hq=&hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&t=m&z=14&ll=43.67111,-79.395217&output=embed&iwloc=near" ></iframe> <br />
<small>View Larger Map</small>
</div>
<div style="position: absolute; color:red; z-index: 2" id="frame_image">
<img src="http://torontoclinic.awkwardhosting.com/images/frame.gif" />
</div>
Code is also on the following link:
http://jsfiddle.net/pPrZV/
Please let me know if there is any other way via Google Maps API etc.
Thanks
Just apply this style to <iframe> of the google map
<iframe style="border-radius:250px" frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no"...
Working jsFiddle here
I have a facebook Like button in my website.
I have kept the Like Button only once.
When I try it in my local system. I get the Like button correctly But the same index.html when put Live shows me 2 like button .. How do I handle this .
Strange, from looking at the source the problem is:
<div id="callUs" style="FLOAT: right"><a>Call us: +91-95661 60513<br ><span>email: bimmtechnologies#gmail.com</span></a></div>
<div align="right" class="fb-like" data-href="http://bimmtechnologies.com/" data-send="true" data-width="450" data-show-faces="true"></div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.bimmtechnologies.com/" scrolling="no" frameborder="0" style="border:none; width:200px; height:40px">
</iframe>
there seems to be only one iFrame, yet inspecting DOM gives you:
<div id="callUs" style="float: right;"><a>Call us: +91-95661 60513<br><span>email: bimmtechnologies#gmail.com</span></a></div>
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://bimmtechnologies.com/" data-send="true" data-width="450" data-show-faces="true" align="right">
<span style="height: 29px; width: 450px;">
<iframe src="http://www.facebook.com/plugins/like.php?channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D5%23cb%3Df1d310dc178f298%26origin%3Dhttp%253A%252F%252Fwww.bimmtechnologies.com%252Ffd67aabbddb5%26domain%3Dwww.bimmtechnologies.com%26relation%3Dparent.parent&extended_social_context=false&href=http%3A%2F%2Fbimmtechnologies.com%2F&layout=standard&locale=en_US&node_type=link&sdk=joey&send=true&show_faces=true&width=450" class="fb_ltr " title="Like this content on Facebook." style="border: medium none; overflow: hidden; height: 29px; width: 450px;" name="f2e9ee7de90f1f6" id="f7f40995b577b2" scrolling="no"></iframe>
</span>
</div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.bimmtechnologies.com/" style="border: medium none; width: 200px; height: 40px;" frameborder="0" scrolling="no">
</iframe>
Some strange java-script is adding content into the div with class "fb-like":
<div align="right" class="fb-like" data-href="http://bimmtechnologies.com/" data-send="true" data-width="450" data-show-faces="true">
</div>
If you disable javascript, notice how the double disappears.
Fix
remove the aforementioned div as well as:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
which appears right after
<body>
Double-check your code because you really have two iframes generating fb buttons. You have one div with class .fb-like fb_edge_widget_with_comment fb_iframe_widget (the one that is styled, which makes me think is the right one), and right after you close this div you have another iframe tag that you can try to delete. As a last option, try this in your style.css file: #header > iframe { display: none; } - Hope it helps!