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/
Related
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/
Let's say I have a collection containing 3 elements.
Each element has a corresponding remove button that I would like to initiate a POST to my server. Right now I have it setup so that when "Remove" button is pressed, a confirmation modal pops up with "yes" and "no" buttons. I am using the same modal for each element.
Problem is, when I click "yes" in modal, how can I have it know which remove button I clicked that launched the modal?
Here is a link to a gist containing the problematic code
https://gist.github.com/anonymous/85481507a1171467cae5
I have tried using a suggestion below that implements the following:
$('#hingle_dingle_0').on('click', function(e){
$('#confirmRemoveNetwork').modal('toggle', $(this));
});
$('#confirmRemoveNetwork').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
console.log(button);
});
However this returns an empty set. I can't for goodness sake figure out why it doesn't find the event.
Thanks for any help!
The modal is autoposting because you are opening it with a <button> inside a form with an input. Unless you tell it not to, this will cause a form submit. Simply set the type to button (instead of submit which is default): <button type="button">
You can capture the calling button by tapping into the event thrown when the modal is opened:
$('#confirmRemoveNetwork').on('shown.bs.modal', function (e) {
console.log(e.relatedTarget.id);
});
Finally, be sure your IDs are unique. You cannot have both "remove network" buttons using the same id of removenetworkbtn.
Example
https://jsfiddle.net/e80tL2kL/
To start with you can click the text in the bars and they will all
open up google in a new tab.
Proceed to click the edit button and you will be able to drag the
tabs around but not be able to click the text to open google.
Click edit again and it should disable movement and enable links
again.
However clicking the text of a bar which has been moved does not open the link on the first click but clicking it a second time will.
For this example I'm using
$('a').attr('onclick', 'return true;');
to re-enable links.
However I have tried using:
$('a').attr('onclick', '');
$('a').attr('onclick', null);
$('a').attr('onclick', '').unbind('click');
$('a').prop('onclick',null).off('click');
All of which have the same result.
Why does this "first click doesn't work after moving" happen and how can I fix it?
Probably a bug with jquery-ui, but you can fix it easily. There's a bind that doesn't get unbind on disable. You can unbind it manually like this:
} else if (edit == true) {
edit = false;
$("#sortable").sortable('disable');
$("#sortable").unbind('click.sortable');
$('a').attr('onclick', 'return true');
}
https://jsfiddle.net/rh27oxph/1/
Now i working for a Chat system!
Now I want show a box when click on USERNAME!
and hide box when click else ever! (anywhere but box!)
Same Help box in this site nav menu
Screen Shot 1
Screen Shot 2
I Want show this box with call a function and send some value to function...
same this: showbox(e,userid,username);
e= mouse x,y ...
Thanks!
you could show the menu box by using onclick event in username control.
$('body').click(function(e) {
// hide your menu
});
In this jquery is execute when ever user click anywhere in the body.
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
});