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

Check textarea or input have some special word in need

I want to make a coding area for my website,and I need to make it having color coded(syntax highlighting),and I Google so hard,but I still can't find the right answer for me, and here is my code now.
And I'm using Jquery
HTML:
<textarea class="CodeArea codingground">
<div class="HelloMate">
</div>
</textarea>
JS:
$(function(){
$('.CodeArea.codingground').on('input',function(){
var code = $(this).val();
if (code.indexOf('class')>=0) {
$( "textarea:contains('class')" ).css( "color", "red" );
}
});
});

This is not possible with a textarea.
You can use the <code> tag in conjunction with the contenteditable attribute. Some Javascript and you'll get what you want, even though you should consider to use a library for stuff like that.
var text = jQuery('code').text();
text = text.replace('class', '<span style="color: red">class</span>');
jQuery('code').html(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code contenteditable="true">
class Blubb() {
}
</code>

Insert text before link

I've this code
$( "test" ).insertAfter( ".mdr" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="mdr">HEllow</span>
I want to insert text (no within a div or p) **after the **span****.
I try this but it does not work.
Thanks for the help !

You need after():
$(".mdr").after("<div>Hey</div>");
DEMO

$( ".mdr" ).after( "Test" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="mdr">HEllow</span>

You'd want to use after() in this case.
For example: $(".mdr").after("Hello")
Read more about the after() method here: http://api.jquery.com/after/.
See it in action: JSFiddle.

There are a bunch of ways you could do this, but here are 2 examples:
1. Use the CSS selector :after and add the class with jQuery:
HTML:
<span class="mdr">Hello</span>
JS:
$( ".mdr" ).addClass('textAfter');
CSS:
`.textAfter:after {
content: 'Text';
display: block;
font-size: 20px;
}`
I set up a code pen that shows how to use this with jQuery...
2. Use the jQuery html property: $( ".mdr" ).html( "<span>Hello</span>, my text here." );

Append text to text area with jquery issue

Im trying to make some buttons append text to a textarea with jquery, and I have it working, but only if I dont type anything into the textarea itself.
Code:
<textarea name="comments" id="comments" rows="20" style="margin-left: 0px; margin-right: 0px; width: 968px;"></textarea>
<div>
<button>+petname</button>
<button>+lastvisit</button>
<button>+nextvisit</button>
</div>
<script>
$( "button" ).click(function() {
var text = $( this ).text();
$('#comments').append(text);
});
</script>
This code is working, but the minute I type something else into that text area, the buttons no longer work??? WHY!!?? I just cant figure it out.
Much thanks.
Jason

Instead of doing append set val using its function argument syntax, do this way:
$('#comments').val(function(_, val){
return val + text;
});
Demo

change
$('#comments').append(text);
to
$('#comments').val( $('#comments').val() + " " + text );

How to get the value with getElementById in a class and use it in a different class

<body>
<div class="container">
Input
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="getString" placeholder="Enter some string">
</div>
<button type="button" class="btn btn-primary" id="nowBtn">Now</button>
</form>
<br/>
<br/>
All Headings<textarea class="form-control" rows="6"></textarea>
</div>
</body>
I am using bootstrap and I will give some string in the form, when the Now button is pressed.
I should get the <h1> tag of that string in the textarea (i.e <h1>some string</h1> in the textarea with applied <h1> tag ).
Is it achievable? I want to use jQuery.

From your comments I've understood you'd like to set the font-size in the textarea to same size as h1 tag would have.
Since there's no h1 tag in your HTML, you need to create a one in the click event handler function of the #nowBtn:
var header = document.createElement('h1'),
size = window.getComputedStyle(header, null).fontSize; // Depending used browser and CSS, this returns for example 32px
Then you can set the font-size of textarea like this:
$('textarea').css('font-size', size);
A live demo at jsFiddle.
EDIT
As bfavaretto has mentioned, a cross-browser way would be to use jQuery to get the size of the h1:
size = $(header).css('font-size');

Have a look at this fiddle - it might be what you want.
http://jsfiddle.net/Nj7pj/
$(document).ready(function () {
$('.btn-primary').on('click', function () {
inputVal = $('#getString').val();
newTextAreaVal = "<h1>" + inputVal + "</h1>";
$('textarea').val(newTextAreaVal);
});
});

I think you can do
var h1 = $("h1.classYouWant");
$(".form-control").val( "<h1>" + h1.text() + "</h1>" );
if is dynamic the header (h1 or h2 or h3 )
you can do
var header = $(".classYouWant").get(0);
$(".form-control").val( header.outerHTML );