iFrame not scrollable when height is not 100% - javascript

I have two iFrames, one is the content (this has nothing to do), but the one is driving me nuts is a vertical menu than displays several options to the user.
Everytime the vertical menu (let's call it vmenu) shows up I calculate its height depending on how many options the menu will display, and if the resultant height is greater than window.innerHeight, vmenu's height is set to that window.innerHeight.
But then it won't be scrollable. Instead, if I set its height to 100% it will be scrollable but will extend to the whole page (background page) which makes it scrollable too (two scrollable frames, awful).
What I only want is to set vmenu's height to window.innerHeight and to be scrollable without affecting whole page.
I have already set overflow-y: scroll and also tried setting scrolling attribute to 'yes' and force it, but nothing.
My iframe code:
<iframe
id="iFrameVMenu"
name="iFrameVMenu"
frameborder="0"
style="width: 0%; height: 100%; position: absolute; right: 0px; visibility: hidden; overflow-y: scroll;"
scrolling="auto"
src='<%= request.getContextPath() + "/.../.../.../layout.jsp" %>'
onmouseout="...">
If it helps, these two iframes I mention (only one matters now) are in a JSP page.
I would appreciate any idea on how to get this to work properly.
Thanks.

Related

How to give a site a side scroll bar when resizing window instead of allowing all elements to bundle or stack up together?

I am creating a site where i have given the elements static widths and heights. The website also includes images. When i resize the window, all the elements bundle up together (for example, in full window mode there are 3 images in a line whereas when I resize the window only 1 image is shown per line). Also all other elements get stacked up on each other. I wanted to know how can I prevent this and let all the elements in the same order as they are when in full window by giving it a side scroll bar on the bottom. For reference, see the Facebook login page: facebook login page. You might need to logout.
When you resize it, it simply gives a side scroll bar on the bottom and all elements remain in the same order. Is it possible to do this just with HTML or CSS or do I have to use JavaScript. Thanks a lot in advance!
By applying the following Css:
body {
min-width: 1280px;
overflow-x: scroll;
}
Just replace the pixel value with the required width.
you need to make the width of the body fixed to a specific px (the width of your window), for 1000px example
body {
min-width: 1000px;
max-width: 1000px;
overflow-x: auto;
}
If you add overflow-x: scroll; or overflow-x: auto; to the body, that should do the trick. Also don't forget to add a min-width and max-width as well to make it take effect.

Hiding iframe Scrollbar : Nothing Works

I have tried almost anything on the internet to remove scrollbar from my HTML Page. I am continuously getting dual scrollbars, which I don't want. I have made a page and have a menu bar on the top and want a page to be embeded below the menu bar. But all I get is an output like this: Take a look at this picture and notice the dual scrollbar. I have tried the following code in my html:
<style>
#container{width: 100%; height: 100%; overflow: hidden;}
iframe{width: 100%; height: 100%; border: 0;}
body {
margin: 0;
}
</style>
<body>
<div id="container">
<iframe src="http://myurlhere.somedomain"></iframe>
</div>
</body>
Any ideas what should I do?
PS: I want to retain the body scrollbar but remove the iframe scrollbar and also I want results in full browser width and height. Please don't post answers like
<iframe src="url" scrolling="no"></iframe>
or
frameborder="0"
or
iframe
{
overflow-x:hidden;
overflow-Y:hidden;
}
Because all these methods DON'T WORK!
I need to scroll the iframe but without scrollbar. Hope I'm clear enough with the question.
Try using iframe resizer https://github.com/davidjbradshaw/iframe-resizer
It hides iframe scrollbar and adjusts it based on parent window size.
From your screenshot it looks like you're using a top frame which includes a menu, and load the content in an iframe at 100% height.
The reason you're getting a double scrollbar is because the 100% height does not subtract the height of the menu.
Since the parent window won't know the height of the iframe contents (unless you use quite some javascript) you're better off making sure the parent window won't show the scrollbar and use the scrollbar from the iframe. This does have the effect of leaving the menu always at the top of the window, which may or may not be desired.
Depending on the browsers you'd like to support there are a few css only methods you could try.
(Edit: clearly labelled the different methods)
Method 1: css flex
The cleanest way to achieve this is using display: flex. By giving your body a display: flex; flex-direction: column and your #container a flex: 1 makes the #container fill the remaining height after the header. Example: https://jsfiddle.net/Ldyb418y/
Method 2: css calc
If the header has a fixed height, you could use css's calc() to make the height 100% - the height of the header: #container { width: 100%; height: calc(100% - 30px); overflow: hidden; }. Example: https://jsfiddle.net/jgdyqe1t/
Method 3: box-sizing and padding
If for some reason you can't or won't use calc and your header has a fixed height, you can use #container { width: 100%; height: 100%; overflo: hidden; box-sizing: border-box; padding-top: 30px; } in combination with position: absolute on the header. This places the header on the top padding of the iframe. Example: https://jsfiddle.net/dtk9ed8f/
Method 4: set iframe height from javascript
If you don't want the menu to always stay on top, you're stuck with using javascript. In this case you need to make the iframe tall enough to fit all the contents. However that means you will need to access the iframe's content in some way to get its height. This will only work if the parent frame and the iframe are on the same domain.
Using the method as described by hjpotter92 in Make iframe automatically adjust height according to the contents without using scrollbar?
Snipped from the post above:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And on the iframe:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
You will need to remove the overflow: hidden from your #container. Example: https://jsfiddle.net/wbznd35n/

How to make my image gallery width responsive to div below it?

I have an image gallery with name slider1_container and it's style properties are specified within the HTML code such as:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:700px;
height: 600px; background: #191919; overflow: hidden;">
This works perfectly, except that the slider is wider than the div box beneath this. This div box is 100% of the width of the parent class "rightcolumn", and my slider1_container div is ALSO within this class, but since it's width of 700px is set within the HTML code, it doesn't seem to be responsive at other viewport sizes.
I've tried to use media queries at various points to change the width of the slider1_container to something smaller than 700px, but it seems that the width specified in the HTML code overrules that.
[DEAD LINK REMOVED, PLEASE UPDATE]
If I set the 700px to auto, the width works perfectly BUT the image gallery shows only black when you load the page, until you choose another photo it will quickly appear (javascript issue it sounds).
If you resize the viewport on my site you can see the image gallery's width doesn't match the div box below it How can I make this responsive like the other div?
Thank you!!
Read the documentation for whatever slideshow plugin it is that you are using. It most likely has settings for responsiveness. If not, you can find a million different responsive slideshow plugins here

Dynamically div scrolling on mouse wheel both horizontal and vertically

I have a div name demo and i want to make this div scrolling when it exceeds it defined size . Also i want to track the height and width of div so that next time when i open my project it automayically assign that height and width to the div
Right now am giving hard coded double size of div height and width. Please let me know how it is possible and thanks in advance.
My div css is as follows
#demo{
top:80px;
position: absolute;
background-image:url(../images/bg6.jpg);
width: 2000px;
height: 1500px;
overflow: auto;
overflow-y: scroll;
}
If you want to fix the div in the screen, there is no need to track the scroll, you can make it fixed:
#demo{
top:80px;
position: fixed;
...
}
"Also i want to track the height and width of div so that next time when i open my project it automatically assign that height and width to the div"
You need to save those values, there are some ways to do that;
Database (by calling a php file for instance, you can associate that size to an user account, login etc.)
Cookies (its the easiest way, but the user will not have the data in other computers, and it will be wiped on a browser cache clean)
HTML5 api has also methods to keep data.

How to get rid of border for an Iframe in IE8

I am creating a dialog with an iframe inside, the problem is that the border keeps showing in IE8, this works perfectly in any other browser.
This is what I have tried, I also tried border:none
$(d.dialog).find('#MyCoolDialogInner').html('<iframe src="/apex/EscalationForm?id={!Case.Id}" height="495" width="380" marginheight="0" marginwidth="0" frameborder="0"/>');
Thanks in advance
Add the frameBorder attribute (note the capital ‘B’).
So it would look like:
<iframe frameBorder="0">Browser not compatible.</iframe>
Have you tried setting it via CSS?
iframe {
border:0px none transparent !important;
}
Also, these seem to work too - marginheight="0" marginwidth="0" frameborder="0". Taken from this post on the same IE issue.
Try this:
<iframe frameborder="no" />
I realize IE8 is a nuisance when it comes to iFRAMES. "Frameborder" is deprecated in HTML5 so while it's the easiest option for IE8, this is not a long term solution.
I have successfully hidden borders and scrollbars by placing the iFRAME inside of a container. The iFRAME container itself is placed inside of a div for overall positioning on the web page. The iFRAME itself is absolute positioned and negative margins applied to both top and left in order to hide the top and left borders. Width and height of the absolutely positioned iFRAME should be coded at over 100% so it exceeds the parent size to the point that the right and bottom borders are not visible (also the scrollbars are not visible). This technique also makes the iFrame responsive because the iFRAME container uses percentages as well as the div that holds the container. Of course the iFRAME parent div must be set to overflow:hidden.
Here is an example code:
/*THE PARENT DIV FOR THE iFRAME CONTAINER*/
.calcontainer
{
width:100%; /*adjust iFrame shrinking here - if floating use percentage until no white space around image.*/
max-width:200px;
margin:auto;
}
/*THE RELATIVE POSITIONED CONTAINER FOR THE iFRAME*/
.calinside /*container for iFRAME - contents will size huge if the container is not contained and sized*/
{
position:relative; /*causes this to be the parent for the absolute iFRAME*/
padding-bottom: 100%; /* This is the aspect ratio width to height ratio*/
height: 0;
overflow:hidden; /*hides the parts of the iFRAME that overflow due to negative margins and over 100% sizing*/
}
/*THE ABSOLUTE POSITIONED iFRAME contents WITH NEGATIVE MARGINS AND OVER 100% SIZE IS CODED HERE. SEE THE NORMAL SETTINGS VERSUS THE IE8 SETTINGS AS MARKED. A SEPARATE CSS FILE IS NEEDED FOR IE8 WITH A CONDITIONAL STATEMENT IN THE HEAD OF YOUR HTML DOCUMENT/WEB PAGE*/
.calinside iframe
{
position: absolute;
top: 0;
left: 0;
width: 100% !important;/*must expand to hide white space to the right and below. Hidden overflow by parent above*/
height: 103% !important; /*must expand to hide white space to the right and below. Hidden overflow by parent above*/
/*IE8*/top: -2%;
/*IE8*/left: -2%;
/*IE8*/width: 114% !important;/*For IE8 hides right border and scroll bar area that is white*/
/*IE8*/height: 105% !important; /*hide white space and border below. Hidden overflow by parent above*/
}
frameborder can be a 1 or 0, not sure "no" is a valid value. Coda provides valid value options while coding and only 1 and 0 are available to use when I do this to my iframe.

Categories