We Keep Coding

Javascript on-click toggle

I have some code that when a user clicks away from a side-bar the side-bar closes, How do I change it so when a user clicks a link the side-bar also closes and as well as from the side bar
Example - if I was to click the word Home, it would then hide the side-bar.
//hidding side header on click outside header
$body.on('mousedown touchstart click', function(e) {
if (!($(e.target).closest('.page_header_side').length) && !($sideHeader.hasClass('header_side_sticked'))) {
$sideHeader.removeClass('active-slide-side-header');
$body.removeClass('active-side-header slide-right');
$body.parent().removeClass('html-active-push-header');
var $toggler = $('.toggle_menu_side');
if (($toggler).hasClass('active')) {
$toggler.removeClass('active');
}
}
});
} //sideHeader check
<header class="page_header_side header_slide header-special header_side_right ds">
<div class="scrollbar-macosx">
<div class="side_header_inner">
<p class="text-right mb-0 close-wrapper">×</p>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Home</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Overview</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">About</h3>
</div>
attached is the image of the sidebar when opened

I would turn all of your close code into a function like so:
function closeMenu(){
if (!($(e.target).closest('.page_header_side').length) && !($sideHeader.hasClass('header_side_sticked'))) {
$sideHeader.removeClass('active-slide-side-header');
$body.removeClass('active-side-header slide-right');
$body.parent().removeClass('html-active-push-header');
var $toggler = $('.toggle_menu_side');
if (($toggler).hasClass('active')) {
$toggler.removeClass('active');
}
}
});
Then I would put the same handler that you have on the body on the links of the menu. Let's say your menu has an id of menu
So you would have:
$('body', '#menu a').onClick(function(){
closeMenu();
});
This will add the handler to the body as well as all a tags within the menu.

With the given code this is what I have done:
//hidding side header on click outside header
$('.scrollbar-macosx').on('click', function(e) {
//$sideHeader.removeClass('active-slide-side-header');
//$body.removeClass('active-side-header slide-right');
//$body.parent().removeClass('html-active-push-header');
//if you want to keep playing with adding and removing classes them:
//if (($toggler).hasClass('active')) {
$('#elementToHide').fadeOut();
//}
});
//sideHeader check
And them your html:
<header class="page_header_side header_slide header-special header_side_right ds">
<div class="scrollbar-macosx" id="elementToHide">
<div class="side_header_inner">
<p class="text-right mb-0 close-wrapper">×</p>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Home</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Overview</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">About</h3>
</div>
</div>
</div>
</header>
Here is the fiddle : fiddle

position().left isn't giving the expected value

In the employee section of a Wordpress site, I'm trying to have the bio slide open in the correct position when you click on each employee photo.
It's working well when the row is full width (4 columns) and in mobile (1 column) but in the 2 column layout (480px to 882px), position().left is returning 0, so the negative margin isn't being properly applied and the bio goes offscreen.
I can't for the life of me figure out why this is... Any help is greatly appreciated!
The site in question: http://contractor-marketing.website/
The HTML (simplified):
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
</div>
The JS:
jQuery('.column').each(function(s, el) {
jQuery(this).find('.bio-full').eq(0).css('margin-left',-(jQuery(el).position().left));
});

Check my example below. Although I took a different approach, it essentially does what you want, and it even animates the element transition.
NOTE: This animation will happen EACH time you press the animate button. You must prevent such animation from happening more than once (if that is the behavior you are looking for). Also, change the $('#animate') selector and click event to the event of your choice.
$('#animate').click(function() {
$(".bio-full").animate({
left: "+=300",
}, 1000, function() {
// Animation complete.
});
});
body{
padding:0;
margin:0;
}
.bio-full{
background-color: red;
display:hidden;
position:relative;
width:300px;
left:-300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="animate">Animate</button>
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
</div>
I hope this helps!
Cheers!

How to hide panel-body is empty?

I want to hide panel-body if it is empty.
Here's the example: BootPly
Code Javascript:
$(function() {
$('#container').load(function() {
if($.trim($(this).contents().find("container").find('panel-body').length) == 0) {
$(this).hide();
}
});
Code HTML:
<div class="container">
<div class="row clearfix">
<div class="col-md-9 column">
<div class="panel panel-primary">
<div class="panel-heading">Content</div>
<div class="panel-body fixed-panel">
<div class="form-group">
</div>
</div>
</div>
</div>
</div>
</div>

How about something like this? http://www.bootply.com/bKb0isdzKA
$(function() {
$('.form-group').each(function() {
if ($(this).is(':empty')) {
$(this).closest('.container').hide();
}
});
});
You had a few issues. For one, you were using #container as your selector, despite container being a class. Additionally, you were checking to see if body-panel was empty, but it contained a child div, so it would always have HTML content.
The code above will loop through each .form-group and hide the parent container if it's empty.
If this isn't exactly what you had in mind, let me know and I can make adjustments.

jQuery .draggable() either doesn't drag or drags too many cards

I'm making a web app for poker cards. The idea is you drag cards from a deck to a hand/board and it ranks it for you. The functionality of the site works; I just can't get the cards to be able to drag from the deck to the board.
Draggable doesn't work on the card, and the text of the card is highlighted instead.
Draggable does work, but it drags more cards than I want it to. For example, I'll try to drag the 3 of diamonds and for some reason it grabs all the 3s and some of the 4s.
How can I get dragging a single card working correctly?
.card {
height: 9.2em;
width: 6.61em;
padding-left: .2em;
font-size: 12px;
margin:.2em;
float:left;
clear:both;
position: relative; }
<div class="container-fluid" id="deck">
{% for card in deck %}
<div class="drag">
<div id="{{card.rank}}{{card.suit}}" class="card rank{{ card.rank }}{{ card.suit }}">
{{ card.rank }} <br/> &{{ card.suit_verbose }};
</div>
</div>
{% endfor %}
</div>
<script>
$(function() {
$(".drag").draggable();
});
</script>
EDIT: here's the Jinja html:
<div class="container" id="wrapper">
<h1 class="container text-center">
two pair
</h1>
<div class="panel panel-default" id="canvas">
<div class="container-fluid" id="board">
<div class="row col-md-1">
<span class="card empty"/>
</div>
<div class="row col-md-1">
<span class="card empty"/>
</div>
...
</div>
</div>
</div>

Strange, but it looks like you simply forgot to add jQuery UI to your scripts. I added jQuery UI to your fiddle and it works (checked on Chrome and FF). Check it out: https://jsfiddle.net/wx5oz45g/1/ . Only other change was adding cursor: pointer in CSS to class .drag so I could see better what should be responsive.

Index/position of dynamic jquery ui sortable blocks?

Unfortunately, I am not able to get this working in jsfiddle but maybe I overlooked something (http://jsfiddle.net/bJpyU/46/). I have blocks dynamically created and need to save the order that they are placed. Because of the dynamic fashion that this is set up, I am not able to get the index (it's always 0, and the block starting first always shows as first index wise regardless of where it is dragged). toArray and serialize are showing up as blank. I've even tried counting nth-child. Any idea how to get the order?
HTML
<div class="tab-pane active col-lg-12" id="portlet_tab_Graphs">
<div class="row padLR sortable_portlets" id="sortable_portlet_Graphs">
<div class="col-lg-4 sortable sortable_portlet_Graphs_column ui-sortable" id="102">
<div class="portlet box yellow">
<div class="portlet-title">Monthly License Revenue</div>
</div>
<div class="portlet-body clearfix pad">
<div id="h1_sortable_portlet_Graphs_102"></div>
<div id="sortable_portlet_Graphs_102">
<div class="col-lg-12 nPad">
<div class="btn-group chartToggle inline">Graph Data</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 sortable sortable_portlet_Graphs_column ui-sortable" id="103">
<div class="portlet box blue">
<div class="portlet-title">Yearly License Revenue</div>
</div>
<div class="portlet-body clearfix pad">
<div id="h1_sortable_portlet_Graphs_102"></div>
<div id="sortable_portlet_Graphs_102">
<div class="col-lg-12 nPad">
<div class="btn-group chartToggle inline">Graph Data</div>
</div>
</div>
</div>
</div>
</div>
</div>
JQUERY
var sortdiv = "Graphs"
var blockClasses = "col-lg-4";
$(".sortable_portlet_" + sortdiv[2] + "_column").sortable({
connectWith: ".sortable_portlet_" + sortdiv[2] + "_column",
handle: ".portlet-title",
//placeholder: "dragColumn",
forceHelperSize: true,
forcePlaceholderSize: true,
start: function (e, ui) {
ui.placeholder.height(ui.helper.outerHeight());
ui.placeholder.width(ui.helper.outerWidth());
// get original block size
blockClasses = ui.item.parent().attr('class');
},
stop: function (e, ui) {
var parent = ui.item.parent();
blockWidth = blockClasses.split(" ");
parent.attr('class', function (i, c) {
return c.replace(/(^|\s)col-lg-\S+/g, blockWidth[0]);
});
//console.log(ui.position)
SavePortletDrop(sortdiv[2]);
}
});

I think the error is actually from attaching sortable to each individual item that you're sorting. It should be attached to a container div.
So, even though it looked like it was working, you were actually moving around a bunch of 1-item lists, which are always at index 0.
I got it to work like I think you want it by attaching sortable to the #sortable_portlet_Graphs. This makes ui.item.index() return the number you'd expect in the stop function.
http://jsfiddle.net/bJpyU/47/