How can I determine (using jQuery?) the height of a div? Its' height is not defined in CSS - so it's fluid and based on the contents.
I've tried $('#div').height() - which returns 0.
Ideas?
EDIT: (the code)
$(document).ready(function () {
PositionBottomPicture();
});
function PositionBottomPicture() {
var parentOffset = $('#left_pane').offset();
var parentsHeight = $('#left_pane').height();
var childsTopPostion = (parentOffset.top + parentsHeight);
$('#bottom_pic').offset({ top: childsTopPostion, left: parentOffset.left });
}
CSS:
#left_pane
{
float: left;
margin-left: 27px;
position: relative;
}
where 'left_pane' and 'bottom_pic' are divs.
Thanks!
The problem is you're probably not waiting for the div to load into the DOM.
Try something along the lines of:
$(document).ready(function(){
var h = $("#div").height();
var w = $("#div").width();
;})
Using the Document Ready tool provided by jQuery will wait till the element has been processed.
If 'left_pane' only contains absolutely positioned elements it's height will be zero.
Related
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; }
How can I get a DIV to float with my page? Currently I have it setup like this: http://g2n.us/Dev/TheHabbos_6975/
I can do this by using the following CSS:
Code:
.stayStill {
position: fixed;
width: 300px;
}
But how can I get it so when the header scrolls away, the right DIV moves up and stays 10 pixels away from the top and scrolls with the page, unless the header is there?
You need JavaScript to do this.
Your site is already using it, so there should be no problem with using JavaScript to do this.
A couple of tutorials:
http://jqueryfordesigners.com/fixed-floating-elements/
http://css-tricks.com/scrollfollow-sidebar/
This answer uses jQuery
You can put this in your $.ready() function
var int_header_height = 10; //put pixel value height of header here
if ($(document).scrollTop() <= int_header_height) {
$('div.stayStill').css('position','absolute').css('top','0px');
} else {
$('div.stayStill').css('position','fixed').css('top','10px');
}
This also assumes that the div is in a position: relative element below the header. Otherwise you should change the .css('top','0px') to .css('top',int_header_height + 'px')
How can I load images to cover the whole background like some websites, using CSS. Not the usual background-image property but I want to load the images quickly.
Examples:
http://www.marinayachting.it/
http://alexandraowen.co.nz/
background-image is the only way to place images in CSS. If you want it to be vary large put it on the body element or a container div that fills the entire viewport.
body {
margin: 0;
padding: 0;
width: 100%;
background-image: url('my_big_image.jpg') norepeat;
}
If you use a container div you can set position:fixed; top:0; left:0 and the image will remain stationary when the page scrolls.
There's no magic to it. As far as getting it to load quickly I don't think there's much you can do if it doesn't repeat. If it does repeat then make sure your image is the size of one module. This can be as little as one pixel tall or wide depending on the content.
There is no magic to making a background image load quickly, you just:
Have a fast server.
Compress the image as much as possible.
Make your page HTML small so that the rest can start loading as soon as possible.
Don't have many other images that also has to load.
Don't have a lot of scripts and other external files that has to load.
I found this tutorial helpful. ->
http://css-tricks.com/perfect-full-page-background-image/
Bing is loading a normal background image with a fixed size. It´s not particularly fast (for me...), but perhaps it seems fast because the image is cached after the first time you load it.
You can set the style inline so that the image can start downloading without waiting for any css file to be ready.
If you set an image let's say a picture as a background you need to make it large enough to accommodate large screen sizes. You don't want the experience on your site to be, that your picture repeats multiple times on the screen. Probably at the least width should be 1260px. If background is just a simple gradient, you can cut a small part of it in photoshop and apply it on the body like this:
body {
margin:0;
padding:0;
background:#fff url(your/image/location.jpg) repeat-x scroll 0 0;
}
This method could be applied to divs too, Good luck.
In your second example site, alexandraowen.co.nz, if you took a second to look at the JS they use, you would have seen the following:
// backgrounds --------------------------------------------------------------//
var Backgrounds = {};
Backgrounds.init = function()
{
$('body').each
(
function()
{
var imgsrc = $(this).css('background-image');
if(imgsrc != 'none')
{
imgsrc = imgsrc.slice( imgsrc.indexOf('(') + 1 , -1);
$(this).css('background-image', 'none');
$(this).prepend('');
if($.browser.msie)
{
// ie 7 is the slow kid and we have to strip out quote marks ffs!
$(this).find('div.bg img').attr('src', imgsrc.split('"').join(''));
}
else
{
$(this).find('div.bg img').attr('src', imgsrc);
}
}
}
);
Backgrounds.resizeHandler();
$(window).resize(Backgrounds.resizeHandler);
$('div.bg img').load(Backgrounds.resizeHandler);
}
Backgrounds.resizeHandler = function()
{
var w = $(window).width();
var h = $(window).height();
$('div.bg img').each
(
function()
{
var wr = w / $(this).width();
var hr = h / $(this).height();
var r = Math.max(wr, hr);
var imgw = Math.round($(this).width() * r);
var imgh = Math.round($(this).height() * r);
$(this).width( imgw );
$(this).height( imgh );
var l = Math.round((w/2) - (imgw/2));
$(this).css('margin-left', l+'px');
}
);
}
As well as the HTML on the page:
<body style="background-image: none; ">
If you dig into their scripts a bit more, you can see what they did. But I guarantee you it's nothing faster than just setting the background-image property.
<img id="foo" src="bar" alt=""> with #foo { width: 100%; height: 100%; }(use position: absolute; / position: relative; & z-index for layering as desired)
Here's an old example.
I am trying to get my bottom header to stick to the bottom of the screen inside of my iframe application and have it always appear in view for the user even when the page is scrolling. I have no control over the outer iframe as it is on a different domain. The header itself must be inside of the iframe as I have no control outside the iframe. The iframe always expands to the height of its contents so that it has no scrollbars, but the bar still has to be visible in the viewport at all times.
Another thing to note: The iframe height should be the same height as its contents so their is no need for scroll bars
Chrome has a bug that doesn't fix elements with position:fixed if:
a) you use CSS3 transform in any element, and/or
b) you have a child element positioned outside the box of it's parent element
Oddly enough, the bug was reported back in 2009 and it's still open: https://code.google.com/p/chromium/issues/detail?id=20574
You might want to play around with position: fixed;
#element {
position: fixed;
z-index: 1000;
bottom: 0;
}
EDIT:
I'm sorry, I think I miss understood your post. If I'm reading it correctly you want to create a header bar similar to blogger but to keep it always in view of the user when he/she scrolls.
What you can do is create a container div, and then you can nest both your header and iframe inside that container. You can then play around with the positioning, although I'm not sure if the exact behavior that you're looking for is possible without some javascript.
EDIT 2:
After playing around a bit, I got something that I think might help (if I understand your problem correctly).
http://digitaldreamer.net/media/examples/iframe-site.html
http://digitaldreamer.net/media/examples/iframe.html
I had to look for a long time for a possible solution, and I think I have found one that is using the Intersection Observer API to detect the scrolled position of the iframe within the parent document without needing to access the parent document DOM.
I'm creating a bunch of hidden 100px high elements in the iframe. These are positioned absolutely underneath each other so that together they fill the height of the whole iframe document. An intersection observer then observes the intersection between the (top-level document) viewport and each of the hidden elements and calculates the scroll position of the iframe based on the values it returns. A ResizeObserver creates additional hidden elements if the height of the body increases.
This approach assumes that your iframe is always minimum 100px high. If you expect a smaller height, you need to adjust the hidden container height. The reason is that once a hidden container is 100% visible, the intersection observer does not emit the callback while the parent document is being scrolled (since the intersection ratio stays at 1). This is also the reason why I need a lot of small containers rather than observing the intersection with the iframe body itself.
const CONTAINER_HEIGHT = 100;
const threshold = [...Array(CONTAINER_HEIGHT + 1).keys()].map((i) => i / CONTAINER_HEIGHT);
/**
* Registers an intersection handler that detects the scrolled position of the current
* iframe within the browser viewport and calls a handler when it is first invoked and
* whenever the scrolled position changes. This allows to position elements within the
* iframe in a way that their position stays sticky in relation to the browser window.
* #param handler Is invoked when the function is first called and whenever the scroll
* position changes (for example due to the user scrolling the parent document). The
* "top" parameter is the number of pixels from the top of the browser viewport to the
* top of the iframe (if the top of the iframe is above the top of the browser viewport)
* or 0 (if the top of the iframe is below the top of the browser viewport). Positioning
* an element absolutely at this top position inside the iframe will simulate a sticky
* positioning at the top edge of the browser viewport.
* #returns Returns a callback that unregisters the handler.
*/
function registerScrollPositionHandler(handler: (top: number) => void): () => void {
const elementContainer = document.createElement('div');
Object.assign(elementContainer.style, {
position: 'absolute',
top: '0',
bottom: '0',
width: '1px',
pointerEvents: 'none',
overflow: 'hidden'
});
document.body.appendChild(elementContainer);
const elements: HTMLDivElement[] = [];
let intersectionObserver: IntersectionObserver | undefined = undefined;
const resizeObserver = new ResizeObserver(() => {
intersectionObserver = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.intersectionRatio > 0 && (entry.intersectionRect.top > entry.boundingClientRect.top || entry.target === elements[0])) {
handler(entry.intersectionRect.top);
}
}
}, { threshold });
const count = Math.ceil(document.documentElement.offsetHeight / CONTAINER_HEIGHT);
for (let i = 0; i < count; i++) {
if (!elements[i]) {
elements[i] = document.createElement('div');
Object.assign(elements[i].style, {
position: 'absolute',
top: `${i * CONTAINER_HEIGHT}px`,
height: `${CONTAINER_HEIGHT}px`,
width: '100%'
});
elementContainer.appendChild(elements[i]);
intersectionObserver.observe(elements[i]);
}
}
});
resizeObserver.observe(document.documentElement);
return () => {
resizeObserver.disconnect();
intersectionObserver?.disconnect();
elementContainer.remove();
};
}
This example code should create a toolbar that is sticky at the top of the browser viewport:
<div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; pointer-events: none; z-index: 90">
<div id="toolbar" style="position: absolute; top: 0; left: 0; right: 0; pointer-events: auto; transition: top 0.3s">
Line 1<br/>Line 2<br/>Line 3<br/>Line 4<br/>Line 5<br/>Line 6<br/>Line 7<br/>Line 8<br/>Line 9<br/>Line 10
</div>
</div>
<script>
registerScrollPositionHandler((top) => {
document.querySelector('#toolbar').style.top = `${top}px`;
});
</script>
Note that other than what you asked for, this will position the toolbar at the top of the viewport rather than at the bottom. Positioning at the bottom should also be possible, but is slightly more complex. If anyone requires a solution for this, please let me know in the comments and I will invest the time to adjust my answer.
I have a paragraph followed by an unordered list, with several list items. I also have an image floated to the left of that. The problem I am having is that the list item margin/padding is being overlapped by that image.
I want the bullets that are next to the image to indent like it should.
Here is a test I wrote up for debugging, where you can see my issue in action.
All of this is inside of a CMS, so the image dimensions are variable, as well as the paragraphs and possible lists in the text.
Any solutions?
(See my first comment for pictures.)
ul {
overflow: auto;
}
I'll have the added advantage of not having the list items wrapping around the image.
Add this:
ul{ list-style-position: inside}
That's it!
Another option would be to shift the list to the right with relative positioning:
img+p+ul {
position: relative;
left: 1em;
top: 0;
}
li style="margin-left: 135px;" Worked best for me.
The overflow: auto; looked ok up front but wound up messing with other elements in my HTML.
You can give your list items an overflow property:
li {
overflow: hidden;
}
That will cause the list item to sort of behave correctly: They will display as a square block, continuing where the image ends as well, they don´t flow nicely to the left. The next list item will.
If you don't bother about adding javascript, here is a jQuery script that will add a margin to the ul that overlaps the image so all the list items remain aligned, and then assigns a negative margin to the li's that doesn't overlap.
$(function(){
//Define a context so we only move lists inside a specified parent
var context = $("#test_div");
//Build a list of images position a size
var imgRects = [];
var imgs = $("img.left", context);
imgs.each(function(i){
var pos = $(this).position();
pos.right = pos.left + $(this).outerWidth(true);
pos.bottom = pos.top + $(this).outerHeight(true);
imgRects.push(pos);
});
//Process each li to see if it is at the same height of an image
var lis = $("li", context);
lis.each(function(i){
var li = $(this);
if(li.parent().css('marginLeft') != "0px"){
return; //Already moved
}
var top = li.position().top;
for(var j in imgRects){
var rect = imgRects[j];
if(top > rect.top && top < rect.bottom){
li.parent().css('marginLeft', rect.right);
return;
} else if(li.parent().css('marginLeft') != "0px"){
li.css('marginLeft', -1 * rect.right);
}
}
});
});
I've tested with your demo page and jQuery 1.3.2 and it works on FF3.5 and IE8 because the image is on top of the document. If the image appears in the middle of a ul, the firsts li's will remain padded. If you need to correct this issue leave a comment and will try to update the script.