I have a situation where I need to vertically center some content (specifically an iFrame) inside of a div where the parent div will be smaller than the content. So far, everything I can find about vertically centering is taking about images which does not seem to work the same way.
Here is the simple code ...
<div class="video">
<iframe id="youtube-XXXX" src="..." style="width: 855px; height: 481px;"></iframe>
</div>
Now, the iframe is generated code but it does have an id value I can reference. The parent div needs to be AT MOST 330px tall (this is a responsive design, so it could end up shorter). So in this case, I am looking for the top and bottom 75px of the iframe to be hidden (481px - 330px / 2).
Right now, I have the CSS styles on the div.video as follows:
div.video {
overflow: hidden;
max-height: 330px;
}
Now, I get the expected height but the top of the iframe lines up with the top of the div. How can I get the iframe to render in the middle.
you could use jQuery for the purpose: the Jquery function would be like this:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
and the call can be like this:
$(element).center();
in your case assign a name to your div like "dvVideo" and then call the function:
$("#dvVideo").center();
credit to: Using jQuery to center a DIV on the screen
Related
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!
There is something that I need to do using HTML and CSS, without javascript.
I need help to define the css of "Outer Div". It has to go all the way to the bottom of the page. The height has to be 100% - 90px. The header has a fixed height. Inner Div's height has to be 60% of the height of Outer Div.
Can anyone help me? I can use html5 or css3 if needed.
It is very easy to do this without JavaScript if all the dimensions are in %, but since 90px height is compulsory for the header, try these steps:
1) Give the Header a z-index value greater than the Outer-Div,
for example:
.header{z-index:10;}
.outer-div{z-index:0;}
2) Now, give the Header the following style:
.header{height:90px;min-height:90px;max-height:90px;}
3) And, the following style to the Outer-Div:
.outer-div{height:100%;}
4) Because you want the Inner-Div to be always visible, first you have to take it away from the Header, because Header has a higher z-index than Outer-Div, so:
.inner-div{margin-top:90px;}
5) Then give it a suitable height, I advise to use % inside of pixels for this Inner-Div:
.inner-div{height:50%;}
To make Outer Div's height 100%-90px, use:
#outerdiv {
height: 100%;
margin-bottom: 90px;
}
To make Inner Div's height 60%, use:
#innerdiv {
height: 60%;
}
Both are in addition to your normal styles. Replace #outerdiv and #innerdiv with the IDs or classes of your outer and lower divs.
If you want to make the panel travel down the page as the user scrolls, use this method on SO. It is easy CSS. Just add position: fixed to Outer Div's CSS.
Hope this helps!
In javascript you sould catch the body resize event and in this event you have to calculate the height of Outer DIV. The following code sould be a good start for you:
function onBodyResize(e) {
setProperty("OuterDIV", "height", (getDocHeight() - parseInt(getProperty("HeaderDIV","height"))) + "px");
}
function getDocHeight() {
var r = document.getElementsByTagName('html')[0].getClientRects();
return r[0].height;
}
function setProperty(id,prop,value) {
document.getElementById(id).style.setProperty(prop,value,null);
}
function getProperty(id,prop) {
var p;
if (document.getElementById(id).currentStyle)
p = document.getElementById(id).currentStyle[prop];
else if (window.getComputedStyle)
p = document.defaultView.getComputedStyle(document.getElementById(id),null).getPropertyValue(prop);
return p;
}
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");
});
});
I have tried the whole afternoon but I'm missing something, can some one help me with this?
The page can be found at the following link
The page with the image that I need fixed.
The code containing the image is:
<headerimage><span>
<img width="1920" height="600" src="http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg" class="attachment-post-thumbnail wp-post-image" alt="Suits Header" title="Suits Header"></span>
</headerimage>
I would like to horizontally center the image with a width of 1920px on smaller screens. When I give a class the property background-position: top center, it works perfectly, but when I need to have a -tag in the page itself I can't seem to make it happen.
Please help me see it :) It's probably very stupid, haha.
Thanks so much!
Set margin: 0 auto; on the image, like:
<headerimage>
<span>
<img style="margin:0 auto;" width="1920" height="600" src="http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg" class="attachment-post-thumbnail wp-post-image" alt="Suits Header" title="Suits Header">
</span>
</headerimage>
I would not put this in as an image but as a background on your header.
background-image:url('http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg');
background-position-x:center;
background-repeat:no-repeat;
see http://jsfiddle.net/dwat001/Q58YZ/ for a rough demonstration.
Another approach if you cannot use background-image is to use javascript to position the image.
<style>
#imageHolder {
overflow: hidden; // if image is bigger then holder, clip the image, no scollbars.
}
#wideHeaderImage {
position: relative; // treat "left" as relative to the images normal position.
}
</style>
<headerimage id="imageHolder">
<img id="wideHeaderImage" width="1920".../>
</headerimage>
<script src="jquery"></script>
<script>
// create function to center image;
var centerImage = function($) {
var windowWidth = $(window).width(); // get the current width of the window
var imageSize = $('#wideHeaderImage').width(); // get width of image
$('#imageHolder').width(windowWidth); // set the containing element to be size of window.
if(imageSize > windowWidth) { // if image is wider then window
var offset = (imageSize - windowWidth) / 2; // Establish an offset
$('#wideHeaderImage').css('left', '-' + offset + 'px'); // apply offset
}
};
jquery(function($) {
// this code runs within on load
// register a resize event handler
$(window).resize(function(event){centerImage($);});
// resize once on onload.
centerImage($);
});
</script>
I have not run this so I've problably made some mistakes hopefully enough for you to get the gist of what I'm doing.
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" );
});