I am trying to create an overlay that shows a long message. You can scroll and read it and you can close the overlay.
The overlay has a background colour, but when I scroll the overlay to see the text the background scrolls with it. I want the background colour to stay there until the overlay is hidden.
<div id="message-overlay">
<p>
Blah blah blah - long message
</p>
<button>
Closes the overlay, this works
</button>
</div>
#message-overlay {
position: absolute;
left: 0;
width: 100vw;
height: 100vh;
background-color: red;
}
I just added:
overflow: auto;
to my overlay CSS and it works now.
Thanks for the support.
I want to close CKEditor if I click outside its window.
Stopping propagation on a div enclosing the textarea being replaced by ckeditor, like so
$('#resumo_div').click(function (event) {
event.stopPropagation();
});
and then detecting the click this seems to mostly work.
The exception are clicks on ckeditor widgets like the Link widget which are being detected as being outside. Is there a standard way to doing this?
Your problem is that the event handler is going to start with the widgets as they are the top-most elements that were clicked. By the time the event gets to your encompassing div, the widget will have been enacted. Instead of enclosing the ckeditor in a div (overlay for my example that when clicked will close the ckeditor). Move the ckeditor outside of the div (overlay).
<div class="overlay"></div>
<div id="ckeditor-container"></div>
<style>
.overlay {
position: fixed;
width: 100%;
height: 100%;
}
#ckeditor-container {
position: fixed;
top: 50%;
height: 200px;
margin: -100px auto 0 auto; /* center the container */
}
</style>
After discovering How to hide ckeditor when we click outside of the editor? I was able to improve the solution posted there that satisfied my needs by intercepting clicks in widgets
$('body').click(function(event){
if($(event.target).parents('#articleEditor').length <= 0 && $(event.target).parents('.cke_dialog').length <= 0)
$('#articleEditor').hide();
})
I have a fixed footer on my site here: http://starprovisions.com/dev/bacchanalia.html On my 1360x768 screen I can only see the top of the footer and when I try to scroll it either does not scroll or if it does, the footer does not scroll with the whole site, staying below the content. Is there a way to fix this so that the whole webpage scrolls up and down so we can see the footer?
You have to set its position to relative, so it will be below your main content. This way it will allow you to scroll down
#footer {
height: 75px;
background:
white;
margin: auto;
position: relative; /*Added this*/
width: 100%;
}
And also for your html css, you should remove the
overflow-y: scroll;
If you dont want to constantly show the scrollbar on the side of the window.
I have three div elements: one as a header, one as a footer, and a center content div. the div in the center needs to expand automatically with content, but I would like a min-height such that the bottom div always at least reaches the bottom of the window, but is not fixed there on longer pages.
For example:
<div id="a" style="height: 200px;">
<p>This div should always remain at the top of the page content and should scroll with it.</p>
</div>
<div id="b">
<p>This is the div in question. On longer pages, this div needs to behave normally (i.e. expand to fit the content and scroll with the entire page). On shorter pages, this div needs to expand beyond its content to a height such that div c will reach the bottom of the viewport, regardless of monitor resolution or window size.
</div>
<div id="c" style="height: 100px;">
<p>This div needs to remain at the bottom of the page's content, and scroll with it on longer pages, but on shorter pages, needs to reach the bottom of the browser window, regardless of monitor resolution or window size.</p>
</div>
Just look for my solution on jsfiddle, it is based on csslayout
html,
body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
}
div#container {
position: relative; /* needed for footer positioning*/
height: auto !important; /* real browsers */
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
background: #efe;
}
div#content {
/* padding:1em 1em 5em; *//* bottom padding for footer */
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background: #ddd;
}
<div id="container">
<div id="header">header</div>
<div id="content">
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
</div>
<div id="footer">
footer
</div>
</div>
I found this courtesy of ryanfait.com. It's actually remarkably simple.
In order to float a footer to the bottom of the page when content is shorter than window-height, or at the bottom of the content when it is longer than window-height, utilize the following code:
Basic HTML structure:
<div id="content">
Place your content here.
<div id="push"></div>
</div>
<div id="footer">
Place your footer information here.
</footer>
Note: Nothing should be placed outside the '#content' and '#footer' divs unless it is absolutely positioned.
Note: Nothing should be placed inside the '#push' div as it will be hidden.
And the CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#content {
min-height: 100%;
height: auto !important; /*min-height hack*/
height: 100%; /*min-height hack*/
margin-bottom: -4em; /*Negates #push on longer pages*/
}
#footer, #push {
height: 4em;
}
To make headers or footers span the width of a page, you must absolutely position the header.
Note: If you add a page-width header, I found it necessary to add an extra wrapper div to #content. The outer div controls horizontal spacing while the inner div controls vertical spacing. I was required to do this because I found that 'min-height:' works only on the body of an element and adds padding to the height.
*Edit: missing semicolon
If #top and #bottom have fixed heights, you can use:
#top {
position: absolute;
top: 0;
height: 200px;
}
#bottom {
position: absolute;
bottom: 0;
height: 100px;
}
#central {
margin-top: 200px;
margin-bot: 100px;
}
update
If you want #central to stretch down, you could:
Fake it with a background on parent;
Use CSS3's (not widely supported, most likely) calc();
Or maybe use javascript to dynamically add min-height.
With calc():
#central {
min-height: calc(100% - 300px);
}
With jQuery it could be something like:
$(document).ready(function() {
var desiredHeight = $("body").height() - $("top").height() - $("bot").height();
$("#central").css("min-height", desiredHeight );
});
to get dynamic height based on browser window. Use vh instead of %
e.g: pass following height: 100vh; to the specific div
As mentioned elsewhere, the CSS function calc() can work nicely here. It is now mostly supported. You could use like:
.container
{
min-height: 70%;
min-height: -webkit-calc(100% - 300px);
min-height: -moz-calc(100% - 300px);
min-height: calc(100% - 300px);
}
No hack or js needed. Just apply the following rule to your root element:
min-height: 100%;
height: auto;
It will automatically choose the bigger one from the two as its height, which means if the content is longer than the browser, it will be the height of the content, otherwise, the height of the browser. This is standard css.
You propably have to write some JavaScript, because there is no way to estimate the height of all the users of the page.
It's hard to do this.
There is a min-height: css style, but it doesn't work in all browsers. You can use it, but the biggest problem is that you will need to set it to something like 90% or numbers like that (percents), but the top and bottom divs use fixed pixel sizes, and you won't be able to reconcile them.
var minHeight = $(window).height() -
$('#a').outerHeight(true) -
$('#c').outerHeight(true));
if($('#b').height() < minHeight) $('#b').height(minHeight);
I know a and c have fixed heights, but I rather measure them in case they change later.
Also, I am measuring the height of b (I don't want to make is smaller after all), but if there is an image in there that did not load the height can change, so watch out for things like that.
It may be safer to do:
$('#b').prepend('<div style="float: left; width: 1px; height: ' + minHeight + 'px;"> </div>');
Which simply adds an element into that div with the correct height - that effectively acts as min-height even for browsers that don't have it. (You may want to add the element into your markup, and then just control the height of it via javascript instead of also adding it that way, that way you can take it into account when designing the layout.)
In the following scenario, we see two divs with applied CSS3 3D transformations within a container.
Both should fire a event when they are clicked. In this case an alert is shown, indicating which div was clicked.
<!DOCTYPE html>
<html>
<body>
<div style="-webkit-perspective: 600; -webkit-transform-style: preserve-3d; width: 500px; height: 200px; overflow: hidden;">
<div onclick="alert('1');" style="-webkit-transform: translate3d(0px, 0px, -100px); background-color: blue; position: absolute; width: 100px; height: 100px;">
</div>
<div onclick="alert('2');" style="-webkit-transform: translate3d(200px, 0px, 100px); background-color: red; position: absolute; width: 100px; height: 100px;">
</div>
</div>
</body>
</html>
The problem is now, that only the second div shows the desired behavior.
Clicks on the first div don't result in as shown alert (tested on the latest safari, chrome and safari iOS).
As soon as I change the negative z value from -100px to 0px or a positive value, everything works fine.
Is this a bug of the browser?
And is there any way to achieve the desired behaviour?
I've seen this problem before:
CSS3 transition problem on iOS devices
Webkit Mobile doesn't like negative z-index values coupled with 3d transforms. The W3C states that the z-index must be an integer http://www.w3.org/TR/CSS2/visuren.html#z-index, but in practice—because of legacy issues with Firefox and now Webkit— it's better to stick to positive numbers.
Add a positive translateZ to the clipped object's parent element to compensate for the negative value of the child. This translates the items above the body element's (z:0) browser plane, which is stopping click and hover events when the div goes negative relative to the browser Z plane. This only appears to happen in Chrome and Safari (and in mobile Safari as well).
I don't believe it is necessarily a bug if you think of the body as the last event handler.
On parent DIV, change -webkit-transform-style: preserve-3d; to -webkit-transform-style: flat; it works fine for me.