Close menu by clicking on any screen place - javascript

Have a script thats open menu and closes after clicking on 'li' element, how to close it by clicking on any place on screen ?
$(function() {
$('.drop-down-input').click(function() {
$('.drop-down-input.selected').removeClass('selected'); // Forget the previous selection
$(this).addClass('selected');
$(this).find(".dropdown-list").show();
});
$(document).on("click", ".drop-down-input.selected li",
function(e) {
e.stopPropagation();
$('.drop-down-input.selected .dropdown-list').hide().siblings().val($(this).html());
});
});
Thats my HTML:
<div class="styled-input-container drop-down-input">
<input id="simple_2" class="drop-down-select" placeholder="input text" type="text">
<ul class="dropdown-list">
<li>eeee</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xsssxxx</li>
</ul>
</div>

Here's a working solution. Hope it helps :)
$( document ).ready(function() {
// change from grey to blue color input
$(".styled-input-container input").focus(function () {
$id = this.id;
$idgen = '#' + $id;
//console.log($idgen);
$($idgen).closest( "div" ).addClass('focused');
});
$(".styled-input-container input").blur(function() {
$('.styled-input-container').removeClass('focused');
});
//open % close ul list input
$(function() {
$('.drop-down-input').click(function() {
$('.drop-down-input.selected').removeClass('selected'); // Forget the previous selection
$(this).addClass('selected');
$(this).find(".dropdown-list").show();
});
$(document).on("click", ".drop-down-input.selected li",
function(e) {
e.stopPropagation();
$('.drop-down-input.selected .dropdown-list').hide().siblings().val($(this).html());
});
});
$(document).mouseup(function (e){
var container = $(".dropdown-list");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="styled-input-container">
<input id="simple_1" placeholder="input text" type="text">
</div>
<div class="separator"></div>
<div class="styled-input-container drop-down-input">
<input id="simple_2" class="drop-down-select" placeholder="input text" type="text">
<ul class="dropdown-list">
<li>eeee</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xsssxxx</li>
</ul>
</div>

Just add a listener on all the dom like this:
$(document).on('click', ':not(.drop-down-input.selected li)',function() {/* Close all open menus */});
See than you can just ignore the li element with the :not selector to prevent listen the click on that elements.

Related

How to select only one LI element at time with jquery?

What this does is it selects the LI items from the list, but I want it to be able to only choose one at a time. For instance if I click Vaje and then Projekt, the Vaje one should revert back to normal and so on and so forth, even for the added user inputs.
$(document).on('click', '.class', function(){
$(this).css("font-weight", 'bold');
$(this).css("text-decoration", 'underline');
$(document).ready(function(){
$("#add").click(function(){
var addItem= $("#dodaj").val();
if(addItem.length > 0){
$("ul").append('<li class="class">'+ addItem + '</li>');
$("#dodaj").val("");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id = "dodaj" name="additem">
<button id="add" onclick="newElement()">Dodaj</button>
<button id="remove" >Zbriši</button>
<ul id="kategorija" >
<li class="class">Vaje</li>
<li class="class">Treningi</li>
<li class="class">Projekt</li>
</ul>
On the click you are setting "bold" and "underline" for one li, but you are not resetting the other elements. You can change the click event to:
$(document).on('click', '.class', function(){
// reset all li
$('.class').css("font-weight", 'normal');
$('.class').css("text-decoration", 'none');
// now set the current li
$(this).css("font-weight", 'bold');
$(this).css("text-decoration", 'underline');
});

jQuery blur() not listening to $(this)

Followed by the HTML DOM:
<div class="opt">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
When i click on the .opt it would show the .panel content, but then i need to trigger another event to hide the .panel when clicking outside of the .opt element.
jQuery:
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
$this.blur(function(){
$this.find('.panel').fadeOut();
alert('i am from blur');
});
});
Here is a demo JsFiddle
But the blur() method is not executing, what i am doing wrong here technically?
You can try a click event on body instead of blur. Take a look at
https://jsfiddle.net/y0wsfpvb/7/
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
});
$('body').click(function (e){
if( $(e.target).closest(".opt").length > 0 == false) {
$('.panel').fadeOut();
alert('fake blur');
}
});
This works if you define de tabindex property for the div...
Try:
HTML
<div class="opt" tabindex="3">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
JS
$('.opt').click(function(){
$(this).find('.panel').fadeIn();
$(this).blur(function(){
$(this).find('.panel').fadeOut();
alert('i am from blur');
});
});
You could bind the fade out action to the body's on click handler, and then add:
event.stopPropagation();
to your opt class click handler to achieve this.
Here is an example on codepen

Jquery: Show related div when you click and hide others

I have 2 divs with different content. I want to show the related div when I click on the link. It's showing both divs at the moment and it was supposed to show only the related one.
jsfiddle
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$('div.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
HTML
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is one!</p>
</div>
<br/><br/>
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is two!</p>
</div>
Make the script understand its relation. Change it to:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$this = $(this);
$('div.tip-2').fadeOut(200, function () {
$this.next('div.tip-2').fadeIn(200);
});
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
Fiddle: http://jsfiddle.net/praveenscience/g25hsdw6/4/
Try this
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next().fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
updated Fiddle
Please try this:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next('.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
http://jsfiddle.net/Rino_Raj/g25hsdw6/5/

jquery onclick expand div and change text inside span

I'm having a problem with my script where i click the H3 it will expand and only change the first text in span no matter if i click the second H3. After i wanna collapse it , it doesn't change back to the original text.
What should i use ? TQ
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery('#span1).html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span1" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
You need to set up a toggle function for the arrows. As this can't be done with the html codes you need to use ids so you can target them specifically here is the jquery you need:
$(document).ready(function () {
$('.pad').hide();
$('.heading').click(function () {
$(this).next('.pad').slideToggle();
if($(this).find('.span1').attr('id') == 'yes') {
$(this).find('.span1').attr('id', '').html('∨');
} else {
$(this).find('.span1').attr('id', 'yes').html('∧');
}
});
});
Fiddle Demo:
http://jsfiddle.net/Hive7/5xueU/2/
You can try this one
$(document).ready(function() {
$(".pad").hide();
//toggle the componenet with class msg_body
$(".heading").click(function()
$heading = $(this);
$(this).next(".pad").slideToggle(500,function() {
var sign = $(this).is(':visible') ? '∧' : '∨';
$heading.find('span').html(sign)
});
});
});
I did a JsFiddle version for you to look at here: http://jsfiddle.net/gUTTK/
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
jQuery(this).next(".pad").slideToggle(500);
if (jQuery(this).find('.span1').is(':visible')){
jQuery(this).find('.span1').hide();
jQuery(this).find('.span2').show();
} else {
jQuery(this).find('.span2').hide();
jQuery(this).find('.span1').show();
}
});
});
The HTML
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
Since you are selecting #span1, it's going to return only the first instance of that in your document every time. IDs must be unique. Try this instead:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery(this).find("span").html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span2" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
To toggle the arrows back, try checking for the visibility of the .pad element:
http://jsfiddle.net/tjnicolaides/W6nBG/
jQuery(document).ready(function () {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function () {
var $pad = $(this).next(".pad");
var $arrow = $(this).find("span");
if ($pad.is(':visible')) {
$arrow.html('∨');
} else {
$arrow.html('∧');
}
$pad.slideToggle(500);
});
});

Toggle styling for active element in group of elements

Given a group of elements with no target attribute (e.g. following code), what is the most effiecient way to set a highlight-styling for a selected element while unsetting the same styling for a previously selected element ?
<div id="uno" class="element_parent">
<a href="#" class="element">ONE</div>
</div>
<div id="dos" class="element_parent">
<a href="#" class="element">ONE</div>
</div>
<div id="tres" class="element_parent">
<a href="#" class="element">ONE</div>
</div>
I would add and remove a class on clicking the anchor, like so:
$('.element').on('click', function(e) {
e.preventDefault();
$(this).addClass('active')
.closest('div')
.siblings('div')
.find('a')
.removeClass('active')
});
CSS
.active {color: red;} /* or whatever */
or:
$('.element').on('click', function(e) {
e.preventDefault();
$('.element.active').removeClass('active');
$(this).addClass('active');
});
Something like:
$(".element").click(function() {
$(".element").removeClass("active");
$(this).addClass("active");
});
$('.element').on('click',function(e){
$(this).addClass('active');
$('.element').not($(this)).removeClass('active');
});

Categories

Resources