jquery ui draggable restricting div to up and down drag within containment - javascript

I have been learning Javascript lately. As an exercise I wanted to create a Dominoes board. I am trying to drag a tile around the board. The approach I took is to create a tile within the board and set it to draggable with jquery ui.
However, somehow the drag is confined to up and down movement only. Why is that??
Html:
<div id="board">
<div id="tile_1-0" >
<div class="dominoe"> </div>
</div>
</div>
css:
.dominoe {
/* Dominoe shape */
position: relative;
height:60px;
width:30px;
background-color:white;
border: 2px solid black;
/* Rounded Corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding:2px;
}
#board {
margin: auto;
width: 200px;
height: 200px;
background-color: #0A9D2D;
}
javascript:
$( "#tile_1-0" ).draggable({containment:'#board'});
Please take a look at the embedded fiddle:
https://jsfiddle.net/totoorozco/t5nnd95j/

Because the div it's in takes up the full width of the 'board'. Fix that by setting the display of that div to inline-block:
#tile_1-0 {
display: inline-block;
}
jsFiddle example

add this to your css:
#tile_1-0{
position: absolute;
}

Related

Center Child to Parent When Child is Absolute Positioned [duplicate]

This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
How to center absolute div horizontally using CSS?
(9 answers)
Closed 1 year ago.
Is there a way to position an absolute positioned element centered to its' parent who is relative positioned?
I was thinking if somehow I can calculate the width of the parent, and based on that, center the child? But not sure where to start whether with JavaScript or css.
Here's the codepen for reference
.tooltip {
/*
position the top-left corner of the element
in the center of the parent
*/
position: absolute;
top: 50%;
left: 50%;
/*
move the (positioned) element up and left
by half its own width/height
*/
transform: translate(-50%, -50%);
}
.container,
.tooltip{
border: 2px solid black;
padding: 10px;
}
.container {
position: relative;
width: 80vw;
height: 50vh;
}
<div class="container">
<div class="tooltip">Tooltip</div>
</div>
top and left percentages are percentages of that dimension on the of the parentElement.
Whereas the percentages in translate are relative to the element itself.
This should center your tooltip
const tooltip = document.getElementById('tooltip');
const parentWidth = tooltip.parentElement.offsetWidth;
tooltip.style.left = (parentWidth - tooltip.offsetWidth) / 2 + 'px';
You can use left/right positioning with transform:translateX in order to put element in the center of it's parent. I've made below snippet by using your codepen example:
#container {
border: 1px solid gray;
}
#wrapper {
display: inline-block;
position: relative;
height: fit-content;
border: 1px solid red;
padding: 8px;
}
#tooltip {
border:1px solid green;
position:absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap; /* to prevent break the text*/
}
<div id="wrapper">
Trigger Content, Trigger Content, Trigger Content,Trigger Content,
<div id="tooltip">I want to be a centered to my parent</div>
</div>
Edit: I think Thomas Answer contains the better way
Well it depends on your code if you want to do this css only, Here are several cases I came up with after doing my research:
1. If your div has a set size (width & height), According to this page you can take this steps:
Add left: 50% to the element that you want to center. You will notice
that this aligns the left edge of the child element with the 50% line
of the parent.
Add a negative left margin that is equal to half the width of the
element. This moves us back onto the halfway mark.
Next, we’ll do a similar process for the vertical axis. Add top: 50%
to the child
And then add a negative top margin equal to half its height.
In your case it looks like this:
#container {
border: 1px solid gray;
}
#wrapper {
display: inline-block;
position: relative;
height: fit-content;
border: 1px solid red;
padding: 8px;
}
#tooltip {
width: 100px; /* could be set by % aswell */
height: 10px;
border:1px solid green;
position:absolute;
left:50%;
top:50%;
margin-left: -50px;
margin-top: -5px;
bottom: -24px;
}
<div id="wrapper">
Trigger Content, Trigger Content, Trigger Content,Trigger Content,
<div id="tooltip">Center</div>
</div>
2. If it doesn't contain a set value but you want it to be centered anyway:
Not sure if it's a good way but you can use an absolute element inside wrapper before any other content, covering its parent and having its display value as flex and containing justify-content: center as well as align-items: center;
e.g. on your code:
#container {
border: 1px solid gray;
}
.full-flex{
width: 100%;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
}
#wrapper {
display: inline-block;
position: relative;
height: fit-content;
border: 1px solid red;
/* padding: 8px; */ /* I removed the padding so you can get a better understanding of this */
}
#tooltip {
border:1px solid green;
}
<div id="wrapper">
<div class="full-flex">
<div id="tooltip">Wanna be centered</div>
</div>
Trigger Content, Trigger Content, Trigger Content,Trigger Content,
</div>

How to create a container with rounded corners inside? [duplicate]

This question already has answers here:
How to make round corners to both inside of a box and its border?
(12 answers)
Closed 2 years ago.
I need to create something like this in Html + CSS.
I think it's possible to make it in at least 2 ways:
1) Create the box with 4 rectangles and 4 rounded corners (it's more code, but it will be easy to fix position if I want to scroll background content).
2) Just create a background with that color and create a container in the center with scroll javascript in that div.
WWYD or is there another easier way?
P.S. On top of page, logo (left), buttons/pictograms (center) and profile (right) - I might add another container for it.
You can simply use 2 divs with a border and radius for the inner one. See here:
#inside {
border: 5px solid grey;
padding: 10px;
border-radius: 25px;
height: 200px;
background: grey;
}
#outside {
border: 5px solid grey;
padding: 10px;
background: black;
}
<div id="outside">
<div id="inside">
</div>
</div>
if you do not want to use 2 DOM use pseudo element :before
body{
padding: 15px;
}
div{
height:120px;
width:150px;
background-color:black;
border-radius:20px;
position:relative;
}
div:before{
content: '';
position: absolute;
height: 126%;
width: 120%;
background-color: red;
z-index: -1;
position: absolute;
top: -13%;
left: -10%;
}
<div></div>

Hide the "resizing" handle in a resizable div?

There are a few other questions which are similar, but none works or seems in the right area. I'm trying to make a table's columns' widths resizable. My table is a normal HTML table, except that it has the Bootstrap 4 class table (maybe they could have thought of a different name...!).
My css looks like this:
.resizable-div {
resize: horizontal;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
The relevant bit of JS where I add the cell to the table row with a resizable div inside it, and text inside that, is like this:
row.appendChild(cell);
const resizableTdDiv = document.createElement( 'div' );
resizableTdDiv.classList.add( 'resizable-div');
cell.appendChild( resizableTdDiv );
const cellTextNode = document.createTextNode(isHeader ? fieldName : value);
resizableTdDiv.appendChild(cellTextNode);
The result works fine: resizable columns. Hurrah. There is only one fly in the ointment:
I can get rid of the borders, of course. I just want to lose those pesky handler triangles in the bottom right corners... all of them!
I realise users have to be given an idea that they are able to resize the columns... but I'd be perfectly happy to do that some other way if I could replace those triangle icons with 100% transparent ones (for example).
Edit
Here's a JSFiddle! Amazingly easy to do!
You can do this in WebKit based browsers currently with the ::-webkit-resizer pseudo element.
div{
overflow:auto;
resize:both;
width:50%;
}
div:nth-of-type(2)::-webkit-resizer{
background:transparent;
}
<div>
Not Hidden
</div>
<div>
Hidden
</div>
WebKit provides a pseudo-element for this ::-webkit-resizer and you can hide those triangles by applying display: none, -webkit-appearance: none, or background: transparent.
For Firefox or anything without WebKit an alternative / workaround would be to position a custom handle over top of each resizable div. This may require some different markup though.
.wrapper {
position: relative;
display: inline-block;
}
.resizable-div {
position: relative;
resize: both;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
.handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: black;
pointer-events: none;
}
/* ::-webkit-resizer {
background: transparent;
} */
<div class="wrapper">
<div class="resizable-div"></div>
<div class="handle"></div>
</div>

JS not working after doing custom css on Wordpress Site

I am currently in the process of developing an online shop via wordpress. Everything was working fine, now I wanted to give my page a custom border( inverted round corners) and found the css code for it as seen here:
css:
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
html:
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello</h1>
<div class="bottom"> </div>
</div>
</div>
I renamed the classes to get no conflict with the existing css classes of the theme. It is working fine as seen here:my site. The problem is now, that I cannot interact with the site anymore, no links, no hover effects. It seems like the custom css is overlaying the actual site. Do you have any suggestions what I maybe did wrong?
P.S. I edited the header.php so that inverted corner div and the top div are right underneath the page-wrapper div( site content) and in the footer.php I edited the top div and the inverted-corner div closing right above the page-wrapper div closing.
Add :
pointer-events: none;
to the .bottom-corner CSS, so the mouse passes through.
In your custom.css you have this:
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
This basically overlays the whole page and thus disables any interaction.
One other option I would like to suggest to change following css rule
CSS
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
Replace above code with the below one
.top - corner, .bottom - corner {
position: absolute;
width: 100 % ;
}
this solution will work on all modern browsers and IE8 and above ( I'm not sure about lower version of IE, but it may work on them as well )

Centring the whole web page (on a really wide site)?

I have a web page that is wide (3078px) and pretty long too (1540px).
The page has a large div containing 6 divs inside it on 3 columns and two rows (each row a separate div itself).
When the page loads, it displays the top left div (box1) in the top right corner, with the option to scroll down or right to see the rest of the content.
I'd like to make it be centered on load, that is to say, I would like the middle column (box 2) to show in the middle of the page when loading, with the option to scroll left and right for the rest of the content.
Is there any script or CSS/HTML combo that would allow me to select what will be displayed in the browser on load? Essentially, what I'm trying to do is similar to centring the whole of the body within the browser window. I was considering attaching an anchor with a name to the middle div (box2), but I still wouldn't know the Javascript to make it select that div as the top left to load on.
Please let me know if this is a bit confusing, I can make a sketch to explain what I mean if that could help! (The jsfiddle link is below)
HERE IS THE CSS:
body {
margin:0px;
padding:0px;
text-align: center;
background:black;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:1024px;
height:768px;
background:transparent;
border:1px red solid;
}
#above {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#below {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#mainbox {
margin: 0 auto;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:1540px;
background:transparent;
}
AND THE HTML:
<div id="mainbox">
<div id="above">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
<div id="below">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
</div>
</div>
There is a JS fiddle too: http://jsfiddle.net/KyMet/
A similar question would be (to remove the pain of horizontal scrolling) – If I have a really long page, which scrolls vertically, how can I get it so that it loads with the bottom of the page in the browser window, so that, practically, you need to scroll up to see the rest of the content?
You need to use some query to pull this of.
EDIT
DEMO
$(function(){
//total width of your wrapper
var totalWidth = $('#mainbox').outerWidth(true);
//width of the user browser
var width = window.innerWidth;
//calculate the middle
var middle = (totalWidth - width) / 2
window.scrollTo( middle, 0 );
});
YOUR CSS
I would also recommend you to clean up your css, there is a lot of unnecessary properties there. You can choose to use this
body {
margin: 0 auto;
padding: 0;
text-align: center;
background: #222;
overflow: scroll;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin: 0;
padding: 0;
float: left;
display: block;
width: 1024px;
height: 768px;
border: 1px red solid;
}
#box2 {
background-color: aqua; /* only for demo */
}
#above {
margin: 0px;
padding: 0px;
display: block;
}
#below {
margin: 0px;
padding: 0px;
display: block;
}
#mainbox {
padding: 0;
width: 3078px;
height: 770px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
*zoom:1;
}
You would have to use jQuery scrollto library
http://demos.flesler.com/jquery/scrollTo/

Categories