How crop image when comes out from parents div? - javascript

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

Related

Block/disable all background elements

I have fixed positioned div which must be on the top of the page when opened.And it must stretch all over the page.
I have some inputs as a background elements on body.
I want to block/disable and prevent all the keyboard/click events from background elements(inputs).
Here is the code:
https://codepen.io/anon/pen/KyGzmN
<body style="
margin: 0;
">
<div style="
height: 100%;
width: 100%;
top: 0;
left: 0;
background: black;
z-index: 9999;
position: fixed;
background: rgba(0,0,0,0.5);
">
<div style="
height: 100px;
width: 200px;
background: yellow;
margin-top: 100px;
margin-left: 100px;
">My Content In Fixed Div
</div>
</div>
<input>
<input>
<input>
</body>
I can prevent mouse click events but when I press tab it focus the inputs.I don't want that.
I totally disable/block the background elements.How can I do that with css?
I can't use jquery.Maybe pure javascript.But I need that with css.
Add disabled="disabled" to your inputs, statically or using js if it has to change :
var inputs = document.getElementsByClassName('yourClass');
function disable() {
[].forEach.call(inputs , function(input) {
input.setAttribute('disabled', 'disabled');
});
}
function enable() {
[].forEach.call(inputs , function(input) {
input.removeAttribute('disabled');
});
}
https://jsfiddle.net/axn5wvye/8/

Make <div> scale to content when absolutely positioned?

Usually a <div> will expand to fill content insize.
<div>
<p>Hello</p>
</div>
The <div> scales to contain the <p>
Is it possible to make the <div> do this when it's absolutely positioned?
In my case I have a modal which has a set height and width, but I want to make it scale to the content.
Something like this? http://jsfiddle.net/3L99pycm/
CSS:
div {
position: absolute;
left: 50%;
top: 100px;
background-color: red;
width: 30%;
height: 100px;
}
p {
background-color: blue;
color: white;
}
div behave the same independently from its position, most likely the problem is that you are setting a fixed size parameter somewhere.
Well You dont need to do anything special to make the absolute div scale to the child. I added an example here http://jsfiddle.net/rtkvswmn/
CSS
div {
position: absolute;
background: red;
}
p{
width: 100px;
background: blue;
text-align: center;
}

Draggable JQuery UI scroll issue when using within iframe

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?

Put overlay on document with transparent window

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.

Fixed positioning overlap issue

I am in a corner with this one. I have a layout with 2 containers. One of the containers represents a map (#main) and needs to stay in user view at all times, the other one (#sub) serves as a scroll-able content. Everything looks fine if content fits horizontally. However as soon as the horizontal bar appears (resize the window to replicate), the scroll-able content overlaps the fixed content and I am out of ideas how to fix it. I know of one way to fix it by positioning the fixed content absolutely instead and useing javascript to adjust its position from the top. Is there any way to fix it?
Sample code is below:
Html:
<div id="content">
<div id="main">main</div>
<div id="sub">
<strong>Sub</strong><br />
sub<br />
sub<br />
sub
</div>
</div>
Css:
#content {
width: 1200px;
margin: 0 auto;
}
#main {
position: fixed;
width: 849px;
height: 500px;
background: red;
}
#sub {
position: relative;
float: right;
width: 350px;
height: 3500px;
background: green;
}
JSFiddle link
Based on your comments it sounds like not allowing the user to scroll will solve the issue:
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
If you want them both to scroll you have to remove the fixed positioning:
#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
float:left;
}

Categories