We Keep Coding

Problem on dragging items on Jquery UI sortable

I'm using jQuery UI sortable to allow user to drag and drop between two lists and then order the items, but I have an error where when selecting from the first list, the content selected it's not the entire div, just the content on behind the mouse cursor.
Following this, many errors occurs, like I'm not able to order, to move back to the first list and everything can't be undone.
Here's the view code:
<div class="row col-md-12">
<div class="col-md-6">
#foreach (var item in Model.Games.AvailableGamesStats.GameAchievements.Where(f => f.SectionID == null))
{
<div class="connectedSortable" id="achievements" style="margin-top:10px; margin-bottom:10px; z-index:1; cursor:move; height:60px">
<img src="#item.Icon" style="float:left" />
<b>#item.DisplayName</b><br />
<i>#item.Description</i>
#if (item.Difficulty != null)
{
<img src="#item.Difficulty.DifficultyImage" style="float:right; width:32px" />
}
</div>
}
</div>
<div class="col-md-6">
<div class="card" style="height:100%; z-index:0">
<div class="card-header text-center" contenteditable="true">Name</div>
<div class="card-body connectedSortable" id="chievo">
</div>
</div>
</div>
and jQuery...
$(function () {
$("#chievo, #achievements").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
The first div items that I'm trying to move, are a collection of image, title and description, but when I try to move, only one item moves, and can't order or undo anything.

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!

IE hides div element when certain class is used, works fine in chrome/firefox, does anyone have information on this error?

So, I am using oracle apex and I use JavaScript to populate a div tab and add the element to a hidden region on the current page. The resulting HTML is below:
<div class="t-ButtonRegion **t-Form--floatLeft** t-ButtonRegion--noPadding t-ButtonRegion--noUI" id="main_details" role="group" aria-labelledby="main_details_heading">
<div class="t-ButtonRegion-wrap">
<div class="t-ButtonRegion-col t-ButtonRegion-col--left"><div class="t-ButtonRegion-buttons"></div></div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--content">
<h2 class="t-ButtonRegion-title" id="main_details_heading">Main Panel</h2>
<div class="container">
<div class="row">
<div class="col col-12 ">
<div class="t-ButtonRegion t-Form--floatLeft t-ButtonRegion--noPadding t-ButtonRegion--noUI" id="other_details" role="group" aria-labelledby="other_details_heading">
<div class="t-ButtonRegion-wrap">
<div class="t-ButtonRegion-col t-ButtonRegion-col--left"><div class="t-ButtonRegion-buttons"></div></div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--content">
<h2 class="t-ButtonRegion-title" id="other_details_heading">Details</h2>
<div class="t-ButtonRegion-buttons"></div>
</div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--right"><div class="t-ButtonRegion-buttons"></div></div>
</div>
<div id="divide" style="margin: 5px 5px 15px; padding: 20px 15px 20px 20px; **position: fixed;** background-color: rgb(222, 239, 251);"><h3 id="header1">B.2.1</h3><p id="paragaph1">Organizational system for the environmental program that defines staff roles and responsibilities, etc,etc </p></div></div>
</div>
</div>
</div>
<div class="t-ButtonRegion-buttons"></div>
</div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--right"><div class="t-ButtonRegion-buttons"></div></div>
</div>
</div>
I starred the two spots that if removed would fix the issue of the divide element not appearing on the screen. Not both, either one or the other. I needed a fix position so i removed the floatLeft. Would anyone know why this floatLeft class would cause the divide element to not show. Note: only time this occurs is in IE, Firefox and chrome work fine with the above code. Any help is appreciated.
Edit: I looked for the css after the suggestion and got:
.t-Form--floatLeft{overflow:hidden}
.t-Form--floatLeft .col{width:auto!important}
.t-Form--floatLeft .t-Form-fieldContainer{width:auto;float:left;clear:none}
.t-Form--floatLeft .t-Form-labelContainer{min-width:0;width:auto}
.t-Form--floatLeft .t-Form-inputContainer select{max-width:100%}
I have more to go off of now, so I am researching still but if anyone has ideas, please let me know.

display a webpage in to 3 vertical sections with ability to move and stretch the menus

I am creating a web page with 3 vertical templates. I used bootstrap grids and the grids are fixed but I want to strech them .Is there any way to do in Angular js and bootstrap.
Here is my code:
<body ng-controller="MenuController as menuCtrl">
<div class="row no-gutter">
<div class=" col-lg-3 mainmenu">
<h1> main menu </h1>
</div>
<div class="col-lg-3 secondmenu">
<h1> second menu </h1>
</div>
<div class="col-lg-6 thirdmenu">
<h1> detailed view </h1>
</div>
</div>
</body>
here is my css file is:
.row.no-gutter [class*='col-']:not(:first-child),.row.no-gutter [class*='col-']:not(:last-child) {
padding-right:0;
padding-left:0;
}
/* only for column content visible */
.col-lg-1>div {
background-color:#ddd;
}

How to change the text inside a div by hovering over other elements

So basically I am making some concept logic for a project I am working on. It's a portfolio with boxes of images and I want to be able to change the value of a h2 to some description text based on the box that was hovered on.
Right now it's just a black box so 'square1, square2, square3...etc' will work for now. I looked up some stuff on jquery and found this link from a stackoverflow answer. This does what I need but is only shifting through one piece of information instead of many in my case.
Wondering how I can achieve that via jquery. I imagine I would need to make an array with all the descriptions I need, and (this is where I am lost) somehow attach the value of array to the square and then from there change text of h2 to the array value.
Thanks for any help in advance here's what I have so far (not much just did some foundation work). Not sure if this matters but if there is no hover I want the h2 to say nothing.
HTML (makes me post code if I have jsfiddle)
<div class="squares">
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>
<div class="square4"></div>
<div class="square5"></div>
<h2 class="squareIdent"> </h2>
</div>

You can implement this using data attribute to hold your description that you want your box to load in the h2 -
Working Example - http://codepen.io/nitishdhar/pen/CdiHa
Explanation
Write your HTML in this structure -
<div class="squares">
<div class="square" data-content="Alpha"></div>
<div class="square" data-content="Beta"></div>
<div class="square" data-content="Gamma"></div>
<h2 class="square-data-holder"></h2>
</div>
Notice I have added data-content that will hold whatever text you want it to hold. We will use this to extract the same when we have to fill it in the h2.
Use this jQuery snippet to achieve the hover effect -
$(document).ready(function() {
$('.square').hover(
function() {
$('.square-data-holder').text($(this).data('content')).fadeIn('slow');
}, function() {
$('.square-data-holder').fadeOut('slow');
});
});
hover() takes two handlers to handle hover in & hover out - $( selector ).hover( handlerIn, handlerOut ), Refer - http://api.jquery.com/hover/
So on hover of any of the div's with class square, we get hold of the content of the div that was hovered using -
$(this).data('content')
And we append the same to the h2 element. On hover out, we just make h2 empty.
This should do what you want.

Judging by the example at http://danielmarkiewicz.com/ it looks like you may need to have formatted content inserted into the heading. Here is one approach to do that with HTML content inside each square.
Demo here
HTML
<div class="squares">
<div class="square square1">
<span class="heading">
<h1>Square 1</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square2">
<span class="heading">
<h1>Square 2</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square3">
<span class="heading">
<h1>Square 3</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square4">
<span class="heading">
<h1>Square 4</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square5">
<span class="heading">
<h1>Square 5</h1>
<h2>Details</h2>
</span>
</div>
<header class="squareIdent"></header>
</div>
CSS
.heading { display: none; } // Hide the heading content within Squares
JavaScript
$(document)
.on('mouseover', '.square', function(e) {
var self = $(this),
headingContent = self.find('.heading').first().html();
$('.squareIdent', self.closest('.squares')).html(headingContent);
})
.on('mouseout', '.square', function(e) {
var self = $(this);
$('.squareIdent', self.closest('.squares')).html(null);
})
;

DEMO
I am probablly late as Nitish already gave a good answer but here is what i have done.
HTML:
<div class="squares">
<div class="square1" data-text="I am Square 1"></div>
<div class="square2" data-text="I am Square 2"></div>
<div class="square3" data-text="I am Square 3"></div>
<div class="square4" data-text="I am Square 4"></div>
<div class="square5" data-text="I am Square 5"></div>
<h2 class="squareIdent"> </h2>
</div>
CSS:
div.square1, div.square2, div.square3, div.square4, div.square5
{
height: 100px;
width: 100px;
background-color: black;
margin-left: 126px;
margin-top: 150px;
float: left;
}
div.squares
{
margin-left: 175px;
}
.squareIdent{
opacity: 0;
}
JS:
$(".squares > *").hover(function(){
$(".squareIdent").text($(this).attr("data-text"));
$(".squareIdent").stop().animate({
opacity: 1
}, 500);
}, function(){
$(".squareIdent").stop().animate({
opacity: 0
}, 500);
});
Note i have added the Animation as you showed in your question.