Auto Scroll iframe on page load - iframe

i'm opening a website in an iframe (using a bootstrap modal) and
i know that there will be a vertical overflow in that iframe.
Because there is a navigation bar of 200px on the left site on that opened website
i want to auto scroll 200px to the right.
does somebody know how to handle that?

Put the iframe in a div with overflow:hidden;
iframe style margin-left:-200px;
Problem solved, do you need an example or is the problem resolved with this answer?
UPDATE
<div style="overflow:hidden;">
<iframe src="http://floradetuinen.nl/" width="900" height="900" style="margin-left:-200px">
</div>

Related

Center an iFrame

http://makememodern.com/portfolio/
You will see that I have embedded a website onto the page and that it is aligned to the right side of the page. I would like it to be centered.
<div style="text-align:center">
<iframe style="-webkit-transform: scale(0.7);" src="http://www.stokeswilliams.com" width="100%" height="700px"></iframe>
</div>
You are setting the width of the iframe as 1100px. The div that's wrapping it has a dynamic width.
To solve it, you can set the width of the iframe to match the width of its parent container, by doing this:
iframe {
width: 100%;
}

Avoid sidebar overlapping content on tumblr with CSS positioning

I'm having problems avoiding my sidebar to overlap the main content of my blog on tumblr. I am using a premade template on tumblr which i have modified. The only ways I can position my sidebar in the top right corner, is by using an absolute or fixed position:
#sidebar{
position:fixed;
top:20px;
right:20px;
}
When using e.g. relative, the sidebar position itself in the bottom after my main content.
My page is built up like this:
<body>
<div id="page">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
</body>
Click here to see the page.
I tried putting my sidebar inside the page div, but there's a constraint on the width, which I would like to keep. Thank you in advance.
According to your latest comment, this should help your problem:
You could just set a min-width on your page, rearrange your markup a little, and remove some styles on the sidebar. If you leave everything like it is now, then the following will help:
Set min-width: 1250px; on your body tag
Move the sidebar element to before the page element
Remove position: fixed; from the sidebar element
This will prevent the menu from overlapping the page content and will add a horizontal scrollbar to the page when the user's window is less than 1250px. If you want to support a smaller min-width or if you have a problem with the background image becoming not centered at small resolutions, then minor modifications will be necessary.

Image does not scale properly in Phonegap, jQuery mobile application

I'm creating an iPhone app using PhoneGap and jQuery mobile. I'm using a simple image tag and set the width to 100% and height to auto, but the image is not scaling properly and gets cut off. I have also tried using max-width with the same outcome. Any idea how I can solve this?
<div data-role="page">
<img class="banner" src="..." style="width: 100%; height: auto;">
</div>
I have even tried this:
$('img.banner').each(function(){
$(this).width($(window).width());
});
Previously i have gone through same problem. I tried min-height. And why both maximum-scale=1, minimum-scale=1? Try minimum-scale=1. Just give a try
I'm assuming that your image is actually nested in a div with a data-role="content" and your problem is that class ui-content by default has a 15px padding.
The simplest way to correct that would be to simply override the CSS for that page to get rid of that padding, if you need it for other elements then just wrap them in a div and add padding to those divs.
For example
CSS
.imgContPage { padding:0px; }
Markup
<div data-role="page">
<div data-role="content" class="imgContPage">
<img class="banner" src="http://dummyimage.com/600x400/000/fff.png&text=PlaceHolder" style="width: 100%; height: auto;">
</div>
</div>
Link to JSBin
Alternatively you can set a negative margin on your img to compensate for the padding, but then you will need to calculate the width so that it fills up to the right side.
Ok, I feel very stupid right now. I was getting that image from a JSON response that was coming from a Wordpress website. When I was parsing my JSON to get to the image, I was using the thumbnail version of the image (which in my surprise, it's not really a scaled thumbnail, it's just a cropped 150x150 square of the main image).
So I changed my reference from:
json.page.thumbnail
to
json.page.attachments[0].images.full.url
And now the image scales just fine (width: 100%, height: auto).
Thanks everyone for your helps

Background image and div positioning?

I have the following structure:
<div id="wrap">
<div id="container">
<div id="header">
</div> <!--close header-->
<div id="main">
… etc
I'm trying to display a background image that will show the full height of the image, but not force the page to scroll as a result of it but that will scroll with the page content.
I've placed a #bgimage div after the opening tag of the #container div and I've tried the following CSS:
position:fixed + height:100% - displays the full height of the image but doesn't scroll with the page content
position:absolute + height:100% - scrolls with the page but cuts off the image where the page content ends
position: absolute + height:1000px - displays the full image but forces the page to scroll
Any idea?
Thanks
Set the background on the body itself. CSS3 allows you to set multiple backgrounds in case you already got one. Although this doesn't work in IE8 and before.
[edit]
Since that doesn't work in your page, try to make the bgimage div a container for your page content without specifying an exact height. Set the min-height to 100%.
That way, it should size to the page content. It will always reach to the bottom of the window, and it won't force scrollbars when they're not needed. The min-height causes the div to fill the window in case the content is smaller than the window height.
Use background-attachment: fixed; it will scroll with the page.

css error - adding a banner messes up the scrollbar of the page

hi
I have this simple CSS code to add a banner to a sharepoint 2010 site - the problem is, when I add it, the page doesn't 'recognize' the additional horizontal space added by the banner, and thus the scrollbar scrolls past the bottom of the page. This happens when windows is maximized as well as when it isn't. Happens in IE, chrome, FF.
EDIT: screenshot of browser scrollbar
banner code:
<div id="header_container">
</div>
css:
#header_container {
background-image:url('/Images/topBanner.png');
background-repeat:no-repeat;
background-color:#fff;
height:147px;
}
Try adding 1px padding and set the width. Im just learning but ive found sometimes wierd stuff happens when you add more code to a site. The 1px of padding has fixed some of my layouts
Also id recommend not using header_container as your div tag. Think about how many items you have in the header.
EG if i had a banner and site name but still needed a wrapping div i would use
<div id="header">
<div id="banner"></div>
<div id="headerlogo"></div>
</div>
or
<div id="headerbox">
<div id="banner"></div>
<div id="sitetitle"></div>
</div>

Resources