I made a drag-and-drop engine in JavaScript, and I'm currently adding a "bounding" feature. My issue is that the bounding element's position changes depending on its parent's position: attribute.
In other words this html:
<div id="center" class="bound">
<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square" id="one"> One </p>
<p class="drag square" id="two"> Two </p>
</div>
</div>
and this html:
<div id="center"> <!-- Difference is here -->
<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square" id="one"> One </p>
<p class="drag square" id="two"> Two </p>
</div>
</div>
affect the engine in different ways, and they shouldn't. Only the <div id="box" class="bound"> should affect the drag object.
Here is the CSS:
#charset "utf-8";
/* CSS Document */
* {
padding: 0px;
margin: 0px;
}
.drag {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bound {
position: relative;
}
.square {
width: 100px;
height: 100px;
background: red;
cursor:move;
}
#center {
width: 500px;
height: 300px;
margin: auto;
margin-top: 50px;
background-color:#ccc;
text-align: center;
border-radius: 25px;
-moz-border-radius: 25px;
}
#box {
background-color: #FF3;
height: 278px;
border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
opacity: 0.5;
}
If anyone asks for the JavaScript function which sets the bounding, I will be happy to post it in an edit!
To make the position attribute not affect my JavaScript would I need to translate everything into absolute coordinates? How would I do this? Will translating everything into absolute coordinates allow the JavaScript to treat the two html samples the same way?
AFAIK, to drag and drop, the element must have the position property as absolute or fixed.
And of course its position will change when you change the position property.
Related
This is how my webpage is currently looking:
And what I want is for the height of box 1 to be equal to be the height of box 3, if there was more text to be added to box 1 or 3 etc (and the same for boxes 2 and 4, at the same time).
I also want the length of which ever side is shorter, to be extended so that it is the same length of the longer side, resulting in both sides (green box and 4 boxes combined) having the same height.
More basically: Boxes 1, 2, 3 and 4 all have the same height. The 4 boxes and green box both extend downwards if necessary to the same height, so that the green box's height is roughly double the height of one smaller box.
This is my code currently:
<div class="container">
<div class="row">
<div class="col-xs-6" id="big-box">
<div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6">
<div class="mini-box" id="firstBox">1</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="secondBox">2</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="thirdBox">3</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="fourthBox">4</div>
</div>
</div>
</div>
</div>
</div>
With some basic CSS to change the looks of the text and background colour etc.
I have tried playoing around with Javascript, Bootstrap, and CSS properties to try and make this possible, but so far nothing has worked. Any help?
Thanks in advance
I personally don't like the bootstrap class names but that is beside the point. So I think you need to change the CSS:
.row {
position: relative; // set bounds for mini-box absolute.
}
.mini-box {
position: absolute;
top: 0px;
bottom: 0px;
}
I'm not a big fan of bootstrap so i have a alternative,
flexbox. the parent has a height: 200px; were every child in that wil align too but i couldn't fix it with a second child with in the row. so i fixed it with height: 95px; because of the 10px margin
.parent {
align-items: flex;
display: flex;
height: 200px;
}
row {} .child1 {
background-color: green;
color: #fff;
width: 300px;
margin: 0 10px;
}
.child2 {
background-color: grey;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child3 {
background-color: red;
color: #fff;
margin: 0 10px;
height: 95px;
}
.child4 {
background-color: pink;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child5 {
background-color: black;
color: #fff;
margin: 0 10px;
height: 95px;
}
<div class="parent">
<div class="child1">text big</div>
<div class="row">
<div class="child2">text 1</div>
<div class="child3">text 2</div>
</div>
<div class="row">
<div class="child4">text 3</div>
<div class="child5">text 4</div>
</div>
</div>
css tricks for more info over flexbox
SOLVED:
After re-reading the w3 spec for transforms, I realised the footer was being considered part of the 3d context due to DOM structure and was being affected by rotated elements. I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM.
Having a major problem with a container that is being rotated using css3 transforms and over-writing part of a buttons hit area in another div.
The transform visually works and the container is leaning back (using rotateX). However, the button in the footer, despite being of a higher z-index and naturally stacked to be above the container, is having its hit area ignored where the rotated container and the button visually overlap. The button still 'appears' to be on top of the rotated container, but acts like it is under it.
I should mention im using Less for the css (and all the Less code does work).
I've looked through lots of similar questions and the various solutions didn't work for me. Amongst those that didn't work (vendor prefixes omitted):
translate3d(0px, 0px, 0px);
transform-style: flat;
Here is the short version of the code:
html:
<div class="screen snap" style="display: block;">
<div class="container">**<!-- has perspective set to 1000 -->**
<div class="cardsContainer"> **<!-- is rotated on x using transform -->**
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
</div>
<footer>
**<!-- at certain screen sizes, when the container and footer overlap, top half of this buttons hit area is inactive-->**
<button class="checkButton">Start</button>
</footer>
</div>
</div>
Here are the full length files, look forward to any advice / tips:
.html file:
<div class="screen snap" style="display: block;">
<div class="container">
<div class="cardsContainer">
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
<div class="card" style="left: 420px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">Paint</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Nail</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Apple</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">House</div>
</div>
</div>
</div>
<footer>
<button class="checkButton">Start</button>
</footer>
</div>
</div>
.less file:
.screen.snap .container{
padding: 0;
margin: 0;
border: 0;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 0;
box-shadow: none;
vertical-align: baseline;
background-color: #efe8b6;
-webkit-perspective:1000px;
.cardsContainer{
position:absolute;
width:800px;
height:350px;
top:100px;
text-align: center;
background-color: lighten(#efe8b6, 10%);
-webkit-transform: rotateX(20deg);
.card {
position: absolute;
width:250px;
height:350px;
border-radius: 10px;
.cardFront{
background-image: url('images/snap_card_front.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
.cardContent{
width:200px;
height:300px;
font-size: 37px;
}
}
.cardBack{
background-image: url('images/snap_card_back.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
}
}
}
}
footer{
z-index:999;
background-color: #f00;
position: relative;
.button{
position:absolute;
width:50px;
height:50px;
background-color: #ccc;
border-radius: 5px;
font-size: 25px;
cursor: pointer;
}
}
After re-reading the w3 spec for transforms, I realised what the problem was.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM. I was applying the perspective style to the container which both the footer and the cardsContainer were part of. The footer was then being considered part of the 3d context due to DOM structure and was being affected by rotated elements.
I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context because it is now not inside the dom structure which has perspective style set.
The new structure is now this:
.screen.snap .container{
.cards3dContainer{
-webkit-perspective:1000px;
.cardsContainer{
}
}
.footer{
}
}
Apologies to anyone who may have been working on an answer at the moment.
I have a gallery grid that has four div containers. I want to enclose whatever image inside the divs, keeping in mind that each div box has a different height and width. The should be centered in the div leaving reasonable padding on all sides. Please check the link to get a better understanding JsFiddle
http://d.alistapart.com/fluid-images/3-4.png
Any help is highly appreciated.
enter code here
<div id="body">
<div class="container">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h2">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h3">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container w2">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
.container {
height:100px;
width: 100px;
overflow: hidden;
position: relative;
margin-bottom: 10px;
float: left;
background: #CCC;
border-radius: 5px;
cursor: pointer;
box-shadow: 4px 0 2px -2px rgba(0, 0, 0, 0.4);
}
.magic {
max-width:90%;
height:70%;
}
.h2 {
height: 210px;
width: 220px;
}
#body {
margin: 10px;
}
.h3 {
width: 340px;
height: 210px;
}
.w2 {
width: 220px;
}
I'm not sure that i understood your problem... if you use
.magic {
max-width:100%;
max-height:100%;
}
with big pictures what is the problem ?
you want them to fill the entire div AND respecting theire size ratio ?
I recommend adding these images as a background-image property to a block-level div, such as:
<div class="container">
<div class="magic" style="background-image: url(SOURCEHERE.JPG)"></div>
</div>
With additional CSS like:
.container{
width: 100px; /* or some other width */
height: 100px; /* or some other height */
padding:20px; /* this will add a little margin around your image */
box-sizing:border-box; /* padding will be calculated with the container dimensions */
}
.magic{
width:100%;
height:100%;
background-size:contain;
background-position:center center;
background-repeat:no-repeat;
box-sizing:border-box;
}
jsfiddle: http://jsfiddle.net/PDL2U/
I have the following HTML markup:
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
<div id="Level1Controls">
<div class="separated">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
</div>
<div id="Level2Controls">
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
</div>
CSS (w/ latest jQueryUI for major styling)
#RightPaneContent
{
overflow: hidden;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
}
#PlanViewControls > div
{
min-height: 20px;
padding-top: 5px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 5px;
}
.component-slider
{
width: 100px;
margin-left: 5px;
margin-top: 3px;
}
#PlanViewControls label
{
display: block;
padding-left: 15px;
text-indent: -15px;
float: left;
}
#PlanViewControls input
{
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
}
#PlanViewControls div.separator
{
padding-top: 4px;
}
.marginedTop
{
margin-top: 3px;
}
#ExportLabel
{
padding-top: 1px;
}
#PlanViewControls
{
min-width: 700px;
}
#ExportLabel:hover
{
cursor: pointer;
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
I am really unhappy with this solution because on wide displays the second level of controls looks unnatural -- there is enough space to hold them all in one level.
The solution I currently have in my head consists of:
Measure the available width of the space I would like to take up.
Measure the width of each control I have.
Place as many controls as I can on the first line.
Append a second level if I run out of space.
Obviously it doesn't make sense to collapse to just 1 item per row -- I would be specifiying a min-width for my first level controls.
Is this the proper way to go about doing this? Or is there an easy way to express this using CSS/HTML?
Just as a visual helper I've attached below what my page looks like on a landscape monitor vs a portrait monitor.
Hm, I would use pure CSS for that:
<div id="controls">
<div> "Separated" </div>
<div> another control </div>
<div> and one with an icon </div>
...
</div>
#controls {
width: 100%;
min-width: 10em; /* or whatever */
/* implicit height: auto; */
overflow: hidden; /* to hide the leftmost borders */
}
#controls > div {
display: inline-block;
border-left: 1px solid blue;
padding: 1em 0;
margin: 1em -1px; /* move the borders 1px into the off */
}
This should give a scalable toolbar, and there is no need for different level-divs.
I have a simple tooltip which has long JavaScript code in the divs.
I would to make it is as simple way
could any one help please
here is my code
<div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool
<div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;">
<div class="tool_wrapper">
<div class="tooltip_top_new"></div>
<div class="tooltip_middle_new">
<div class="content">
<p>Please holder actuall text</p>
<p>Please holder actuall text</p>
</div>
</div>
<div class="tooltip_bot_new2"></div>
</div>
</div>
</div>
css
.tooltip_top_new{
background:url(../images/n_tooltip_top.png) no-repeat;
height:9px;
width:212px;
}
.tooltip_middle_new{
background:url(../images/n_tooltip_middle.png) no-repeat;
width:212px;
}
.tooltip_middle_new .content{
padding:2px 13px 1px;
}
.tooltip_middle_new .content p{
line-height: 1.3;
margin-bottom: 1em;
text-align: left;
}
.tooltip_bot_new2{
background:url(../images/n_tooltip_bot2.png) no-repeat;
height:21px;
width:212px;
}
.Question_di{
position:relative;
}
.pbc11_ttpos1_1Q_di {
border: 0 solid #FF0000;
}
.toolTip_new {
background: none repeat scroll 0 0 transparent;
color: #5C5C5C;
display: none;
font: 10px/12px Tahoma,Geneva,sans-serif;
left: -173px;
top: -90px;
position: absolute;
z-index: 1000;
}
the thing is that I have to copy & paste onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" where ever using the tooltips,I would like to avoid it.
JQueryTools includes a Tooltip module which will get rid of a big chunk of your code.
http://jquerytools.org/demos/tooltip/index.html
It's also possible to create tooltips with no JavaScript at all, using HTML and CSS along these lines:
<div class="has-tooltip">
<button class="huge red">You Know You Wanna...</button>
<div class="tooltip">Do NOT Press This Button.</div>
</div>
And in CSS:
.has-tooltip .tooltip {
position: absolute;
display: none;
<style code to position (with margin-left and margin-top)
and make the tooltip box look how you want>
}
.has-tooltip:hover .tooltip {
display: block;
}
Google "CSS Tooltips" to see lots of examples.