I'm attempting to make a pair of JQuery UI sortable divs where you move items from one vertically expanding div to another horizontally expanding div (think something like a timeline). The idea is that you can drag an item up from the holder div onto the timeline div, and as you add items the div will expand to hold them all.
I've tried a few different CSS things, ranging from using floats and inline-blocks to making the container extremely wide by default (sort of worked, but I'd rathe not have all the extra space there by default, and it's still possible to run out of space), but I can't seem to make it expand horizontally, only vertically. Here's my current code:
JS:
jQuery( ".dragto ul.connect-sortable, .dragfrom ul.connect-sortable" ).sortable({
items: "li:not(.empty)",
connectWith: ".connect-sortable",
placeholder: "ui-state-highlight",
start: function(event, ui) { ui.placeholder.html(' ') },
receive : function(event, ui ){
},
update : function(event, ui ){
}
}).disableSelection();
Sample HTML:
<div class="dragto">
<ul class="connect-sortable">
</ul>
</div>
<div class="dragfrom">
<ul class="connect-sortable">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
CSS:
ul.connect-sortable {
margin: 0;
padding: 0;
list-style: inline;
width: 100%;
min-width: 100%;
min-height: 200px;
padding: 10px;
margin: 10px;
border: 2px solid #bfb9b3;
background-color: #FAFAFA;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.dragto {
width: 100%;
overflow-x: scroll;
}
.dragto ul.connect-sortable {
height: 230px;
/* width: 10000px; */
}
ul.connect-sortable li {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
margin: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 8px;
text-align: center;
background-color: #FEFEFE;
border: 2px solid #bfb9b3;
float: left;
}
ul.connect-sortable li:hover {
border: 2px solid #5cc7ee;
background: #e5f6fb;
cursor:pointer;
}
.ui-state-highlight {
border: 2px dashed #D8D8D8 !important;
background: #F0F0F0 !important;
height: 200px;
width: 200px;
}
.ui-sortable-helper {
-webkit-box-shadow: 0px 3px 5px #888888;
-moz-box-shadow: 0px 3px 5px #888888;
box-shadow: 0px 3px 5px #888888;
}
.ui-sortable-placeholder {
display: inline-block;
height: 1px;
}
Any ideas?
Fiddle
Related
I'm trying to loop through list items in javascript and prepend some HTML to EACH list item. However, when I create the loop the content only gets prepended to the LAST element.
So in my example, I'm looking for the circle + to be before ALL list items, not just the last.
var _el = document.createElement("div");
_el.setAttribute("class","circle plus");
var _hp_li = document.querySelectorAll("ul li");
_hp_li.forEach(function(e){
e.prepend(_el);
});
ul{list-style:none;}
.circle{
border: 1px solid #333;
box-shadow: inset 1px 1px 3px #fff;
width: 12px;
height: 12px;
border-radius: 100%;
position: relative;
margin: 4px;
display: inline-block;
vertical-align: middle;
background: #fff;
}
.circle:before,
.circle:after{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;
}
.circle.plus:before,
.circle.plus:after {
background:#000;
box-shadow: 1px 1px 1px #ffffff9e;
}
.circle.plus:before{
width: 2px;
margin: 3px auto;
}
.circle.plus:after{
margin: auto 3px;
height: 2px;
box-shadow: none;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
Moving the definition for the _el variable inside of the forEach will do the trick. This will ensure that a new element is created for each iteration of the loop.
var _hp_li = document.querySelectorAll("ul li");
_hp_li.forEach(function(e){
var _el = document.createElement("div");
_el.setAttribute("class","circle plus");
e.prepend(_el);
});
ul{list-style:none;}
.circle{
border: 1px solid #333;
box-shadow: inset 1px 1px 3px #fff;
width: 12px;
height: 12px;
border-radius: 100%;
position: relative;
margin: 4px;
display: inline-block;
vertical-align: middle;
background: #fff;
}
.circle:before,
.circle:after{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;
}
.circle.plus:before,
.circle.plus:after {
background:#000;
box-shadow: 1px 1px 1px #ffffff9e;
}
.circle.plus:before{
width: 2px;
margin: 3px auto;
}
.circle.plus:after{
margin: auto 3px;
height: 2px;
box-shadow: none;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
You were prepending the same element multiple times. I believe you can only have an instance of an element at one point in the DOM, so only the last change stuck.
It works if you create a separate instance of the div for each list item.
var _hp_li = document.querySelectorAll("ul li");
_hp_li.forEach(function(e){
var _el = document.createElement("div");
_el.setAttribute("class","circle plus");
e.prepend(_el);
});
ul{list-style:none;}
.circle{
border: 1px solid #333;
box-shadow: inset 1px 1px 3px #fff;
width: 12px;
height: 12px;
border-radius: 100%;
position: relative;
margin: 4px;
display: inline-block;
vertical-align: middle;
background: #fff;
}
.circle:before,
.circle:after{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;
}
.circle.plus:before,
.circle.plus:after {
background:#000;
box-shadow: 1px 1px 1px #ffffff9e;
}
.circle.plus:before{
width: 2px;
margin: 3px auto;
}
.circle.plus:after{
margin: auto 3px;
height: 2px;
box-shadow: none;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
I have a list of elements layed out horizontally using display:inline-block.
One element is bigger in height than others and it overflows. How can I make it have the same height as others and have it's margin or padding properties to stay within the bounds.
I don't know how to approach this maybe there are two ways:
How to shrink the bigger element fit with others?
How to make other elements get bigger to align with the bigger element.
Here is the codepen: http://codepen.io/anon/pen/domBYj
<ul class="topbar-menu">
<li><a> 1000 points </a></li>
<li><a class="action-button green"> Get Points </a></li>
<li><a> Level 10 </a></li>
<li><a> Buddies </a></li>
</ul>
This is the menu:
.topbar-menu {
display: table;
margin: 1em auto;
}
.topbar-menu > li {
background: #333;
display: inline-block;
position: relative;
}
.topbar-menu a {
color: #eee;
display: block;
padding: 1em 2em;
text-decoration: none;
}
This is the bigger element:
.topbar-menu .action-button {
position: relative;
margin: 0px 10px 5px 0px;
border-radius: 8px;
}
.green {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
Firstly I suggest this bit of code:
* {
box-sizing:border-box;
}
This will make all your height and width declarations not include padding or border in the total real-estate it takes up. As in, it will reduce the height/width and then add on the padding/border. So if you make the declaration width:200px, it would always be 200px no matter how much padding/border you add.
Then you need to update your code:
/* Topbar Menu */
* {
box-sizing:border-box;
}
ul.topbar-menu {
list-style: none;
margin: 0;
padding: 0;
}
.topbar-menu {
display: table;
margin: 1em auto;
}
.topbar-menu > li {
background: #333;
display: inline-block;
position: relative;
}
.topbar-menu a {
color: #eee;
display: block;
padding: 1em 2em;
text-decoration: none;
}
/* Buttons */
.topbar-menu .action-button {
position: relative;
border-radius: 8px;
}
.green {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.topbar-menu a.green {
padding-bottom: calc(1em - 5px); /* Take 5px off the padding to accomodate the extra border on this particular item */
}
.topbar-menu a.green:hover,
.topbar-menu a.green:focus{
background: #82BF56;
}
.action-button:active {
transform: translate(0px, 5px);
border-bottom: 0px solid;
}
<div>
<ul class="topbar-menu">
<li><a> 1000 points </a></li>
<li><a class="action-button green"> Get Points </a></li>
<li><a> Level 10 </a></li>
<li><a> Buddies </a></li>
</ul>
</div>
The reason why it's larger is because the border-bottom on .green adds to the margin-bottom on the .action-button:
.green {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
You can force the height on all <li> to remove the extra padding:
.topbar-menu > li {
background: #333;
display: inline-block;
position: relative;
height:50px;
}
Or remove the margin from the bottom of the button:
.topbar-menu .action-button {
position: relative;
max-height: 10px;
margin: 0px 10px 5px 0px;
border-radius: 8px;
}
Update your CSS as follows (reducing the bottom margin to 5px):
.topbar-menu .action-button {
position: relative;
max-height: 10px;
margin: 0px 10px 5px 0px;
border-radius: 8px;
}
.topbar-menu .action-button {
position: relative;
max-height: 3px;
margin: 0px 10px 10px 0px;
border-radius: 8px;
}
.action-button:active {
transform: translate(0px, 5px);
border-bottom: 5px solid black;
}
The transform you make moves it down, pushing the white space (not whitespace :) ) down too. Making the .aciton-button add a border will negate this.
hi i wanted to make a similar dropdown div just like on facebook
here
the problem is the div doesnt stay when you hover out.how can i toggle it. like it will only disappear when you click outside the div? like facebook navigation bar?
CSS
.divs {
display: none;
}
a:hover + .divs {
display: block;
background-color:white;
}
HTML
<a><img src="someIconsButtons.png"></a>
<div class="divs">
Stuff here...
</div>
how can i attain that? thanks please be gentle guys im kinda newbie :))
Using CSS
.divs
{
display: none;
}
a:hover + .divs
{
display: block;
position: absolute;
background-color: purple;
color: #FFFFFF;
width: 200px;
height: 200px;
}
.divs:after
{
content:"";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px solid purple;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
LIVE DEMO
.divs {
display: none;
}
a:hover+.divs {
display: block;
position: absolute;
background-color: purple;
color: #FFFFFF;
width: 200px;
height: 200px;
}
.divs:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px solid purple;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
<a><img src="http://i.stack.imgur.com/s7eOO.jpg?s=32&g=1" /></a>
<div class="divs">
Stuff here...
</div>
You can achieve this by using jQuery.
Try this:
HTML:
<a id="showdivblock">Show Div Block</a>
<div id="divblock">
here you go..
</div>
CSS
#divblock
{
position: absolute;
background-color: blue;
color: #FFFFFF;
width: 300px;
height: 100px;
margin-top: 10px;
}
#divblock:after
{
content:"";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px dashed blue;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
and here is a key what you want,
jQuery:
$('#divblock').hide();
$('#showdivblock').click(function(e){
e.stopPropagation();
$('#divblock').slideToggle();
});
$('#divblock').click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$('#divblock').slideUp();
});
LIVE DEMO
$('#divblock').hide();
$('#showdivblock').click(function(e) {
e.stopPropagation();
$('#divblock').slideToggle();
});
$('#divblock').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('#divblock').slideUp();
});
#divblock {
position: absolute;
background-color: blue;
color: #FFFFFF;
width: 300px;
height: 100px;
margin-top: 10px;
}
#divblock:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px dashed blue;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="showdivblock">Show Div Block</a>
<div id="divblock">
here you go..
</div>
Hope it helps you!
Here is my jQuery solution,
I made your box of stuff display on hover and then if the body is clicked it is hidden.
$('img').hover(function(){
$('div#box').show();
});
$('body').click(function(){
$('div#box').hide();
});
Here is a fiddle to demonstrate. http://jsfiddle.net/joey6978/zLXK8/
I wrote this code which appends movie posters to a selected div with an ID.
For whatever reason, appended elements end up outside (below) the div. When I check the HTML in my debugger, the elements are clearly inside the div in question.
I have no idea what's going on here, and couldn't find an answer by searching. Help would be greatly appreciated!
Here's the entire code. The DIV used is div.movieListBox_trans in the CSS. The point of all this is to margin the grid area for the posters to the center. However, since the elements end out outside, the margin-center attributes doesn't apply.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(dis) {
$("#displayBoxFind").append("<div id='movieListBox2' class='movieListBoxWatchque'><p class='box_title'>Lorem Ipsum</p><p class='box_description'>Lorem Ipsum</p></div>").slideDown();
for(var i=0; i<7; i++){
$("#movieListBox2").append("<div class='filmdiv'><img class='posterClickableNoMargin' data-movieId='dsfa' id='dsfa' src='dsfa' alt='No Poster'><div class='metadiv'><p class='film_title'>'dsfa'</p><p class='meta'>Genres: 'dsfa'</p><p class='meta'>Vote average: 'dsfa'</p><p class='meta'>Release date: </div></div>");
}
});
</script>
<style type="text/css">
div.movieListBox_trans{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
background: yellow;
opacity: 0,5;
}
div.filmdiv{
float: left;
width: 350px;
height: 180px;
margin: 15px;
}
div.metadiv{
float: right;
background: #DCDCDC;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
width: 200px;
height: 180px;
border-style:solid;
background:rgba(0, 0, 0, 0.6);
border-top: 2px solid rgba(255,255,255,0.5);
color:rgb(255,255,255);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
img.poster{
float: left;
border-style:solid;
width: 115px;
height: 180px;
border-width: 1px;
border-color: #D3D3D3;
background:rgba(0, 0, 0, 0.6);
border-top: 2px solid rgba(255,255,255,0.5);
color:rgb(255,255,255);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
img.posterClickableNoMargin{
float: left;
border-style:solid;
width: 115px;
height: 180px;
border-width: 3px;
border-color: black;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="displayBoxFind" class="movieListBox_trans"></div>
</body>
Add this style to fix the problem
div.movieListBox_trans {
overflow: hidden;
}
Fixed version http://jsbin.com/OSUkupO/2/edit
Basically you have the problem with float:left and context. Read this one How does the CSS Block Formatting Context work?
I have a parent div #modal_share with a defined height of 400px. I want it to extent its height to contain all its child divs when a new child div which is originally hidden, becomes visible.
Problem: Right now, when a hidden child div .modal_error_msg becomes visible, some divs below this newly visible div gets pushed outside its parent div.
How can I make the parent div #modal_share expand its height to contain all the visible child divs?
JSFiddle: http://jsfiddle.net/TEmGc/
CSS
#modal_share {
width: 565px;
height: 400px;
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
display: none;
}
.modal_big_hline {
width: 100%;
height: 1px;
margin-top: 25px;
border-top: 1px solid #CCC;
float: left;
}
.modal_error_msg {
width: auto;
height: 15px;
padding: 15px 25px;
margin: 0px 25px;
font-size: 12px;
color: #B79000;
border: 1px solid #E7BD72;
background: #FFF3A3;
clear: both;
display: none;
}
#modal_big_button_container {
height: 14px;
width: auto;
margin: 10px 25px 0px 25px;
clear: both;
}
HTML Structure
<div id="#modal_share">
<div class="modal_error_msg"></div>
<div class="modal_big_hline"></div>
<div id="modal_big_button_container"></div>
</div>
For parent div #modal_share declare height as auto then it will automatically adjust height based on child elements.
Set the modal_share's height to auto:
#modal_share {
width: 565px;
height: auto; //<----
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
}
See Feedle http://jsfiddle.net/TEmGc/1/