We Keep Coding

how to remove an element when textarea is empty?

I want to check if the textarea is empty and then remove the element prev() to it. How do I do so? My attempt was this:
if($(".inputs").val().length == 0){
$(this).prev().hide();
};
Do I have to check for "keypress"? The element I am trying to hide was show() after a "keypress" event. But I want to hide it immediately if the textarea is empty.
Edit: Question 2: I was using this code to show an element after first input:
$(".inputs").one("keypress", function(){
$(this).prev().show().addClass("animated slideInUp");
});
but now that I want to hide and show depending on the length of the textarea should I do something like this:
$(".inputs").on("input", function() {
if ($(".inputs").val().length == 0) {
$(this).prev().hide();
}
else if ($(".inputs").val().length == 1) {
$(this).prev().show().addClass("animated slideInUp");
}

If you want to hide the previous element when you delete content within the <textarea>, then .keyup is the way to go:
$(".inputs").on("input", function() {
if ($(".inputs").val().length == 0) {
$(this).prev().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Hidden when all content is deleted, doesn't restore</div>
<textarea class="inputs"></textarea>
Keep in mind that this won't restore the previous element when you start typing again. If you'd like to do that, you'll need to extend the script a little to also .show() the previous element:
$(".inputs").on("input", function() {
if ($(".inputs").val().length == 0) {
$(this).prev().hide();
}
else {
$(this).prev().show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Hidden when all content is deleted, restores</div>
<textarea class="inputs"></textarea>
Note that input is used over keyup in case the user edits the field without using the keyboard.
Hope this helps! :)

One div appear on click and second closes

i know simple java script function on click
$(document).ready(function(){
$(".click").click(function(){
$(".fade", this).fadeToggle();
});
});
but i want that on click one div appears and second one closes . like on this page http://www.wpbeginner.com/free-wordpress-blog-setup/, but on viewing source i could not find any code . Don't worry this link doesn't belong to me or my website

I think that should do it
$(document).ready(function(){
$('.click').click(function(){
if ($('.first').is(':visible')) {
$('.first').css('display', 'none');
$('.second').fadeIn(2000);
} else {
$('.second').css('display', 'none');
$('.first').fadeIn(2000);
}
});
});
http://jsfiddle.net/57VaZ/

Assuming your html looks something like this:
<a class="click">click</a><br />
<a class="fade1">fade1</a><br />
<a class="fade2">fade2</a><br />
Make sure the one that you want to show on click is hidden by default:
.fade2 { display:none }
Then do the following in jQuery:
$(document).ready(function(){
$(".click").click(function(){
$(".fade1, .fade2").fadeToggle();
});
});
Here is a fiddle demo

How to check if cursor is on a div

On clicking on a link I show a pop up. Here is my pop up code
<div class='' id="custom-popover">
<div class="arrow"></div>
<h3 class="popover-title">Popover left</h3>
<div class="popover-content" id="details-container">
</div>
</div>
</div>
I also add some html code using jquery when pop up show. Now I want to check if cursor is on this pop over or if user is hovering over this pop up and then I show an alert message otherwise hide the popup. How can I do this? I tried something like this
var isHovered = $('#custom-popover').is(":hover");
if (isHovered){
alert("msg");
} else {
$('#custom-popover').hide();
}
But this is not working. How can I do this?

use global variable:
var cursorOnDiv = false;
$(document).on({
mouseenter:function(){ cursorOnDiv = true; },
mouseleave:function(){ cursorOnDiv = false; },
},
'#yourDivId'
);
and check him

Try it:
$("#custom-popover").hover(
function() {
$("#custom-popover").show();
},
function() {
$("#custom-popover").hide();
});

Some thing like this,
$( "#custom-popover" ).mouseover(function() {
$('#custom-popover').hide();
});
the function is() as per doc is often useful inside callbacks, such as event handlers.
This function runs only once as it is not a callback. So in order to detect hover events use call backs.
You can have even like this if you want to have enter and leave both,
$( "custom-popover" )
.mouseenter(function() {
})
.mouseleave(function() {
})

This is what you ask:
$("#custom-popover").hover(
function() {
alert("Hovering now");
$("#custom-popover").show();
},
function() {
$("#custom-popover").hide();
});
You stored a value whether #custom-popover is being hovered or not at the time of execution, you did not bind an eventListener (hover) for the cause.

Try this:
if($('#custom-popover:hover'))
{
alert("msg");
}
else
{
$('#custom-popover').hide();
}

Using jquery to determine if any elements within a div was clicked

How can I tell using jQuery if an any element within a div (panel1) was clicked? I have this piece of code that I use to show/hide a popup:
$('body').click(function (e) {
if ($(e.target).attr('id') == 'link1') {
$('#panel1').show();
} else {
$('#panel1').hide();
}
});
The problem is that the popup (panel1) gets dismissed if I click on any control/element within panel1. I'd like to keep panel1 open unless an area outside panel1 is clicked (or if link1 is clicked again). How can I revise this code to achieve this? Thanks...

Try this
$('#panel1').click(function (e) {
e.stopPropagation();
//Other code if you want to execute anything on panel click.
});
$('body').click(function (e) {
if($("#panel1").is(":visible"))
$('#panel1').hide();
});

Make a following html markup:
<body>
<div id="div1">
... all the body content here
</div>
<div id="panel1">
</div>
I suppose the popup #panel1 is positioned out of normal flow anyway, so it is no problem.
Then in jquery use div1 instead of body and that's it :-)

$('body').click(function (e) {
if ($(e.target).attr('id') == 'link1') {
$('#panel1').show();
} else if($(e.target).attr('id') != 'panel1') {
$('#panel1').hide();
}
});

JQuery - also trigger change on click away

I have a basic JQuery script that changes a few divs when you click - thus showing them - via toggle.
<script type="text/javascript">
$('#content_display').click(function() {
$(this).toggleClass('selected');
$('#content_display_selector_container').toggle();
});
</script>
However - to call the even you need to click only on the first main div with the ID of "content_display".
My question is this: how can I hide these changes using JQuery if the user also clicks on BODY - i.e. if you click away, the divs go back to their original hidden state?
Thanks for helping a JQuery clutz!

Something like this should work:
$('body').click(function(e) {
if (!$(e.target).is('#content_display')) {
$('#content_display').removeClass('selected');
$('content_display_selector_container').hide();
}
});

Hey - found a way to do this - does anyone think there's a better way?
Here's the result:
<script type="text/javascript">
var mousetrap = false;
$('body').click(function() {
if (mousetrap == false) {
$('#content_display').removeClass('selected');
$('#content_display_selector_container').hide();
}
});
$('#content_display').hover(function() {
mousetrap = true;
},function(){
mousetrap = false;
});
$('#content_display').click(function() {
$(this).toggleClass('selected');
$('#content_display_selector_container').toggle();
});
</script>