I have a form, and I'm trying to use a dropdown as a message displayer. When I focus out the input, the dropdown displays. The problem is that it closes right after showing.
<form method="post">
<input id="name" type="text" name="name">
<li class="dropdown list-unstyled">
<a class="dropdown-toggle" role="button"data-toggle="dropdown"></a>
<ul class="dropdown-menu">
My message.
</ul>
</li>
</form>
Jquery
$(document).ready(function (){
$('#name').focusout(function () {
$('.dropdown-toggle').dropdown('toggle');
});
});
I couldn't figure out why it closes yet. Strange thing is that if I click outside and drag the mouse just a little before releasing it, the dropdown doesn't close.
Thanks!
fiddle https://jsfiddle.net/syp7ynqm/
edit: the problem seems to be that the dropdown detects the outside click right after it shows, so it closes (as it should) but I would like to disable this function, only for this first click, so that on the focus out the message would be displayed correctly.
You can just go with the show method. Fiddle.
$(document).ready(function (){
$('#name').focusout(function () {
$('.dropdown-menu').show();
});
});
And your html should look like the following because li should be a child of ul so you would want to go with the folling html.
<form method="post">
<input id="name" type="text" name="name">
<div class="dropdown">
<div class="dropdown-menu">
My message.
</div>
</div>
</form>
$(document).ready(function (){
$('#name').focusout(function () {
$('.dropdown-menu').toggle();
});
$(document).mousedown(function(){
$('.dropdown-menu').hide();
})
});
Instead of the dropdown method use toggle to show or hide the dropdown.
$(document).ready(function (){
$('#name').focusin(function(){
$('.dropdown-menu').toggle();
});
$('#name').focusout(function(){
$('.dropdown-menu').toggle();
});
});
This results in the dropdown showing up when the input is focused and disappearing when you click away.
Check this fiddle : https://jsfiddle.net/e59xb38p/40/
$(document).ready(function (){
var $dropDownMenu = $('.dropdown-menu');
// displays as default
$dropDownMenu.css("display", "block");
$('#name')
.focusin(function () {
$dropDownMenu.css("display", "none");
})
.focusout(function () {
$dropDownMenu.css("display", "block");
});
});
Related
Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>
I am a beginner in javascript, hopefully you can help me with this problem..
I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked..
I know how to hide/show the button flip-ch1 but I can't do it to other button.
I have a script here:
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').mouseup(function() {
$('#flip-ch1').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add</button>
<button class="btn_style" id="flip-ch1">Add</button>
</div>
Toggle them both:
<script type="text/javascript">
$(document).ready(function(){
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#ch1').toggle();
$('#flip-ch1').toggle();
});
});
</script>
Just add this line:
$('#ch1').toggle();
So, the complete js code would be:
$(document).ready(function () {
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#flip-ch1').toggle();
$('#ch1').toggle();
});
});
Do not get confused by the .hide(). It is used to hide one of the buttons only in the beginning. No need to use afterwards. The reason that you do not see any changes after toggling the checkbox, is that when first button is hidden the second one gets its place, the place does not remain empty. You can spot all this that I mentioned on inspect element of any major browser.
Try $('#radio').is(':checked') as below
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').on('change', function() {
if ($('#radio').is(':checked')) {
$('#flip-ch1').show();
$('#ch1').hide();
} else {
$('#flip-ch1').hide();
$('#ch1').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add 1</button>
<button class="btn_style" id="flip-ch1">Add 2</button>
</div>
I have 3 or so button in my page which i need to show a social icon when user clicks on those links.
I used this jQuery
$('.one').on('click', function() {
$('.smenu').not($(this).next()).removeClass('share')
$(this).next().toggleClass('share');
});
<div id="sharing_area">
<ul class='smenu'>
<li class="facebook"><a target="_blank" onclick="return windowpop(this.href, 545, 433)" href="https://www.facebook.com/sharer/sharer.php?u=http://youtu.be/<? echo $id_3 ?>"><i class="icon-facebook"></i></a></li>
</ul>
<span class="one">Share</span>
</div>
I keep getting error, but i don't know what i'm doing wrong.
Can you guys help me out?
Here is my DEMO
There is no .next() element for the span you are clicking! Your UL is before the span, so you need prev():
http://jsfiddle.net/TrueBlueAussie/5dsrk470/5/
$('.one').on('click', function() {
console.log('click');
$('.smenu').not($(this).prev()).removeClass('share')
$(this).prev().toggleClass('share');
});
If you want to remove the class on clicking the links add this delegated event handler:
$(document).on('click', 'a', function(){
$('.smenu').removeClass('share')
});
Looks like you confused prev and next methods:
var $smenu = $('.smenu');
$('.one').on('click', function () {
$smenu.removeClass('share');
$(this).prev().toggleClass('share');
});
Demo: http://jsfiddle.net/5dsrk470/6/
hi im using jquery mobile this is the code
<form class="ui-filterable">
<input id="filterBasic-input" data-type="search">
</form>
<div data-role="collapsible">
<h2><span>paris</span><span class="pays">france</span>
<a class="gene02"data-role="button" data-inline="true" data-mini="true">generique</a></h2>
<p>code:24</p>
</div>
</li>
<li>
<div data-role="collapsible">
<h2><span>marakeche</span>
<span class="pays">maroc</span>
<a class="gene02"data-role="button" data-inline="true" data-mini="true">generique</a>
</h2>
<p>code:3300</p>
</div>
</li>
i want wen i click on class="gene02" it will take a valu of a precedent span with class pays and put it on a form class="ui-filterable" i try to do this form class ui-filterable
$(document).ready(function () {
$(".gene02").click(function () {
$("#filterBasic-input").val($(".pays").html());
});
});
but it only select france not maroc in second div . thx for help
You can get it like:
$(".gene02").click(function()
{
var $brotha = $(this).parent().find(".pays");
//$brotha is your element
});
http://jsfiddle.net/p7ENh/
http://jsfiddle.net/p7ENh/1/
$(".gene02").click(function () {
$("#filterBasic-input").val($(this).prevAll(".pays").html());
});
If it's always the first previous sibling you can also use $(this).prev() instead.
Basically from a class selector or a collection of elements, if you access any of its properties/values, it will return the value of the first one in the collection only.
Try,
$(document).ready(function() {
$(".gene02").click(function() {
var xOutput = '';
$('.pays').each(function(){ xOutput += $(this).html(); });
$("#filterBasic-input").val(xOutput);
});
});
$(document).ready(function() {
$(".gene02").click(function() {
$("#filterBasic-input").val($(this).closest('div').find('.pays').html());
});
});
I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.
<script>
$(document).ready(function () {
$("form.common").first().show();
$(".expand").click(function () {
$(this).parents().next("form.common").show();
})
$(".collapse").click(function () {
$(this).parents().next("form.common").hide();
});
$(".close").click(function () {
$(this).parents().next("div.module").hide();
});
});
</srcipt>
<div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
<h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
<span class="icons_small right close">X</span>
<span class="icons_small right collapse">-</span>
<span class="icons_small right expand">+</span>
</div>
<form class="common">
<fieldset>
<legend> Some Titlee/legend>
</fieldset>
</form>
</div>
Can anyone see why this is not hiding the div?
THanks,
The answer is in the question:
$(".close").click(function () {
$(this).closest("div.module").hide();
});
Demo fiddle
Also you should change your calls to parents() to just parent() so you just go up one level in the DOM tree
You had a missing < in <legend> Some Titlee/legend>, after that it works.
Check here
This should work :
$(".close").click(function () {
$(this).parent().hide();
});
JSFiddle
Doc : parent()