When i open the html file on google chrome. It is just a blank page. Nothing is loading. If i take out the .js files it loads the content with the .css applied but never with the .js files. Whether I put the .js files in the or at the end of the it still does not show anything. I am using jquery btw and downloaded the file. all files are on the same folder. also tried both jquery-3.3.1.min.js and jquery-migrate-1.4.1.js if it makes a difference. Hoping someone can help. Thanks!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="testing.css">
</head>
<body>
<div id="products">
<h1 class="ui-widget-header">Blocks</h1>
<div class="ui-widget-content">
<ul>
<li data-id="1" class="credit"> 10000$ </li>
<li data-id="2" class="debit"> -10000$ </li>
<li data-id="3" class="credit"> 10000$ </li>
<li data-id="4" class="credit"> -10000$ </li>
<li data-id="5" class="credit"> Bank </li>
<li data-id="6" class="debit"> Loan </li>
</ul>
</div>
</div>
<div id="shoppingCart1" class="shoppingCart">
<h1 class="ui-widget-header">Credit Side</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
<div id="shoppingCart2" class="shoppingCart">
<h1 class="ui-widget-header">Debit side</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
<script type="text/javascript" src="jquery-migrate-1.4.1.js"></script>
<script type="text/javascript" src="testing.js"></script>
</body>
</html>
.JS
$("#products li").draggable({
appendTo: "body",
helper: "clone"
});
$("#shoppingCart1 ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ".credit",
drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
// To remove item from other shopping cart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#" + cartid + ") [data-id=" + productid + "]").remove();
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
// Second cart
$("#shoppingCart2 ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ".debit",
drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
// To remove item from other shopping chart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#" + cartid + ") [data-id=" + productid + "]").remove();
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
.CSS
h1 { padding: .2em; margin: 0; }
#products { float:left; width:200px; height: 600px; margin-right: 20px; }
#products ul {list-style: disc; padding: 1em 0 1em 3em;}
.shoppingCart{ width: 200px; margin: 20px; float: left; }
.shoppingCart ol { margin: 0; padding: 1em 0 1em 3em; list-style-type: decimal; }
Use
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
Because jquery-migrate not contains entire jquery code.
Of course you can include script from local.
Issues:
Your HTML files do not have CDN links to jquery and jquery UI. They require in the same order. First, you need jquery CDN and second jquery UI cdn
You're using jquery in a testing.js file but you do not have document.ready function.
Solution:
1. Add cdn links for jquery and jquery UI
2. Wrap your javascript code within document.ready function.
Here is a MDN document
Solution
Related
I am trying the Serialize sample in jQuery.
I notice one behavior that I can select unrelated elements using mouse and Ctrl key.
I only want to select consecutive elements and not all elements on mouse clicks.
This is what is happening currently, its taking Item 1, 2 and 6 as the selections.
I want to only select consecutive elements and not unrelated elements by mouse click and add a validation error that you can only add consecutive elements like in the following screenshot.
This is the code, I am working on, currently:
$(function() {
$(`#selectable`).bind("mousedown", function(e) {
e.metaKey = true;
}).selectable({
selected: function(event, ui) {
//For toggling between select clicks
if ($(ui.selected).hasClass('click-selected'))
$(ui.selected).removeClass('ui-selected click-selected');
else {
$(ui.selected).addClass('click-selected');
console.log(ui.selected.innerText);
let selectedID = ui.selected.id;
$("#select-result").append(ui.selected.innerText);
}
},
unselected: function(event, ui) {
$(ui.unselected).removeClass('ui-selected click-selected');
}
});
});
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #F39814;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
#selectable li {
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
</ol>
</body>
</html>
Here's the fiddle, which I am working on.
I think that there is 2 cases,
First case is when no item is selected on your list so you can select any element.
Second case : when one or many items are selected so you have to be sure that the item to select is neighbor of the selected items.
$(function () {
$(`#selectable`).bind("mousedown", function (e) {
e.metaKey = true;
}).selectable({
selected: function (event, ui) {
//For toggling between select clicks
if ($(ui.selected).hasClass('click-selected'))
$(ui.selected).removeClass('ui-selected click-selected');
else {
//case when no Item is selected on your list
let noItemIsSelected = !$(".ui-widget-content").hasClass('click-selected');
//Case when on of neighbor's Item selected
let oneOfNeighborsIsSelected = $(ui.selected).next().hasClass('click-selected') || $(ui.selected).prev().hasClass('click-selected');
if (noItemIsSelected || oneOfNeighborsIsSelected) {
$(ui.selected).addClass('click-selected');
console.log(ui.selected.innerText);
let selectedID = ui.selected.id;
console.log(event);
$("#select-result").append(ui.selected.innerText);
} else {
$(ui.selected).removeClass('ui-selected click-selected');
}
}
},
unselected: function (event, ui) {
$(ui.unselected).removeClass('ui-selected click-selected');
}
});
});
You can see the updated version of your code here
I found this code, and the fiddle that was linked.
This is close to what I am looking for, however I would like to add a counter because I would like list 2 and list 3 to only accept 3 draggable items.
I intend to add more lists to this code for my purposes and they also need to only accept 3 items.
List 1 needs to be able to accept all of the draggable items.
I think I need to create an array with a counter to keep track of all of this, but I don't know how to do that. I don't really understand or know javascript.
Any help with this would be appreciated.
$(document).ready(function(){
$(".droppable").droppable({
drop: function(event, ui) {
var $list = $(this);
$helper = ui.helper;
$($helper).removeClass("selected");
var $selected = $(".selected");
if($selected.length > 1){
moveSelected($list,$selected);
}else{
moveItem(ui.draggable,$list);
}
}, tolerance: "touch"
});
$(".draggable").draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
drag: function(event,ui){
var $helper = ui.helper;
$($helper).removeClass("selected");
var $selected = $(".selected");
if($selected.length > 1){
$($helper).html($selected.length + " items");
}
}
});
function moveSelected($list,$selected){
$($selected).each(function(){
$(this).fadeOut(function(){
$(this).appendTo($list).removeClass("selected").fadeIn();
});
});
}
function moveItem( $item,$list ) {
$item.fadeOut(function() {
$item.find(".item").remove();
$item.appendTo( $list ).fadeIn();
});
}
$(".item").click(function(){
$(this).toggleClass("selected");
});
});
The HTML...
<div id="list1" class="droppable list"><!-- I want this to accept many. -->
<div class="item draggable">1</div>
<div class="item draggable">2</div>
<div class="item draggable">3</div>
<div class="item draggable">4</div>
</div>
<div id="list2" class="droppable list"><!-- I want this to accept only 3. -->
<div class="item draggable">5</div>
<div class="item draggable">6</div>
</div>
<div id="list3" class="droppable list"><!-- I want this to accept only 3. -->
<div class="item draggable">7</div>
</div>
Added a data-max attribute for each droppable list and inside the drop function you can check if the number of elements inside that list reached the max (limit), and if so - just return false.
Here is the change to your code:
$(document).ready(function(){
$(".droppable").droppable({
drop: function(event, ui) {
var $list = $(this);
$helper = ui.helper;
// Check if we reached the maximum number of children.
if ($(this).children().length == $(this).data('max')) {
return false;
}
$($helper).removeClass("selected");
var $selected = $(".selected");
if($selected.length > 1){
moveSelected($list,$selected);
}else{
moveItem(ui.draggable,$list);
}
}, tolerance: "touch"
});
$(".draggable").draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
drag: function(event,ui){
var $helper = ui.helper;
$($helper).removeClass("selected");
var $selected = $(".selected");
if($selected.length > 1){
$($helper).html($selected.length + " items");
}
}
});
function moveSelected($list,$selected){
$($selected).each(function(){
$(this).fadeOut(function(){
$(this).appendTo($list).removeClass("selected").fadeIn();
});
});
}
function moveItem( $item,$list ) {
$item.fadeOut(function() {
$item.find(".item").remove();
$item.appendTo( $list ).fadeIn();
});
}
$(".item").click(function(){
$(this).toggleClass("selected");
});
});
div.list {
border: 1px solid red;
margin: 5px;
min-height: 20px;
}
div.list div {
background: gray;
margin: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="list1" class="droppable list" data-max="-1"><!-- I want this to accept many. -->
<div class="item draggable">1</div>
<div class="item draggable">2</div>
<div class="item draggable">3</div>
<div class="item draggable">4</div>
</div>
<div id="list2" class="droppable list" data-max="3"><!-- I want this to accept only 3. -->
<div class="item draggable">5</div>
<div class="item draggable">6</div>
</div>
<div id="list3" class="droppable list" data-max="3"><!-- I want this to accept only 3. -->
<div class="item draggable">7</div>
</div>
I am using sidr as side menu for my website. But when I open it in chrome browser at my phone. It opens when I click the button. But doesn't close when I click the button again.
If I use the dolphin browser, it just works fine.
I've created a Fiddle.. This is my code which opens and closes the menu perfectly, doesn't seem to work here.
Fiddle
JS:
$('#responsive-menu-button').sidr({
name: 'sidr',
source: '#menu',
side: 'left'
});
CSS:
#mobile-header {
display: block;
position: absolute;
top: 15px;
right: 0;
}
#mobile-header #responsive-menu-button {
height: 41px;
width: 42px;
display:block;
}
#menu {
display: none;
}
HTML:
<div id="mobile-header"> <a id="responsive-menu-button" href="#menu">THE MENU</a>
</div>
<div id="menu">
<ul>
<li><a class="menu first" href="#first">First</a>
</li>
<li><a class="menu second" href="#second"> Second</a>
</li>
<li><a class="menu third" href="#third">third</a>
</li>
<li><a class="menu fourth" href="#fourth">fourth</a>
</li>
</ul>
</div>
Also my viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The code you provided is okay. Additional JavaScript for open/close needed, as you know. This works in web and mobile versions of Google Chrome.
<script src="http://yoursite.domain.../jquery.sidr.min.js"></script>
<script>
jQuery('#responsive-menu-button').sidr({
name: 'sidr-main',
source: '.menu-main-nav-container'
});
jQuery( window ).load(function() {
if(jQuery("#sidr-main").length !== 0) {
jQuery(".sidr-class-sub-menu").hide();
jQuery( "li.sidr-class-menu-item ul.sidr-class-sub-menu" ).each(function() {
jQuery( this ).after("<div class='lnk-plus'>+</div>");
});
jQuery( ".lnk-plus" ).toggle(function() {
var id1= jQuery( this ).parent().attr("id");
jQuery("#" + id1 + " ul.sidr-class-sub-menu").show();
jQuery("#" + id1 + " .sidr-class-menu-item-has-children ul").hide();
jQuery( this ).html("-");
}, function() {
var id1= jQuery( this ).parent().attr("id");
jQuery("#" + id1 + " ul.sidr-class-sub-menu").hide();
jQuery( this ).html("+");
});
}
});
</script>
Please notice where jQuery(".sidr-class-sub-menu").hide(); is situated.
plugin demo: http://jqueryui.com/selectable/#serialize
Hello, I don't quite understand this "plugin" and specifically
result.append( " #" + ( index + 1) ); &
<span>You've selected:</span> <span id="select-result">none</span>.
I want the user to be able to select one of the following "buttons" and then a message to show in place of the Number selected (as in the demo)
So: You've selected: #2.
Would be: You've selected: UK, please goto this and do that etc...
im guessing the easiest way is with JavaScript
if "select-result" = 1 then
else
Sort of thing?
Any help Would be great! i hope this isn't a stupid question...
Code:
<html>
<head>
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1) );
});
}
});
});
</script>
</head>
<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">UK</li>
<li class="ui-widget-content">USA</li>
<li class="ui-widget-content">FR</li>
<li class="ui-widget-content">AU</li>
<li class="ui-widget-content">CA</li>
<li class="ui-widget-content">DE</li>
</ol>
</body>
</html>
the example in the plugins is showing the selected index.. you don't need to do that... what you need to do is get the text of selected and show it in span.. so use.. html() or text()..
try this
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" );
result.html($(this).html()); // result.text($(this).text());
}
});
});
var index = $( "#selectable li" ).index( this );
This grabs the index of the element we've been passed. We don't need this line.
result.append( " #" + ( index + 1) );
The index is the position at which the element occurs while descending the DOM.
We can change the above lines to one simple thing.
$( ".ui-selected", this ).text().appendTo(result);
Edit: See above, this may refer to the entire ul, so we need to filter it by the item that is selected. If you are allowing for a multi-select, then see below.
$( ".ui-selected", this ).each(function(){
$(this).text().appendTo(result);
});
I need an example of dragging an item from one column and dropping it into another using jquery
Are there any such examples out there?
You can do this with jquery sortable: http://jqueryui.com/demos/sortable/#connect-lists
Here I have done complete bins using jquery UI sortable. i think it should be helpful to you.
Demo: http://codebins.com/bin/4ldqp9g
HTML:
<div class="demo">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">
Item 1
</li>
<li class="ui-state-default">
Item 2
</li>
<li class="ui-state-default">
Item 3
</li>
<li class="ui-state-default">
Item 4
</li>
<li class="ui-state-default">
Item 5
</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">
Item 1
</li>
<li class="ui-state-highlight">
Item 2
</li>
<li class="ui-state-highlight">
Item 3
</li>
<li class="ui-state-highlight">
Item 4
</li>
<li class="ui-state-highlight">
Item 5
</li>
</ul>
</div>
<!-- End demo -->
<div class="demo-description">
<p>
Sort items from one list into another and vice versa, by passing a selector
into the
<code>
connectWith
</code>
option. The simplest way to do this is to
group all related lists with a CSS class, and then pass that class into the
sortable function (i.e.,
<code>
connectWith: '.myclass'
</code>
).
</p>
</div>
CSS:
#sortable1, #sortable2
{
list-style-type: none;
margin: 0;
padding: 0 0 2.5em;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li
{
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
overflow:visible;
display:block;
}
JQuery:
$(function() {
var itemclone, idx;
$("#sortable1, #sortable2").sortable({
start: function(event, ui) {
//create clone of current seletected li
itemclone = $(ui.item).clone();
//get current li index position in list
idx = $(ui.item).index();
//If first li then prepend clone on first position
if (idx == 0) {
itemclone.css('opacity', '0.5');
$(this).prepend(itemclone);
}
//Else Append Clone on its original position
else {
itemclone.css('opacity', '0.7');
$(this).find("li:eq(" + (idx - 1) + ")").after(itemclone);
}
},
change: function(event, ui) {
//While Change event set clone position as relative
$(this).find("li:eq(" + idx + ")").css('position', 'relative');
},
stop: function() {
//Once Finish Sort, remove Clone Li from current list
$(this).find("li:eq(" + idx + ")").remove();
},
connectWith: ".connectedSortable"
}).disableSelection();
});
Demo: http://codebins.com/bin/4ldqp9g