We Keep Coding

jQuery Button that can get clicked and unclicked but also gets unclicked if you click anywhere else

so I wanted to make a button that when you click it it looks depressed and when you click it again it doesn't anymore. Though I also wanted that, if you click anywhere outside of the button it ALSO doesn't look depressed anymore.
Here's my JavaScript code so far:
if($('#taskbar-start').hasClass('taskbar-start-active') === false){
$('#taskbar-start').click(function() {
alert($('#taskbar-start').hasClass('taskbar-start-active'))
$(this).toggleClass('taskbar-start-active');
$(this).children().toggleClass('taskbar-start-frame-active');
});
}
$(document).mouseup(function() {
if($('#taskbar-start').hasClass('taskbar-start-active')){
alert($('#taskbar-start').hasClass('taskbar-start-active'))
$('#taskbar-start').removeClass('taskbar-start-active');
$('#taskbar-start-frame').removeClass('taskbar-start-frame-active');
}
});
With that code the button gets depressed when I click it and undepressed when I click anywhere else, but if I click on the depressed button it gets undepressed for a moment and then depressed again (with the alerts, without the alerts it just stays depressed).
I've been researching and trying for a few hours now, I can't seem to find my issue. Sorry if the question is stupid, I'm still new to JavaScript/jQuery and still learning.

First, instead of alerts, press F12 and start using the Developer Tools. Second, instead of alerts use console.log and the other bunch of useful commands you can find under console (like console.time and console.timeEnd) whick will appear in the Console tab. And third, the problem is that the $(document).mouseup function gets called when you mouseup the entire document, which includes your button. You should exclude that function when the element click is the button.
You approach is fine. I stopped his propagation when clicked the button, as #MuhhamadImran said, but changed the mouseup to click for it to work.
$(document).ready(function(){
if($('#taskbar-start').hasClass('taskbar-start-active') === false) {
$('#taskbar-start').click(function(event) {
event.stopPropagation();
$(this).toggleClass('taskbar-start-active');
$(this).children().toggleClass('taskbar-start-frame-active');
});
$(document).click(function() {
if($('#taskbar-start').hasClass('taskbar-start-active')){
$('#taskbar-start').removeClass('taskbar-start-active');
$('#taskbar-start-frame').removeClass('taskbar-start-frame-active');
}
});
}
});
Remember, when web developing, F12 is your friend.

Stop event bubbling when you click the button so it doesnt bubble up to the document to re-init the events/classes,
below is the corrected code, only one line added in button click function
if($('#taskbar-start').hasClass('taskbar-start-active') === false){
$('#taskbar-start').click(function(event) {
event.stopPropagation()
alert($('#taskbar-start').hasClass('taskbar-start-active'))
$(this).toggleClass('taskbar-start-active');
$(this).children().toggleClass('taskbar-start-frame-active');
});
}
$(document).mouseup(function() {
if($('#taskbar-start').hasClass('taskbar-start-active')){
alert($('#taskbar-start').hasClass('taskbar-start-active'))
$('#taskbar-start').removeClass('taskbar-start-active');
$('#taskbar-start-frame').removeClass('taskbar-start-frame-active');
}
});

Unable to display Form element after button click

Problem:
I'm trying to implement a dropdown form from a button. However, I'm having issues with the form not staying visible even after the condition is met. I'm new to javascript and css, so bear with me if it's a silly error. Thanks in advance.
What I want to do:
The form will be hidden by default.
When a user hovers over an image button, the form should be shown and hidden after the mouseleave.
If the user clicks the button, then the form should stay visible so that the user can enter the data and sumbit it.
Observation:
The objectives #1 and #2 from above are working as expected.
As opposed to objective #3, the form automatically hides even after the button click.
Unsuccessful Methods:
Using .show() instead of .css("display","block")
Using form:hover to set display:block.
Using setTimeout(hide_function,500) hides the form after 500ms regardless of the button click.
Code:
Here's the link to my jsfiddle that you can use to test it out.
References:
For button click detection.
For changing display property.

Just change data attr:
$('#dropbtn').click(function() {
$(this).data('clicked', 'yes');
$('#loginForm').css('display', 'block');
});
https://jsfiddle.net/d3h8gvek/3/#run //fixed result

i have modified your code little bit please check with the fiddle
$('#dropbtn').click(function() {
$(this).data('clicked', 'yes');
$('#loginForm').addClass('activate');
});
https://jsfiddle.net/d3h8gvek/7/

How to show a pop up on something is selected in html?

I know there is a onselect event which works on input and textarea elements.
I want to show a popup like google dictionary does when something is selected on body element.
What are some possible options ?
Blue area is what I mean by selection .

You could try JQuery's mouseup command - it will be triggered when you release the mouse button press at the end of your selection.
Someone else's example on JSFiddle: http://fiddle.jshell.net/g59KM/12/
$(document).ready(function() {
$('#textarea').mousedown(function() {
$("#alerts p").append("<span style=\"color:blue;\">Mouse down. </span>");
});
$(document).mouseup(function() {
$("#alerts p").append("<span style=\"color:red;\">Mouse up. </span>");
})
});
...which illustrates my point - select any of their text then when you release the mouse an event will be called, which you could use.
The JQuery instruction: is here

Buttons Re-Enable in CKEditor

I have the following Javascript to disable buttons on CKEditor:
CKEDITOR.replace( 'text', {
on : {
instanceReady : function(ev) {
ev.editor.commands.image.disable();
ev.editor.commands.justifyleft.disable();
}
}
});
This works well to disable the buttons on load, but on click of any other non-disabled buttons, they all re-enable. I tried placing the code in a few other places but had no luck.
Where is the correct place to place the disable code so it won't re-enable?

If you really want to disable buttons, not hide them, then check my answer in - Show but disable wysiwyg buttons.
If you want to remove them completely then check this guide - http://docs.ckeditor.com/#!/guide/dev_toolbar

Capturing some clicks, not all

I have built a modal box, which uses a cover-all div background to fade out the content and allow the user to click off the box in order to close it. I do this by capturing all of the clicks, but filtering out any that are over the model box.
$('body').on('click', '.cover_slide > *',function(e){
e.stopPropagation();
});
$('body').on('click', '.cover_slide',function(){
helper.cover.close();
$('body').off('click', '.cover_slide');
});
I would like to be able to interact with some elements on my modal box with clicks, but I can't seem to figure out how to do that AND still have my 'click off to close' function. At present all clicks on the box are ignored.

There is no need to bind the click multiple times. Try using this snippet. Note that you might have to change the closest selector depending on what the element really is
$(document).bind("click", function(e) {
if($(e.target).closest("div").hasClass('coverSlide')) {
//do stuff if someone clicks the box
}
});