We Keep Coding

for a particular click remove the tick mark from check box and use red color inside checkbox

If I click third time the small check box should turn into red color and tick mark should not show inside the text box.instead of tick mark inside the check box it should show red color inside the check box.
can you tell me how to fix it.
providing my code below.
https://stackblitz.com/edit/angular-sq2q93?file=app%2Fapp.component.ts
public open(event) {
// attach event to button
this.count = this.count + 1;
console.log('this.count--->' + this.count);
if (this.count % 3 == 0) {
// apply new style
console.log('multiple of 3--->' + this.count);
this.multipleOf3 = true;
}
else {
this.multipleOf3 = false;
}
}

Checkboxes can not be styled. You would need a third party js plugin and there are many available. ( like this one http://icheck.fronteed.com/ )
But if you want to do this yourself it basically involves hiding the checkbox and creating an element and styling that as you want, then you display it or hide it whenever the checkbox is checked or not.
in your case, you can either create an element next to the checkbox, style it and hide it, then display it whenever you add the .multiple-of-3 class,
or simply hide the checkbox in multiple-of-3 class like so ( according to the example you provided in the link ) :
app.component.html
<label [ngClass]="{'is-multiple-of-3':multipleOf3}">
<span id="redSquare"></span>
<input type="checkbox" name="rememberLogin" id="buttonId" (click)="open()"> click me
</label>
app.component.css
/* if you want to create an element on top of the checkbox */
#redSquare{
width: 13px;
height: 13px;
background: red;
display: block;
margin-bottom: -16px;
z-index: 99;
position: relative;
left: 4px;
visibility: hidden;
}
.is-multiple-of-3 #redSquare{
visibility: visible;
}
/* if you want to simply hide it */
.is-multiple-of-3 checkbox{
display: none;
}

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).

Gallery. Display divs corresponding to clicked <li> item. Javascript

I'm trying to build a basic gallery which displays a large image [div] depending on which image is clicked. The thumbnail images are stored in a basic unordered list.
I'm a javascript noob, I could use getElementById to change display class etc but I'd prefer not to have a separate function for each image, of which they're may be 100 or so.
Is there a way to call the same function to display a different div depending on which image is clicked [a larger version of that image]?
So:
If img1 is clicked display divA,
If img2 is clicked display divB,
If img3 is clicked display divC...
Many thanks.

The event passed to the onclick method has a target parameter, which refers to the element that was clicked.
Please post your code, preferably in a working JsFiddle, to get a more targeted answer.
Here is a general example of what you want to achieve:
document.onclick = function(e) {
// e.target is the img that was clicked, display the corresponding div
// Get the image number from the id
var number = e.target.id.substr(3)
// Display the corresponding div
document.getElementById('div' + number).style.visibility = 'visible';
}
Please note that the last line will most likely be different in your implementation - I don't know how you are displaying these divs.

You could try as follows
Assign id to all images in such a manner when they will be clicked we
could generate the corresponding div's id with some logical
manipulation.
Such as
images would have id like img_divA,img_divB and when they will be clicked , get there id and do some stuff like substring and you will get divA , divB and so on .. Finally show that by javascript ..

You could do something like this. Here actually a function is created per clickable dom element, but they are programmatically created. I use the num attribute to make the correspondence between the images to show and the images to click but there is many other (good) ways to do it.
// retrieve the divs to be clicked
var toClicks = document.querySelectorAll(".img-to-click");
[].forEach.call(toClicks, function(node){
// retrieve the target image
var num = node.getAttribute("num");
var target = document.querySelector(".img-to-show[num=\"" + num + "\"]");
// create the click listener on this particular dom element
// (one of the image to click)
node.addEventListener('click', function(){
// hide any currently displayed image
var current = document.querySelector(".img-to-show.shown");
if(current) current.classList.remove("shown");
// set the new current
target.classList.add("shown");
});
});
#to-display {
position: relative;
width: 100%;
height: 50px;
}
#to-click {
position: relative;
margin-top: 20px;
}
.img-to-show {
position: absolute;
width: 100%;
height: 100%;
display: none;
}
.img-to-show.shown {
display: block;
}
.img-to-click{
display: inline-block;
background-color: gray;
width: 50px;
color:white;
text-align: center;
line-height: 50px;
vertical-align: middle;
height: 50px;
cursor:pointer;
}
<div id="to-display">
<div class="img-to-show" num="1" style="background-color:blue;"></div>
<div class="img-to-show" num="2" style="background-color:red;"></div>
</div>
<div id="to-click">
<div class="img-to-click" num="1">1</div>
<div class="img-to-click" num="2">2</div>
</div>

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();
}

Css not rendering properly after the script call

I am currently using two accordion bars where both have two different colours rendering when they are clicked.First one shows a green color.Functionality is to toggle the information needed down the bar when clicked on it.
Clicking again it should toggle back all the information rendering a different colour,for which i am using a java script for the toggle to happen. Previously we used to used three different images for this bar wheres as now,I need to remove the images.
As you can see in my .xhtml file a section-middle will be used as a primary bar and all the color attributes and moz-tool kit to make it rounded are declared in my CSS file.I am using moz-tool kit and jquery rounded corners to make my accordion corners rounded both in IE and mozilla.Its working charmingly in mozilla but in IE its not rendering the color for the bar when i click on it,the toggling operation is working properly as i can see the information in the bar popping up and down when i click on it.
My only problem is with the color of the bar as it is not rendering properly when its clicked on it.It stays the same green color even after the click.When i remove moz-took kit its working fine but with out rounded corners.I am unable to figure out the problem whether it is with java script or CSS.This is my java script and css and my xhtml file.is there any solution for this.Do i need to make any code change in my script?The rest of the site i am able to populate this bar perfectly.but seems like problem is coming when i use a script.
css for first green bar
#layout-container .section-open .section-middle {background-color:#99CC33;}
#layout-container #layout-detail .columns .section-middle { width: 624px; }
#layout-container #layout-detail .columns .section-open .section-left, #layout-container #layout-detail .columns .section-open .section-right, #layout-container #layout-detail .columns .section-closed .section-left, #layout-container #layout-detail .columns .section-closed .section-right {
float: left;
height: 20px;
margin: 0;
padding: 0;
width: 6px;
-webkit-border-radius: 7px;-moz-border-radius: 7px
}
css for second bar
#layout-container #layout-detail .section-closed .section-middle{background-color:#efe8dc; background-image: url(../../images/icons5.png); background-repeat:no-repeat; background-position: 612px -1392px;-webkit-border-radius: 7px;-moz-border-radius: 7px;}
my xhtml
<ui:fragment rendered="#{current.index le 8 or current.last}">
<div class="columns">
<div
class="#{current.first ?'faq-accordion section-open' : 'faq-accordion section-closed'}">
<span class="section-middle">
<h2>
<h:outputText value="#{priority.statementDescription}" />
</h2> </span>
my script
$('.faq-accordion').live("click", function() {
$(this).next('.content-toggle').toggle();
// $('.show-all').show();
// $('.hide-all').hide();
if ($(this).hasClass('section-closed')){
$(this).addClass('section-open');
$(this).removeClass('section-closed');
}
else
{
$(this).addClass('section-closed');
$(this).removeClass('section-open');
}
var total = $('.faq-accordion').length;
var open = 0;
for (i=0; i<total; i++) {
if($('.faq-accordion').eq(i).hasClass('section-open')){
open = open + 1;
}
}
if (total != open) {
$('.show-all').show();
$('.hide-all').hide();
}
else {
$('.hide-all').show();
$('.show-all').hide();
}
})
$('.show-all').click(function(){
$('.content-toggle').show();
$('.content-toggle').prev('div').addClass('section-open');
$('.content-toggle').prev('div').removeClass('section-closed');
$(this).hide();
$('.hide-all').show();
return false;
});
$('.hide-all').click(function(){
$('.content-toggle').hide();
$('.content-toggle').prev('div').addClass('section-closed');
$('.content-toggle').prev('div').removeClass('section-open');
$(this).hide();
$('.show-all').show();
return false;
});

Try this:
-webkit-border-radius: 7px !important;-moz-border-radius: 7px !important;
I have used your code and !important fixed the issue.