I'm trying to create using jquery a draggable list into a sortable list.
Everything works, except when using CSS to transform this list into a grid. As soon as everything is displayed as a grid, the draggable into the sortable stops to work.
My HTML is:
<ul id="sortable2">
<li class="ui-state-highlight">A</li>
<li class="ui-state-highlight">B</li>
<li class="ui-state-highlight">C</li>
<li class="ui-state-highlight">D</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
</ul>
My page SCRIPT is:
$(function() {
$("#sortable").sortable();
$("#sortable2 li").draggable({
connectToSortable: "#sortable",
helper: "clone"
});
});
And the CSS I've added to make both UL display as grid is:
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#sortable li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
}
#sortable2 {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#sortable2 li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
}
Any ideas?
I'm using jquery-ui.css, jquery-ui.js and jquery.min.js.
Thanks
The reason this is occurring is because the children li elements are floated.
When an element is floated, it is essentially removed from the normal document flow, and in this case results in the parent element collapsing upon itself with a height of 0:
As a result, you can't drop elements into the #sortable element because it doesn't have a height.
The most common work-around is to use a clearfix to prevent the parent element from collapsing.
Either add overflow: auto to the container element (example):
ul {
overflow: auto;
}
or use a pseudo-element (example):
ul:after {
content: '';
clear: both;
display: table;
}
Alternatively, you could also just remove float: left from the li elements and set their display to inline-block instead. Additionally, vertical-align: top should be added to resolve a minor alignment issue when dragging the elements (example):
ul li {
display: inline-block;
vertical-align: top;
}
Related
#I edit the question:#
I have attached the html:
<div class="mainDiv">
<ul id="myUL">
<li id="li-1" class="myLI"></li>
<li id="li-2" class="myLI"></li>
<li id="li-2.1" class="myLI"></li>
<li id="li-2.2" class="myLI"></li>
</ul>
</div>
My UL is formatted dynamically, based on what comes back from the DB.
#-------------------------#
I have a UL, in which all the LIs within it are linked by an arrow.
In addition, I have LIs that consist of several LIs that are their subcategory, and when clicked on, the LIs subcategory - will go from dispaly: none mode, to display: inline-block mode.
My problem is when I have an LI that consists of several LIs, but is located at the end of the UL.
According to my CSS, after this LI, an arrow will appear, because basically, there is another LI in UL, it is just doesn't appear...
I have attached a picture that illustrates this.
As long as the LI that contains some LI is in the middle of the UL- everything is fine (like example A).
Once it's at the end of the UL (as in example B), I have an "unnecessary" arrow, which I would like not to show now, but only when my all LI are in display: inline-block.
I also attached my CSS.
ul#myUL {
list-style: none;
margin:auto;
}
li.myLI {
display:inline-block;
xpadding: 10px 25px;
xborder: 1px solid black;
margin: 0 25px;
position: relative;
}
li.myLI:not(:last-child):after {
content: '';
height: 1px;
background: black;
width: 50px;
position: absolute;
right: -50px;
top: 50%;
}
li.myLI:not(:last-child):before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 50%;
border-style: solid;
border-width: 7px 0 7px 20px;
border-color: transparent transparent transparent black;
right: -50px;
transform: translateY(-50%);
}
div.mainDiv {
display:flex;
width:60%;
margin: auto;
border: 3px solid #73AD21;
}
I will really appreciate your help to resolve this.
Thanks!
I want to create smooth dropdown menu. The idea is: when clicking on orange element it will toggle black elements, and when clicking on black element it will toggle grey elements. But what i got is black element covering orange element with grey elements already toggled. I've used display:none; everywhere to make sure that it won't show up and.. Everything is toggled after clicking orange element. Using .hide() also doesn't want to help hide this elements. How can i make this black box (after click event) toggle below orange element and don't show grey? Also i don't know how to make grey element to not hide when someone will click on it.
$(".d").click(function(){
$(".d ul li").slideToggle(200);
});
$(".a").click(function(){
$(".b").slideToggle(200);
});
#container
{
width: 200px;
height: 500px;
background-color: rgba(0, 0, 0, 0.3);
overflow-y: scroll;
overflow-x: hidden;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
.a, .c
{
position: relative;
display: none;
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: black;
cursor: pointer;
}
.b
{
position: relative;
display: none;
margin-bottom: 5px;
padding: 0;
height: 100px;
width: 200px;
background-color: rgba(0, 0, 0, 0.6);
}
.d, .e
{
font-size: 20px;
position: relative;
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: orange;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="container">
<ul>
<li class="d">1
<ul>
<li class="a"></li>
<ul>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
</ul>
<li class="c"></li>
<li class="c"></li>
</ul>
</li>
<li class="d">2</li>
</ul>
</div>
The page is getting over,so it can't scroll down so you should add element and can also use href="#id/.classname" inside element
for hide and then for looking page this can be done
$(document).ready(function(){
$(".a").hide();
$(".b").hide();
$(".d").click(function(){
$(".d").fadeIn('fast');
});
$(".a").click(function(){
$(".b").fadeIn('fast');
});
When I slideUp() or slideDown() fixed div, it jumps.
I have read that it is height problem, but could not solve it. Maybe there is something I can do with padding?
Need some help :)
http://jsfiddle.net/sirjay/08ypLtp2/
#tab-menu {
text-align: center;
padding-right: 40px;
position: fixed;
bottom: 0;
width: 100%;
margin-bottom: 0;
}
li {
padding: 15px;
display: inline-block;
margin: 0 10px;
width: 110px;
background-color: lightblue;
}
.t-hidden {
display: none;
padding: 10px;
}
$(function() {
$('#tab-menu li > a').click(function(e) {
e.preventDefault();
var x = $(this).closest('li').find('.t-hidden');
if (x.is(':visible')) {
x.slideUp();
} else {
x.slideDown();
}
});
});
<ul id="tab-menu">
<li>
First
<div class="t-hidden">
Hidden 1
</div>
</li>
<li>
Second
<div class="t-hidden">
Hidden 2
</div>
</li>
<li>
Third
<div class="t-hidden">
Hidden 3
</div>
</li>
</ul>
Just add a height and a width to animate smoothly each element you apply slideUp() or slideDown() to.
li {
padding: 15px;
display: inline-block;
margin: 0 10px;
width: 110px;
height:90px;
background-color: lightblue;
}
DEMO http://jsfiddle.net/a_incarnati/08ypLtp2/3/
My ul has a few free li elements which have images in them and I wanted to center those li elements. I tried to find the solution but am facing a hard time to figuring it out. Could you guys suggest some way of doing it. I was thinking of surrounding the ul with a div, and then centering the ul within the div. Do you think that will work? I also wanted to mention that I wanted to maintain the float left property.
Here is the code:
<ul class="thumb">
<li><img src="photos/home9.jpg" /></li>
<li><img src="photos/home1.jpg" /></li>
<li><img src="photos/home3.jpg" /></li>
<li><img src="photos/home4.jpg" /></li>
</ul>
CSS:
.thumb {
list-style: none;
width: 90%;
margin: auto;
height: 750px;
}
.thumb li {
float: left;
}
.thumb li img {
height: 200px;
width: 200px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}
You need to make your li's inline-blocks, instead of float. In short, doing so will cause your li's to take up space like a block element, but behave like an inline element, which will make them follow a text-align:center; that you will want to add to your ul element. Visually, they will appear sort of like a "centered float," for lack of a better term.
Here's the CSS and a jsfiddle (http://jsfiddle.net/rgthree/RTt8g/):
.thumb {
list-style: none;
width: 90%;
margin: auto;
height: 750px;
text-align:center; /* center inline and inline-block elements */
}
.thumb li {
display:inline-block; /* no float; by making these inline-blocks they will center b/c their parent is text-align:center */
}
.thumb li img {
height: 200px;
width: 200px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}
If you want to keep the float:left; then you will need to add a container div to the ul with a width and margin:auto;
Here is how:
http://codepen.io/anon/pen/jneEq
But this will only cause the ul to appear centred if you set the width exactly to the width of the images.
If you want to center the images, then you will need to add this:
ul {
text-align: center;
}
If you center the ul which is a child for the div, the ul will be placed in the center, but the li items won't be. So it would be better if you place the list items in the center, you can moreover add the margin: 0; padding: 0 to the ul too! as
ul {
margin: 0;
padding: 0;
}
I hope this way you will have the images placed in center when there is no other margins and paddings! :)
You can try all this here: http://jsfiddle.net/afzaal_ahmad_zeeshan/b29D8/
can you check this up ?
I have updated the css to use text-align: center;
.thumb li {
text-align:center;
}
http://jsfiddle.net/XZt2b/
If you have no luck with the other options, you can use:
li {
display:block;
width: 200px;
margin: 0 auto;
}
This will make sure they are always in the middle of the available space.
You also might want to remove
.thumb li {
float: left;
}
As well as consider Afzaal's answer
http://jsfiddle.net/EbCZ4/
One way to accomplish this is to set display: block; margin: auto on the <img> elements.
http://codepen.io/jessegavin/pen/jBpdo
.thumb {
list-style: none;
width: 90%;
height: 750px;
}
.thumb li img {
display: block;
margin: auto;
height: 200px;
width: 200px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}
I try to make it with a little bit jquery, try it:
var totalWidth = 0;
$('.thumb > ul > li').each(function(){
totalWidth+= $(this).width();
});
$('.thumb > ul').css('width', totalWidth + 'px');
Here is full demo
I have this layout
I have 2 problems:
The height of div 2 is not same as div 1 or 3, i tried this solution
from stack overflow, but its not working.
The menu to be set in div 2 is responsive, but on shrinking the width, it
list down, which pushes the carousel even below, screwing the whole
design..... is there any method i can make the mid_div responsive
by not shrinking but instead create a horizontal scroll in that div
only (depending on screen size) ??
CSS
#h_scroll {
margin: 0 auto;
margin-top: 10px;
width: 80%;
}
#h_scroll_banner {
display: inline-block;
width: 100%;
}
#h_scroll .fltlft {
float: left
}
#h_scroll .fltryt {
float: right
}
#h_scroll .mid_div {
width: 100%;
background-color: #F11181;
height: 100%;
}
#h_scroll .mid_div ul {
list-style: none;
display: inline-block;
margin: 0 auto;
}
#h_scroll .mid_div li {
list-style: none;
display: inline-block;
}
#h_scroll .mid_div li a {
display: block;
line-height: 20%;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 4%;
width: 20%;
}
HTML
<div id="h_scroll">
<div id="h_scroll_banner">
<div class="fltlft" id="div_height_to_get">
<img src="image/scroll_banner_left.jpg" style="width:100%; height:auto" id="div_height_to_get" />
</div>
<div class="fltryt">
<img src="image/scroll_banner_right.jpg" style="width:100%; height:auto" />
</div>
<div class="mid_div" id="div_height_to_set">
<ul>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
</ul>
</div>
</div>
If you have full control over the source, here is my solution (JSFiddle preview):
HTML
<div class="wrapper">
<div class="banner-left"></div>
<div class="banner-mid">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="banner-right"></div>
<p>This is some content under the menu</p>
</div>
CSS
.wrapper {
margin: 40px auto;
width: 600px;
}
.banner-left, .banner-right {
background: #eee;
float:left;
height: 50px;
width: 50px;
}
.banner-left {
margin-left: -50px;
}
.banner-right{
margin-right: -50px;
}
.banner-mid {
float:left;
margin-bottom: 20px;
width: 100%;
}
.banner-mid > ul {
background: #ddd;
list-style:none;
margin: 0;
padding: 0;
height: 50px;
width: 100%;
}
.banner-mid > ul > li {
float:left;
line-height: 50px;
padding-left: 10px;
}
Since your banner flairs don't have any content in them, why not use a ::before and ::after? I don't see the need why all 3 divs need to be the same height and using generated content you can just have the slideshow positioned based on margins from .mid_div.
.mid_div {
position: relative;
}
.mid_div::before, .mid_div::after {
display:block
width: 50px; /* image width */
height: 50px; /* image height */
content: '';
position: absolute;
top: 0;
left: -50px;
background: url(image/scroll_banner_left.jpg);
}
.mid_div::after {
left: 100%;
background: url(image/scroll_banner_right.jpg);
}
As for you wanting a scrollbar, use overflow-x: auto on the .mid_div and for the .mid_div ul have a set pixel width for it and whenever .mid_div gets smaller the content won't reflow. You could also try white-space: nowrap on the ul also while having the li {display: inline}.
The answer to your first question, making all the divs the same height, you need to do this:
div1, div2, div3 { display: table-cell; }
For your second answer you could apply a min width to the divs/div and set the overflow to scroll.