We Keep Coding

Hide div depending on variable response

I'm trying to build a tube status site, the idea is to display the status of each tube line (good service, minor delays etc)
At first I wanted to display all, and to colour code the responses, so everything but "good service" would be red text.
Instead what I'd like to do is hide the entire div if it is a good service. Meaning you'd only see the tube lines that don't have a response of "Good Service"
I have the same code for each tube line, but just showing 1 example below
Here is the javascript
$.getJSON ('https://api.tfl.gov.uk/Line/central/Status?
detail=false&app_id=APIID&app_key=APIKEY',
function(data) { console.log(data);
$.each(data, function (index, value) {
console.log(value);
var statuscentral = value.lineStatuses[0].statusSeverityDescription;
console.log(statuscentral);
$('.statuscentral').text(statuscentral);
if (statuscentral != "Good Service") {
tube.classList.add("noShow");
}
});
});
Not sure if it helpful to include, but here is the html
<div class="tube">
<span class="central"></span>
<h2 class="tube-title">Central</h2>
<h3 class="statuscentral"></h3>
</div>
And is the css
/* create 3 equal columns that floats next to each other */
.tube {
float: left;
width: 33%;
padding-bottom: 50px;
display: inline-block;
}
/* styles for tube span */
.central {
background-color: #ED462F;
}
/* hides div */
.noShow {
display: none;
}

One solution would be to create a CSS class that hides the divs.
.noShow{display: none;}
And then you can use the classList.add function to give the div that class based on your logic
if(statuscentral != "Good Service"){
tube.classList.add("noShow");
}

How to Center Text in a JavaScript Function?

I have a JavaScript function that displays text based on input in a text field. When a value is entered into the text field, my program will check to see if the value is correct. If it is correct, my program displays, "You are correct!" and if it is incorrect, my program displays, "Try again!"
The text field and button are both centered horizontally on the page, but I cannot figure out how to center the "You are correct!" and "Try again!"
I feel like I have tried everything, but obviously I haven't, considering I can't get it to work.
Here is the code for my JavaScript function:
<center><p>Can you remember how many books I listed at the bottom of the page?</p></center>
<center><input id="numb"></center>
<center><button type="button" onclick="myFunction()">Submit</button></center>
<p id="demo"></p>
<div class="jsFunction">
<script>
function myFunction()
{
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than five or greater than five
if (isNaN(x) || x < 5 || x > 5)
{
text = "Try again!";
}
else
{
text = "You are correct!";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</div>
Here is the CSS code for the function:
.jsFunction
{
margin-left: auto;
margin-right: auto;
}
This specific CSS code is only one of many, many attempts I have made at centering the text in the function.
Here is a link to a picture that will show you the problem I am having:
http://i.stack.imgur.com/Hb01j.png
Please help!

Try setting a class on the p tag that contains text-align: center;
Edit
Nesting your script in a div is meaningless as script tags don't get rendered
You can either target #demo in your css (for the text alignment) or add a class align-center that contains the correct style.
I would recommend the latter as the becomes more reusable, whereas you can't reuse an id on the same page

The fact that you are using JavaScript isn't important to this question. I mention it because of the title "How to Center Text in a JavaScript Function" and your attempt to center the actual script element containing your JavaScript code.
You want to center the contents of an element that happens to be controlled by JavaScript, but the answer is CSS-only.
As Ryuu's answer mentions, text-align: center will do the job for (you guessed it) text and other inline-level content.
You should not use the deprecated center tag.
Your attempt to use margins will center something if you apply it to the correct element and the element has a width. That "something" is the element, however, not the contents of the element.
In other words, margin can be used to align the box, not the stuff within the box.
Example 1: centers the element, but the text is still left-aligned.
Example 2: centers the element and its inline-level contents.
.margin-example1 {
width: 200px;
background-color: #ddd;
/* shorthand for margin: 0 auto 0 auto, which is shorthand for specifying each side individually */
margin: 0 auto;
}
.margin-example2 {
width: 200px;
background-color: #aaccee;
margin: 0 auto;
/* we still need this to get the desired behavior */
text-align: center;
}
<div class="margin-example1">Example 1</div>
<div class="margin-example2">Example 2</div>
So how about a text input? Browsers usually style inputs as display:inline-block. This means we can center something inside them (Examples 1 & 2), but to center them within their container we need to change to display:block (Example 3) or because they are inline-like elements themselves, we can set text-align on the parent container (Example 4), see also.
.example1 {
width: 100%;
text-align: center;
}
.example2 {
width: 200px;
text-align: center;
}
.example3 {
display: block;
width: 200px;
text-align: center;
margin: 0 auto;
}
.example4 {
width: 200px;
text-align: center;
}
.example4-parent {
text-align: center;
}
<div>
<input type="text" value="Example 1" class="example1">
</div>
<div>
<input type="text" value="Example 2" class="example2">
</div>
<div>
<input type="text" value="Example 3" class="example3">
</div>
<div class="example4-parent">
<input type="text" value="Example 4" class="example4">
</div>
Layout in CSS can be complicated, but the basics aren't hard.
Note that I have over-simplified my explanation/definitions a bit (you can read all about the formatting model when you are ready).

Send the elements of a div to another div

I have images of different heights, and I want to place them into a tiled gallery just like the image below is demonstrating:
However, I also want it to be repressive, so my approach to make this work was as follows:
1) Using HTML I created three divs, #grid1, #grid2 and #grid3. And the images are placed inside these 3 grids in anther div that has class .gridElement which contains the images.
<!--Grid System-->
<div id="grid1">
<!--Grid 1-->
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
</div>
<div id="grid2">
<!--Grid 2-->
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
</div>
<div id="grid3">
<!--Grid 3-->
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
</div>
<!--/Grid System-->
2) Here is the CSS using Media Query:
/*Grid System*/
#grid1,#grid2,#grid3 {
width: 33.333%;
float: left;
}
#grid1 {
padding-right: 20px;
}
#grid2 {
padding: 0 10px;
}
#grid3 {
padding-left: 20px;
}
/*Gird Elements*/
.gridElement {
margin-bottom: 30px;
overflow: hidden;
}
#grid1 .gridElement:last-of-type,
#grid2 .gridElement:last-of-type,
#grid3 .gridElement:last-of-type {
margin-bottom: 0;
}
#grid1 img,#grid2 img,#grid3 img {
width: 100%;
}
and
#media screen and (max-width: 1024px) {
/*Grid System*/
#grid1,#grid2,#grid3 {
width: 50%;
}
#grid3 {
display: none;
}
}
and
#media screen and (max-width: 770px) {
/*Grid System*/
#grid1,#grid2,#grid3 {
width: 100%;
}
#grid1,#grid2,#grid3 {
padding: 0;
display: block;
}
#grid1 .gridElement:last-of-type,
#grid2 .gridElement:last-of-type {
margin-bottom: 30px;
}
and
#media screen and (max-width: 500px) {
/*Grid System*/
.gridElement {
margin-bottom: 20px;
}
#grid1 .gridElement:last-of-type,
#grid2 .gridElement:last-of-type {
margin-bottom: 20px;
}
They theory: When the screen size is above 1024px it will show three grids by default. However when the screen size is below 1024px and above 770px using CSS #grid3 is hidden and using JavaScript I am trying to send all of the .girdElements that are inside #grid3 equally to #grid1 and #grid2. When the screen size is below 770px, everying will go back to normal and all the grids will be shown.
The problem? I have managed to get everything working BUT the JavaScript - please can anyone help me to create a function that will send all the .girdElements that are inside #grid3 equally to #grid1 and #grid2 when the screen size is below 1024px and above 770px? "on load, and on resize".

You can use masonry to achieve similar effect. It uses absolute positioning instead of fixed amount of columns. Anyway, it looks the same and adapts to the screen width.

You could try something like this:
var toggle = true;
$('#grid3').children('.gridElement').each(function (index) {
if (toggle) {
$('#grid1').append($(this));
toggle = false;
} else {
$('#grid2').append($(this));
toggle = true;
}
Here is a working example on JSFiddle, sorting elements inside the grids

This solution is better with jQuery, but there are ways to compute actual height of elements.
First, you should mark each item in grid1, grid2, grid3 as belonging to their corresponding grid, e.g. by using a class or data. Then, a kind of "chronology" value that stores the "order" for each item.
If you want all items in grid3 to be appended to grid1 and grid2, you could apply the following algorithm:
Get the items in grid3, sorted by the field. data value, etc. criteria you specified before.
For each item:
a. Compute width of grid1 and compare it to grid of grid2.
b. If grid2 is taller, append the item to grid1. Otherwise append it to grid2.
The column grid3 will be hidden.
A recommended approach is using jQuery to evaluate the .height() of grid1 and grid2, and move the elements.
To go back to a 3-col layout, just take the items with grid3 marker and put them back in grid3, ordered by the chronology value.
(damn, still messing with markdown. please if an editor can help me...)
Try this sample code (not including th fact about sorting criteria - not guaranteed to be flawless - it's just to illustrate the idea):
var grid1 = $("#grid1");
var grid2 = $("#grid2");
var grid3 = $("#grid3");
//compressing - distributing grid3 between grid1 and grid2
function compress()
{
grid3.hide();
$(".item-in-grid3").each(function(i, e){
//never assign "width:" to any grid (1, 2, 3) in css, so it can
//be dynamic and compute height and compare them on each iteration.
if (grid1.height() > grid2.height())
{
$(this).appendTo(grid2);
}
else
{
$(this).appendTo(grid1);
}
});
}
//return back the elements to grid3
function decompress()
{
$(".item-in-grid3").each(function(i, e){
$(this).appendTo(grid3);
});
grid3.show();
}

Automatically resize text area based on content [duplicate]

This question already has answers here:
Creating a textarea with auto-resize
(50 answers)
Closed 8 years ago.
On one of my pages, I have a text area html tag for users to write a letter in. I want the content below the text area to shift down, or in other words, I want the text area to resize vertically with each line added to the text area and to have the content below simply be positioned in relation to the bottom of the text area.
What I am hoping is that javascript/jquery has a way to detect when the words wrap, or when a new line is added and based on that do a resize of the text area container.
My goal is to make the content below the text area stay the same distance from the bottom of the text no matter how much a user writes.
The text area creates a scroll bar when the text overflows.

Since I wasn't too happy with several solutions I found on the web, here's my take on it.
Respects min-height, max-height.
Avoids jumping around and flashing the scrollbar by adding a buffer to the height (currently 20, may replace by line-height). However still shows scrollbar when max-height is reached.
Avoids resetting the container scroll position by incrementally reducing the textarea height instead of setting it to 0. Will thusly also remove all deleted rows at once. Works in IE and Chrome without browser sniffing.
http://jsfiddle.net/Nd6B3/4/
<textarea id="ta"></textarea>
#ta {
width:250px;
min-height:116px;
max-height:300px;
resize:none;
}
$("#ta").keyup(function (e) {
autoheight(this);
});
function autoheight(a) {
if (!$(a).prop('scrollTop')) {
do {
var b = $(a).prop('scrollHeight');
var h = $(a).height();
$(a).height(h - 5);
}
while (b && (b != $(a).prop('scrollHeight')));
};
$(a).height($(a).prop('scrollHeight') + 20);
}
autoheight($("#ta"));

http://www.jacklmoore.com/autosize/
Download the plugin first:
Step 1: Put "jquery.autoresize.min.js" where you keep your jquery plugins.
Step 2: Link the file in HTML -> <script src="jquery.autosize.min.js" type="text/javascript" ></script> Be sure that this link comes after your jquery link, and before your own javascript/jquery code links.
Step 3: In your javascript code file simply add $('#containerToBeResized').autosize();

$('textarea').keyup(function (e) {
var rows = $(this).val().split("\n");
$(this).prop('rows', rows.length);
});
this work sample.

See this Fiddle from this answer. That increases the height of the textarea based on the number of lines.
I think that's what you're asking for.
Copied the code from the answer below:
HTML
<p>Code explanation: Textarea Auto Resize</p>
<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>
JS
/*global document:false, $:false */
var txt = $('#comments'),
hiddenDiv = $(document.createElement('div')),
content = null;
txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');
$('body').append(hiddenDiv);
txt.on('keyup', function () {
content = $(this).val();
content = content.replace(/\n/g, '<br>');
hiddenDiv.html(content + '<br class="lbr">');
$(this).css('height', hiddenDiv.height());
});
CSS
body {
margin: 20px;
}
p {
margin-bottom: 14px;
}
textarea {
color: #444;
padding: 5px;
}
.txtstuff {
resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
overflow: hidden;
}
.hiddendiv {
display: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}
/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
width: 500px;
min-height: 50px;
font-family: Arial, sans-serif;
font-size: 13px;
overflow: hidden;
}
.lbr {
line-height: 3px;
}

Button auto size in Jquery Mobile

I am developing a jquery/PhoneGap application. I have been trying hard to get the buttons behave the way I want to. In short I am trying to achieve the following:
I put a set of six Jquery-Mobile buttons (mini, normal or button-group).
The above set needs to be in one horizontal line so I have put them in a div.
The numbers of buttons and its text dynamically changes, so I need a CSS/JS trick that allows me to resize the button size and text based on the div/screen size. When I started with Jquery mobile (two weeks ago), I thought that this will be a basic functionality :) but alas !
Some code that I am trying right now is:
//TO CREATE BUTTONS
for(var button_id=0; button_id < window.g_maxLength/2; button_id++){
var bt_id= "<button class =\"tile\" data-theme=\"e\" data-inline=\"true\" data-mini=\"true\" id =\"button_tid"+button_id+"\";>.</button>";
$("#buttoncontainer1").append($(bt_id));
}
//HTML
<div id="tiled" align="center">
<div data-role="controlgroup" data-type="horizontal" id="buttoncontainer1">
<!-- Button will be added by JS-->
</div>
</div>
//CSS
#tiled {
align:center;
height:23%;
position:absolute;
text-align :center;
padding: 1px;
width:90%;
top:73%;
margin-right:4%;
margin-left:4%;
background-color:#b0e0e6;
border-radius: 10px;
border-width: 3%;
border-style:double;
Right now what I have is works fine on small screen devices, but as soon as I open my app in large screen device the buttons look very small with lot of empty spaces. Any help here will be appreciated !!
PS: Also used media queries - but they somehow do not work on jquery-mobile.
#media (min-width: 500px) {
html { font-size: 120%; }
}

Here's a workaround for auto-adjust width and font-size of buttons.
Demo: http://jsfiddle.net/Palestinian/UYa4Y/
// Number of buttons
var buttons = $('[data- role=controlgroup]').find('a').length;
// Parent div width
var btn_width = $('#tiled').width() / buttons;
// Remove left/right button padding
$('.ui-btn-inner').css({
'padding-left': 1,
'padding-right': 1
});
// Set button new width
$('.ui-btn-inner').width(btn_width - 4);
// Adjust font-size for each button based on text
$('.ui-btn-text').each(function () {
while ($(this).width() > $('.ui-btn-inner').width()) {
var font = parseFloat($(this).css('font-size')) - 1 + "px";
$(this).css('font-size', font);
}
});