I have two lists - the first contains a list of items the user can select, and he selects them by dragging them to the second list. I have implemented this with jQuery UI Sortable, and created a basic example on jsfiddle.
So drag an item from the first to the second list - OK. The problem occurs if you scroll down to the bottom of the second list - you are unable to drag an item from the first to the second list. It appears that all list items that overflowed beyond the end of the visible list do not have a drop target associated with them. Same happens when copying in the other direction.
As sortable appears to be aimed at lists, I suspect I am missing a trick. Any ideas?
The jsfiddle example code is:
html
<div class="listDiv">
<ul id="list1" class="connected ui-sortable">
<li id="a">a</li>
<li id="b">b</li>
<li id="c">c</li>
<li id="d">d</li>
<li id="e">e</li>
<li id="f">f</li>
<li id="g">g</li>
<li id="h">h</li>
<li id="i">i</li>
<li id="j">j</li>
</ul>
</div>
<div class="listDiv">
<ul id="list1" class="connected ui-sortable">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li id="6">6</li>
<li id="7">7</li>
<li id="8">8</li>
<li id="9">9</li>
<li id="10">10</li>
<li id="11">11</li>
<li id="12">12</li>
<li id="13">13</li>
<li id="14">14</li>
<li id="15">15</li>
</ul>
</div>
js
$(function() {
$( "#list1, #list2" ).sortable({
connectWith: ".connected"
}).disableSelection();
});
css
.listDiv {
overflow:auto;
float: left;
width:400px;
border: 1px solid #999;
}
#list1, #list2 {
list-style-type: none;
height: 200px;
}
#list1 li, #list2 li {
font-size: 11px;
margin: 0 5px 5px;
padding: 5px;
width: 300px;
border: 1px solid #C5DBEC;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
outline: medium none;
}
I believe I have nailed down the version of jquery ui sortable in which the bug was introduced - 1.8.12. The following code appears to cause the error:
//We ignore calculating positions of all connected containers when we're not over them
if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this.currentItem[0])
continue;
I have reported this on jquery ui bug 4231 in the hope that they will reopen this (unfixed) bug and fix it in a future release.
So if you are struggling with this problem you can check if the bug has been fixed, or revert back to jquery ui 1.8.11, or otherwise remove the offending code mentioned above and hope for the best!
Related
I want to create a youtuber gallery (or table I don't know) with avatar pictures that would be sortable by sexe, country, age... (ideally with settings on the side).
Pictures would include interactive several links and I would also like visitors to know what youtubers are live when consulting the list/table.
Thanks a lot in advance... ))
I can't give you more than a library recommendation here, but I think something like this is the way to go: Have a look at Isotope, a JS library to generate "Filter & sort magical layouts". It looks pretty much like what you want.
The demo on the site linked above basically says it all. You can see the code for the demo in this codepen (also taken from the site linked above).
How it works is that you feed your markup with meta data for the respective elements and the library gives you the filter & sort functionality and displays a grid layout with your elements:
<div class="element-item metalloid " data-category="metalloid">
<h3 class="name">Tellurium</h3>
<p class="symbol">Te</p>
<p class="number">52</p>
<p class="weight">127.6</p>
</div>
Then it's simple to have filter buttons for the grid like this:
<button class="button" data-filter=".metal">metal</button>
(samples from the codepen!)
I hope this hint helps you - it certainly gives you more control then ready-made Youtube gallery (if there is one at all, I don't know) - but in turn you'll have to get your hands a little dirty writing up the code.
Check out jQuery UI sortables "Display as Grid":
https://jqueryui.com/sortable/#display-grid
You can do something like this:
<ul id="sortable">
<li class="ui-state-default">
<img src="something.png">
</li>
</ul>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
#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;
background: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
i am using the plugin of tinymce in my website
when i change the color of text, the bullet color remains black.
i also try to edit the html code and put color in this code line
<ul style="list-style-type: disc;">
<li style="list-style-type: none;">
<ul style="list-style-type: disc; color: #da000c;">
<li style="list-style-type: circle; list-style-position: outside;">
<span style="font-style: normal; list-style-type: circle;
list-style-position: outside;
color: #ff0000;">
<span class="example1">Blood</span><span class="example1"> cannot be manufactured.
It can only come as a gift from people.</span></span></li>
anyone please tell me how to change the bullet color in tinymce..
thanks in advance
when I input this into tinymce, I see a black box with a red list item inside it with a red bullet.:
<div style="background-color: black;">
<ul>
<li style="color: red;">aaaaa</li>
<li>ccccc</li>
</ul>
</div>
That is with Chrome 18.0/Mac. What browser are you using? Try the above on Chrome, and let me know what you find.
I'm just trying to print back to better understand how to move around the tree traversal using console.log.
When I click on a parent I'd like to print back it's children. I thought it would be easy as
console.log($(event.target).children());
I've tried to use
console.log($(event.target).children("ul li a"));
It gives me []. I'm looking to print out the child's ID.
HTM:
<body>
<div class = "testButton">
<ul>
<li>
Parent One
<ul>
<li> P1 child </li>
</ul>
Parent Two
<ul>
<li> P2 child </li>
</ul>
Parent Three
<ul>
<li> P3 child </li>
</ul>
Parent Four
<ul>
<li> P4 child </li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
.testButton ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.testButton li {
display: inline;
}
.testButton a {
display: block;
width: 6em;
text-align: center;
text-decoration: none;
margin: 0em auto .14em;
padding: .1em .5em .1em .5em;
font-size: 2.5em;
}
.upButton {
background-color: #ccc;
color: #000;
}
.overButton {
background-color: #222;
color: #fff;
}
.outButton {
background-color: #ccc;
color: #000;
}
.clickButton {
background-color: #F90;
color: #222;
}
JS:
google.load('jquery', '1.6.2');
google.setOnLoadCallback(function(){
$(".testButton a").addClass("upButton");
$(".testButton a").mouseover(function(event){
$(event.target).removeClass("outButton").addClass("overButton");
});
$(".testButton a").mouseout(function(event){
$(event.target).addClass("outButton");
});
$(".testButton a").click(function(event){
$(".testButton a").removeClass("clickButton");
$(event.target).addClass("clickButton");
$(this).blur();
console.log($(event.target));
console.log($(event.target).children());
console.log($(event.target).parent().children());
console.log($(event.target).siblings());
});
});
This should do the trick for the structure of your ul/li/a tags.
DEMO
For the demo I have just simply alerted the ids for you. You can change these to console.log if you like. So now what I did...
$('.button').click(function() {
$(this).next('ul').children().each(function() {
alert($(this).children('a').attr('id'));
});
});
I added a class 'button' to each of your parents just to make it clear. So now when any item with a class 'button' is clicked, we get the next 'ul' in your html structure - (next() gets the next element at the same hierachy level of your code). Then for each child within that 'ul' I have alerted the id of each anchor within each child (as your structure is <li><a id="..."></li>).
I've got these two DIVs which have the same class name ():
<div class="myOutterDiv">
<ul class="innerUL">
<li id="num1">1</li>
<li id="num2">2</li>
</ul>
</div>
<div class="myOutterDiv">
<ul class="innerUL2">
<li id="letterA">A</li>
<li id="letterB">B</li>
</ul>
</div>
I'd like to apply a css border with a blue color to the one that contains 2 and red to the one that contains B.
I've tried using parentsUntil(), but applied a border to all the ancestors up to class="myOutterDiv". I just want to affect class="myOutterDiv".
Thanks!
Would this work for you?
$('#num2').parent('.myOuterDiv').css({'border': '1px solid blue'});
$('#letterB').parent('.myOuterDiv').css({'border': '1px solid red'});
What about:
$(yourthing).parent(".myOuterDiv").css("border", "1px solid red");
I am using the Scriptaculous Draggable/Droppable scripts and have a problem when dragging into a scrolling div. I have the following layout (based on this question):
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:400px; list-style-type:none; white-space: nowrap; }
#grid-container li { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center }
.image-row { margin-left: 10px; }
.grid-image { height:50px; margin-left:-20px; }
Here is the html:
<div id="grid-container">
<div id="grid">
<div id="row1" class="image-row">
<ul>
<li><img id="img1" class="grid-image" src="images/img1.jpg"></li>
<li><img id="img2" class="grid-image" src="images/img2.jpg"></li>
<li><img id="img3" class="grid-image" src="images/img3.jpg"></li>
<li><img id="img4" class="grid-image" src="images/img4.jpg"></li>
</ul>
</div>
<div id="row2" class="image-row">
<ul>
<li><img id="img5" class="grid-image" src="images/img5.jpg"></li>
<li><img id="img6" class="grid-image" src="images/img6.jpg"></li>
</ul>
</div>
</div>
</div>
I have another div with draggable items, while all of the img elements are droppable. This works very well for most cases, but when there are too many images for the grid and it has to scroll, I run into issues. I can still drag/drop into most items in that div, but when I scroll down and then try to drag onto an item in the bottom of the list, it drops on the row that was at the bottom before I scrolled the div.
Even if I set the scroll attribute when creating the Draggable items, it will scroll the grid div, but not use the proper Droppable item.
Is there any way to make the Draggable items drop onto the proper Droppable element regardless of if the containing div is scrolled or not?
Yesterday I found this drag-drop-problem-in-scroll-div when having the same problem. Basically the solution is to add Position.includeScrollOffsets = true; to your code.
Hope it helps