Develop Reference

Allow user to drop item in two different droppable areas inside loop

So I do have a loop of droppable areas where user is able to drop items. Size of the loop can be different. It depends on user's input. You can check fiddle here
Here is my droppable area:
$(".projLeader ol").droppable({
tolerance: 'pointer',
hoverClass: 'highlight',
drop: function(ev, ui)
{
var zz = ui.draggable.text()
var xyz = itm.includes(zz);
if (xyz === false)
{
var item = ui.draggable;
if (!ui.draggable.closest('.placeholder').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
//this.innerHTML = ''; // clean the placeholder
item.addClass('dropClass').appendTo(this);
// append item to placeholder
//add to array
itm.push(zz);
var n = $(this).closest("div.proc").find(".dropClass").length;
$(this).closest("div.proc").find("h6").text("Items Dropped: " + n + ".");
}
else
{
alert('Name is Already Exist');
}
}
});
The problem is I got warning message for each field. For example if I drop item in box1 and then want to drop same item in box2 I got warning message. How can I fix it? Thanks for any help

I spent some time understanding your code and here's the solution. I added some code to detect if an existing box already exists.Hope it helps :)!
var itm = [];
$( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
$("#myAccordion").accordion({heightStyle:"content", active: false, collapsible:true});
$("#myAccordion li").draggable({
appendTo: "body",
helper: "clone",
start: function(ev, ui){ ui.helper.width($(this).width()); }
});
$(".projLeader ol").droppable({
tolerance: 'pointer',
hoverClass: 'highlight',
drop: function(ev, ui)
{
var zz = ui.draggable.text()
var xyz = itm.includes(zz);
if (xyz === false)
{
var item = ui.draggable;
var map = {}, i , size;
var flag = false;
if (!ui.draggable.closest('.placeholder').length){
item = item.clone().draggable();// if item was dragged from the source list - clone it
//this.innerHTML = ''; // clean the placeholder
item.addClass('dropClass').appendTo(this);
// append item to placeholder
//add to array
var n = $(this).closest("div.proc").find(".dropClass").length;
$(this).closest("div.proc").find("h6").text("Items Dropped: " + n + ".");
var listOfElements = $(this).closest("div.proc").find("li").text();
var newarr = listOfElements.split('x');
newarr.shift();
var actualArrayLength = newarr.length;
for (i = 0, size = newarr.length; i < size; i++){
if (map[newarr[i]]){
xyz = true;
alert("Name is Already Exist");
$(this).closest("div.proc").find("h6").text("Items Dropped: " + (n - 1) + ".");
$(this).closest("div.proc").find("li:last-child").remove();
return false;
}
else{
map[newarr[i]] = true;
newarr[newarr.length - 1];
}
}
}
}
}
});
$(".projLeader").on('click', '.closer', function(){
var item = $(this).closest('.item');
itm.splice(item);
item.fadeTo(200, 0, function(){ item.remove(); })
});
var LISTOBJ = {
saveList: function() {
var listCSV = "";
$( ".projLeader li" ).each(function() {
if (listCSV === "") {
listCSV = $(this).text();
} else {
listCSV += ", " + $(this).text();
}
$("#output").text(listCSV);
$(".hiddenListInput").val(listCSV);
});
}
}
body {
font-family: verdana;
font-size: 12px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
ol{list-style-type: none;}
.item { height:20px; width: 180px; margin:5px; padding:5px; border:1px solid gray; background-color: #cd8; position: relative; }
.item .closer { position: absolute; right: 5px; top: 2px; font: bold 14px arial; color: #666; padding: 1px 3px; line-height: 1; cursor: pointer; display: none;}
.item .closer:hover { color: #000; }
.placeholder { height: 30px; width: 195px; margin: 5px; background: #eee; border: 1px dashed #999; }
.placeholder .item { margin: 0; }
ol .item .closer { display: block; }
.highlight { border: 1px solid red; background: #fff; }
.highlight .item { opacity: 0.3; }
.ui-draggable-dragging { z-index: 99; opacity: 1 !important; }
.dropClass {
background-color: lightblue;
padding-left: 10px;
width: 180px;
border: 1px solid black;
border-radius: 8px;
margin-bottom: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<h1 class="ui-widget-header">Products</h1>
<div id="myAccordion">
<h3>T-Shirts</h3>
<div>
<ul>
<li class="item"><span class="closer">x</span>Lolcat Shirt</li>
<li class="item"><span class="closer">x</span>Cheezeburger Shirt</li>
<li class="item"><span class="closer">x</span>Buckit Shirt</li>
</ul>
</div>
<h3>Bags</h3>
<div>
<ul>
<li class="item"><span class="closer">x</span>Zebra Striped</li>
<li class="item"><span class="closer">x</span>Black Leather</li>
<li class="item"><span class="closer">x</span>Alligator Leather</li>
</ul>
</div>
<h3>Gadgets</h3>
<div>
<ul>
<li class="item"><span class="closer">x</span>iPhone</li>
<li class="item"><span class="closer">x</span>iPod</li>
<li class="item"><span class="closer">x</span>iPad</li>
</ul>
</div>
</div>
<div class='proc'><pre>
<h6> </h6><br /></pre>
<div class="projLeader">
<label>Box1:</label>
<div class="ui-widget-content">
<ol id = "ID1">
<li class="placeholder" name="projLeader"></li>
<input type="hidden" name="projLeader" class="hiddenListInput1" />
</ol>
</div>
</div>
</div>
<div class='proc'><pre>
<h6> </h6><br /></pre>
<div class="projLeader">
<label>Box2:</label>
<div class="ui-widget-content">
<ol id = "ID2" >
<li class="placeholder" name="projLeader"></li>
<input type="hidden" name="projLeader" class="hiddenListInput2" />
</ol>
</div>
</div>
</div>
<br/>
<input type="submit" id="savebutton" class="button" value="Save" onclick="userSubmitted = true;" />
<div id="output"></div>

Use Jquery for single select with mouse click and multiselect with CTRL + Click on the image inside a div

Having a situation here!
I have multiple images in a div. On click of the image, it should toggle something like select and de-select but, at a time only one image should be selected on Click event or none.
Now, when using CTRL+Click, I should be able to select/toggle other images also, something like multi-select.
Following is my code for single-select
jQuery toggleClass with single select on - on both left click and right click
$(document).on('click', '#snapshotsRpt img', function(e) {
e.preventDefault;
$('#snapshotsRpt img.htmlView_img_select_toggle').not(this).removeClass('htmlView_img_select_toggle');
$(this).toggleClass('htmlView_img_select_toggle');
});
$(document).on('mousedown', '#snapshotsRpt img', function(e){
if(e.which == 3){
e.preventDefault;
$('#snapshotsRpt img.htmlView_img_select_toggle').removeClass('htmlView_img_select_toggle');
$(this).addClass('htmlView_img_select_toggle');
}
});
This is what I tried doing for ctrl-click but something is not quite right.
$(document).on('click', '#snapshotsRpt img', function(e) {
e.preventDefault;
// To detect ctrl + click
if(e.ctrlKey) {
//alert("need to select multiple");
$(this).toggleClass('htmlView_img_select_toggle');
}
});
Any direction will be helpful. Thank you!

Here is the demo which will hek
$(document).ready(function () {
$(".selectOption").click(function (e) {
if (e.ctrlKey) {
$(this).toggleClass("selected");
} else {
if ($(this).hasClass("selected")) {
$(".selectOption").removeClass("selected");
} else {
$(".selectOption").removeClass("selected");
$(this).addClass("selected");
}
}
});
});
.selectOption{
height:30px;
width:30px;
background:red;
margin-bottom:2px;
}
.selected{
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>

May be this is not what you are expecting. But this could do the trick. **jQueryUI** has an interaction called **Selectable**
So the structure should be,
<ol id="selectable">
<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>
</ol>
CSS:
#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: 450px; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
Script:
$(function() {
$( "#selectable" ).selectable();
});
A working Fiddle

Index position of sortable while still being dragged

I would like to know where a sortable is in a list before it is dropped.
Once the the item is selected by the user, it is removed from the DOM. When I listen for the change event, all the item are there except for the selected item.
$( "#sortable" ).sortable('toArray')
As the user moves the selected item over the other elements, I would like to know the proposed area where the user is about to drop the object. I want to do this so that I can give more feedback to the user before they commit to dropping it.
Is there a way to get the index of a sortable before it is actually dropped?

This is possible by finding the index of the placeholder element in the change event, we do want to make sure we ignore the li element that is currently being dragged. I do this by simply adding a class, you could also use $.data(). If you do not ignore the li element that is currently being dragged you will double count since there is a placeholder and the original element in the ul at the time of change.
Code is below and here is the fiddle: http://jsfiddle.net/yYKmw/16/
HTML
<ul id="sortable">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="output">
<span></span>
</div>
CSS
#sortable {
list-style-type: none;
margin: 1em;
padding: 0;
width: 30%;
float: left;
}
#sortable li {
height: 20px;
background-color: khaki;
margin: 3px;
padding: 2px;
}
.sortable-placeholder {
background-color: red !important;
}
#output {
clear:both;
border: thin solid black;
height: 200px;
width: 200px;
color: black;
}
JS
$( "#sortable" ).sortable({
placeholder: "sortable-placeholder",
tolerance: "pointer",
start: function(event, ui) {
ui.item.addClass( 'ignore' )
},
change: function(event, ui){
var elements = $('#sortable li').not('.ignore')
, placeholderElement = elements.filter( '.sortable-placeholder' )
, index = elements.index( placeholderElement );
$('#output span').html('Current index: ' + index)
},
stop: function(event, ui) {
ui.item.removeClass( 'ignore' );
}
});

do you want something like this?
http://jsfiddle.net/6G9rY/2/
$(function() {
$( "#draggable" ).draggable();
});
$('#draggable').mousemove(function(){
var html = ["The clicked div has the following styles:"];
var styleProps = $("#draggable").css( ["top", "left", "right", "bottom"] );
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
});
$( "#data" ).html( html.join( "<br>" ) );
});

JavaScript if statement help needed

I'm using JavaScript to achieve a preview box when hovering over a list. I'll show you my code and then a live website on how it works, then I will say the problem.
HTML
<div id="content">
<div id="theDiv"><h1>Custom </h1></div>
<div id="theDiv1"><h1>Custom One</h1> </div>
<div id="theDiv2"><h1>Custom Two</h1></div>
<div id="theDiv3"><h1>Custom Three</h1></div>
<div id="theDiv4"><h1>Custom Four</h1></div>
<div id="theDiv5"><h1>Custom Five</h1></div>
<div id="theDiv6"><h1>Custom Six</h1></div>
<div id="theDiv7"><h1>Custom Seven</h1></div>
<ul id="nav">
<li><b>Austria ></b> <br/>
<ul>
<li>Factsheet </li><br/>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
<li><b>Switzerland ></b> <br/>
<ul>
<li>Factsheet </li><br/>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
<li><b>Explanation Page ></b> <br/>
<ul>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
</ul>
</div>
CSS
ul {
padding-left:10px;
list-style: none;
width:150px;
}
ul li {
position: relative;
left:10px;
width:148px;
}
li ul {
position: relative;
display:none;
}
/* Styles for Menu Items */
ul li a {
display:block;
text-decoration: none;
line-height:2em;
height:2em;
padding:0 5px;
color:#666;
}
a:hover {color:#999;}
li ul li {width:139px; }
li.on ul { display:block; }
li.off ul{display:none; }
.linkhover:hover {text-decoration:underline; }
.linkxp:hover {text-decoration:underline; }
#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4, #theDiv5, #theDiv6, #theDiv7, #theDiv8 {
padding:10px;
float:right;
margin:0px 50px 0 0;
width:300px;
height:500px;
border:1px solid #000;
display:none;
}
JavaScript
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeIn();
},
function () {
$("#theDiv").fadeOut();
}
);
});
$(window).load(function(){
$(".theLink1").hover(
function () {
$("#theDiv1").fadeIn();
},
function () {
$("#theDiv1").fadeOut();
}
);
});
$(window).load(function(){
$(".theLink2").hover(
function () {
$("#theDiv2").fadeIn();
},
function () {
$("#theDiv2").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka").hover(
function () {
$("#theDiv3").fadeIn();
},
function () {
$("#theDiv3").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka1").hover(
function () {
$("#theDiv4").fadeIn();
},
function () {
$("#theDiv4").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka2").hover(
function () {
$("#theDiv5").fadeIn();
},
function () {
$("#theDiv5").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinkb").hover(
function () {
$("#theDiv6").fadeIn();
},
function () {
$("#theDiv6").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinkb1").hover(
function () {
$("#theDiv7").fadeIn();
},
function () {
$("#theDiv7").fadeOut();
}
);
});
Here is a link to a live view;
http://tubebackgrounds.co.uk/uni/demo/explanation.html#
As you can see, if you hover over the list style too quickly when they are being displayed, the other ones show up. I'm wondering if it is possible to use an if statement so only one
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeIn();
},
function () {
$("#theDiv").fadeOut();
}
);
});
can be enabled at once? Or maybe a way to make the fadeIn and fadeOut quicker.

part of the issue is just your css. you have each of your divs (#theDiv, #theDiv1, #theDiv2, etc...) floated next to each other. so when you hide one, the next one will pop up in its place. if you set their display propety to display:block you will set what I am saying. What you really want is those divs to be stacked one on top of another, like a deck of cards, then fade then in and out. To achieve this try adding this css:
#content {
position:relative;
}
#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4,#theDiv5, #theDiv6, #theDiv7, #theDiv8 {
border: 1px solid #000000;
display: none;
height: 500px;
margin: 0 50px 0 0;
padding: 10px;
position: absolute;
right: 0;
width: 300px;
}
now you javascript should work fine. you could make the javascript a bit nicer by using #beerwin suggestion and using a callback. that way the div fading in will only fadin once the previous one has faded out

Use callback function:
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeOut(function(){
$("#theDiv1").fadeIn();
});
});
});

How do I expand this CSS list?

I've gotten my menu to expand by one level, but cannot figure out how to get it to expand a second time. What am I doing wrong?
HTML:
<ul id="nav">
<li>Root
<ul>
<li>Option 1
<ul>
<li>Link3</li>
<li>Lin4</li>
<li>Link5</li>
<li>Link6</li>
</ul>
</li>
<li>Option2
<ul>
<li>Link3</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
ul {
padding: 0px;
margin: 0px;
list-style: none;
background-color: #53BF58;
width: 10em;
}
li ul {
display: none;
background-color: #86EF8A;
}
li.active ul {
display: block;
}
li ul li ul {
display: none;
background-color: #86EF8A;
}
li ul li.active ul {
display:block;
}
Javascript:
function hideAll() {
var navList = document.getElementById("nav");
for (var i=0; i<navList.childNodes.length; i++) {
var node = navList.childNodes[i];
if (node.tagName == "LI") {
node.className = node.className.replace(new RegExp("\s?active", "i"), "");
}
}
}
window.onload = function () {
var navList = document.getElementById("nav");
for (var i=0; i<navList.childNodes.length; i++) {
var node = navList.childNodes[i];
if (node.tagName == "LI") {
node.onclick = function() {
hideAll();
this.className += " active";
}
}
}
}

childNodes only contains the direct children of the element--you need to recurse the childNodes of each node as well.
I highly recommend that you use a framework like jQuery (http://jquery.com) to make the code simpler:
http://jsfiddle.net/jDEhU/5/
$('#nav').delegate('li', 'click', function() {
var self = $(e.target), //get a reference to the clicked element
active = self.parents().andSelf() //select all li's that should be active
.addClass('active'); //and activate them
$('#nav .active').not(active).removeClass('active'); //deactivate others
});

I think the problem is that you're only looping through the first level of nodes in your list. You need to go through the child elements of each subsequent list and add an onClick function to keep it expanding.