Using Colorbox jquery plugin, I use the iFrame popup class to display websites. Usually this works just fine, except when the website I am opening has larger than normal width. If that happens, The website will show horizontal scrollbars.
Here is the Colorbox code I use in my <Head>
<script>
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"100%", height:"90%", scrolling: false});
</script>
Here is the link I use to open website
<a class="iframe" href="client.php?id=<?php echo $rows['id']; ?>&Client Name=<?php echo $rows['client_name'] ?>">
If the website that opens is pretty standard dimensions, there will be no scrollbars or anything which is perfect. If the website it opens is very wide, it will show scrollbars and look bad. I would like to hide the scrollbars no matter what.
Here is an Example
Is there any to hide scrollbar in this situation? I tried inspecting with chrome, but when I try adding a Overflow: hidden to IFRAME element, it does NOT hide.
You can do it like this:
<iframe src="https://css-tricks.com" width="100" height="100" style="overflow-y: hidden;" seamless="seamless" scrolling="no"></iframe>
add style="overflow-y: hidden;" seamless="seamless" scrolling="no" to your <iframe>
See fiddle example: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/27/
Related
I have an iframe inside a modal but when I open the model the iframe in it is not showing the beginning of the page but the middle.
<iframe name="finance" id="finance" src="https://www.elbtools.com/secure/apply.php?elbt=1459262273170" frameborder="0" border="0" cellspacing="0" style="width:100%; height: 700px;"></iframe>
This is my codepen. Thanks.
A quick solution (edited codepen) is to append "#" at the end of your iframe src.
src="https://www.elbtools.com/secure/apply.php?elbt=1459262273170#"
Hope you can modify it until you find better solution.
My partner sites embed my website using an iframe. I recently change my website and it is now longer than what my partner sites have allocated in their iframe (and they have all set scrolling=no.
Given that I can't change my partner sites, I am trying to change my own site now so that everything still works. I noticed that I can add <div style='width:325px;height:400px;overflow:scroll'> as long as width and height is the same as the parent iframe.
Is there a way I can dynamically obtain width and height of parent iframe so that I can apply it onto my own site? Or can I use viewport to determine how big the parent container is?
<iframe srcdoc="
<html><body>
<div style='width:325px;height:400px;overflow:scroll'>
<h1>Hello,<b>world1</b>.</h1><br /><h1>Hello,<b>world2</b>.</h1><br /><h1>Hello,<b>world3</b>.</h1><br /><h1>Hello,<b>world4</b>.</h1><br /><h1>Hello,<b>world5</b>.</h1><br /><h1>Hello,<b>world6</b>.</h1><br /><h1>Hello,<b>world7</b>.</h1><br /><h1>Hello,<b>world8</b>.</h1><br />
</div></body></html>"
scrolling="no" width=325px height=400px>
</iframe>
You can use viewport width and height: width:100vw height:100vh
Snippet:
<iframe srcdoc="
<html><body>
<div style='width:100vw;height:100vh;overflow:scroll'>
<h1>Hello,<b>world1</b>.</h1><br /><h1>Hello,<b>world2</b>.</h1><br /><h1>Hello,<b>world3</b>.</h1><br /><h1>Hello,<b>world4</b>.</h1><br /><h1>Hello,<b>world5</b>.</h1><br /><h1>Hello,<b>world6</b>.</h1><br /><h1>Hello,<b>world7</b>.</h1><br /><h1>Hello,<b>world8</b>.</h1><br />
</div></body></html>"
scrolling="no" width=325px height=400px>
</iframe>
I have tow iFrame if1 and if2. if1 has Menu, menu height is 100%. and if1 height is 10%. if2 has 90% height. if1 and if2 are in horizontal positions. When I clicked on menu from if1 it shows only 10% view and remaining part of menu goes back to if2. How can i bring menu above both iframes.
Is there any other way to solve this problem?
<div id="xwikimaincontainer" >
<iframe src="https://localhost/headerFile" width="100%" frameborder="0" scrolling="no" height="200px" frameborder="0" allowfullscreen wmode="transparent"></iframe>
</div>
<div id="xwikimaincontainerinner"> Here main contaent comes</div>
In this code xwikimaincontainer div has header file src of one application and has menu. xwikimaincontainerinner div has xwiki application.
This is not possible, content cannot break out of an iframe for many reasons, security not the least.
I have included the fb-like plugin in a website that shows tooltips when the mouse is over any elements that have a title property.
The issue is that the facebook plugin adds a title attribute to the iframe, which is loaded after, and I can't seem to find a way to remove it.
The facebook plugin code:
<div class="fb-like" data-href="facebook.com/saekthmey"; data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true"></div>
It generates:
<iframe class="" src="http://www.facebook.com/v2.3/plugins/like.php?action=recommend&app_id=1098294926865015&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F1ldYU13brY_.js%3Fversion%3D41%23cb%3Df1931e415abd1ea%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A3000%252Ff37c5673a2d1dae%26relation%3Dparent.parent&container_width=294&href=https%3A%2F%2Fwww.facebook.com%2Fsaekthmey&layout=standard&locale=fr_FR&sdk=joey&share=true&show_faces=true" style="border: medium none; visibility: visible; width: 450px; height: 57px;" title="fb:like Facebook Social Plugin" scrolling="no" allowfullscreen="true" allowtransparency="true" name="f305ebf93e709ca" frameborder="0" height="1000px" width="1000px"></iframe>
I assume there is something like this somewhere in the website $('*[title]).tooltip() but I am not going to remove it anyway.
In other words, I need to execute code after the plugin is loaded.
I found this: Facebook like box load event jquery but it did not work.
I am trying to display a webpage inside a div using object tag of html. I have tried loading it inside a div but since the host name of that webpage differes, it gives CORS error.
Also tried iframe but it requires scrolling='no' to remove scrollbars. So, I decided to use object tag after referring https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object. I am able to remove the scroll bars if I specify fixed height and width in pixels. However, I want to decide this dynamically based on screen resolution to avaoid scrollbars appearing for any devices/browsers.
How can I achieve this? Below is my code snippet.
<div style="width: 100%; overflow:hidden;">
<!-- Main content goes here -->
<object type="text/html" data="<%=url%>" style="overflow: auto;" align="middle" standby="Loading ..." id="py-content"> </object>
</div>
I really appreciate any help on this.