We Keep Coding

Loop using jquery and javascript

I'm having some trouble thinking of how to do this properly.
Right now, I have some jquery that looks like this:
$( "#person_0" ).click(function() {
$( "[id^=person_]" ).removeClass("active");
$( "#person_0" ).addClass("active");
$( "[id^=bio_]" ).hide();
$( "#bio_0" ).show();
$( "[id^=hoverInfo_]" ).hide();
$( "#hoverInfo_0" ).show();
});
$( "#person_1" ).click(function() {
$( "[id^=person_]" ).removeClass("active");
$( "#person_1" ).addClass("active");
$( "[id^=bio_]" ).hide();
$( "#bio_1" ).show();
$( "[id^=hoverInfo_]" ).hide();
$( "#hoverInfo_1" ).show();
});
...
...
Essentially, if you click a person_0 div id, a class of active is added to that and both hoverInfo_0 and bio_0 show up. At the same time, all other ids go and hide (for example, hoverInfo_1, hoverInfo_2, bio_1, bio_2, etc.
This is super inefficient because I want there to be 100+ person_ ids. I feel like I'm overlooking something obvious.
Pseudo code right now:
if person_0 div is clicked
give person_0 div active class
show hoverInfo_0
show bio_0
hide all other hoverInfo_# (say 1-1000)
hide all other bio_# (say 1-1000)
else if person_1 div is clicked
give person_1 div active class
show hoverInfo_1
show bio_1
hide all hoverInfo_# (say 1-1000) that does not equal hoverInfo_1
hide all bio_# (say 1-1000) that does not equal bio_1
else if ...
else if ...
I'm having a hard time trying to figure out how I can loop this around or use a variable in place of the _# value to make this more efficient. Any thoughts?

how I can loop this around or use a variable in place of the _# value
to make this more efficient. Any thoughts?
Try this approach using starts with and filter
$( "[id^='person_']" ).click(function() {
var id = $( this )[0].id;
console.log(id);
var counter = id.split("_").pop();
$( "[id^='person_']" ).addClass("active").not( "#person_" + counter ).removeClass("active");
$( "[id^='bio_']" ).hide().filter( "#bio_" + counter ).show();
$( "[id^='hoverInfo_']" ).hide().filter( "#hoverInfo_" + counter).show();
});
Demo
$( "[id^='person_']" ).click(function() {
var id = $( this )[0].id;
console.log(id);
var counter = id.split("_").pop();
$( "[id^='person_']" ).addClass("active").not( "#person_" + counter ).removeClass("active");
$( "[id^='bio_']" ).hide().filter( "#bio_" + counter ).show();
$( "[id^='hoverInfo_']" ).hide().filter( "#hoverInfo_" + counter).show();
});
.bio, .hoberInfo
{
display: none;
background-color : green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="person_1">Person 1</div>
<div id="bio_1" class="bio">Bio 1</div>
<div id="hoverInfo_1" class="hoberInfo">HoverInfo 1</div>
<div id="person_2">Person 2</div>
<div id="bio_2" class="bio">Bio 2</div>
<div id="hoverInfo_2" class="hoberInfo">HoverInfo 2</div>
<div id="person_3">Person 3</div>
<div id="bio_3" class="bio">Bio 3</div>
<div id="hoverInfo_3" class="hoberInfo">HoverInfo 3</div>

How to check if element being dragged has a certain class?

How can I check if a certain element being dragged has a certain class?
The JS code:
if ($('.fc-event').is('.ui-draggable')) //To check if element is being dragged
{
console.log('This element is being dragged');
if ($('.fc-event').is('.ui-draggable').hasClass('music')) //Can't use this.hasClass?
{
//place in music database table
}
else
{
//place in other database table
}
}
The HTML code:
<div id='external-events'>
<h4>Music</h4>
<div class='fc-event music'>Music 1</div>
<div class='fc-event music'>Music 2</div>
<div class='fc-event music'>Music 3</div>
</div>
The above JS code obviously does not work, but it's the closest to the solution. (I think)

There are some events in draggable() api, there is one said drag which fires when you drag it and this callback has two arguments event, ui where ui will get you the element you are looking for.
$( ".selector" ).draggable({
drag: function( event, ui ) {
$('pre').html('$(ui.helper).hasClass("music"):'+$(ui.helper).hasClass('music'));
}
});
.selector{width:150px; height:100px; border:solid 1px red; background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class='selector music'>selector</div>
<pre></pre>

drag and drop issue jquery

I have the code below using the script i am making stuff draggable and droppable. currently i have two pieces for draggable content, and two place they can be dropped if correct then the system will change and say correct, I would like to know if there is away that i would be able just create the HTML divs and the code runs through and matches the draggable to the dropable. I have people that have a non-technical backdround, have basic HTML knowledge so thy now how to add divs and remove them but they are able to deal with script, i would like to know, if i had ID of 1-10 for the draggable content and the same for the dropable 1-10 so id 1 draggable can only be added to id one droppable.
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="hhtps:/resources/demos/style.css">
<style>
#droppable,#droppable2 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
</style>
<script>
$(function() {
$( "#draggable, #draggable2" ).draggable();
$( "#droppable" ).droppable({
accept: "#draggable",
drop: function( event, ui ) {
$( this )
.removeClass("ui-widget-header")
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
out: function( event, ui ) {
$( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" )
.find( "p" )
.html( "accept" );
}
});
$( "#droppable2" ).droppable({
accept: "#draggable2",
drop: function( event, ui ) {
$( this )
.removeClass("ui-widget-header")
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
out: function( event, ui ) {
$( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" )
.find( "p" )
.html( "accept" );
}
});
});
</script>
<div id="draggable2" class="ui-widget-content">
<p>I'm draggable but can't be dropped</p>
</div>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>accept: '#draggable'</p>
</div>
<div id="droppable2" class="ui-widget-header">
<p>accept: '#draggable2'</p>
</div>

You will need to avoid using HTML id for this and start using classes. Here is how to do that, with a working example:
Your HTML:
<div id="draggable_2" class="ui-widget-content draggable-item">
<p>draggable_2</p>
</div>
<div id="draggable" class="ui-widget-content draggable-item">
<p>draggable</p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable">
<p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_2">
<p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_3">
<p></p>
</div>
Your javascript:
$(function () {
$(".draggable-item").draggable();
$('.droppable-item').each(function (i, ele) {
// Gets the accepted from the HTML property "data-accept"
var accept = $(this).data('accept');
// This is just to show what the item accepts. you can remove it.
$(this).find('p').text('accepts: ' + accept);
// Init the jQuery UI droppable()
$(this).droppable({
accept: accept,
drop: function (event, ui) {
$(this)
.removeClass("ui-widget-header")
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
},
out: function (event, ui) {
$(this).removeClass("ui-state-highlight").addClass("ui-widget-header")
.find("p")
.html("accept: " + accept);
}
});
});
});

If I understand your question correctly, you want every draggable to be droppable only its droppable and no other droppable div.
You've already achieved this by adding the accept: "#draggable" in your code for every droppable.
You can add this extra line of code so that if your draggable is dropped anywhere other than its droppable, it will go back to its droppable.
$( "#draggable, #draggable2" ).draggable({ revert: "invalid" });
This code can be shortened if you added the same class (like class=draggables to every draggable html element and then you can juse use
$( ".draggables" ).draggable({ revert: "invalid" }); to mark them all.
Here is a jsfiddle to show the example.

if same class, fadeIn / fadout

I have a setup here in jsFiddle: http://jsfiddle.net/2PmnQ/
I'm trying to make a function that will check if the modal has the same class as the button so the button will bring up the modal with the same class. I'm obviously trying to do this dynamically all within one function rather than doing a if statement for every class.
var p = $(".popUp");
var position = p.position();
var tagLength = $("p a").width();
$( ".modal" ).css({left: (position.left + tagLength + 10) + "px", top: position.top + "px"});
$( ".popUp").hover(
function() {
$( ".modal" ).stop().fadeIn();
}, function() {
$( ".modal" ).stop().fadeOut();
}
);

I would use a custom data attribute instead of a class to save the target class:
<p class="popUp" data-modal="one"><a>popUp one here</a></p>
<p class="popUp" data-modal="two"><a>popUp two here</a></p>
<div class="modal one">PopUp one should be here</div>
<div class="modal two">PopUp two should be here</div>
That way you don't have to filter the target out of the trigger element classes and only need this in your hover function:
$('.popUp').hover(function(){
$('.modal.'+$(this).data('modal')).fadeIn();
},function(){
$('.modal.'+$(this).data('modal')).fadeOut();
});
http://jsfiddle.net/2PmnQ/1/
V2 using jQuery UI position() plugin:
<!-- i switched the popup classes to the `a` here so it works in the fiddle -->
<p><a class="popUp" data-modal="one">popUp one here</a></p>
<p><a class="popUp" data-modal="two">popUp two here</a></p>
<div class="modal one">PopUp one should be here</div>
<div class="modal two">PopUp two should be here</div>
JS:
$('.popUp').hover(function(){
$('.modal.'+$(this).data('modal'))
// reset positions otherwise it doesn't work correctly after the first time. don't know why :(
// looks like this problem: http://forum.jquery.com/topic/position-keeps-adding-original-left-and-top-to-current-values-in-ie-8
.css({'left':0,'top':0})
// position modal 10px to the right of the popup link
.position({'my':'left+10 center',
'at' : 'right center',
'of' : $(this)
}
).fadeIn();
},function(){
$('.modal.'+$(this).data('modal')).fadeOut();
});
http://jsfiddle.net/2PmnQ/10/
(Be sure to include the jQuery UI with at least the position plugin: http://jqueryui.com/download/#!version=1.11.0&components=0001000000000000000000000000000000000. Yeah maybe it's a bit overkill for this but it's really convenient)

disable sortable or dragging with jquery ui

I have a div inside a div that I don't want to be able to drag around as it is a navigation element.
example:
$(function() {
$( "#container" ).sortable();
$( "#container" ).disableSelection();
});
<div id="container">
<div class="move">drag me around</div>
<div class="nav">Don't move me</div>
</div>
Basically the .nav I don't want to be able to drag I tried this but it didn't work
$( "#sortable1" ).sortable({
items: "li:not(.ui-state-disabled)"
});

Just filter out the item you don't want to be sortable:
$('#container').sortable({
items: 'div:not(.nav)'
});
Your current filter is acting on li elements, you're using div elements.