Develop Reference

CSS/JS keep DIV hidden as default and open on click

I have a simple emoji picker and the ballon remains open as default when the page is refreshed, I can't find a way how to keep it close and only open the ballon when pressing a button.
HTML
<div class="container">
<div class="emoji-btn open"><img src='images/smileys.png' title='Smileys'>
<!--this is the div I want to keep hidden till I click the button > --> <div class="emoji-popup">
<div class="emoji-wrapper"></div>
</div>
</div>
</div>
JS
emojibtn.addEventListener("click", function (e) {
e.stopPropagation();
this.classList.toggle("open");
});
document.body.addEventListener("click", function () {
emojibtn.classList.remove("open");
});
CSS
.emoji-popup {
position: absolute;
top: -140px;
left: 10px;
height: 130px;
width: 194px;
background: #999;
border-radius: 2px;
text-align: left;
overflow-y: auto;
opacity: 0;
pointer-events: none;
transition: all 0.25s;
box-sizing: border-box;
}
.emoji-wrapper {
overflow: hidden;
padding: 10px;
box-sizing: border-box;
}
.emoji-popup .emoji-img {
margin: auto;
width: 30px;
height: 30px;
text-align: center;
border-radius: 5px;
}
.emoji-popup .emoji-img:hover {
background: rgba(0, 0, 0, 0.25);
}

You can add the property display: none; ( https://developer.mozilla.org/en-US/docs/Web/CSS/display), visibility: hidden(https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) or opacity: 0; (https://developer.mozilla.org/en-US/docs/Web/CSS/opacity). Then onClick you can add the class open with the properties display: block (if it's a div), visibility: visible or opacity: 1.

Whatsapp active chat list item animation

I was wondering if there is an easy way of creating the animation, similar to Whatsapp one.
When you are on chat screen and go back to chat list, an active element is highlighted gray for a moment (so it shows which chat was opened before).
Is there not complicated way of doing this in JS or CSS? Hopefully most of you guys know what I'm talking about. Unfortunately can't find any examples in the net...

Here is a example of how you could achieve the effect, but with no more details on your project i can't do more.
var li = $('li');
var messages = $('.messages');
var close = $('.close');
li.on('click', function(){
$(this).addClass('active');
messages.addClass('active');
});
close.on('click', function(){
messages.removeClass('active');
li.removeClass('active');
});
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.info {
margin-bottom: 20px;
padding-left: 15px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background: #ececec;
padding: 10px;
border-bottom: 2px solid black;
cursor: pointer;
transition: background .2s .3s;
}
li.active {
background: gray;
transition: background .3s;
}
.messages {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
transition: transform .3s;
transform: translateX(100%);
padding: 20px;
}
.messages.active {
transform: translateX(0);
}
.close {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
position: absolute;
right: 70px;
top: 30px;
background: black;
color: white;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
}
.close:hover {
opacity: .7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="info" >Click on a person, and close the discussion by clicking on the "X" to see the effect.</p>
<ul>
<li>Bob</li>
<li>Steven</li>
<li>Marie</li>
<li>Marc</li>
<li>Jack</li>
<li>Edouardo</li>
</ul>
<div class="messages">
A lot of messages bla bla ...
...
<span class="close">X</span>
</div>

Artboard Style Layout Using CSS Transform Scale

I'd like to have the .container and .box scale in and out from the one I clicked on. The problem I'm running into is when I scale in and out, it scales in and out from the first .box div, not the one I clicked on.
Each .box will contain it's own unique content, so when viewing this in "Artboard" view (Zoomed Out), I want people to be able to see what's contained in that particular .box. When people click on one of the boxes, I want it to scale back to (1) to cover the viewport. And if the person is on the 4th .box and they click "Zoom Out", I want it to zoom out from that particular .box.
Each box will be the size of the viewport, which is how it's set up now.
Does anyone have a solution in CSS only? Or is this something that can be better accomplished in JS? I'm not a JS expert, I'm just getting into it, so I'm curious if there's something I can do in some simple JS.
Please see my codepen:
http://codepen.io/jareko999/pen/eZGLZB
HTML
<div class="bar">
<button class="zoomout" onclick="zoomOut()">Zoom Out</button>
</div>
<div class="container">
<div class="artboard">
<div class="box">
<i class="fa fa-diamond"></i>
</div>
<div class="box">
<i class="fa fa-bolt"></i>
</div>
<div class="box">
<i class="fa fa-flag"></i>
</div>
<div class="box">
<i class="fa fa-flask"></i>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
background: #e1e1e1;
overflow-y: hidden;
}
.bar {
position: fixed;
display: flex;
flex-direction: row;
box-sizing: border-box;
bottom: 0;
width: 100%;
height: 80px;
background: white;
padding: 14px 0;
z-index: 1;
}
.zoomout {
-webkit-appearance: none;
border: none;
outline: 0;
width: 100px;
height: 40px;
margin: auto;
background: black;
color: white;
border-radius: 10px;
cursor: pointer;
}
.container {
height: 100vh;
width: 100%;
transition: .2s ease-out;
transform: scale(1);
}
.container-small {
height: 100vh;
width: 100%;
transition: .2s ease-out;
transform: scale(.7);
}
.artboard {
height: 100%;
width: 100%;
display: flex;
display: -webkit-flex;
background: #e1e1e1;
}
.box {
padding-top: 44vh;
box-sizing: border-box;
text-align: center;
flex-shrink: 0;
width: 100%;
height: 100%;
box-shadow: 0 2px 4px #a9a9a9;
background: linear-gradient(to right, #276cd6 , #00a651);
transition: .2s ease-out;
transform: scale(1);
}
.box-small {
padding-top: 44vh;
box-sizing: border-box;
text-align: center;
flex-shrink: 0;
width: 100%;
height: 100%;
box-shadow: 0 2px 4px #a9a9a9;
background: linear-gradient(to right, #276cd6 , #00a651);
transition: .2s ease-out;
transform: scale(.9);
cursor: pointer;
}
.box i {
color: #e1e1e1;
font-size: 3em;
}
.overflow {
overflow: hidden;
}
.remove {
display: none;
}
::-webkit-scrollbar {
width: 12px;
height: 4px;
}
/* Track */
::-webkit-scrollbar-track {
background: white;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 100px;
border-radius: 100px;
background: #4099ff;
}
JS
$(document).ready(function() {
$('.container').addClass('overflow');
});
function zoomOut() {
$('.bar').addClass('remove');
$('.box').addClass('box-small');
$('.container').removeClass('overflow');
$('.container').addClass('container-small');
}
$('.box').click(function() {
$('.bar').removeClass('remove');
$('.box').removeClass('box-small');
$('.container').addClass('overflow');
$('.container').removeClass('container-small');
});

What you're trying to achieve can be done using a CSS only method.
This method relies on using location hashes (url.com#foobar) and the :target pseudo selector.
The :target pseudo selector allows you to target the element which has the id matching the location hash. For example, imagine you have an element with the id "foobar", the #foobar:target selector will only apply if you have navigated to url.com#foobar. You can create a link with the href attribute pointing #foobar to have a button trigger this pseudo selector.
In your case, you can apply the zoom out styles when the #container location hash is matched, and only show the slide matched by the location hash.
The drawback of this method is that you have to add ids, and add links to actually trigger the :target pseudo class.
My explanation might not be clear, so I put up this demo:
http://codepen.io/ntim/pen/ONxGJd

Possibly better way to code this hacky toggle button?

I have a toggle button that has been coded up, but I dont think its good to use in my form, since its a pretty bad hacky code to select either option.
Is there a better/efficient way to code this toggle button instead? I am not good with jQuery, so any help with provided functionality would be helpful.
If there is also a way of programming it to slide the toggle left/right instead of clicking left/right would be great also.
I have also attached these images to show the behaviour of how it should function:
toggle behaviour diagram
current html file(below) button look for left/right toggle buttons
Any questions, please ask...
<html>
<head>
<style>
#toggle-slide {
border: 4px #303F9F solid;
border-radius: 5px;
display: flex;
width:300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
}
#toggle-slide div {
flex:1;
padding: 10px 20px;
}
#toggle-option-0 {
background-color:#3F51B5;
}
#toggle-option-1 {
background-color:white;
}
</style>
<script>
function toggle() {
realToggle = document.getElementById('real-toggle');
if (realToggle.value == 0) {
realToggle.value=1;
document.getElementById('toggle-option-0').style.backgroundColor='#3F51B5';
document.getElementById('toggle-option-1').style.backgroundColor='#FFF';
} else {
realToggle.value=0;
document.getElementById('toggle-option-0').style.backgroundColor='#FFF';
document.getElementById('toggle-option-1').style.backgroundColor='#3F51B5';
}
}
</script>
</head>
<body>
<div id='toggle-slide' onclick='toggle()'>
<div id='toggle-option-0' class='active'>Private</div>
<div id='toggle-option-1'>Public</div>
<input id='real-toggle' type=hidden name=private value=1 />
</div>
</body>
</html>

A pure CSS version:
On the following snippet there's a hidden checkbox that becomes checked/unchecked when the content in label is clicked. Using the CSS :checked selector, the #background position is changed from 0% to 50% and it's color changes from red to blue.
The background is separated from the text and set with position:absolute (to be easily moved) plus z-index:-1 (which brings it to behind the subtitles). A CSS transition added on the #background animates the changes on it's position/color.
.toggle-slide {
border: 4px #555 solid;
border-radius: 5px;
display: flex;
width: 300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
position: relative;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
}
.toggle-slide .subtitle {
flex: 1;
padding: 10px 20px;
}
#background {
width: 50%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
background-color: tomato;
-webkit-transition: all 0.6s; /* Safari */
transition: all 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.2,1);
transition-timing-function: cubic-bezier(0.2,1,0.2,1);
}
input[type=checkbox] {
display: none;
}
#real:checked ~ label #background {
background-color: skyblue;
left: 50%;
}
<input id=real type=checkbox name=real />
<label class=toggle-slide for=real>
<div id=background></div>
<div class=subtitle>Private</div>
<div class=subtitle>Public</div>
</label>

You can do this completely in pure css, but since you were asking for jQuery...
$(document).ready(function() {
$('.input-button').click(function() {
if ($('.public').hasClass('selected')) {
$('.public').removeClass('selected');
$('.private').addClass('selected');
$('.slider').stop().animate({
left: '48%'
}, 200);
} else {
$('.private').removeClass('selected');
$('.public').addClass('selected');
$('.slider').stop().animate({
left: '2%'
}, 200);
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.input-button {
width: 200px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -20px;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #2E86AB;
border-radius: 4px;
line-height: 40px;
font-family: sans-serif;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
span {
width: 50%;
height: 100%;
float: left;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
.input-button div {
width: 100px;
height: 85%;
top: 50%;
left: 2%;
transform: translateY(-50%);
position: absolute;
background-color: #FFF;
border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-button'>
<div class='slider'></div>
<span class='private'>Private</span>
<span class='public selected'>Public</span>
</div>

Here is a good example of what you were trying to create
jQuery on-off-switch.js Plugin
It also implemented with jQuery and supports the sliding on drag functionality.
How to use the plugin

Align list item images to center in html

I'm learning web development with responsive design(still a noob) so please go easy! I will try to be as thorough as possible but please let me know if you need more information!
So I'm trying to design a page which has jquery hover effects on images. You would think I'm having trouble in the JS but my problem is much simpler which makes it frustrating like hell. I want my images to align in the center while they're aligned to the extreme left. the image boxes are li's and I've tried to add them to a div and align the div to the center.
Please note that I also need it to be responsive so can't simply add a margin or padding.
Following is my html body:
<body>
<div class="body">
<div> <img src="images/logo.png" class="image"></div>
<div class="imgs">
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
</li>
<li>
<a href="http://dribbble.com/shots/501695-Cornwall-Map">
<img src="images/9.jpg" />
<div><span>Cornwall Map by Katharina Maria Zimmermann</span></div>
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function() {
$(' #da-thumbs > li ').each( function() { $(this).hoverdir({
hoverDelay : 75
}); } );
});
</script>
</body>
Here is my CSS:
.body {
width: 100%;
height: 1000px;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
text-align: center;
}
#keyframes colorChange {
0% {
background: #4BB4BF;
}
20% {
background: #306F7A;
}
40% {
background: #207DFF;
}
60% {
background: #1B98E0;
}
80% {
background: #7EA0E0;
}
100% {
background: #4BB4BF;
}
}
.button {
padding: 10px;
margin-top: 40px;
font-size: 20px;
}
.da-thumbs {
list-style: none;
width: 100%;
height: 100%;
position: relative;
margin: 20px auto;
padding: 0;
}
.da-thumbs li {
float: left;
margin: 5px;
background: #fff;
padding: 8px;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
display: block;
position: relative;
}
.da-thumbs li a {
overflow: hidden;
}
.da-thumbs li a div {
position: absolute;
background: #333;
background: rgba(75,75,75,0.7);
width: 100%;
height: 100%;
}
.da-thumbs li a div span {
display: block;
padding: 10px 0;
margin: 40px 20px 20px 20px;
text-transform: uppercase;
font-weight: normal;
color: rgba(255,255,255,0.9);
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.5);
box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}
<!-- Demo content here -->
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* General Demo Style */
body{
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-weight: 400;
font-size: 15px;
}
a{
color: #555;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
min-height: 750px;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.image {
max-width: 100%;
max-height: 100%;
background-size: cover;
}
.imgs {margin: 0 auto;
align: center;
}
Please give your thoughts on how I can align these elements?
Fiddle Case:
https://jsfiddle.net/eqyfm41r/3/

Your edited code:
.da-thumbs li {
display:inline-block;
width:46%;
margin: 5px;
padding: 8px;
position: relative;
}
.da-thumbs li img{
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
JSFiddle here: https://jsfiddle.net/1zq95tzp/
You were floating the li's for one thing, also you want to add the box shadows to the images, not the li. The reason for this is that the li is going to be larger than the image, so the box shadow will appear far away from the edges of the actual image. As the screen shrinks, the images will stack. You may need to eventually give the images this styling:
max-width:100%;
so that they don't go off the page at phone width (I didn't look at the size of the images). Hope this helps you.

Can't you do:
margin-left: auto; margin-right: auto;
? This would be responsive, it's not a fixed margin.