I've got a nice little show only one div at a time script working that I found at:
Random Snippets (second demo down) that looks like this:
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
The only thing it doesn't do is close the div after you open it. Currently I have both divs set to display: none and would like to give the user the option to close them both when they are done looking.
Any idea's how to modify this?
You can have a click event that closes them when clicked:
$('.newboxes').click( function() {
$(this).hide(600);
});
You have to provide a button or something to the user to close the divs. Let's assume there is a button like this inside each div:
HTML
<div class="div-class">
<p>Box content</p>
<button class="close">Close</button>
</div>
jQuery
$('.close').on('click', function() {
$(this).closest('.div-class').hide();
});
add a condition about the visibility of the current item in the if statement:
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone && $(this).css("display") == "none") {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
Related
So what I want to accomplish is this: I have a dropdown parent called .has-sub > a, aka link. When link is clicked, then dropdown menu .dplst appears. When any element besides link and .dplst is clicked on, I want my alert function to pop-up, HOWEVER, I ONLY want the alert to pop-up ONLY IF link has been clicked on. So my problem lies in my jquery code. My error is when any elements besides link and .dplst are clicked on, and when link HASN'T been clicked, the alert function will pop-up. But I ONLY want it to pop up when link is clicked on. How do I do that with my current code? Please help me. Thank you
EDIT: So basically this is result I want:
1) Click on .has-sub > a
2) .dplst shows
3) click any element that does not have class .alerts and $(".alerts").children()
4) .dplst now hides
5) an alert dialogue pops up with text "ok"
What I want to AVOID:
1) don't do this - SKIP
2) don't do this - SKIP
[So basically Step #3 now becomes Step #1]
3) click any element that does not have class .alerts and $(".alerts").children()
4) this does not happen - SKIP
[And Step #5 becomes Step #2]
5) an alert dialogue pops up with text "ok"
$(document).ready(function() {
$('.flx2 > div > a').click(function(e) {
$(this).data('clicked', true);
var checkElement = $(this).next();
if((checkElement.is('.dplst')) && (!checkElement.is(':visible'))) {
$('.dplst:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('div').find('.dplst').children().length == 0) {
return true;
} else {
return false;
}
});
});
$(document).ready(function() {
$(document).mouseup(function(e) {
if($('.flx2 > div > a').data('clicked')) {
var dplst = $(".dplst");
var alerts = $(".alerts").children().addBack();
if (!dplst.is(e.target) && dplst.has(e.target).length === 0) {
dplst.hide();
}
if (!alerts.is(e.target)) {
$("button[name='altbut']").click();
}
}
});
});
$(document).ready(function() {
$("button[name='altbut']").on('click', function(e) {
alert("ok");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="flx2">
<div class='has-sub alerts'>
link
<div class="dplst">
<a>text1</a>
</div>
</div>
</div>
<button name="altbut" type="button"></button>
Ok let me clear the situation here first,
So requirements is to show popup when 'link' has been clicked at least once and 'link' OR 'dplst' are not clicked and click has been made on '.flx2'
If I got the requirements right, then you can just add a hidden field, set value to 0, and when link is clicked change that value to 1. Then check for click on .flx2 and NOT(link OR dplst) and check if hidden value is 1, then show the popup otherwise not.
You can do something like this:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="flx2">
<div class='has-sub alerts'>
<a id="link" href="#">link</a>
<div class="dplst">
<input type="hidden" id="linkClicked" value="0"/>
<a>text1</a>
</div>
</div>
</div>
<button name="altbut" type="button"></button>
Javascript
$(document).ready(function() {
$('#link').on('click', function(e) {
$('#linkClicked').val(1);
});
$(".flx2").click(function(e) {
if($(e.target).is('.dplst') || $(e.target).is('#link')){
e.preventDefault();
return;
}
else if($('#linkClicked').val() == 1){
alert("woohoo!");
}
});
});
Fixed code above, also created a fiddle
https://jsfiddle.net/63tgLz4u/
$(document).ready(function() {
$('.flx2 > div > a').click(function(e) {
$(this).data('clicked', true);
var checkElement = $(this).next();
if((checkElement.is('.dplst')) && (!checkElement.is(':visible'))) {
$('.dplst:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('div').find('.dplst').children().length == 0) {
return true;
} else {
return false;
}
});
$(document).mouseup(function(e) {
if($('.flx2 > div > a').data('clicked')) {
var dplst = $(".dplst");
var alerts = $(".alerts").children().addBack();
if (!dplst.is(e.target) && dplst.has(e.target).length === 0) {
dplst.hide();
//set link data click to false
$('.flx2 > div > a').data('clicked', false)
}
if (!alerts.is(e.target)) {
$("button[name='altbut']").click();
}
}
});
$("button[name='altbut']").on('click', function(e) {
alert("ok");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="flx2">
<div class='has-sub alerts'>
link
<div class="dplst">
<a>text1</a>
</div>
</div>
</div>
<button name="altbut" type="button">button</button>
Don't know whether this match what are you want, your description is so mess...
there are few questions:
1. if dropdown been hide, are you going to show popup when click on link?
I add //set link data click to false inside code.
I think I'm trying to doing a simple thing but probably i miss something.
I've this little HTML
<div class="open"> OPEN</div>
with this simple CSS:
.open {
color: green;
}
.close {
color: red;
}
Now want to catch .click() events on the div but i want to select the with the class selector.
And for second i need to change the class and catch again a different .click() event based on the class. So I used this JQuery code:
$('.open').click(function() {
alert('open');
$(this).removeClass('open');
$(this).addClass('close');
$(this).text('CLOSE');
});
$('.close').click(function() {
alert('close');
$(this).removeClass('close');
$(this).addClass('open');
$(this).text('OPEN');
});
But this not work:
First click: right alert, class change, text change
Second click: wrong alert, class not change, text not change
You can check this jsfiddle: JsFiddle Example
Can you help me?
Thanks
You can simply do this with:
$('.open').click(function(){
var txt = $.trim(this.textContent) == "OPEN" ? "CLOSE" : "OPEN";
$(this).toggleClass('open').text(txt);
// $(this).toggleClass('open close').text(txt);
// use the commented line if you want to toggle the classes on each click.
});
.open {
color: green;
}
.close {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open"> OPEN</div>
you need event delegation for this. since in the beginning, there is no div with the class close, the click handler is assigned to nothing.
just wrap your div
OPEN
and assign the click handler to the main div
$('.wrapper').on("click", ".open",function() {
alert('open');
$(this).removeClass('open');
$(this).addClass('close');
$(this).text('CLOSE');
});
$('.wrapper').on("click", ".close",function() {
alert('close');
$(this).removeClass('close');
$(this).addClass('open');
$(this).text('OPEN');
});
instead of $(this).removeClass('close'); $(this).addClass('open'); you shout consider to use $(this).toggleClass('open close');
https://jsfiddle.net/ezxe9ca8/2/
Try this,
$('.general').click(function() {
var status = $(this).attr('data-status');
if(status == 'open') {
alert('open');
$(this).removeClass('open');
$(this).addClass('close');
$(this).text('CLOSE');
$(this).attr('data-status', 'close');
} else if(status == 'close') {
alert('close');
$(this).removeClass('close');
$(this).addClass('open');
$(this).text('OPEN');
$(this).attr('data-status', 'open');
}
});
Then apply class to div
<div class="open general" data-status='open'> OPEN</div>
The problem is that the event handler bound to HTML element. In this case with the <div> No with the class close or open. For this reason, when you click on div only tigger the handler with alert("opne").
The solution is: Use only one handler and inside it put a 'if' stament. In pseudocode:
if class open
do someting
else if class close
do someting
I already have my code to toggle show and hide the div but whenever I try to add the Hide when clicked outside, it conflicts the toggle code, I need to toggle the div_menu but also hides it when clicked outside just like the facebook drop down menu
$(document).ready(function() {
$(".toggle_menu").click(function(e) {
$(".div_menu").toggle();
e.preventDefault();
});
});
You can do something like
$(document).ready(function () {
$(".toggle_menu").click(function (e) {
$(".div_menu").toggle();
e.preventDefault();
});
$(document).click(function(e){
if(!$(e.target).closest('.toggle_menu, .div_menu').length){
$(".div_menu").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="toggle_menu">toggle_menu</button>
<div class="div_menu">
<div>some random content menu</div>
</div>
<div style="height: 100px; background: lightgrey;">some other content goes here</div>
use e.target to find the current targeted element ,and using is() Check the current matched set of elements against a selector
$(document).ready(function () {
$(document).click(function (e) {
if ($(e.target).closest(".toggle_menu,.div_menu").length) {
$(".div_menu").toggle();
e.preventDefault();
} else {
$(".div_menu").hide();
}
});
});
DEMO
$("body").click
(
function(e){
if ($(e.target).is($(".toggle_menu"))) {
$(".div_menu").toggle();
}else{
$(".div_menu").hide();
}
}
);
try this
$(document).click(function(e){
if($(e.target).parents('.div_menu').length == 0 && $(e.target).attr('class') != "div_menu"){
$(".div_menu").toggle();
}
});
$(document).ready(function() {
$(".toggle_menu").click(function(e) {
$(".div_menu").toggle();
e.preventDefault();
});
$(document).click(function(e) {
$(".div_menu").hide();
});
});
I have the following java script code to expand and collapse.
$(function () {
$(document).on('click', '.expandcollapse', function(e) {
$('.collapse').each(function(index) {
$(this).collapse("toggle");
});
if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All ") {
$(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
}
else {
$(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All");
}
});
});
It works fine here:
http://jsfiddle.net/HqXMN/10/
I need to remove the static text (Expand, Collapse) and somehow place them in my html.
Is there a way to hide the text and icon plus or minus sign based on the action using the toggleClass function.
Here is what I tried so far but doesnt work at all.
$(function () {
$(document).on('click', '.expandcollapse', function(e) {
$(this).removeClass('icon-white icon-minus-sign');
$('.collapse').each(function(index) {
$(this).collapse("toggle");
});
if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i>") {
$(this).removeClass('icon-white icon-plus-sign');
$(this).addClass('icon-white icon-minus-sign');
//$(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
}
else {
$(this).addClass('icon-white icon-plus-sign');
$(this).removeClass('icon-white icon-minus-sign');
}
});
});
Here is my html (I am using haml syntax)
%i.icon-white.icon-plus-sign
Expand All
%i.icon-white.icon-minus-sign
Collapse All
Update: Here is something more I tried but couldnt make it work.
http://jsfiddle.net/HqXMN/11/
First of all, I suggest that you should use jQuery .is() ( http://api.jquery.com/is/ ) for your if statements, that way your code will be more flexible. Then, I suppose the toggleClass will work for you too. I didn't do much, but here is a start:
JS:
$(function () {
$(document).on('click', '.expandcollapse', function (e) {
$('.collapse').each(function (index) {
$(this).collapse("toggle");
});
if ($(this).is('.icon.white-icon .iconplus-sign')) {
$(this).toggleClass('is-collapsed');
} else {
$(this).toggleClass('is-collapsed');
}
});
});
CSS:
.expandcollapse .icon-plus-sign {
display:block;
}
.expandcollapse .icon-minus-sign {
display:none;
}
.is-collapsed .icon-plus-sign {
display:none;
}
.is-collapsed .icon-minus-sign {
display:block;
}
and demo here: http://jsfiddle.net/pavloschris/HqXMN/13/
I hope it helps.
I want to show a div on link click and hide if click outside the link or div.
login
<div class="login-panel">
<input type="text" id="LoginForm_username" name="LoginForm[username]" class="field" value="username">
<input type="password" id="LoginForm_password" name="LoginForm[password]" class="field" value="password">
<input type="submit" value="Login" class="loginBtn">
</div>
initially div is hidden. and script is
$(document).ready(function() {
$("#login").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function(e){
if(e.target.className == "login" || e.target.className == "login-panel") {
//alert("do't hide");
}
else {
$(".login-panel").hide();
}
});
});
when I click on link div shows and overlaps some other elements, and when I click outside the body it dies.
But the problem is when I click on input box to enter username login-panel div get hides.
why div hide?
any guidance will be appreciated.
http://jsfiddle.net/thirtydot/F4p2x/15/
$(document).ready(function() {
$("#login").click(function(e) {
$(".login-panel").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('.login-panel, .login-panel *')) {
$(".login-panel").hide();
}
});
});
You should do it like this:
http://jsfiddle.net/VWENB/1/
$("#login").click(function(e) {
$("div.login-panel").toggle();
e.stopPropagation();
});
$("body").click(function(e) {
if (e.target.className == "field") {
//alert("do't hide");
} else {
$(".login-panel").hide();
}
});
When you are clicking on a sub-element, your condition (e.target.className) is not applied to your parent element (<div class="login-panel">). But you can use the closest function of jQuery (see here) in order to test if you are in your parent element :
if(e.target.className == "login" || $(e.target).closest(".login-panel").length === 1) {
...
}
PROBLEM is when i click on input box to enter username login-panel div
get hides. why div hide?
Because, you clicked the body too, when clicking in the div. Then both events are triggered. Check out event.stopPropagation() which you may use in the else part of body.onclick.
That because your input lies inside #login div, so if you click inside this div it will hide. So you can use jquery :not selector to specify those excluded elements
$(document).ready(function () {
$("#login,:not('#LoginForm_username'),:not('#LoginForm_password')").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function (e) {
if (e.target.className == "login" || e.target.className == "login-panel") {
//alert("do't hide");
} else {
$(".login-panel").hide();
}
});
});
DEMO
Here you go:
$(document).ready(function () {
$("#login").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function (e) {
if (e.target.nodeName != "INPUT" && e.target.className!= "login" && e.target.className!= "login-panel") {
$(".login-panel").hide();
}
});
});
You were using the wrong selector in your if to check if a click on the body wasn't targeting a input element.
Fiddle
Just find mouse when the click event occur,
<script type="text/javascript">
find_mouse = false;
$(document).ready(function()
{
$('.login-panel').hover(function(){
find_mouse=true; // if mouse on login-panel
}, function(){
find_mouse=false; // not on login panel
});
$("body").click(function(){
if(! find_mouse) // if not on login panel
$('.login-panel').hide();
});
});
</script>
As the other saying clicking input cause event triggering in the body so you should check if the sender is child of the login I think below code do the trick;
$("body").click(function (e) {
var $sender = $(e.target);
if ($sender.closest(".login-panel").length) {
return ;
}
$(".login-panel").hide();
});
Edit : update the condition with closest as it is correct function.
Begins with the current element, Travels up the DOM tree until it finds a match for the supplied selector. The returned jQuery object contains zero or one element for each element in the original set.