I am a Doctor working on a small departmental website. I am using a two-column design within a wrapper "maincontainer" . The wrapper contains a "topsection", a left-floated "navigation", a "contentcolumn" div to the right and a fixed position "footer".
The wrapper "maincontainer" has a background colour and is centralized.
I wish to re-size the "maincontainer" to the height contentcolumns + 140px in case scrolling is required. based on my limited knowledge, I am using a JS code (below). However if I put any images in "contentcolumn", the "maincontainer" remains short and "contentcolumn" overshoots the "maincontainer".
I seek help on correcting this behavior.
Thanks
Vivek
Full Code is here: http://jsfiddle.net/AuURL/
resize.js
$(document).ready(function() {
var maincontainer_height=document.getElementById('contentcolumn').clientHeight + 140;
$("#maincontainer").css("height",maincontainer_height + "px");
});
$(document).ready(function() {
$(window).resize(function() {
var maincontainer_height=document.getElementById('contentcolumn').clientHeight + 140;
$("#maincontainer").css("height",maincontainer_height + "px");
});
});
Related
I have image with width: 100% so it's height is dynamic.
I want to place a div below it that will take all the height left to the bottom of the page. it is impossible to use height: calc(100% - ... ) because the image height is unknown.
What is the solution?
Thanks!
The only solution to do this is by using JavaScript.
You have to get image's height and than set div's height according to image's height.
First you have to get image's height using this:
var imgH = document.querySelector('my_img_selector').height; //pure JS
var imgH = $('my_img_selector').outerHeight(); //jQuery
Than you have to get page height:
var pageH = window.innerHeight; //pure JS - note that this may not work in all browsers
var pageH = $(window).height(); //jQuery
And than you have to set your div's height to fill rest of page
document.querySelector('my_div_selector').style.height = (pageH - imgH) + 'px'; //pure JS
$('my_div_selector').css('height', (pageH - imgH) + 'px'); //jQuery
Tada!
Hope I helped :D
I have a container div that cover the screen with set ratio.
I want to place some elements with absolute position and to be responsive (scale down or up).
I have something like
http://jsfiddle.net/hsD2G/2/
When I shrink width or height of the browser. The element location will change and looks off. Can anyone help me about it?
Again, this is probably not the optimal solution. At least CSS can be used partly, to center the highlights image, or using %width. If you could, somehow, make the background image containing DIV to be squared, you could do it only with CSS.
Here is the Fiddle with the jquery solution.
$( document ).ready(function() {
function update(){
var top=20,left=40;
var height = $(window).height();
var width = $(window).width();
var highlights = $('#cover-img img');
if (height > width){
// Image limited by width
var blank_top = Math.round((height - width)/2);
highlights.css('top',blank_top+top);
highlights.css('left',left);
// make it responsive 1/3 ratio
highlights.width(Math.round(width/3));
}else{
// Image limited by height
var blank_left = Math.round((width - height)/2);
highlights.css('left',blank_left+left);
highlights.css('top',top);
highlights.width(Math.round(height/3));
}
}
$( window ).resize(update);
update();
)};
Hope this helps
Can someone please guide me how to get an image full screen so that it stays in the centre both horizontal and vertical like the link provided.
http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
I'm only after the background bit and i need the image in a div apposed to in the css like in the example as i am using it for a slider in wordpress.
In order to make your LayerSlider display at 100% height and width, leave the "Slider height" attribute in "Slider Settings" blank, and then use a script like the following to set the height:
<script type="text/javascript">
function resize()
{
var heights = window.innerHeight;
document.getElementById("layerslider_1").style.height = heights + "px";
}
resize();
window.onresize = function() {
resize();
};
</script>
Insert the script into your footer.php file before the closing body tag. If your slider ID isn't number 1, then change "layerslider_1" to the correct ID.
you can add style to the div element
<div style="background: url(images/xyz.jpg) no-repeat center center fixed;">...</div>
I just took the css from your sample page and copy/pasted!
I am working on a site and I don't want to repeat the background in the y direction.
I know how to do that.
But after the image I don't want background to becomes white or any other color.
I would like it to fix when it reaches that place or to let the background scroll slower then the rest of the site so I wont get to a white part.
Thanks a lot
I found this thread while I was looking for a solution to just this problem. I managed to write a short jQuery script adapting the hints given by Alex Morales.
With the following code, the background-image of the body scrolles down with the rest of the site until its bottom is reached. You can take a look at my homepage (http://blog.neonfoto.de) to see what it does.
$( window ).scroll( function(){
var ypos = $( window ).scrollTop(); //pixels the site is scrolled down
var visible = $( window ).height(); //visible pixels
const img_height = 1080; //replace with height of your image
var max_scroll = img_height - visible; //number of pixels of the image not visible at bottom
//change position of background-image as long as there is something not visible at the bottom
if ( max_scroll > ypos) {
$('body').css('background-position', "center -" + ypos + "px");
} else {
$('body').css('background-position', "center -" + max_scroll + "px");
}
});
This is actually the very first thing I did with JavaScript and JQuery, so any improvement would be great!
It's css3 so it's not super well supported, but I would look at the background-size property.
This is just off the top of my head but I think you will probably have to create a separate div containing the background image. If you place it in your markup before the main content and position the main content absolutely, it will sit behind the main content and at the top of the page. So:
CSS:
#background_div
{
background: url(images/some_image.png);
height: 600px;
width: 900px;
}
#main
{
height: 1200px;
width: 800px;
background: rgba(0, 0, 0, 0.25);
position: absolute;
top: 0;
}
HTML:
<div id="background_div"> </div>
Then what you do is you use javascript (I recommend jQuery) to detect the div's position on the screen.
jQuery:
This code grabbed from http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/
var $scrollingDiv = $("#background_div");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );
});
So I got the webpage to go full screen now but I am using height 100% for all my css attributes and now I am getting a scroll bar on the right side.
http://www6.luc.edu/test/cabplan/maps/index2.html
when i change the #content_container to height 89% it changes it but its looks different on other screen sizes. How do I make it so that the map is always the height up until the footer with the "esri" logo on the bottom right above the footer as well
This would be something better suited for jquery. You can call it to resize the height on load and on window resize.
To get the window height you would use
windowHeight = $(window).height();
You take this and assign it to a variable and subtract the heights of the header and footer. And in set the css by using
${'#content_container').css({width: windowHeight+"px"});
Then if someone resizes the window you run the same options in a function like the following
$(window).resize(function() {
//update stuff
});
EDIT
$(document).ready(function(){
windowHeight = $(window).height();
divHeight = windowHeight - 100 - 100; // heights of your header/footer
$('#content_container').css({height: divHeight+'px'});
});
$(window).resize(function() {
windowHeight = $(window).height();
divHeight = windowHeight - 100 - 100; // heights of your header/footer
$('#content_container').css({height: divHeight+'px'});
});
you can replace the 100's for static calls of height by assigning variable and call $('#divid').height(); Since your header is position:absolute, if you subtract the header then you will need to position the div from the top the same px.
To call js include the following before the javascript above.
<script src="http://code.jquery.com/jquery-1.6.4.min.js" />