We Keep Coding

Why ComboBox is not working after applying Resize and Move functionality to PopUpDiv

I have a normal Div with title-header ['Resize and Move Me! , Combobox'] and body part as mention below in link.
When I applied move and resize functionality using javascript, ComboBox on header part is not working. It would not drop list. If I put Combobox outside of that DIVs then its working properly,But inside it would not. See example,
JSFIDDLE DEMO
I have few questions
Can anyone tell me the reason that why its not working?
What should be the solution to make it work properly.

Because, in one the mouse click events, you are trying to block the default behavior of the select box.
function onMouseDown(e) {
onDown(e);
e.preventDefault();
}
Here e.preventDefault, is blocking the select box from showing the options when you click the mouse.
Please comment/delete it out to get the normal behavior of the select box.

Trigger Element Click

JSFiddle Live Demo
Script Explanation
My script is to sort and/or filter a mailbox whereas you can select one of each options and the sort option upon clicking, if it's active it'll switch the icon indicating going from A-Z to Z-A and visa-versa.
The filter option changes the button text and upon clicking on the button it'll animate the button width to the drop down width and then slide down the drop down. Upon clicking again, it'll reverse the process, checking to see if the text has been changed to adjust for the width.
What I Wish To Implement
Upon clicking one of the options apart from the .Active filter/view options, I wish to trigger the click event to reverse the show progress. I have tried to trigger this click hover with using e.target, I'm not sure how to trigger this correctly as my attempts have been doing nothing.

Your trigger event seems to be working fine, you're only triggering it on the wrong element. This seems to be working:
$('.dropdown-toggle').trigger("click");
I've updated the plunker

You can trigger the click this way.
if ($(e.target).closest('.Sort').length) {
if ($(e.target).hasClass('Active')) {
$(e.target).parent().find('i').toggleClass("fa-arrow-down fa-arrow-up");
} else {
$('.dropdown-menu .Sort').find('.Active').removeClass('Active');
$('.dropdown-menu .Sort').find('i').remove();
$(e.target).addClass('Active');
$(e.target).prepend('<i class="fa fa-arrow-down" aria-hidden="true"></i> ');
}
//Here.
//Ideally add another unique class to the main dropdown button and use that instead, otherwise you will have problems when there are multiple elements with dropdown-toggle class.
$('.dropdown-toggle').click();
}

Can you make a browser display an HTML title attribute after setting it dynamically?

I need to be able to show what would appear to be a tooltip when the user hovers over an element, but the text I need to display is only known after the user hovers, which triggers an ajax call to a server to get the text to be displayed, which I then set as the title attribute of the element.
Since there was no title attribute when the user began hovering over the element, no tooltip is displayed, even after I set the title. I have to mouse off the element and then back onto it before the tooltip appears.
Is there any way to force or fake the browser into displaying the tooltip after I've set the title attribute?

Using jquery .on( "mouseover", handler ) event you can add a span with .fadeIn()
You just have to make it look like a tooltip with css

Here are some bootstrap tooltip examples from w3schools bootstrap tool tip might help you,
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

I had the same issue and at the end, I used Bootstap's tooltip:
$('#element').tooltip('show')

Do something with the particular element even though click event is fired on class name

I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?

You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.

ui - accordion does not work after empty() and append()

I have Four DIVs and I call accordion function to it. It works fine initially. But it fails after I clear all the content and again append the FOUR DIVs.
Kindly take a look at the link
http://jsfiddle.net/p7vUk/2/
You will see that on clicking divA , divAA will slide toggle.
on clicking divB, divBB will slide toggle.
After you click the 'clear all' Button, the div=content is cleared and same four DIVS are appended, but the jquery accordion fails to work.

The accordion styling and behaviour is defined upon creation. Looks like the accordion does not update when the content changes. Nor does there appear to be a method you can call to trigger an update.
Have you tried 'turning it off and on again'?
//change content, then:
$("#content").accordion("destroy");
$("#content").accordion({ ... your options ... }); //create it again
This may require more related work, such as setting the originally selected tab, etc.