We Keep Coding

fadeIn doesn't work jquery

css
.wrap_result {
background-color: #f0f2f0;
border: 2px solid orangered;
padding: 20px;
position: fixed;
left: 35%;
top: 45%;
width: 400px;
height: 150px;
text-align: center;
display: none;
z-index: 5005;
}
script
$('#removeSelected').click(function (e) {
$('#qty').removeAttr('required');
$('#product_id').removeAttr('required');
var checked = $("input[type=checkbox]:checked").length;
var cboxCount = $('input:checkbox').length;
if (!checked) {
$('.wrap_result')
.text('No selected items')
.fadeIn(3000).fadeOut(3000);
e.preventDefault();
}
]);
When Im trying to remove products with 0 products selected im preventing form submit and informing user about it. Alert works just fine, but this custom window doesn't work :c

I think the problem was the typo, Check this out!
$(function(){
console.log('test')
$('#removeSelected').click(function (e) {
$('#qty').removeAttr('required');
$('#product_id').removeAttr('required');
var checked = $("input[type=checkbox]:checked").length;
var cboxCount = $('input:checkbox').length;
if (!checked) {
$('.wrap_result')
.text('No selected items')
.fadeIn(3000).fadeOut(3000);
e.preventDefault();
}
});
})
.wrap_result {
background-color: #f0f2f0;
border: 2px solid orangered;
padding: 20px;
position: fixed;
left: 35%;
top: 45%;
width: 400px;
height: 150px;
text-align: center;
display: none;
z-index: 5005;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_result">
</div>
<div>
<form method="GET" action="#">
Water: <input type="checkbox" /><br/>
Fire: <input type="checkbox" /><br/>
Qty:<input type="text" id="qty"/><br/>
Product ID:<input type="text" id="product_id" required/><br/>
<button id="removeSelected">Remove</button>
</form>
</div>

How can I add text to a text area at the bottom right of the text area?

I want to show the user how many allowable characters they have left to type, and I would like to place this within the text area, at the bottom right, after a new line; refreshing it after the textarea has changed in anyway. I just need help on placing it in said position.

function countChar(val){
var len = val.value.length;
if (len >= 50) {
val.value = val.value.substring(0, 50);
} else {
$('#charNum').text(50 - len);
}
};
.main{
position: relative;
display: inline-block;
}
.main textarea{
height: 100px;
width: 100px;
resize: none;
}
.main span{
color: coral;
position: absolute;
bottom: 5px;
right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<textarea class="textareatest" onkeyup="countChar(this);"></textarea>
<span id="charNum">50</span>
</div>

You can do someting like this:
<div class="form-block">
<textarea></textarea>
<div class="label"></div>
</div>
And in CSS:
.form-block {
position: relative;
}
.label {
bottom: 5px;
position: absolute;
right: 5px;
}

It can be achieved with something like this.
function count(){
document.getElementById('textarea').onkeyup = function () {
document.getElementById('count').innerHTML = this.value.length;
};
}
.main{
position: relative;
display: inline-block;
}
.main textarea{
height: 100px;
width: 200px;
resize: none;
}
.main span{
color: coral;
position: absolute;
bottom: 5px;
right: 5px;
}
<div class="main">
<textarea id="textarea" onclick="count()"></textarea>
<span id="count">0</span>
</div>

Made This using bootstrap and jquery.
<div style="margin-top:45px; margin-left:45px">
<form>
<div class='row'>
<div class='col-sm-3'>
<div class='textCountContianer'>
<label>Some Text</label>
<div class="count">0/250</div>
<textarea class='form-control' type="text" maxlength="250"></textarea>
</div>
</div>
</div>
</form>
</div>
CSS
.count{
position: absolute;
bottom: 1px;
right: 10px;
color:gray
}
.textCountContianer{
position: relative;
}
JQUERY
$('textarea').keyup(function(e) {
var textlen = $(this).attr('maxlength') - $(this).val().length;
$(this).parent().find('.count').html('<span>'+$(this).val().length+'/'+$(this).attr('maxlength')+'</span>');
});
Demo
https://codepen.io/badevellis/pen/mdwWXLq

Center a div in the page, but it appears at the bottom of the page

I try to set an HTML page to be like this:
(no need for borders in my opinion)
but I got to this:
Here is my jsFiddle
Is there a more UX wize arragment to get a map with legend, title and related radio boxes?
Is there any more elegant way to re-write my css? I saw few were pointing to display: table for centering some divs.
How can I do the followings?
make the header div be shorter
make the whole container in the middle of the page - vertically and horizontally
Here is my CSS:
#container {
height: 600px;
width: 1100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#header {
padding: 50px;
background: #93c4d3;
overflow: hidden;
}
#headerImg,
#headerTitle {
float: left;
padding-left: 60px;
}
#map {
height: 600px;
width: 1100px;
}
div.lowerSection {
overflow: hidden;
}
#radioDiv,
#legend {
float: left;
}
#radioDiv {
padding-left: 60px;
}
#legend {
float: right;
width: 200px;
height: 100px;
border: 5px solid cyan;
}
Here is my HTML:
<div id="container">
<div id="header">
<img id="headerImg" src="images/marker-icon-2x.png">
<h1 id="headerTitle"> My Title </h1>
</div>
<div id="map"></div>
<div id="lowerSection">
<div id="radioDiv">
<select name="dropdown" size=1>
<option value="-1">none</option>
<option value="0">1st alternative</option>
<option value="1">2nd alternative</option>
<option value="2">3rd alternative</option>
<option value="3">4th alternative</option>
</select>
<br/>
<br/>
<input id="startRadio" type="radio" name="marker" value="0" checked="checked"> start
<input id="marker_0" type="text">
<br/>
<br/>
<input id="endRadio" type="radio" name="marker" value="1"> end
<input id="marker_1" type="text">
<br/>
<br/>
<button id="compare_btn" type="button">Beta vs. Prod</button>
</div>
<div id="legend">
<h3>legend:</h3>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="routes.js"></script>-->
<script src="js/leaflet.js"></script>
<script type="text/javascript" src="js/beta_map.js"></script>

for the header div, how about you just fixed its height in css
header{ height:fixed value;}

header can be given a fixed height
#header{ height:60px;}
about centering the whole container..
This Should center the container :-
#container {
height: 600px;
width: 1100px;
position: absolute;
top: 50%;
bottom: 0;
left: 50%;
right: 0;
margin-top: -300px;
margin-left: -550px;
}
Not tested .. but i think should work

Since u have in your header padding just remove it and it will be shortened..As for the container just play with height and width (also you have margin: auto and that will place the container at middle of screen)at the #container{} in css and you should find your preference..Simple :)

Fade out on click isn't working

When I click on the "open" button,it fade out but "navigazione" div doesn't fade in. But If I try to put display: block; on the "navigazione ID" I can see the script working. Obviously I need that the "navigazione id" start with display none. where's the problem?? thank you in advance for your help!
JS
<script>
$(document).ready(function(e) {
$("#close-icon").on('click', function() {
$("#menu-butt").fadeIn();
$("#navigazione").fadeOut();
});
$("#menu-butt").on('click', function() {
$("#menu-butt").fadeOut();
$("#navigazione").fadeIn();
});
});
</script>
HTML
<div id="navigazione"> <div> <div id="button"> ciao </div> </div>
<div class="row menu-butt"><a href="#" id="menu-butt">open<a></div>
<div id="close-icon"><a href="#" id="close-icon">close<a></div>
CSS
#navigazione { height: 100vh;
width:100%;
position: fixed ;
top: 0px;
left: 0px;
background-color: rgba(28,82,23,0.95);
z-index:400;
display: none;
}
#close-icon{ position: fixed;
height: cover;
top: 20px;
right: 30px !important;
z-index: 450 ;
display: none;
}

Is this you are looking for -
$(document).ready(function(e) {
$("#close-icon").on('click', function() {
$("#menu-butt").fadeIn();
$("#navigazione").fadeOut();
});
$("#menu-butt").on('click', function() {
$("#menu-butt").fadeOut();
$("#navigazione").fadeIn();
});
});
#navigazione { height: 100vh;
width:100%;
position: fixed ;
top: 0px;
left: 0px;
background-color: rgba(28,82,23,0.95);
z-index:400;
display: none;
}
#close-icon{ position: fixed;
height: cover;
top: 20px;
right: 30px !important;
z-index: 450 ;
}
close-icon {
color:#000;
}
.menu-butt {
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigazione"> <div id="button"> ciao </div> </div>
<div class="row menu-butt">open</div>
<div id="close-icon">close</div>

IE 9, 10: div structure and events

I have a not so complicated <div> structure, which breaks event handlers in IE < 11 (other major browsers like Chrome and Firefox are working).
<div id="container">
<div id="layer">
<div id="layer1">
<img src="http://sopos.org/olli/blindbild.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" />
</div>
</div>
<div id="controls">
<div id="controller"></div>
<input id="slider" type="range" />
</div>
<div id="thumbnailer">
<img src="http://sopos.org/olli/blindbild-thumb.png" />
<div id="viewArea"></div>
</div>
</div>
These are the registered event handlers:
$(function () {
var stopPropagation = function (e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
}
$('#controller').on('mousedown', function (e) {
console.log('controller mousedown');
});
$('#controls').on('mousewheel', function (e) {
console.log('controls mousewheel');
stopPropagation(e);
return false;
});
$('#thumbnailer').on('click', function (e) {
console.log('thumbnailer clicked');
});
$('#viewArea').on('click', function (e) {
console.log('viewarea click');
stopPropagation(e);
return false;
});
$('#viewArea').on('mousedown', function (e) {
console.log('viewarea mousedown');
stopPropagation(e);
return false;
});
$('#slider').on('change', function (e) {
console.log('slider change');
stopPropagation(e);
return false;
});
});
The main problem seems to be CSS positioning and sizing:
#layer {
position: absolute;
top: -175.813008130081px;
left: -578.615px;
width: 1421px;
height: 875px;
}
#layer1, #layer1 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#controls {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#thumbnailer {
background-color: rgba(150, 150, 150, 0.7);
border: 1px solid rgb(150, 150, 150);
position: absolute;
bottom: 15px;
right: 10px;
width: 200px;
height: 123px;
}
#thumbnailer img {
width: 100%;
height: 100%;
}
#viewArea {
position: absolute;
top: 25px;
left: 81px;
border: 1px solid #f00;
width: 56%;
height: 56%;
}
#controller {
width: 100%;
height: 100%;
}
#slider {
position: absolute;
bottom: 10px;
left: 200px;
}
In IE < 11, any click or mousedown on viewArea remains unhandled; instead, an event on thumbnailer is fired. Similarily, the mousewheel event on controls and the mousedown on controller don't get handled. The mousewheel event get's fired when the cursor is over the slider element, though.
This strange behaviour seems to be rooted in the size of the two images. However, my application needs to display bigger images in a relative small container (hence overflow: hidden set).
I created a fiddle for that.

The problem seems to be that IE < 11 doesn't trigger events on empty <div>. Adding a transparent <img> to the div solves the problem:
<div id="container">
<div id="layer">
<div id="layer1">
<img src="http://sopos.org/olli/blindbild.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" />
</div>
</div>
<div id="controls">
<div id="controller">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width:100%; height:100%;">
</div>
<input id="slider" type="range" />
</div>
<div id="thumbnailer">
<img src="http://sopos.org/olli/blindbild-thumb.png" />
<div id="viewArea">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width:100%; height:100%;">
</div>
</div>
</div>