Image scaling size dependent on browser size - javascript

Using this site as an example : http://www.reebok.com/en-GB/
The header div height adjusts dependent on the size of the browser, and the inner content has 100% height & width.
Is this controlled by javascript of can this be done solely with CSS?

You can only do this with the help of html & css. Write like this:
img{
width:100%;
height:auto;
}
check this http://jsfiddle.net/e8V47/

In your page, it's actually Javascript which is used.
The height of the container is modified inline (the style attribute)
<div class="module module-hero use-full-width displayed" data-module="Hero" style="height: 232px;">
It's however possible to do a similar thing with CSS, using % in height. For example :
.module{
height:40%; // A percentage relative to the parent element
}

the image in your example is adjusting by browser, it's in , if you only set up the width or height, the browser will adjusts another automatically.

Related

How to set body height with JavaScript?

document.body.height = document.getElementById("page-main").clientHeight + 400;
#page-main {
position:absolute;
width:100%;
height:2000px;
z-index:2;
background:#eeeeee;
}
#footer {
position:fixed;
width:100%:
bottom:0px;
height:400px;
z-index:1;
background:#aaaaaa;
}
<body>
<div id='page-main'>main</div>
<div id='footer'>footer</div>
</body>
I have a footer div with position: fixed; bottom: 0px; and a main content div with position: absolute;.
Basically the idea is to have the main content div act like a sheet of paper on top of the static background of the document, so you would scroll through the content of the page and when you get to the bottom you would need to be able to scroll a couple hundred more pixels to reveal the footer div below the main content div.
I allowed this in my landing page by finding out the height of the body necessary to facilitate this extra space at the bottom and setting the height using height: 1720px; on the body itself. However, I'd like to implement this in a way that it does not need to be constant, as I fear browsers and devices may have different rendered heights for the main content div and I'd like to use this on multiple pages without having to individually hard code the body height.
I tried using JavaScript to find the height of the main content div (using clientHeight, which seems to work perfectly) and add a couple hundred pixels to that number for the height of the body as follows:
document.body.height = document.getElementById("page-main").clientHeight + 400;
and also tried changing the following:
document.body.style.height
document.body.style.paddingBottom
This does not change the height of the body at all. I tried using a similar approach to change the body's background to red, which works, but for some reason it just refuses to change the height specifically. I've tried placing this script in the head, above the body, and at the end of the body. Doesn't help. Finding the clientHeight of the main content div works fine, adding 400 to that number seems easy enough, and I know the document definitely has a body, so I'm very confused as to why it could possibly be that JavaScript refuses to change the height of the body.
I've checked the console in Edge and Chrome and it seems there's no issue, so I'm completely lost here. Normally I can find answers online and I've never had to ask for help but at this point I feel like it's such a simple question and I have no idea why it won't work.
Sorry if this question is't written well, but does anybody have an idea of why JavaScript might not be allowing the changing of the height of the body?
TL;DR:
content div is positioned absolute and can change depending on scenario
footer div is positioned static on the bottom and is supposed to be revealed below the content div by allowing user to scroll a couple hundred pixels below the end of the content div
I want to achieve this by altering the height of the body, which works perfectly through hardcoding in html but for some reason JavaScript refuses to change the height of the body
Try it like this:
document.body.style.height = document.getElementById("page-main").clientHeight + 400 + 'px';
You have to specify the units to get a proper result. Like you would do in CSS.
Setting the height of the body element, the way you want in your question, is complicated by it's relationship with html element and their default CSS (like position: static on body), and by the overflow property. Read more here.
From my experiments on the chrome console, you can't set body height via document.body.clientHeight, it seems to be read-only. You'll need to set height (and possibly overflow) properties in CSS (via document.body.style for javascript).
However, I think the best solution for the effect you want doesn't involve setting body (or html) properties at all. Try this:
Let the footer element by default have CSS: display: none
Detect when user has scrolled to the bottom of the page (using jQuery or scrollTop) or bottom minus some offset
Change the footer's CSS to display: block (by toggling classes preferably, or editing the style property). This will automatically increase the body's scrollbar to accommodate the footer.
When user scrolls back up beyond the footer (or point 2 is false), you set it's CSS to display: none again.
With the above approach, there is no need to hard code or know before hand the height of your footer and non-footer content. You don't need to mess with html or body element CSS. You can also apply CSS animations if you want!

Javascript injecting html at runtime css height not stretching

I am injecting html at runtime into my page:
document.getElementById(divId).innerHTML='<object type="text/html" data="'+pageUrl+'"></object>';
The data injected happens to have a scrollbar and not stretching 100%...so I've added this:
document.getElementById(divId).innerHTML='<object type="text/html" data="'+pageUrl+'" style="width:100%;height:100%;"></object>';
This fixes the width issues and makes the content 100% width but the height has a scrollbar and I don't want it to scroll, I need it to stretch.
I've also tried height:auto; but it's not stretching.
How can I get it to stretch to the whole height?
For the 100% height to work, every parent element (including html and body tag) needs to have a defined height of 100%.

Am I stuck with forcing fixed image size for image tags?

I have a website that contains a side bar and sometimes an image of a very large size (about 800 pixels wide) but I scripted the code so that if a screen resolution is too small, the image shrinks and scales into the small space perfectly according to multiple browsers I tested the site on. I tested the site with the demo version of sortsite by powermapper at:
http://try.powermapper.com/Demo/
It then goes on to complain that "Omitting IMG WIDTH or HEIGHT attributes means page text jumps about as images load. Usability.gov 14:3"
I understand that and I try to include those attributes, the image does not scale correctly.
This is the CSS I use on the image itself to scale it if I had a monitor with a max screen width of 800 pixels:
#media screen and (max-width: 600px){#X IMG{width: 100%}}
I specify 600px because I reserved 200 pixels for the sidebar.
I don't think javascript will be an answer because during the page load, the image placeholder will jump to the new size, and if I placed the code near the beginning, it will delay the the rest of the page from loading somewhat.
I was also thinking using div tags and setting the background to the image, but the problem there is that users won't be able to save it and the rest of the images on my site are part of a CSS sprite sheet.
I also am looking for a solution that will work with as many web browsers as possible even if javascript is disabled.
Any ideas for an answer?
This rule, while correct, went out the window when responsive design came into being:
Omitting IMG WIDTH or HEIGHT attributes means page text jumps about
as images load. Usability.gov 14:3
If you're always going to be using a given aspect ratio, then you can set up your code as below. If you set your width and height attributes on your img tag and you set max-width: 100% (or similar) in your CSS, as people often do when developing responsive sites, then your text will still jump around when the image loads, because it's initial height will be what you specify in your markup, and then when the image loads, the browser will maintain the aspect ratio required for max-width: 100% to work and end up shrinking the height - so that doesn't really help you adhere to your usability rule either.
.img {
background-size: cover;
background: center no-repeat;
}
.ar {
height:0;
padding: 0 0 56.25% /* 16:9 aspect ratio */
}
<div class="img" style="background-image: url(https://placekitten.com/g/500/500);">
<div class="ar"></div>
</div>
Try setting the width and height and then just adjusting width and height with your media queries (rather than max-width and percent width). You shouldn't encounter any scaling problems then.
#media screen and (max-width: 600px){#X IMG{width: 100%}}
This means that IMG will have full width of it's first parent. That parent might not be X element. Are you sure you want that?
Example:
<div id='X'>
<div><div><div><div>
<img src=''>
</div></div></div></div>
</div>
If you are trying to fix x:y img ratio that put height:auto; after width:100%;
Calculate width or height and always use auto for other property to preserve image scaling.

Set the scrollable height of an entire page regardless of content?

Is there a way using css and html to control the maximum scrollable height of a page, regardless of the content which is present on the page?
For a concrete, hypothetical example: say the <body> is incredibly simple - a <div> which is 5000px tall. How would you set the scrollable height to be only 2000px?
Thus it would appear that the 2000th pixel is the last pixel on the page. The browser's scroll bar would appear to be at the bottom, not just "stuck" halfway down the page. Am I missing something simple to achieve this behavior? I would prefer pure css/html because it seems like it should be doable, but I would accept js.
You can do something like this
HTML
<div class="outer">
<div class="inner">
<!--your content here-->
</div>
</div>
CSS
.outer {
height:2000px;
overflow:auto;
}
.inner {
height:5000px;
overflow:hidden;
}
You should set the body height to a specific number and set overflow to hidden.
body{
height:2000px;
overflow:hidden;
}
Made an example here
Use max-height or height css properties and overflow:hidden on your container element. It will hide everything that is greater than the height you specify, therefore limiting the scrollbar height.
I should also mention that you can use overflow-y:hidden will achieve the same thing, but will only affect top and bottom edges of an element. See more details here.

My webpages div doesnt set dynamic width correctly

I have 2 toolbars, 1 of each side of the screen, and a main content area. I dont want it to have to sidescroll cause that is pathetic, so i was trying to figure out if someone could help me set it up.
My current attemp was:
$("#main").css("width", window.outerWidth - $("#t1").width() - $("#t2").width());
The issue is that it is too big still because of margins. Instead of me doing width, should i do outerWidth, similar to how i did window, or is there a jquery command which will do just that?
Thanks
here is a basic fiddle: it is set up differently, but the idea is there. I just am unsure as to how to do it. http://jsfiddle.net/fallenreaper/DfZx7/
Upon tinkering deeper and deeper with my fiddle, i am fairly certain i figured it out in the example i had given. derp Standby while i look and see if i can apply the same thing to my code.
The sample did not work with my code, but border was set to 2px around, for both main and attributes. Deducting 8 pixels resolves.
You don't need JavaScript to avoid scrollbars. It's a layout width two fixed-width columns and a liquid one.
Here is the "skeleton" of your layout in a responsive way:
<div id="window">
<div id="column-sx"></div>
<div id="main"></div>
<div id="column-dx"></div>
</div>​
CSS:
#window {
width:100%;
overflow:hidden;
}
#column-sx {
width:54px;
float:left;
}
#column-dx {
width: 140px;
float:right;
}
#main {
width:100%;
float:left;
margin-right:-194px; /* left + right col width */
}
#main > * {
margin-right:194px; /* left + right col width */
}
This way it will never "break" nor cause an horizontal scrollbar.
Anyway, probably you want to set a min-width for #main contents, and add another container for contents instead of targeting them with > *
Check this fiddle with your code revised
Off the top of my head, i would think outerWidth would work. If it doesnt, you can find the margin value via the .style attribute - but thats not ideal.
One thing you should be aware of is window resize if your setting your widths dynamically and you truely hate horizontal scrolling. You could put the above function also in the $().resize() function to ensure the widths are always within the window and complement this with css min-width so it doesnt go too small.

Categories