We Keep Coding

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

Hide Title on mouse click

I have a button element which shows dropdown when i click on that. It also shows title.
My problem is if i click on button , title of button appears above values of dropdown. I want to hide title when i click on button.
I want something similar to gmails setting button.
i tried something like this But it removes title of button after first click also it shows title on first click which does not solve my problem
$(this).click(
function() {
$(this).attr('title', title);
}
);
please find js fiddle link
http://jsfiddle.net/EuLcK/

show state of a button in jquery when mouse hovers on it

I am working on an application using html and jquery. It has 4 buttons that are used to perform various tasks when i click them. what i want now is to show user the state of the button when mouse hover over it. For example for an ON/OFF button if mouse hover over the button it shows user that button is currently OFF or ON.
one way to do this is to use an alert() but with that each time i go to button it will show an alert which i dont want i just want a simple text etc to be displayed on top of the button when mouse hover over it.
anyone can help me how can i do it ?

Change the text of the button on button hover by using jQuery .hover():
$('button').hover(function(){
$(this).text('ON');
},function(){
$(this).text('OFF');
});
Demo Fiddle

Presuming you already know how to get the state of the button, let's assume you assign that state to a variable named... well, state. :)
Then it's pretty straightforward from there:
$("button").hover(function() { // You may choose a different selector for your buttons
var curButton = this,
$curButton = $(this);
curButton.oldHTML = $curButton.html(); // Cache old button label
$curButton.html(state); // Change button label to reflect state
}, function() {
var curButton = this,
$curButton = $(this);
$curButton.html(curButton.oldHTML); // Restore old HTML
});

Dropit Jquery - keep submenu open on click

I'm using simple DropIt jquery dropdowns - http://dev7studios.com/dropit/
I want to have the submenu box stay open unless clicked outside of the box (.dropit-submenu)
I'm planning to have a form input in dropdown but whenever i click input inside dropdown the whole dropdown closes...
line 40 of js is showing this
// Close if outside click
$(document).on('click', function() {
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});

There is a trick if you want to use, on div which is popping up you can write onclick="return false;" so this will not go to call jquery other call and after your form submission you can hide the same div.

// Close if outside click
$(document).on('click', function(e){
if($(e.target).closest('.dropit-submenu').length){ return true; }
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});