We Keep Coding

Auto resizing header with changes in window size

I currently have some code for a website I am creating for myself. I am working on making the website adjust to changes in the browser window size. I can not seem to be able to change my header height according to the browser window size. For my pictures it works very easy in css:
#logoArea
{
width: 15.625%;
height: auto;
position: absolute;
left: 10%;
}
but when I use the same code for my header it does not work:
#header
{
background-color: black;
width: 100%;
height: auto;
}
The height of header does not appear all together and a height of 0px is given when I inspected the element.
I tried using .resize() in jQuery as follows:
<script>
$(document).ready(function(){
$(window).resize(function(){
AdjustHeader();
});
});
function AdjustHeader(){
if (jQuery(window).width() = 1600) {
jQuery("#header").height(200);
}
else
{
jQuery("#header").height(150);
}
}
</script>
This was merely to test out whether I could change the header size using jQuery. I know you can do it using jQuery.
Question If someone could help me out and tell me how to make the header size adjust with changes in browser window size that would be great. Whether it be in css or jQuery.

you can use media query for this.. Demo
CSS:
#media only screen and (max-width: 1600px) {
#header {
height:200px;
}
}
#media handheld, only screen and (max-width: 940px) {
#header {
height:150px;
}
}
Updated Demo
CSS:
#header {
background: black;
width: 100%;
height: auto;
display:block;
-webkit-transition: .2s height linear;
-moz-transition: .2s height linear;
-o-transition: .2s height linear;
transition: .2s height linear;
}

use media queries and set the desired styles for each breakpoints.
For example:
#media (max-width: 480px) {
...
}
#media (min-width: 481px) and (max-width: 768px) {
...
}

try to add window re-size listener in jquery. This event will call each time window re-sized. Take a look
$(window).resize(function(e) {
var old_width = e.old.width;
var old_height = e.old.height;
var new_width = $(this).width();
var new_height = $(this).height();
// your stuff here
});

If your header is showing up with height 0 in the inspector, all of its children are likely floated.
In any case, if you want to decrease the height of your header, you probably want to go to the source and decrease the height of its children. You would do this as sarbbottam suggested, using media queries.
If you want to know more about media queries, and all you can do with them, you might want to check out this article on CSS-Tricks.

Canvas loses style when I create Fabric.js canvas

I have a Canvas Object with top and left attributes defined through with JavaScript function but when I create a fabric Canvas object
var fabricCanvas= new fabric.Canvas('mycanvas');
my canvas is not appearing as it should i have tried doing this
reading stack over flow say margin : 0 auto solves the problem but it does not
.canvas-container {
margin:0 auto ;
position:absolute;
top: 110;
left: 310;
}
http://postimg.org/image/htvvfr5ct/
it just stay at the bottom and not comming to the middle position

By default a relative positioning style gets applied to the class canvas-container try adding important, see CSS code below:
.canvas-container {
position:absolute !important;
top: 110;
left: 310;
}
I have removed the margin:0 auto as the element is positioned absolute. If you want to center an element using positioning use the below css:
.canvas-container {
width:800px; /*assuming a width of 800px*/
height:600px; /* assuming a height of 600px */
position:absolute !important;
top: 50%;
left:50%;
margin-left:-400px; /* width/2 */
margin-top:-300px; /* height/2 */
}
this would center the element as per the body, else you may add a position:relative to the parent of the element.

Changing footer position to be at the bottom of page until it hits content

(I am looking for an HTML/CSS fix but if there really is none then JS (prefereably JQuery) works for me)
I have two main divs inside my page, I have the #maincontent and the #footer.
Basically, I want the footer to always sit at the bottom on the page:
#footer{
position:fixed;
bottom:0;
}
BUT I do not want it to overflow on the #maincontent when the page is too small.
For the sake of the question the page can be thought of as simple as:
<body>
<div id="maincontent">Dynamic Content</div>
<div id="footer">StaticContent</div>
</body>
My problem is that I can do one or the other, either I fix it to the bottom of the page but when I make the viewport < (footer + maincontent) the footer sits on top of the content. I want the footer to always be at the bottom of the page but disappear off page before it overtakes the main content.

Add a class to the footer with jQuery that changes it to position: absolute when the viewport is too small.
$(document).ready(function() {
var height = $(window).height();
function windowHeight() {
height = $(window).height();
}
windowHeight();
$(window).resize(function() {
windowHeight();
});
if (height < 600) { //arbitrary height value you can set yourself
$('#footer').addClass('not-fixed');
} else {
$('#footer').removeClass('not-fixed');
}
});

If you know your footer's height whatever happens to the window height, or its content :
Just add a "padding-bottom" to your body or main content that matches the footer's height.
If you don't know your footer's height. This is trickier, as you will probably need some javascript to calculate the height of the footer, the height of the main content, compare the sum of both with the window height, and if it doesn't fit, add some adequate bottom padding to the body / main content.
EDIT :
Ok I understand, I think this jsfiddle should do the trick : http://jsfiddle.net/ah4XA/2/
The javascript would be :
$(document).ready(function () {
function updateFooter () {
var footerH = $("#main-footer").height();
var contentH = $("#main-content").height();
var windowH = $(window).height();
if ( contentH + footerH > windowH) {
$("#main-footer").removeClass("fixed");
} else {
$("#main-footer").addClass("fixed");
}
}
$(window).resize(function () {
updateFooter();
});
updateFooter();
});

If I understand what you're looking for, you want the footer to stay on the bottom of the window regardless of the page content, but also not overlap the page as the window is resized vertically.
One possible solution is to switch between position:absolute; and position: fixed; with a media query. So past a certain height it's fixed, but below that the footer position:absolute;.
EXAMPLE FIDDLE
CSS:
#media all and (max-height:300px) {
#footer {
background: red; <- added for testing
position: absolute;
}
}
The only drawback to this approach is that you need to know the height to set the switchover to. This may be tricky, but position:fixed;.

The simplest solution would be to position footer at the bottom permanently and increase the z-index of your maincontent so that it comes over the footer if window size is decreased.
NOTE: This is not the only way to do this.
JSFIDDLE DEMO
Sample CSS
#maincontent{
height : 400px;
background-color : green;
/*
position : relative is added to enable z-index.
*/
position:relative;
/*
z-index will bring it above footer,
if window size is reduced.
*/
z-index: 1;
width : 100%;
}
#footer{
height : 100px;
width : 100%;
background-color : black;
/* Below two properties will
postion footer at the bottom of the page.
*/
position : fixed;
bottom : 0;
color : white;
}
You should play with CSS position property to get this done.
EDIT:
Here is another CSS solution :
The maincontent and footer are wrapped in a bodyContainer div its position is set to relative and then footer is positioned w.r.t it.
JSFIDDLE DEMO 1 Footer is below body and not shown.
JSFIDDLE DEMO 2 Footer is shown since body height is less.
HTML
<div id="bodyContainer">
<div id="maincontent">Dynamic Content
</div>
<div id="footer">StaticContent</div>
</div>
CSS
#bodyContainer {
min-height: 100%;
position: relative;
}
#maincontent{
height : 800px;
background-color : green;
padding-bottom: 60px;
width : 100%;
}
#footer{
background-color: black;
bottom: 0;
color: #FFFFFF;
height: 48px;
position: absolute;
width: 100%;
}

IE11 style.maxHeight not set from css

Objective: Add a scroll bar when internal content exceeds maximum height, otherwise set to hidden overflow (as scroll bar shows up if setting overflow-y: scroll)
Context: This is in a win8.1 app (so ie11 trident)
Problem: the style.maxHeight on the #table-wrapper div is set to ''
My css
#threads table {
width: 100%;
}
#table-wrapper {
max-height: 600px;
}
My Js
var threadTable = document.getElementById('thread-table');
var tableWrapper = document.getElementById('table-wrapper');
if (threadTable.clientHeight > tableWrapper.style.maxHeight) {
tableWrapper.style.overflowY = 'scroll';
} else {
tableWrapper.style.overflowY = 'hidden';
}
My html
<div id="threads" class="info">
<h3>IE Build Info</h3>
<div id="table-wrapper">
<table id="thread-table"></table>
</div>
</div>
Suggestions would be helpful. There is probably a better way to do what I'm doing, but I don't want a scroll bar (even if it disappears after a while) to be there when it doesn't need to be.

If you are doing just a vertical scroll it is very simple. Here is the markup I use:
<div class="y-scroller-wrapper movie-showtimes-scroller">
<div class="movie-showtimes-wrapper">
<!-- Items go here -->
</div>
</div>
The y-scroller wrapper is the container where the overflow is set. The width has to be the 100%, the height is also 100% of its container. So this needs to be inside something with set dimensions. A lot of times in my modern layouts the main element is absolutely positioned so I can do a fluid layout.
This is the CSS:
.x-scroller-wrapper, .xy-scroller-wrapper, .y-scroller-wrapper {
-webkit-overflow-style: none;
-ms-overflow-style: none;
-moz-overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
overflow-style: none;
-ms-scroll-chaining: none;
-ms-scroll-snap-type: proximity;
-ms-scroll-translation: vertical-to-horizontal;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 0;
width: 100%;
height: 100%;
}
.x-scroller-wrapper {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.y-scroller-wrapper {
-ms-touch-action: pan-y;
touch-action: pan-y;
overflow: hidden;
overflow-x: hidden;
overflow-y: scroll;
}
I have a sort of working demo up right now, you will need to reduce the browser width to < 600 pixels for the vertical scroll. If it is wider it adjust to a horizontal scroll. It looks like there is a bug where it is not resizing properly if you manually shrink so just refresh at small width if it does not reset. http://pentonmovies.love2dev.com/
If you are curious the vertical to horizontal is managed through media queries for a responsive effect. I need to change from the resize event to a media query listener to make it better right now ;)
Also IE has some great touch and native scroll support the other platforms do not have at this time. I hope this helps you out.

CSS: Keeping a div's height relative to its width [duplicate]

This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 7 years ago.
My question is very similar to this question: CSS: 100% width or height while keeping aspect ratio?
I have a div whose position is fixed. The width of the div must be 100% and its height exactly 1/6th of its width. Is there a -webkit-calc() way of doing this?
Note: JS solutions are not preferred as a zoom/orientation change can affect the width/height.

Is this what you are after? I'm not using -webkit-calc() at all. I've inserted a 1px by 6px image into a outer div which has position: fixed applied to it, and set the image to have a width of 100% and position: relative. Then I have added an inner div which is absolutely positioned to be as high and wide as its ancestor.
Now you can change the width of the outer div, and the images' width: 100% setting will ensure that both the outer and the inner div's are guaranteed to always have a height equal to 1/6th of their width (or at least as close to exactly equal as it can get, the heights will be rounded off to the closest whole number of pixels). Any content could go inside the inner div.
HTML
<div>
<div></div>
<img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" />
</div>
CSS
html, body {
margin: 0px;
padding: 0px;
}
div {
position: fixed;
width: 100%;
}
div > div {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
img {
width: 100%;
display: block;
position: relative;
}
Here's a jsFiddle showing the requested behaviour.

You can also use the solution I described in Responsive square columns.
It is based on the fact that % padding-top/bottom and margin-top/bottom are calculated according to the whidth of the parent element.
Adapted to your situation it would look like this :
FIDDLE
HTML :
<div class="wrap">
<div class="content">
</div>
</div>
CSS :
.wrap{
position:fixed;
width:100%;
padding-bottom:16.666%; /* 100x1/6 = 16.666...*/
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}

you can always set div width like this:
$('#div1').css("width", $('#div1').height()/6);
EDIT:
or you could use something like this:
/* Firefox */
width: -moz-calc(100% / 6);
/* WebKit */
width: -webkit-calc(100% / 6);
/* Opera */
width: -o-calc(100% / 6);
/* Standard */
width: calc(100% / 6);
This is only an example-..But it is impossible to get height of a div in a pixels in the css file..you need to use jquery for that
EDIT:
height 1/6 of a width
$('#div1').css("height", window.width()/6);

you could use jquery, e.g.$('.someclass').css('width', 180);
$('.someclass').css('height', $('.someclass').width() / 6);
moved the second suggestion from the comment for readability
$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);});