Develop Reference

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>

Remove class after the click

I made a toggle-menu for my website, with some effects on the (hamburger toggle button) menu icon. The thing is that using javascript, I added a class "close", so when I click on the menu icon, it transforms to an "X" (close). This works perfectly when I click on the menu icon.
However, if I click on any of the elements from the toggle-menu-content, the "X" stays. What should I do/code so the class "close" disappears again (and shows a regular "hamburger" menu icon instead of "X") when I click on any element in toggle-menu (or outside the toggle-menu, anywhere), and not only when I click on the "hamburger" menu-icon?
You can take a look at my website at vlad095.github.io and check out the toggle menu for mobile devices. That way you can see what I mean. Take a look at how the menu icon behaves when you click on it, and how it behaves when you click on the toggle-menu-content elements or anywhere outside the menu.
Thanks!
HTML:
<!-- toggle button -->
<button id="toggle-btn" onclick="toggleMenu()">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</button> <!-- end toggle button -->
<div id="toggle-menu-display">
<div class="toggle-menu-content">
<a onclick="closeMenu()" href="#section1">ems training</a>
<a onclick="closeMenu()" href="#section2">why ems?</a>
<a onclick="closeMenu()" href="#section3">get started</a>
<a onclick="closeMenu()" href="#section4">contact us</a>
<a onclick="closeMenu()" href="index.html">norsk</a>
</div>
</div>
</div> <!-- end toggle menu -->
CSS:
/* toggle menu */
#toggle-btn {
background-color: transparent;
float right;
position: relative;
top: 22px;
right: 22px;
width: 32px;
height: 32px;
border: none;
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.line {
position: absolute;
right: 5%;
width:100%;
height: 2px;
background: #fcfdfe;
border-radius: 5px;
transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
}
.line1 {top: 5px;}
.line2 {top: 17px;}
.line3 {top: 29px;}
#toggle-btn.close .line1 {
transform: rotate(45deg);
top: 17px;
}
#toggle-btn.close .line2 {display: none;}
#toggle-btn.close .line3 {
transform: rotate(-45deg);
top: 17px;
}
.toggle-menu {
float: right;
position: relative;
position: relative;
top: 0;
right: 0;
display: inline-block;
}
.toggle-menu-content {
display: none;
position: absolute;
right: 0;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
text-align: center;
text-transform: uppercase;
font-size: 14px;
width: 100vw;
margin-top: 40px;
}
.toggle-menu-content a {
text-decoration: none;
display: block;
color: #4f4f4f;
font-weight: bold;
padding: 15px;
border-bottom: 1px solid #ccc;
}
.toggle-menu-content a:first-child {border-top: 1px solid #ccc;}
.toggle-menu-content a:last-child {padding-bottom: 16px;}
.toggle-menu:hover .toggle-menu-content {display:block;}
/* nav_transform.js after class */
.header.after .line {
background-color: #4f4f4f;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
JS:
// Adding close class on-click
$(document).ready(function() {
$('#toggle-btn').click(function() {
$('#toggle-btn').toggleClass('close');
})
})
//Menu-toggle button functions
function toggleMenu() {
var menuBox = document.getElementById('toggle-menu-display');
if (menuBox.style.display == "block") {
menuBox.style.display = "none";
} else {
menuBox.style.display = "block";
}
}
function closeMenu() {
var menuBox = document.getElementById('toggle-menu-display');
menuBox.style.display = "none";
}

Sounds like you want to use mouseup event in jquery and mousedown event in jquery.
In each you could do:
$el.addClass("className")
And:
$el.removeClass("className")

You are already using the right function in your jQuery all you need to do is to add the classes you want to toggle between
// Adding close class on-click
$(document).ready(function() {
$('#toggle-btn').click(function() {
//add both classes in toggleClass
$('#toggle-btn').toggleClass('close open');
})
});
This would toggle between .close and .open i.e shows close when #toggle-btn is .clickand shows .open when it is clicked again.
You could as add
$('body').click(function() {
$('#toggle-btn').removeClass('close');
});

How to access a button not originally on page to animate and refresh?

I'm working on this codepen to practice working with APIs and search bar animations.
wikiSearch codepen
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button type="reset" class="btn btn-reset fa fa-times" id="reset" onclick="moveReset();"></button>
some of my js
$('.btn-reset').on('click', function(){
$('.btn-reset').css({
'right': '22px'
})
$('.btn-search').css({
'background-color': 'white'
})
})
How can I access the X button after the search results come in?
On the splash page, the X button works as I want it to - moves right when input is focused and moves back to the left where it is hidden.
My goal is to have this behavior persist, even after the results display, and in addition to refresh to the original splash page.
I've tried adding an active class when it is clicked,delegating to #reset from body, adding an onclick event inline with the html, and using the location reset property, to no avail.
Thanks for any pointers.

You have a z-index management problem. After click on search button the reset button has a z-index value of -1, this means that even you are see the button when you think you click on it you don't.
A way to fix this particular problem could be to remove the z-index attribute in your css file for reset button, also give z-index value to input control like 5 and for the search button like 10 to keep the logic you already have.
// form validation
$("form").on("submit", function(e) {
var word = $("#search").val();
if (word.length === 0) {
alert("This field is required");
e.preventDefault();
} else {
e.preventDefault();
$('form').css({
"margin-top": "0%"
})
$('body').css("background", "yellow")
search(word);
}
})
// retrieve data from wikipedia api
function search(word) {
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'opensearch',
list: 'search',
search: word,
format: 'json'
},
dataType: 'jsonp',
success: function (response) {
var content = ''
for (var i = 0; i < response[1].length; i++) {
content +=
'<div class="item"> <a class="item-text" target="_blank" href='+response[3][i]+">"
+"<h3>"+response[1][i]+"</h3>"
+"<p>" + response[2][i] + "</p>"
+'</a> </div>';
};
$('#content').html(content)
.css({
"margin": "5% 25%",
"text-align": "center"
});
}
});
}
$('input').on('focus', function(){
$('.btn-reset').css({
'right': '-22px',
'background-color': 'white'
})
$('.btn-search').css({
'background-color': 'hotpink'
})
})
$('.btn-reset').on('click', function(){
$('.btn-reset').css({
'right': '22px'
})
$('.btn-search').css({
'background-color': 'white'
})
})
* {
box-sizing: border-box;
}
body {
background: Chartreuse ;
transition: all .3s ease-in-out;
}
/* search button: */
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 25%;
z-index:5;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
.btn-search {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
cursor: pointer;
z-index:10;
}
.btn-reset {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
}
form {
float: left;
height: 50%;
margin: 0% 27%;
position: relative;
width: 30%;
margin-top: 10%;
}
input {
border-radius: 15px;
right: 0;
transition: all .3s ease-in-out;
width: 50%;
}
input:focus {
width: 100%;
}
.btn-search {
background: hotpink;
color: #fff;
}
.btn-reset:focus {
right: -22px;
}
button {
transition: all .3s ease-in-out;
}
.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
right: 2px;
top: 2px;
transition: all .3s ease-in-out;
width: 26px;
}
.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 15px;
height: 20px;
line-height: 20px;
padding: 0;
right: 5px;
top: 5px;
width: 20px;
}
h3 {
padding-top: 10px;
}
.item {
position: relative;
padding-bottom: 5px;
background-color: hotpink;
border-radius: 5px;
}
/* for underlining each item block */
/* .item:before {
content: "";
position: absolute;
width: 75%;
bottom: 0;
left: 12.5%;
border-bottom: 1px solid black;
} */
.item-text {
text-decoration: none;
color: black;
}
#returned {
color: white;
font-size: 0.75em;
}
<div class='search-wrapper'>
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button type="reset" class="btn btn-reset fa fa-times" id="reset"></button>
</form>
</div>
<br>
<div id="content">
</div>

So, if I'm getting you, you're looking for how to cause certain effects on the reset button when certain events happen? If I'm getting that, then there are really two events: first, any time the text input loses focus (at which point, you'd hide the reset button, I assume), and second, when the reset button itself is clicked.
Looking at the first case, you'd simply have the on('blur', function(){...}) set on the input, just as you have on('focus', function(){...}) happening right now. When the input is blurred, simply re-hide the reset and toggle the color change back on the search button.
In the second case, you're missing a line to actually clear the contents of the input. Presumably, you'd also want to remove the results of any search if you clear the input, but that's not really a given.
Hope this helps, if not please clarify!
// form validation
$("form").on("submit", function(e) {
var word = $("#search").val();
if (word.length === 0) {
alert("This field is required");
e.preventDefault();
} else {
e.preventDefault();
$('form').css({
"margin-top": "0%"
})
$('body').addClass("body-with-results");
search(word);
}
})
// retrieve data from wikipedia api
function search(word) {
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'opensearch',
list: 'search',
search: word,
format: 'json'
},
dataType: 'jsonp',
success: function (response) {
var content = ''
for (var i = 0; i < response[1].length; i++) {
content +=
'<div class="item"> <a class="item-text" target="_blank" href='+response[3][i]+">"
+"<h3>"+response[1][i]+"</h3>"
+"<p>" + response[2][i] + "</p>"
+'</a> </div>';
};
$('#content').html(content)
.css({
"margin": "5% 25%",
"text-align": "center"
});
}
});
}
$('#search').on('focus', function(){
$('.btn-reset').show();
$('.btn-search').css({
'background-color': 'hotpink'
})
}).on('blur', function(){
$('.btn-search').css({
'background-color': '#ccc'
});
})
$('#resetBtn').on('click', function(evt){
evt.stopPropagation();
evt.preventDefault();
$(this).hide();
$('#content').empty();
$('#search').val('');
$("body").removeClass("body-with-results");
})
* {
box-sizing: border-box;
}
body {
background: Chartreuse ;
}
.body-with-results {
background: yellow;
}
/* search button: */
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 25%;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
.btn-search {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
cursor: pointer;
}
#resetBtn {
display: none;
background: white;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
right: -28px;
top: 0px;
width: 30px;
z-index: 5;
}
form {
float: left;
height: 50%;
margin: 0% 27%;
position: relative;
width: 30%;
margin-top: 10%;
}
input {
border-radius: 15px;
right: 0;
transition: all .3s ease-in-out;
width: 50%;
}
input:focus {
width: 100%;
}
.btn-search {
background: hotpink;
color: #fff;
}
.btn-reset:focus {
right: -22px;
}
button {
transition: all .3s ease-in-out;
}
.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
right: 2px;
top: 2px;
transition: all .3s ease-in-out;
width: 26px;
}
.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 15px;
height: 20px;
line-height: 20px;
padding: 0;
right: 5px;
top: 5px;
width: 20px;
z-index: -1;
}
h3 {
padding-top: 10px;
}
.item {
position: relative;
padding-bottom: 5px;
background-color: hotpink;
border-radius: 5px;
}
/* for underlining each item block */
/* .item:before {
content: "";
position: absolute;
width: 75%;
bottom: 0;
left: 12.5%;
border-bottom: 1px solid black;
} */
.item-text {
text-decoration: none;
color: black;
}
#returned {
color: white;
font-size: 0.75em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='search-wrapper'>
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button class="btn btn-reset fa fa-times" id="resetBtn"></button>
</form>
</div>
<br>
<div id="content">
</div>
A few changes have been made to the code. Specifically, what's happening is when the form has been submitted and the body's CSS altered, there is a z-index issue cropping up. Here are the changes made:
The body el style is now being changed by adding/removing a 'body-with-results" class. This is purely cosmetic, as I really don't like hard-coding style changes.
The reset button is no longer a pure reset button, it is now simply a styled button that simulates a reset. When you reset a form, that's all you reset. However, in this case, you want to reset the form, hide the reset element, and clear any results from the contents div. So the reset el now does just that.
Styles on the reset button -- rather than sliding in and out (which could still probably be a thing), I simply set the right/top values in the css, and also fixed the z-index thing. Note that I used the ID of the el rather than the class to set the styles. This was done to properly handle the specificity of the styles (IDs are considered more specific than classes, thus ID styles override class styles).
I removed the code to hide the reset button on blur -- the issue with that becomes, when you try to click on the reset button, the first event is the input blur, which promptly hides the element you just thought you clicked on.
Still trying to track down the wierd suggested results remnant code, but this is a starting point.

Make arrow in button point down after menu slides out

I have a button that has an arrow appended to it when a user hovers over it. When clicked, a content div slides out in its wrapper using jQuery.slideToggle().
Once the div slides out, I want to make the arrow in the button rotate 180 degrees to signify that pressing it will make the content div go down if clicked again.
I made a JsFiddle to show what I have so far: https://jsfiddle.net/414mwv17/
What would be the best way to make the arrow point down after the button is clicked?

Create a new class for how you want the carat to appear :
#makeGroupButton span.rotate:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(135deg);
}
Note the class addition in the selector.
Then change the javascript/jQuery to just toggle that class:
$('#makeGroupButton').bind('click', function(){
$('#slideout').slideToggle(500);
$(this).children('span').toggleClass('rotate');
});
You can't directly select the :after and :before pseudo selectors with jQuery, so just changing the class, and adding CSS is customarily the easiest method.
Updated fiddle

Have started it for you to build on. Check this out and let me know your feedback. Thanks!
Added the following style:
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
and some js too:
$('#makeGroupButton').bind('click', function(event) {
event.preventDefault();
$('#slideout').slideToggle(500);
$(this).find('span').toggleClass('open');
});
#wrapper{
height: 500px;
width: 300px;
position:relative;
border: 2px solid blue;
}
#slideout {
height: 95%;
width: 95%;
border: 2px solid red;
position: absolute;
bottom: 0;
left: 2.5%;
}
#makeGroupButton
{
clear: both;
text-align: center;
color: white;
width: 220px;
background:black;
overflow: hidden;
transition: all 0.5s;
}
#makeGroupButton:hover, #makeGroupButton:active
{
text-decoration: none;
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
#makeGroupButton span
{
display: inline-block;
position: relative;
padding-right: 0;
transition: padding-right 0.5s;
}
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 0;
right: -20px;
opacity: 0;
width: 15px;
height: 15px;
margin-top: -5px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-bottom: none;
border-left: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-45deg);
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 0;
top: 50%;
}
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slideout" style="display: none;"></div>
</div>
<a href="#" id="makeGroupButton">
<span>New Group</span>
</a>

I would add a class rotate on click then apply the following css :
#makeGroupButton.rotate span:after {
top: 0px;
-webkit-transform: rotate(-228deg) !important;
}
I have update your js fiddle https://jsfiddle.net/414mwv17/2/.
A much cleaner way to do it would be use an arrow icon then just rotate that icon by 180 degrees.
Hope this helps

CSS animation doesn't trigger after onclick event

I have css blocks that must go away from the page when they gain the .gone class.
I register a click event in Javascript, in the event handler I add the .gone class to the clicked element.
The bullet should go away to the left, or to the right, but it just disappears.
Here is the HTML code:
<div id="firstPage">
<div id="bullets">
<div data-href="#projects" class="top left">Projects</div>
<div data-href="#skills" class="top right">Skills</div>
<div data-href="#experiences" class="bottom left">Experiences</div>
<div data-href="#contact" class="bottom right">Contact</div>
</div>
</div>
The javascript code:
var bullets = [];
function openPage(e) {
e.preventDefault();
this.classList.add('gone');
}
var tmpBullets = document.querySelectorAll('#bullets div');
for(var i = 0 ; i < tmpBullets.length ; i++) {
tmpBullets[i].addEventListener('click', openPage, true);
bullets.push(tmpBullets[i]);
}
The CSS code:
html {
font-family: QuattrocentoSans;
overflow: hidden;
}
#firstPage {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/noise.png');
}
#firstPage h1 {
display: block;
margin: auto;
text-align: center;
margin-top: 100px;
font-family: Pacifico;
font-size: 50px;
color: #fff;
text-shadow: 0 0 3px #000;
}
#bullets {
display: block;
width: 320px;
margin: auto;
}
#bullets div {
position: absolute;
display: inline-block;
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background-color: #333;
text-align: center;
color: white;
text-decoration: none;
margin-top: 10px;
margin-right: 5px;
margin-left: 5px;
text-shadow: 0 0 3px #999;
font-size: 1.2rem;
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
#bullets div.top {
top: 100px;
}
#bullets div.bottom {
top: 270px;
}
#bullets div.left {
left: calc(50% - 165px);
}
#bullets div.right {
right: calc(50% - 165px);
}
#bullets div:hover {
box-shadow: 0 0 10px #555;
transition: box-shadow 500ms;
}
#bullets div.left.gone {
left: -160px;
}
#bullets div.right.gone {
right: -160px;
}
See jsfiddle for live demo : http://jsfiddle.net/8u9j6n6x/
Thanks for your help

You need to add the transition to the .gone class not the #bullets div
#bullets div.gone {
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
updated fiddle http://jsfiddle.net/8u9j6n6x/1/