How to have menu out from iframe and show over two iframes? - javascript

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.

Related

I want to move left this post, i mean i want to add negative left margin, how can i?

I want to move left this post, i mean i want to add negative left margin, how can i?
i am unable to move this post left side please help me to move this post left side, its a youtube embeded code.
I have to paste it on my blog.
Help me experts.
Thank u
<iframe width="238" height="136" src="https://www.youtube.com/embed/h5yKGDlFiV0" frameborder="0" allowfullscreen></iframe>
You need to set position:relative on the parent container and then you will be able to give negative left margin to the iframe. Not sure what your surrounding markup is, but here's an example:
<div class="video-wrap">
<iframe width="238" height="136" src="https://www.youtube.com/embed/h5yKGDlFiV0" frameborder="0" allowfullscreen></iframe>
</div>
with this CSS:
.video-wrap {position:relative;}
.video-wrap iframe {margin-left:-15px;}

change css dynamically according to size of parent iframe

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>

hide scrollbars iFrame child website

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/

how to make an element padded to set the other element's, besides it, text visible completley on overflow in html

I have used float and made 3 divs floated, left, right and center. Left one and right one have images, Where as center one has text in it. But, when the center div's text is overflowed, it's text is displayed below. For example, I have programmed my html file based on my laptop browser. I have used padding so that the text will be fit exactly in between those 2 images. But when I have opened the same html file in my mobile, which has less pixels, the text has been displayed in 2 lines.
Now, my problem is that, I want to make the text fixed in between those 2 images no matter in which device or browser the file is opened. How can I do that?
Here is my code:
<header>
<div style="float:left;padding-left:24%">
<img src="avr_logo.jpg" style="display: inline" width="100" height="18%" alt="Browser not Supported">
</div>
<div style="float:right;padding-right:20%"><img src="hk.jpg" width="100" height="17%"></div>
<div style="float:center;padding-top:1%">
<h1>Welcome to AHK Organization</h1>
</div>
</header>
I do not have any fixed tags as of in:
How can I make an element on a webpage fixed BUT relative to another element?
The solution over there says to fix the center and make left and right tags relative to the center tag. I don't want to fix any tag.
try this fiddle use display:inline-block rather than float
<header>
<div style="display:inline-block;width:25%;">
<img src="avr_logo.jpg" style="display: inline" width="100%" alt="Browser not Supported">
</div>
<div style="display:inline-block;width:44%;">
<h1>Welcome to AHK Organization</h1>
</div>
<div style="display:inline-block;width:25%;"><img src="hk.jpg" width="100%" alt="Browser not Supported"></div>
</header>

How to set height and width of object tag so that no scrollbars appear

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.

Categories

Resources