Is this possible? Essentially I'm trying to create a div layout that looks like:
<div_wrapper>
<div_header>
</div_header>
<div_content>
</div_content>
</div_wrapper>
Where upon page load, the div_header occupies 200px, and the div_content fills the remaining vertical space. And also, as the browser changes sizes (ie, user drags corner of browser to resize), the div_header still remains at 200px, which the div_content dynamically changes sizes.
Is this possible? Thanks.
This should do it..
#wrapper{height:100%;}
#header{
height:200px;
float:left;
width:100%;
}
#content{
height:100%;
}
i don't see any problem with div_header () just create a css rules that states:
#header{height:200px;}
you can use js to resize you content (). If you include jQuery
$(document).ready(function(){
$(window).resize(function(){
$('#content').css("height", ($(window).height() - 200) + "px");
});
$('#content').css("height", ($(window).height() - 200) + "px");
});
Hope this helps
Related
Is there an elegant way to set breakpoints, of sorts, on height of containers.
Example:
Say you have a div and a min-height is set at say 100px. As soon as the content gets too much it doesn't just grow, but grows by another 100px and when the content eventually gets to the bottom of the 200px extend the height by another 100px.
Has anyone do anything like this before?
I don't think this is possible only using CSS, but you can use javascript:
html:
<div id='div'>hello</div>
javascript:
var div = document.getElementById('div');
var height = 0;
div.style.height = height + "px";
while(div.scrollHeight > div.clientHeight){
height += 50;
div.style.height = height+"px";
}
http://jsfiddle.net/fa7d0/JkT7R/
I found your question very interesting so i took the grow bit literally and created a fiddle where content changes is handled and the containing div is increased either in width or height by a defined threshold.
Fiddle: http://jsfiddle.net/Tvswj/1/
The main idea is that you'll only have to listen for DOM changes and then run a jQuery function as such:
// Trigger the resize function on content change
$(myDiv).bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function () {
$(this).breakpointResize(threshold);
});
If you find it useful, please go ahead and use it and modify as you want.
Credits for DOM events: How to alert ,when div content changes using jquery
You can use container style height: auto ! Important; and min-height: 100px; width: 100%;
How can I prevent a div which contains a long list of items from expanding the page height. I want the div to take up the entire screen but no more so that it doesn't push the footer down.
Set an specific height for the div container, and also set overflow-y with auto in order to show the scroll bar only when the content of the div is larger than the height set in the container. Like this:
.container {
height: 500px;
overflow-y:auto;
}
Without js, it is not possible because your page can be viewed in different resolution. Different resolutions means different height. Matter of fact, you may want that behaviour when user resizes the browser window as well, am I right? So first, find out the height of the browser, subtract the height of the footer from it, and set this height to your container, which I believe you want to make scroll able on yaxis. That will solve the problem. All these tasks are pretty simple and you can do it by little googling.
Use JavaScript/jQuery for this:
jQuery Solution:
<div id="content-div">some content here</div>
$(document).ready(function() {
var height = $(document).height();
height = height - (your footer height);
$("#content-div").css({ 'max-height' : height.toString() });
});
Standard JavaScript solution:
<div id="content-div">some content here</div>
function myfunction () {
document.getElementById('content-div').style.height = getDocHeight() + 'px';
}
window.onload = myfunction();
document.getElementById('content-div').style.height = getDocHeight() + 'px';
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
Also, change CSS to:
#content-div { background-color:#1d1d1d; color:#eee; overflow-y: scroll; }
ok there are several similar questions but not quite anything that I want.
I have few ajax requests on page and I want to show the image in the center of the screen, and its all working OK.
Just to make it look more prominent, I wanted to place that image on a div with translucent background, so its more obvious for the end users. Now comes the tricky part.
I made the div with css like this:
.divLoadingBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%;
height: 100%;
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
}
This fills the page up alright, or, I should say, this fills the viewport. If I scroll the page down, the page is again normal. I want this div to span the ENTIRE LENGTH of the page, no matter how long the page is.
Here is an example mockup of the problem I made to quickly demonstrate:
As you can see, I took the example of SO for the mockup ;) image 1 shows that its okay when it appears. image 2 shows that it goes up with the page on scroll.
I'm a c# developer and css is as alien to me as ancient latin.
How to make this divLoadingBackground div to fill out the entire length of the page?
Many thanks for any help.
If you need any additional info, please comment!
One thing I dont see in your css is z-index. Fixed, although, fixes this problem, sometimes, based on how other divs are positioned, your divLoadingBackground div could end up in one of the divs.
try adding
z-index: 9999;
or something similar and see if it works.
Would have put this in a comment, but it seems I have too low rep to comment.
Where is the .divLoadingBackground div located in the DOM tree? Since it has fixed position, it shouldn't scroll with the page. This makes me belive that the element is too deeply nested. Try putting it right in the body level of the page and see if that helps.
Also, are you sure that some other css directive isn't changing the position attribute to absolute or something?
Also, make sure to use the right DOCTYPE. That has some impact on fixed position elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Oh, and ofcourse, fixed position isn't supported in IE6 and below.
I believe you will need JavaScript/jQuery to dynamically set the height of the div in question to the height of the page once rendered.
And if you're entering the world of web, it's time to learn that new language "CSS" as well as perpahs-not-quite-as-daunting JavaScript.
When I needed such a functionality some years ago, I examined how Google Calendar did it.
Basically, they use a timer-driven JavaScript file that checks for the height of the window and adjust the height of a contained DIV tag accordingly (or of an IFRAME tag, just any container tag that you like).
Here is a code snippet from a page I worked on:
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.height = "100%";
document.getElementsByTagName("html")[0].style.height = "100%";
document.getElementsByTagName("body")[0].style.minHeight = "100%";
document.getElementsByTagName("html")[0].style.minHeight = "100%";
function height()
{
try
{
height_iframe();
}
catch(err)
{
}
}
window.onload=height;
// --
var ie6WorkaroundIFrameResize = 1;
function height_iframe()
{
var any = false;
var offset = 300;
var c = document.getElementById("iframecontent");
if ( c!=null )
{
c.style.height = (GetClientHeight()-offset)+"px";
any = true;
var d = document.getElementById("iframeie6");
if ( d!=null )
{
d.style.height = (GetClientHeight()-(offset+ie6WorkaroundIFrameResize))+"px";
any = true;
ie6WorkaroundIFrameResize = 0;
}
}
if ( any )
{
setTimeout( 'height_iframe()', 300 );
}
}
function GetClientHeight()
{
return document.documentElement.clientHeight;
}
</script>
Basically, the script regularly checks for the height of the window via the GetClientHeight() function and adjusts the element in concern ("iframecontent") accordingly.
I subtract some offsets of fixed-height headers and footers.
AFAIK you would need to set the size of this divthrough javascript. I would recommend using jQuery, in this way :
//$(document).height() gives the size of the document
//(as opposed to $(window).height() that would give the size of the viewport
$("div#overlay").css('height',$(document).height());
Here's the scenario:
I have an asp.net webpage which displays dynamic data in a gridview.
I'm using a master page to display the header and footer of the page, and this gridview is being displayed inside a div in the contentplaceholder.
The Problem:
What I want is that the size of the page that is displayed remains constant for a user and must be equal to the size of their browser's available display area and the content being visible by scrolling the div.
Sort of like the header and footer remain at the same position and the content inside it is scrollable.
I really don't know how to achieve this.
Any help on the matter is highly appreciated.
Thanks.
Try some jQuery:
function changeHeight(){
var winHeight = $(window).height();
var heightOfHeaderAndFooter = 200px; // change this to what you need
$('#myDiv').height($(window).height() - heightOfHeaderAndFooter);
}
$(window).resize(function() { // changes height with browser window
changeHeight();
});
$(document).ready(function() { // changes height on load of the page
changeHeight();
});
What you want is for your div to use width:auto and to dynamically change the height of it to always keep the footer at the bottom of the page. Also, make sure your div has overflow-y:scroll
Code snippet:
divMain.style.height --> height of div in pixel containing GridView. This div tag also has style setting of style="overflow-y:auto;"
document.documentElement.clientHeight --> height of the working/client area for your display.
document.getElementById("divMain").offsetTop --> height of content prior to divMain.
25 --> this is the height of my additional footer.
The pixel result is the height available for your divMain.
divMain.style.height = (document.documentElement.clientHeight - document.getElementById("divMain").offsetTop - 25) + "px";
Hope this helps.
Hi I have big background images 1200 by 1200, what i would like to do is expand the images when the user resizes the browser but constrain it so they never scale any smaller than the original size.
There all lots of scalable bg images out there but none I can find that do this, any help would be appreciated.
background-size: cover;
there you go
The following CSS + Javascript + JQuery combination has worked for me.
Thanks to ANeves for the above answer which was helpful.
CSS:
body
{
background: url(background.jpg) center center fixed;
background-size: 100% auto;
}
Javascript (JQuery):
jQuery (function ($)
{ // ready
$(window).resize (function (event)
{
var minwidth = 1200;
var minheight = 1024;
var bodye = $('body');
var bodywidth = bodye.width ();
if (bodywidth < minwidth)
{ // maintain minimum size
bodye
.css ('backgroundSize', minwidth + 'px' + ' ' + minheight + 'px')
;
}
else
{ // expand
bodye
.css ('backgroundSize', '100% auto')
;
}
});
});
another possibility would be to use media queries. set the image size to be say..1280x450 and then use a media query of background-size:100% auto; for all window sizes over 1280px wide.
there is some code which also handles image resizing with IE, however ive admittedly had limited success with it...
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale')" ;
if anybody has any add ons or fixes for the above then feel free to contribute.
hope this helps someone out there...
For background images, I usually set a minimum width for the html tag which would be the original width of the image or less, this stops the image from shrinking too far.
Put image in div and give size to it.
Apply following property to img tag
background-repeat: no-repeat;
background-size: 100% 100%;
You seem to be looking for CSS3's background-size property. You can constraint the minimum size to the container, if you know that the images are 1200x1200.
I don't believe it'll work on IE though, so it might not be an option for you.
In that case, I suggest you take a peek at http://www.markschenk.com/cssexp/background/scaledbgimage.html