We Keep Coding

event.target does not work for properly in jQuery code

I am stuck with the following simple code.
$(function() {
'use strict';
function header() {
var openButton = $('.search_button'),
box = $('.box'),
closeButton = $('.close');
box.hide();
function init() {
initEvents();
}
function initEvents() {
openButton.on('click', openBox);
$(document).on('keyup', function(event) {
if(event.keyCode === 27) {
box.slideUp('normal');
}
});
}
function openBox(event) {
if(event.target === closeButton[0]) {
box.hide();
} else if(event.target === openButton[0] || $(event.target).closest(box).length) {
box.show();
}
else {
box.hide();
}
}
init();
}
header();
});
.box {
width:500px;
height:500px;
background-color:red;
position:relative;
}
.close {
width:80px;
height:80px;
background-color:orange;
position:absolute;
top:0;
right:0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_search">
<form action="search.php" method="post">
<input type="text" placeholder="" id="main_search" class="search_button">
</form>
</div>
<div class='box'>
<div class='close'></div>
</div>
My intension is that, when I click outside the DIV, it closes and the 'close' DIV on click closes the red main div.
The code, slidesDown the box div and escape key slideup as well.
But close and clicking outside to close the red div does not work.
Could someone assist me with the code with some explanation
Thanks and regards
Jeff

You are using the event handler click only in the .search_button, you have to use it in your body.
function initEvents() {
$(body:not('#header_search')).on('click', openBox);
$(document).on('keyup', function(event) {
if(event.keyCode === 27) {
box.slideUp('normal');
}
});
}

Element won't show() according to variable value and if statement

I am trying to make a blue square show if fullScreenCropStatus = true and a red square show if fullScreenCropStatus = false once the 'Done' button is clicked.
The variable is correct and is showing the correct value, but the blue square does not show when 'Done' is clicked. I tried show()/hide() and also the current format of setting the display value in css but neither make the blue square appear.
The red square successfully hide() or display:none. I am really baffled on this.
The code is below and this is the JSbin
JS:
var fullScreenCrop = false;
var fullScreenCropStatus = false;
$('#cropping--modes').click(function() {
fullScreenCrop = !fullScreenCrop;
console.log("fullScreenCrop = " + fullScreenCrop);
});
$("#done").click(function() {
fullScreenCropStatus = fullScreenCrop;
console.log("fullScreenCropStatus = " + fullScreenCropStatus);
if (fullScreenCropStatus === true) {
$(".done--title__container").css("display", "none");
$(".done--title__container--fullscreen").css("display", "block");
} else if (fullScreenCropStatus === false) {
$(".done--title__container").css("display", "block");
$(".done--title__container--fullscreen").css("display", "none");
}
});
HTML:
<button id="cropping--modes">Toggle variable (true/false)</button>
<button id="done">Done</button>
<div class="done--title__container">
<div class="done--title__container--fullscreen">
CSS:
.done--title__container { display:none; width:50px; height:50px; background-color:red; position:relative; }
.done--title__container--fullscreen { display:none;width:50px; height:50px; background-color:blue; position:relative; }
#cropping--modes { display:block; width:200px; height:30px; }
#done { display:block; width:200px; height:30px; }

Close the div tags and you're fine:
<button id="cropping--modes">Toggle variable (true/false)</button>
<button id="done">Done</button>
<div class="done--title__container"></div>
<div class="done--title__container--fullscreen"></div>

How to make one option active and disable the others

i'm creating a navbar. when i click one of the options , that option becomes active but when i click on the other option the previous option which was active remains there
SEE MY FIDDLE EXAMPLE : https://jsfiddle.net/bpmbu3th/
I just want to make the item active which is clicked
MY HTML
<p id="parent1">i'm the parent</p>
<p id="child1">i'm the first child</p>
<p id="parent2">i'm the 2nd parent</p>
<p id="child2">i'm the second children</p>
MY CSS
#parent1{
background-color:#000;
color:#fff;
}
#child1{
display:none;
background-color:red;
color:#fff;
}
#parent2{
background-color:#000;
color:#fff;
}
#child2{
display:none;
background-color:red;
color:#fff;
}
MY JQUERY
(function(){
var object = {
dropdown1:$('#child1'),
dropdown2:$('#child2'),
dropdown1parent: function(){
if(object.dropdown1.is(':hidden')){
object.dropdown1.fadeIn();
}
else{
object.dropdown1.fadeOut();
}
},
dropdown2parent: function(){
if(object.dropdown2.is(':hidden')){
object.dropdown2.fadeIn();
}
else
{
object.dropdown2.fadeOut();
}
}
};
$('#parent1').on('click', object.dropdown1parent);
$('#parent2').on('click', object.dropdown2parent);
})();

You should use common class to get rid of repetitive code.
Here's an example
$(function() {
$('.parent').on('click', function() {
var child = $(this).next('.child'); //Finds the next child
//fade out others then handle current child
$('.child').not(child).fadeOut(function() {
child.fadeToggle();
})
});
});
.parent {
background-color:#000;
color:#fff;
}
.child {
display:none;
background-color:red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="parent">i'm the parent</p>
<p class="child">i'm the first child</p>
<p class="parent">i'm the 2nd parent</p>
<p class="child">i'm the second children</p>

You just have to add two lines of code in your javascript, here is the edited snippet -
dropdown1parent: function(){
if(object.dropdown1.is(':hidden')){
object.dropdown1.fadeIn();
object.dropdown2.fadeOut(); //this line
}
else{
object.dropdown1.fadeOut();
}
},
dropdown2parent: function(){
if(object.dropdown2.is(':hidden')){
object.dropdown1.fadeOut(); //this line
object.dropdown2.fadeIn();
}
else
{
object.dropdown2.fadeOut();
}
}
Is that you wanted?

You need to fade out the other one:
(function () {
var object = {
dropdown1: $('#child1'),
dropdown2: $('#child2'),
dropdown1parent: function () {
if (object.dropdown1.is(':hidden')) {
object.dropdown1.fadeIn();
object.dropdown2.fadeOut();
} else {
object.dropdown1.fadeOut();
object.dropdown2.fadeOut();
}
},
dropdown2parent: function () {
if (object.dropdown2.is(':hidden')) {
object.dropdown2.fadeIn();
object.dropdown1.fadeOut();
} else {
object.dropdown1.fadeOut();
object.dropdown2.fadeOut();
}
}
};
$('#parent1').on('click', object.dropdown1parent);
$('#parent2').on('click', object.dropdown2parent);
})();
https://jsfiddle.net/ghorg12110/bpmbu3th/1/
You should think about creating a function to manage that, it will become a nightmare if you use a lot of "dropdown".

Jquery 'this' selector issue

I have a problem:
When I click on my '.glass' div it opens multiple '.permalinks' divs, but I just want to open the one I click.
This is my code:
<script type="text/javascript">
$(window).ready(function() {
$('.glass').click(function() {
$('.permalinks').slideToggle(function() {
});
});
});
</script>
This is the CSS:
.permalinks {
display:none;
position:absolute;top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
}
.reblog, .link, .like {
display:inline-block;
margin:2%;
margin-top:45%;
padding:7% 7% 4% 7%;
}
.reblog, .link, .like {
width:10%;
}
.reblog {
background:#317FD4;
}
.link {
background:#38C264;
}
.like {
background:#ED4A4A;
}
.glass {
position:absolute;
top:0;
left:0;
background:#f3f3f3;
}
And this the html:
<div class="permalinks">
<div class="reblog"><center><img src=""></center></div>
<div class="link"><center><img src=""></center></div>
<div class="like"><center><img src=""></center></div>
</div>
<img class="glass" src="" width="5%">
If you could tell me what I've done wrong, please.

assign the click handler to .permalinks and use $(this).slideToggle()
$(window).ready(function() {
$('.permalinks').click(function() {
$(this).slideToggle();
});
});
http://jsfiddle.net/yRFSV/

If .permalinks is a child of .glass, then it's easy:
$(window).ready(function() {
$('.glass').click(function() {
$(this).find('.permalinks').slideToggle(function() {
});
});
});

If .permalinks is a child of .glass, then you can select it directly upon click.
$('.glass').on('click', function() {
$(this).find('.permalinks').slideToggle();
});

you probably want
<script type="text/javascript">
$(window).ready(function() {
$('.glass').click(function() {
$(this).children('.permalinks').slideToggle(function() {
});
});
});
</script>

Two options:
.permalinks is after .glass in the DOM tree
Use $(this).next('.permalinks').slideToggle(function() {
.permalinks is before .glass in the DOM tree
Use $(this).prev('.permalinks').slideToggle(function() {

Change div text with jQuery Toggle

When using slideToggle, how to change the Text close/show?
I did a simple one, but cannot get the text change back.
Here is what I did:
$(document).ready(function(){
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
});
$('.open2').click(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
});
});
body{
font-size:20px;
}
#box{
border:2px solid #000;
width:500px;
min-height:300px;
}
.open,.open2 {
width:450px;
height:50px;
background:blue;
margin:5px auto 0 auto;
color:#fff;
}
.showpanel,.showpanel2{
width:450px;
height:300px;
margin:0 auto 10px auto;
background:red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div class="open">Show</div>
<div class="showpanel">This is content</div>
<div class="open2">Show</div>
<div class="showpanel2">This is content</div>
</div>
http://jsfiddle.net/9EFNK/

You can use the is() assertion method to check whether the panel is open or closed in the animation's callback and set the text accordingly - http://jsfiddle.net/9EFNK/7/
$('.open').click(function(){
var link = $(this);
$('.showpanel').slideToggle('slow', function() {
if ($(this).is(':visible')) {
link.text('close');
} else {
link.text('open');
}
});
});

Just add a simple if statement to test the text like so
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
if($(this).text() == 'close'){
$(this).text('Show');
} else {
$(this).text('close');
}
});
Like this DEMO

Not the prettiest of methods, but it does the job in a single statement.
$(this).text(($(this).text() == 'Close') ? 'Show' : 'Close');

Use .toggle()
Here is Working Demo
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
}).toggle(function() {
$(this).text('Hide');
}, function() {
$(this).text('Show');
});

check this may be user question is solve Fiddle

Here's an updated version http://jsfiddle.net/9EFNK/1/
You can simply toggle a class on close/open, perform a check for that class and change the contained text accordingly
if( $(this).hasClass('active') )
$(this).text('open');
else
$(this).text('Show');
$(this).toggleClass('active');

try this demo
$(document).ready(function(){
$('.open').toggle(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel').slideToggle('slow');
$(this).text('Show');
});
$('.open2').toggle(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel2').slideToggle('slow');
$(this).text('Show');
});
});​

Use this
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
Here is how you use it
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
$('[data-toggle="offcanvas"]').click(function () {
$(this).toggleText();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button data-toggle="offcanvas" data-alt-text="Close">Open</button>
You can even use html provided it's html encoded properly