I would like to do something with my document which is quite unique (haven't seen it before) and thus maybe not even possible.
What I would like is to have a div which will overlay everything in the document, maybe give it background black so that nothing is visible. Second I would like to have a small squire window in the overlay which doesn't share the black background, in fact it is somewhat transparent and therefore it would be possible to 'peek' trough that window to see document content. But only the content where this window is. It would be kinda like those "zoom" plugins in which only a small portion is being zoomed, but in this case it would show specific content. Any idea how to create such a thing?
An example of what you can do is the following (it may not be the best but it works)
HTML
<div id='peakview'></div> <!-- This div is your view window -->
<div id='out'>
<div class='overlay'></div>
<div class='overlay'></div>
<div class='overlay'></div>
<div class='overlay'></div>
</div>
The <div> inside of #out will re-size accordingly to the position of #peakview creating the illusion of a full overlay. This can be done with simple css and some calculus.
Mainly what you need is the position of the element on screen.
var h = $(this).offset().top;
var l = $(this).offset().left;
var r = ($(window).width() - ($(this).offset().left + $(this).outerWidth()));
//right offset
var b = ($(window).height() - ($(this).offset().top + $(this).outerWidth()));
//bottom offset
In my example I used .draggable() from jQuery UI to move the div around. And while dragging the 4 divs shown above are adjusting their height and width to fill up the space between #peakview and document border.
An example for the first div
$('.overlay:eq(0)').css({
top: 0,
left: 0,
width: '100%',
height: h //the height is always changing depending on the #peakview .offset().top
});
In this fiddle you will see how the filling divs behave
Another ruff start:
http://jsfiddle.net/XDrSA/
This require some extra work, but it may suit your needs.
HTML:
<div id="yourContent" style="width: 300px; margin:100px auto;">
<input type="button" id="zoom" value="Click to zoom"/>
</div>
<div id="zoomer">
<div id="window">This is your "window"</div>
<div id="overlay_top"></div>
<div id="overlay_left"></div>
<div id="overlay_right"></div>
<div id="overlay_bottom"></div>
</div>
CSS:
body {
margin:0;
padding:0;
}
#zoomer {
height: 100%;
width: 100%;
position: absolute;
top: 0;
display: none;
}
#overlay_top {
height: 20%;
width: 100%;
background-color: black;
position: absolute;
top: 0
}
#overlay_right {
height: 100%;
width: 20%;
background-color: black;
position: absolute;
right: 0;
}
#overlay_left {
height: 100%;
width: 20%;
background-color: black;
position: absolute;
left: 0;
}
#overlay_bottom {
height: 20%;
width: 100%;
background-color: black;
position: absolute;
bottom: 0;
}
#window {
margin: 0 auto;
height: 100%;
width: 80%;
position: absolute;
background-color: rgba(0,0,0,.5);
}
And a piece of javascript:
$('#zoom').click(function() {
$('#zoomer').fadeIn();
});
You may need to stumble with the positioning, and the window will be a fixed size one. Not draggable though.
Related
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 5 years ago.
I want to make a div with a background-color of red to cover my entire page, but I do not want to use CSS position: absolute. Here is my example with CSS position:
<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></div>
CSS position works for the most part, but then I am unable to create more than one of these divs (they overlap or cancel each other out because of top: 0 and left: 0). When you scroll down, I want you to see additional divs.
It would really help if there was a pure CSS solution, but JavaScript and HTML are open to me as well. JUST NO JQUERY.
What about using viewport height and viewport width?
I've created an example in this JSFiddle.
body, html {
margin: 0;
padding: 0;
}
div {
width: 100vw;
height: 100vh;
}
.one {
background-color: blue;
}
.two {
background-color: green;
}
.three {
background-color: yellow;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
If you want to make div to occupy entire space use vw and vh
because making div alone height:100% and width:100% would not do it
without using viewport units
check this snippet
div{
width: 100%;
height:100%;
background:red;
}
html,body{
height:100%;
width:100%;
}
<div ></div>
but making html and body to have height and width is a bad idea
so to skip it use view port units
check this with viewport unist
div {
width: 100vw;
height: 100vh;
background: red;
}
<div></div>
Hope it helps
Older browsers such as IE7 and 8 could be supported without using visual height and width units by using a single absolutely positioned container with inner divs inheriting height and width property values.
CSS
body {
margin: 0px; /* optional */
}
#box {
position:absolute;
height: 100%;
min-width: 100%;
}
.page {
padding: 5px; /* optional */
height: inherit;
}
HTML
<body>
<div id="box">
<div class="page" style="background-color: red">
<div style="width:25em; background-color: gray">25em</div>
</div>
<div class="page" style="background-color: green">2</div>
<div class="page" style="background-color: white">3</div>
</div>
</body>
Update: the width property of the container has been replaced by a min-width property, introduced in IE7, to fix an ugly horizontal scrolling issue. Supplying width for inner div elements was removed as being unnecessary.
Simply change the top: value for each one. The first one would be 0, the second 100%, the third 200%, and so on. Here's a working example:
<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;background:red;"></div>
<div style="width: 100%; height: 100%; position: absolute; top: 100%; left: 0; background:blue;"></div>
<div style="width: 100%; height: 100%; position: absolute; top: 200%; left: 0; background:green;"></div>
I have some problem
I try to write a image editor plugin, in this code I have 2 divs as you can see
this child div can drag and re size very well,after user re size it and click on upload bottom ,the information about child div place and exact size send to server perfectly.
but when child div drag and come out of parent div it dosent crop the extra part of image which come out of parent div.
This is my html code
<div id="output">
<div class="wifix" width="100%">
<div class="dadycool">
<div class="child" align="center"></div>
</div>
</div>
</div>
css codes
div.wifix {
height: 300px;
width: 600px;
}
div.dadycool {
width: 250px;
height: 300px;
overflow: hidden;
outline: 1px dashed red;
margin-top: 50px;
position: relative;
z-index: 100;
}
div.child {
height: 400px;
width: 500px;
background: coral;
left: -100px;
right: 0;
top: -50px;
position: absolute;
z-index: -1;
}
You can use containment in your code,
This will restrict your child element to move out of the parent element.
Eg:
$( ".child" ).draggable({ containment: ".dadycool" });
See datails here
Jsfiddle is here: http://fiddle.jshell.net/Msd7v/29/
Here is my Javascript:
$('#app').contents().find('.dragOption').draggable({
iframeFix:true,
scroll: true
});
and then in the iFrame
#html
<div id='box'>
<div class='dragOption'></div>
</div>
#css
#box {
background: red;
height: 600px;
width: 100%;
left:10;
z-index: 10000;
position: relative;
top: 10;
}
.dragOption {
height: 80px;
width: 200px;
position: absolute;
z-index: 100001;
outline: 1px solid #000;
top: 400px;
}
When you try to move the draggable div when you are already scrolled down, the draggable library doesn't take into account the window height. Is there a way to offset this? or a monkey patch for the library so you can force it to recognize the correct scroll distance and not have the draggable div jump up to the top of the iframe above the fold?
I'm having some trouble with a page that has a floating background image (absolutely positioned) where the image is dynamically changed out via javascript. Basically this is a big gallery that changes behind a portfolio:
I have a section of markup that looks like this:
<div class="content">
<div class="content-container">
<div class="content-image">
<img id="galleryTarget" src="../images/main/source.jpg" class="image-resize" alt="background image"/>
</div>
...etc...
Here's the relevant CSS classes:
.image-resize {
position: absolute;
min-height: 750px;
min-width: 1000px;
width: 100%;
left: 0;
text-align: left;
vertical-align: middle;
margin-top: -25%;
top: 25%;
}
.content-image {
position: absolute;
top: 0;
left: 200px;
width: 100%;
min-height: 750px;
max-height: 750px;
min-width:1000px;
overflow:visible;
opacity: 0.5;
z-index: 1;
}
.content-container {
position: relative;
min-height: 750px;
}
.content {
position: absolute;
top: 0;
width: 100%;
max-height: 750px;
overflow: hidden;
background: purple;
z-index: -5;
}
This is all absolutely positioned so that I can swap out the image source with Javascript and then dynamically resize the container (background) to fill the new content. There's minimum bounds so it always has a size.
What I'm trying to do is to pin this image to a CENTER point so that when it is resized the interesting parts of the image (rarely the top left corner) are displayed.
In the inspector in chrome I see that top and margin-top are never the same value even though they have the same (percentage) value. What am I missing here?
Example:
top: 187.5px and margin-top: -389.5px. It looks as though margin-top uses the img-source resolution and top uses something for the life of me I can't figure out--I'm assuming min-height + the offset in the page?
Any help here would be appreciated, this is a rather large part of the design and I'd love to have it better than what it is.
Browsers:
Chrome Version: 30.0.1599.66 m
Android Chrome: 30.0.1599.82
This does fix the problem in chrome--but I'd like to know why it is using 1000px as the baseline for the margin instead of the 750px of the unit.
/*Hack of a vector similar to 50%*/
margin-top: calc(-50% * 0.75);
top: 50%;
http://jsfiddle.net/3qMnM/1/
HTML:
<div class="info-panel"></div>
<div class="image">
<img src="http://placehold.it/960x1400">
</div>
CSS:
.image {
height: 100%;
width: auto;
margin-right: 200px;
}
.info-panel {
position: fixed;
width: 200px;
height: 100%;
background-color: red;
right: 0px;
}
I'm trying to scale images down (never up) dynamically to fit into the image-div (without cropping), which is variable in height (100%) and width (set to auto). The image also needs to be centered (vertically and horizontally) and have equal padding of a few pixels top and bottom.
There is an info panel next to the image container as you can see in the fiddle, but I'm not sure if this is relevant.
Do my statements make sense?
Thanks, I have spent way too much time experimenting with this already! :/
If I understand correctly, you want something like this.
It scales down if the image is too large, but keeps the original size when it fits inside the window. In other words, it never scales up - only down.
It is a combination of CSS and some jQuery:
This short JS centers the image vertically:
function verticallyCenterImage(){
var $img = $('.image img'),
windowHeight = $(window).outerHeight();
if($img.height() < windowHeight){
var delta = windowHeight - $img.height();
$img.css('margin-top', (delta / 2) + 'px');
}else{
$img.attr('style', '');
}
}
And this line of CSS keeps the image centered horizontally:
.image {
padding-right: 200px;
text-align: center; /* <- this one */
max-height: 100%;
overflow: hidden;
}
And to keep the original size of the image, I just set the max height and width on the img inside the .image class, like so:
.image img {
max-width: 96%;
max-height: 96%;
margin: 2%;
}
You can adjust the size and margins to your needs, just remember to keep them in relation too each other :)
Some of the techniques discussed here could work for you:
http://css-tricks.com/centering-in-the-unknown/
The trick there is to use table elements, or CSS 2.1 table display.
Edit: More approaches here: http://www.vanseodesign.com/css/vertical-centering/
You are mixing px with %. If you want to achieve that only by CSS, you need to use % for both widths:
.image {
width: 85%;
}
.image img {
width: 100%;
}
.info-panel {
position: fixed;
width: 15%;
height: 100%;
background-color: red;
right: 0px;
}
... otherwise, you have to use JS to calculate the current available width on the left side and assing it the .image div:
HTML
<div class="info-panel"></div>
<div class="image">
<img src="http://placehold.it/960x1400" />
</div>
CSS
.image {
min-height: 600px;
width: auto;
}
.image img {
width: 100%;
}
.info-panel {
position: fixed;
width: 200px;
height: 100%;
background-color: red;
right: 0px;
}
JS (jQuery)
$(document).ready(function() {
$('.image')
.css('min-height', 'auto')
.height($(window).height())
.width($(window).width() - $('.info-panel').width())
;
});