I have 3 divs. One inside the other.
jQuery
$(function() {
$("#div1").resizable({
handles: "n, e, s, w, nw, ne, sw,se"
});
$("#div1").draggable();
});
HTML
<div id="div1" style="left: 2px; top: 2px; z-index: 2; width: 100px; height: 70px; background-color: black">
<div id="div2" style="width: 100%; height: 100%; background-color: green; position: absolute;">
<div id="div3" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);">
text
</div>
</div>
</div>
CSS
.ui-resizable-handle { width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; }
.ui-resizable-n { top: 1px; left: 50%; }
.ui-resizable-e { right: 1px; top: 50%; }
.ui-resizable-s { bottom: 1px; left: 50%; }
.ui-resizable-w { left: 1px; top: 50%; }
.ui-resizable-nw { left: 1px; top: 1px; }
.ui-resizable-ne { top: 1px; right: 1px; }
.ui-resizable-sw { bottom: 1px; left: 1px; }
As you can see the div1 is resizable,draggable and has absolute width and height. Div2 has 100% width and height and has absolute position. Div3 has the parameters to be centered horizontally and vertically.
I have a screenshot of what i want to do. I want the white handles to be outside the div like shown in the screenshot. The second div must stay with position:absolute. There is also a jsfiddle that contains my current code.
Please help me move the handles outside of the div.
I'm not sure if I understand your question.
But there is a Fiddle.
I've change only your css.
You need to move the handle's by more than you have in the css you've outlined. I've tidied it up a bit and you can see that here
.ui-resizable-handle {
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
}
.ui-resizable-n, .ui-resizable-s {
left:50%;
}
.ui-resizable-e, .ui-resizable-w {
top:50%;
}
.ui-resizable-se {
right: -5px;
bottom: -5px;
}
Related
I want to display div "box" below the cursor, what i have done is making div come on cursor i want to display it below the cursor
$(document).bind('mousemove', function(e) {
$('.box').css({
top: e.clientY - $(".box").height() / 2,
});
});
.box {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 10px;
background: yellow;
border-style: solid;
border-color: black;
border-width: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
this prints the div just below cursor, I want it to appear below cursor.
One option is to add a margin to the top of your box.
Example
margin-top: 30px;
With your code
$(document).bind('mousemove', function(e) {
$('.box').css({
top: e.clientY - $(".box").height() / 2,
});
});
.box {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 10px;
background: yellow;
border-style: solid;
border-color: black;
border-width: 5px;
margin-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
I have a peculiar problem of tab content not floating on right side as its tabs are on right side too. Below is the picture to get a better idea:
I have tried floating the tab content right but not working. Rather its going past right where I can't see anything. This problem exists for both Live Chat and Mail Us tabs.
Below is the codepen.
HTML Code
<div class="tab-pane livechat wow animated bounceInLeft" id="chat">
<div class="chatwidget">
Click for Chat
</div>
</div>
CSS3
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
float: right;
}
.chatwidget {
padding: 150px;
font-size: 24px;
}
To right align an absolute positioned element, use right: 0; instead of float: right, float has no effect on absolute positioned elements.
Updated codepen
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
right: 0;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
}
Instead of float:right, use right:0px;
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
right: 0;
}
Before you add position: absolute to the livechat element you should add position: relative to its one of parent elements as below mentioned. Better it is to body tag. And put right: 0; instead of float: right;.
body{
position: relative;
}
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
right: 0;
}
I'm currently making a jquery image slider of 2 images where you can slide left or right to see the before and after photos. I have everything i want set except for the position of the cover image. About 40% of the cover image seems to shift off to the right of the border but the 2nd image is position perfected inside the border. Please advise on how I can put my cover image inside the border perfectly like my 2nd image.
HTML:
<div class="con">
<img src="warming1.jpg" class="imageOne">
<div class="coverImage"></div>
<div class="handle"></div>
<script type="text/javascript">
$(".handle").draggable({
axis: "x",
containment: "parent",
drag: function () {
var position = $(this).position();
var positionExtra = position.left + 6;
$(".coverImage").width(positionExtra + "px");
}
});
</script>
</div>
CSS:
.con {
top:2140px;
left:10px;
width: 280px;
height: 230px;
border: 2px solid;
position: absolute;
z-index:1
}
.con img {
height: 100%;
position: absolute;
}
.coverImage {
position: absolute;
background: url("warming2.jpg");
background-size: auto 100%;
width: 100%;
height: 100%;
}
.handle {
width: 0px;
height: 100%;
border-left: 12px solid #fff;
position: absolute;
left: 50%;
}
.handle:after {
content: "DRAG";
display: block;
width: 60px;
height: 60px;
border: 2px solid #eee;
border-radius: 50%;
color: #999;
line-height: 60px;
font-weight: 300;
text-align: center;
background: #fff;
position: absolute;
left: -36px; top: 0; bottom: 0;
margin: auto;
}
Positioning Picture 1 within the Element containing the border:
Obtain width of element with the border
Obtain width of 2nd picture
Set pic1.width = borderElement.width - pic2.width
Position pic1 at borderElement.right - pic1.width
I am having an issue centring a <div id='divTwo'> inside another <div id='divOne'>. This is normal an easy thing to do, however in this instance i have transform: scale(); with transform-origin: 50% 50% 0px; applied on 'divTwo'
#divOne {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#divTwo {
width: 1024px;
height: 768px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border-left: 131px solid #333333;
border-right: 131px solid #333333;
border-top: 47.5px solid #333333;
border-bottom: 47.5px solid #333333;
border-radius: 55px;
}
if the scale applied to the transform and the window is larger than the outerWidth(), 'divTwo' has no issue centring. However when the 'divTwo' is scaled and the window is smaller or equal to the outerWidth(). The div will no longer centre, instead it will place its centre point to be right side of the browser, resulting if half the of 'divTwo' being off the right hand-side of the browser. Changing transform-origin: 50% 50% 0px; to transform-origin: 0% 50% 0px; works so long as you don't scale vertically, and vice versa.
jsfiddle example : https://jsfiddle.net/yvyz49zp/
Thank you. I feel like am missing something of obvious.
I knocked this up relatively quickly in jsfiddle - no javascript needed. Just play around with the values until you get something you like.
Code:
body {
background: lightblue;
}
#container {
display: inline-block;
position: absolute;
width: 50%;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
#dummy {
margin-top: 75%; /* Using the dummy is the trick - it locks the aspect ratio (at 4:3 in this case) */
}
#device {
position: absolute;
top: 10%;
bottom: 10%;
left: 0;
right: 0;
background-color: #333;
border-radius: 10%;
}
#screen {
position: absolute;
width: 70%;
height: 80%;
background: #0f0;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
<div id="container">
<div id="dummy"></div>
<div id="device">
<div id="screen"></div>
</div>
</div>
I'm working on a small web project and got a nice little detail on the page: a curved content divider. Usually those are just lines, but this is not. So I was thinking about, how to code that in CSS or possibly with SVG, but I'm not sure exactly how it could work. Here you can see what I mean:
As you can see, the gray content above ends exactly with the orange curve and the white content part beneath start along the curve. Is there any way to code it with css or svg, instead of using images?
Thank you! I highly appreciate any help.
This was my best with CSS rounded corners ... can get better
.divider {
width: 100%;
height: 51vw;
position: relative;
overflow: hidden;
background: #fff;
}
.divider:after,
.divider:before,
.divider b:after,
.divider b:before {
content: "";
display: block;
position: absolute;
}
.divider:after {
width: 63.7%;
height: 62.5%;
border-radius: 50% 50% 0 0/50%;
bottom: -4px;
left: -7.5%;
border: red 2px solid;
border-right: transparent 2px solid;
}
.divider:before {
width: 63.6%;
height: 63.7%;
border-radius: 0 0 50% 50%/50%;
right: -7.5%;
top: -4px;
background: #eee;
}
.divider b {
display: block;
width: 50%;
height: 100%;
background: #eee;
}
.divider b:after {
width: 63.7%;
height: 62.5%;
border-radius: 0 0 50% 50%/50%;
right: -7.5%;
top: -4px;
border: red 2px solid;
border-left: transparent 2px solid;
}
.divider b:before {
width: 63.6%;
height: 63.7%;
border-radius: 50% 50% 0 0/50%;
bottom: -4px;
left: -7.5%;
background: #fff;
}
<div class="divider"><b></b></div>