We Keep Coding

jQuery - Slide div out and down from under another div when user enters something into an input

I want to slide a div down from underneath another div when a user types something into a div.
I have tried this but I need it to slide down when the user types something in an input box.
Here is the HTML
<div id="search-container">
<input type="text" name="search-input" id="search-input" placeholder="🔎 type to search...">
</div>
The div to slide down from underneath search-container
<div class="container" id="search-result-container" class="hidestuff" >
Some JS in the div search-result-container that might be usefull
<script>
$('#search-result-container').hide();
$('#search-input')
.on('keyup', function(e) {
var input = $(this).val();
input.length ?
$('#search-result-container').show() :
$('#search-result-container').hide();
})
</script>
Any Ideas on how this could be achieved?
Many Thanks

The .slide<Down/Up>() method could be useful here
$('#search-input').on('input', function(e) {
var input = $.trim( this.value );
if ( input.length > 0 )
$('#search-result-container').stop().slideDown();
else
$('#search-result-container').stop().slideUp();
});
.hidestuff {
display: none;
background: #ddd;
padding: 20px;
}
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
<div id="search-container">
<input type="text" name="search-input" id="search-input" placeholder="🔎 type to search...">
</div>
<div class="container hidestuff" id="search-result-container">
Some JS in the div search-result-container that might be usefull
</div>
Pro tips:
Use the "input" Event to register any kind of input change (like paste etc)
Don't use two class="" class="" since only the first will apply
Use jQuery's $.trim() to remove wrapping whitespaces

How to handle focus in click and tab?

I need to hide a div with some content when a input is clicked, but when the input is focus by tab the content should be showed. Currently i can show and hide the div with the content but i can't handle well the focus when is clicked i have a bounce because is focus and clicked at the same time.
Here's my code
CodePen
$(function() {
$('.myinput').click(function(e) {
$('.text').addClass('hidden');
console.log("click");
});
$('.myinput').focus(function() {
$('.text').removeClass('hidden');
console.log("focus");
});
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<input class="myinput" type="text" />
<div class="text">
<div>TEXT TEXT TEXT</div>
<div>TEXT TEXT TEXT</div>
<div>TEXT TEXT TEXT</div>
</div>
</div>

I added a variable to determine if the mouse is being pressed, and only hide the text content if it is. Results in mouse-focus text being hidden, tab-focus text is shown.
Also changed the click handler to a mousedown handler, the click event only fires after a mouse down + mouse up causing your flickering problem.
codepen
var mousedown = false;
$(function () {
$('.myinput').mousedown(function(e) {
mousedown = true;
$('.text').addClass('hidden');
console.log("click");
});
$('.myinput').focus(function() {
if(!mousedown) $('.text').removeClass('hidden');
console.log("focus");
});
});
$(window).mouseup(function(e){
mousedown = false;
})

Show div after button click jquery

Hi I try to show a div element in jQuery mobile when the user touch the button. I already created own classes for the button and for the div element, but nothing happens. What classes should I take?
JS:
$(document).ready(function(){
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).siblings("div.comment").toggle();
});
});
CSS:
.comment {
display:none;
}
HTML:
<?php foreach ($result as $key => $row): ?>
<div class="ui-btn-text">
<button class="commentbtn" data-rel="button">comment</button>
<div id="createcomment" class="comment" data-theme="a">
<form data-ajax="false" name="login-form" class="login-form" action="./comments.php" method="post" style="padding:20px 40px;">
<div class="content">
<textarea rows="1" name="text" id="text" class="foo"></textarea>
</div>
</form>
</div>
</div>
<?php endforeach; ?>

You haven't got any element with the class .btn-info so you wouldn't be able to call the event from:
$(".btn-info").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).closest(".comment").children(".comment").show();
});
You have an element with the class .commentbtn which you would then do the same as you did with the .btn-info
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
// Console log the element
console.log($(this).closest(".comment").children(".comment"));
// Console log not showing the right element. So you need to get the
// sibling of the clicked button
// Instead of doing - $(this).closest(".comment").children(".comment").show();
// You can do the following
$(this).siblings("div.comment").show();
});
.closest() - looks at the element itself and its parents for a match.
.siblings - Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
Example With .show();
Here an example with .toggle(); If you wanted to show/hide the comment with same button. (Just little extra for you to look at)
Example With .toggle();
UPDATE:
Example with .comment shown on load

Your button has class commentbtn, so you should use that instead of btn-info. Also, you should be looking for the sibling div, not the closest.
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).siblings("div.comment").show();
});
JSFiddle demo

How to detect content change event on a div

I am trying to make an editor everything working fine till now, but now I need to make a handler which could detect any change made in a div or any content edited in the div
<?php $row="testing content" ?>
<!-- my editor section-->
<div id="editor">
<div id="options">
<span><a id="iimg">Insert Image from gallery</a></span>
<span>Upload image to gallery</span>
<span><a id="iheading">Heading</a></span>
</div>
<div id="product_descriptioncontent" contenteditable="true"><?php echo $row; ?>
</div><!-- viewable editor -->
<input type="hidden" name="textareacontent" value="" id="textareacontent" >
<!-- hidden field to submit values -->
</div>
<!-- end of editor section -->
<div id="imc"></div> <!-- image gallery loading section -->
<script>
$(document).ready(function(){
$('#iheading').click(function(){
$('#product_descriptioncontent').append('<h1>Heading</h1>');
});
$('#iimg').click(function(){
$('#imc').load('imagegallery.php',function(){
$('#gallery img').on('click',function(){
$('#product_descriptioncontent').append('<img src="http://localhost/sites/site_pics/otherpic/1.png"><br> ');
});
});
});
$('#product_descriptioncontent').change(function(){
alert("pppp");// how to capture this event
});
});
</script>
I have placed a bit of my code at jsfiddle http://jsfiddle.net/bipin000/UJvxM/1/
thanks for your precious time

Try adding a handler for DOMCharacterDataModified. Might be a cleaner solution.

Do you like this? http://jsfiddle.net/Ralt/hyPQC/
document.getElementById( 't' ).onkeypress = function( e ) {
var evt = e || window.event
alert( String.fromCharCode( evt.which ) )
}​
It's not waiting for a change event, it's kind of pointless.
Instead, it's listening to the onkeypress event. Everytime a user changes the content of this div (by adding a character to it), it triggers the event.
You can also see how to get the character clicked (using String.fromCharCode( evt.which )).
PS: a full jQuery solution for your specific case would be this:
$( '#product_descriptioncontent' ).on( 'keypress', function() {
$( '#your-hidden-input' ).val( $( this ).text() )
// Or
$( '#your-hidden-div' ).text( $( this ).text() )
} )

You can bind a custom event to the div and trigger that event upon change
Demo in Stack Snippets and jsFiddle:
$(function() {
$('#wrapper').bind("contentchange", function() {
console.log("Captured content change event");
});
$("#btn").click(function() {
$('#wrapper').html("new value").trigger("contentchange");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="wrapper"></div>
<input type="button" id="btn" value="click here">

How to make box appear when text is entered into input?

I have this HTML code:
<div class="center1">
<form>
<input type="text" class="input1" autofocus="focus" />
</form>
</div>
<br><br>
<div class="center1">
<div class="box"></div>
</div>
I have added it to this JSFiddle link: http://jsfiddle.net/PDnnK/4/
As you can see there is:
INPUT FIELD
&
BOX
I want the box to appear only when text is typed in the input. How is this done?

Start the box out with display: none. Then, you can capture the keypress event for the input:
document.getElementById('myInput').onkeypress = function () {
document.getElementById('myBox').style.display = 'block';
}

Something like this with jQuery:
$("#id-of-input").change(function() { $("#id-of-box"}.css('display', 'block'); } );
or change .change to .click

Binding to "change" is usually not super-handy, since it usually doesn't fire until you tab or click away from the element.
However, polling isn't the answer either.
original answer:
http://jsfiddle.net/xNEZH/2/
super-fantastic new answer:
http://jsfiddle.net/4MhKU/1/
$('.input1').bind('mouseup keyup change cut paste', function(){
setTimeout(function(){
var hasInput = $('.input1').val() != "";
$('.box')[hasInput ? 'show' : 'hide']();
}, 20);
});
The setTimeout is because cut and paste events fire BEFORE the text is cut or pasted.