Develop Reference

My UI animation is sloppy using javascript to add and remove animation classes—is there a better way?

I'm trying to make this news item component interface for a blog. Each item shows a story image and some of the text of the article. Rolling over the news item should "scrunch up" the image and reveal more of the text of the article. I can't see why my animation does not hold when you rollover the item, and then it resets completely before performing the "unscrunching."
There are keyframe animations that attach and detach to the item:
#keyframes scrunch {
from {
height: 50%;
}
to {
height: 10%;
}
}
#keyframes unscrunch {
from {
height: 10%;
}
to {
height: 50%;
}
}
.scrunch {
animation: scrunch 1s;
}
.unscrunch {
animation: unscrunch 1s;
}
Then I'm just adding and removing those classes from the news item class list:
const scrunchyBox = document.getElementById('scrunchyBox1');
const children = scrunchyBox.childNodes;
console.dir(children);
const scrunchyBoxHead = children[1];
scrunchyBox.addEventListener('pointerover', (event) => {
scrunchyBoxHead.classList.remove('unscrunch');
scrunchyBoxHead.classList.add('scrunch');
});
scrunchyBox.addEventListener('pointerout', (event) => {
scrunchyBoxHead.classList.remove('scrunch');
scrunchyBoxHead.classList.add('unscrunch');
});
Seems basic, but whatever I'm doing looks gross. Everything I've done is over at my Codepen.

You can use the transition property with the :hover pseudo-class. This will be the same that you have tryed to do with javascript.
To achieve this, just add few lines to your css file.
/* new block */
.scrunchyBox:hover .sectionHead {
height: 10%;
}
/* new block */
.scrunchyBox:hover .datedot {
transform: scale(0.45) translate(60px, -72px);
}
.scrunchyBox > .sectionHead {
transition: all 0.5s ease-in-out; /* new line */
}
.datedot {
transition: all 0.5s ease-in-out; /* new line */
}
body {
background-color: #ccc;
font-size: 18px;
}
.scrunchyBox {
color: #333;
position: relative;
background-color: #fff;
width: 400px;
height: 400px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
filter: drop-shadow(4px 4px 4px #333);
}
/* new block */
.scrunchyBox:hover .sectionHead {
height: 10%;
}
/* new block */
.scrunchyBox:hover .datedot {
transform: scale(0.45) translate(60px, -72px);
}
.scrunchyBox > .sectionHead {
width: 400px;
height: 250px;
background-color: #3ab7f4;
padding: 0;
margin: 0 auto;
transition: all 0.5s ease-in-out; /* new line */
}
.datedot {
position: absolute;
top: 30px;
right: 30px;
background-color: rgba(0, 0, 0, 0.3);
padding: 12px;
border-radius: 60px;
width: 60px;
height: 60px;
transition: all 0.5s ease-in-out; /* new line */
}
.datedot > span {
font-family: 'Trebuchet MS', sans-serif;
color: rgba(255, 255, 255, 1);
text-align: center;
display: block;
margin: 0;
}
.datedot > span.day {
font-size: 2.2em;
font-weight: bold;
line-height: 0.8em;
padding: 0;
}
.datedot > span.month {
font-size: 1.3em;
font-weight: normal;
text-transform: uppercase;
padding: 0;
}
.scrunchyBox > h2 {
font-family: 'Trebuchet MS', sans-serif;
font-size: 1.2em;
line-height: 1em;
padding: 0;
}
.scrunchyBox > p {
font-family: 'Georgia', serif;
font-size: 1.4em;
}
<div id="scrunchyBox1" class="scrunchyBox">
<div class="sectionHead">
<div class="datedot">
<span class="day">30</span>
<span class="month">Oct</span>
</div>
</div>
<h2>A Headline for the Scrunchy Box</h2>
<p>
This is some text that would normally be some text that the reader would want to see more of. It gets cut off here by other elements, but then other elements "scrunch" in order to reveal more of the text for a preview.
</p>
</div>

You can retain the animation in its final state using animation-fill-mode: forwards; as described in answer to this question: Maintaining the final state at end of a CSS3 animation
It will still look janky if you remove pointer from the box mid-animation. I am not sure why you don't want to simply use CSS :hover with transition.

Waypoints not working properly with my sidenav

I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`

jQuery toggleClass fade works with one class, not with the other?

I want my i elements to lose the outline class on hover, but for some reason this is not working. The class is lost and added again instantly without a fade/delay. If I try this exact same code with a class of background then it does work. What am I not seeing here?
The second problem is that when I do try this with a background class, the background stays there for the duration of the fade (in this case 500ms) and then disappears instantly. This should also be a fade, like a fade out.
Thank you!
JSFiddle
$('nav a').hover(function(){
if (!$(this).find("i").hasClass("home")){
$(this).find('i').toggleClass('outline', 500);
}
})

.hover() can be passed 2 functions as arguments. The first is like .mouseover() and the second is the .mouseout()
$('nav a').hover(function() {
$(this).find('.home').removeClass('outline');
}, function() {
$('.home').addClass('outline');
})
Update
You can add fadein and fadeout effect without Javascript, only with css:
nav {
font-size: 20 px;
}
nav a {
padding-left: 30 px;
}
nav a i {
position: absolute;
left: 0;
}
nav a i.star: not(.outline) {
opacity: 0;
transition: opacity 300 ms ease;
}
nav a: hover.star: not(.outline) {
opacity: 1;
transition: opacity 300 ms ease;
}
Demo here.

With the help of [Radonirina Maminiaina][1]'s answer and some altering of the code by myself I made it work exactly as intended.
It was Radonirina's idea to put the second icon right behind the original icon by using position: absolute; (see his code above), but then I came up with the idea to add the class "dark" to the hidden icon underneath and simply select it to make the opacity 0, and 1 on hover, including the transition effect. This made the CSS a lot simpler and it works beautifully.
Thanks again!
Here is a working example of the end result:
$('.menu-toggle').click(function() {
$('nav').toggleClass('nav-open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
/* Navigation bar */
header {
position: fixed;
height: 50px;
width: 100%;
background: #666666;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav a {
color: #222;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
font-size: 1rem;
font-family: Fjalla One;
}
.smallNav {
position: absolute;
top: 100%;
right: 0;
background: #CCCCCC;
height: 0px;
overflow: hidden;
}
.nav-open {
height: auto;
}
.smallNav a {
color: #444;
display: block;
padding: 1.5em 4em 1.5em 3em;
border-bottom: 1px solid #BCBCBC;
}
.smallNav a:last-child {
border-bottom: none;
}
.smallNav a:hover,
.smallNav a:focus {
color: #222;
background: #BABABA;
}
/* Menu toggle */
.menu-toggle {
padding: 1em;
position: absolute;
right: 1em;
top: 0.75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: white;
height: 3px;
width: 1.5em;
border-radius: 3px;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
.menu-toggle:hover {
transform: scale(1.1);
}
i.icon {
margin-right: 0.5em !important;
font-size: 1.2em !important;
}
/* Change icons on hover */
nav a i.dark {
position: absolute;
left: 42px;
}
nav a i.dark {
opacity: 0;
transition: opacity .25s ease;
}
nav a:hover i.dark {
opacity: 1;
transition: opacity .25s ease;
}
nav a:hover i.outline {
opacity: 0;
transition: opacity .25s ease;
}
<!DOCTYPE html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<header>
<div class="header-container">
<nav class="smallNav">
<ul>
<li><i class="icon home"></i>Home</li>
<li><i class="icon star outline"></i><i class="icon star dark"></i>Featured</li>
<li><i class="icon newspaper outline"></i><i class="icon newspaper dark"></i>News</li>
<li><i class="icon user outline"></i><i class="icon user dark"></i>Career</li>
<li><i class="icon envelope outline"></i><i class="icon envelope dark"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger">
</div>
</div>
</div>
</header>

How to get my PHP output back to a page via Ajax?

I'm trying to get a response back from a php script, so I dont have to reload the page and display some animations.
I have both parts working, but when I try to put them together, nothing works.
Right now I send the input data via Ajax, but I can't bring the results back.
Please help me, thanks in advance.
HTML
<head>
<title>
Consultapp :: Consultar
</title>
<?php include_once('head-attrib.php'); ?>
</head>
<body>
<div class="content">
<section>
<img src="source/img/logo.png" class="logo logo-small logo-search">
<p class="copy">Para consultar, ingresa un numero de cedula.</p>
<div class="card card-searchcard animated" >
<form id="searchBar" method="get">
<input type="search" class="field" name="searchBox" id="searchBox" placeholder="Ingresa una identificacion aqui" min="11111111" max="9999999999">
<button class="btn btn-main btn-bar right"><span class="text">CONSULTAR</span><i class="material-icons md-36 md-light">search</i></button>
</form>
</div>
<br>
<?php print($message) ?>
<div style="margin-bottom:85px"> <!-- Prevents cropped results -->
<?php print($info) ?>
<div class="scroller-box">
<!-- Search Trasition-->
<script type="text/javascript">
$(function() {
var box = $('.card-searchcard');
var logo = $('.logo-search');
var copy = $('.copy');
var button = $('#searchBar button');
button.one('click', function(){
box.toggleClass('active');
logo.toggleClass('active');
copy.toggleClass('active');
var dataString = document.getElementById("searchBox").value; // Post data to send
console.log("Data Collected Susccessfully");
return false;
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function() {
alert("Hi gorgeous!");
}
});
});
});
</script>
</div>
</div>
</div>
<?php include_once('navbar.php'); ?>
</section>
</div>
</body>
PHP
<?php
include_once("scripts/global.php");
// Collecting input variables
$entry = '';
$message = '';
$search = $_POST['searchBox'];
if(isset($search)) {
// Validation
if (empty($search)) {
$message = "Necesito un numero para consultar"; //Empty field message
}
else{ //MySQL DB search query
$searchquery = mysql_query("SELECT * FROM submissions WHERE id='$search'") or die("Could not check ID, I'm search");
$count = mysql_num_rows($searchquery);
if ($count == 0) {
$no_results = array( //Funny Error Messages goes here
'<span>Ups</span><br>Esta persona aun no ha sido calificada<br>Puedes añadir una calificacion si lo deseas',
'<span>Hay Caramba</span><br>nadie sabe acerca de esta persona<br> Tu sabes? Genial, añade una calificacion.',
);
$message = $no_results[array_rand($no_results)];
}
else{
while ($row = mysql_fetch_array($searchquery)) {
$name = $row['name'];
$id = $row['id'];
$amount = $row['amount'];
$submitter = $row['submitter'];
$rating = $row['rating'];
//Thumbs up or thumbs down icon
if ($rating == 'good') {
$ratingIcon = '<i class="material-icons">thumb_up</i>';
}
else{
$ratingIcon= '<i class="material-icons">thumb_down</i>';
}
$entry .= ( //Display individual entries (Can repeat)
"<div class='entry animated slideInEntry'>
<div>
<span>$submitter</span>
<span>$amount</span>
</div>
<div>$ratingIcon</div>
</div>
");
}
$info .=( //Display Person data (Not reapeat)
"<div class='card card-infocard animated slideInEntry'>
<label for='id'>CEDULA</label>
<span name='id'>$id</span>
<span name='name'>$name</span>
<button class='btn btn-fab btn-main'></span><i class='material-icons md-36 md-light'>add_circle_outline</i></button>
</div>
");
}
}
}
?>
The CSS in case you want it
/* Reset CSS & Global Attributes */
*{
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
font-weight: 600;
letter-spacing: 1px;
margin: 0;
padding: 0;
border: 0;
}
/*Hiiden Scrollbar*/
::-webkit-scrollbar{
display: none;
}
a{
text-decoration: none;
color: inherit;
}
button, input{
margin: 0;
border: none;
}
/* Rules for using icons as black on a light background. */
.material-icons.md-dark{
color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive{
color: rgba(0, 0, 0, 0.26);
}
/* Rules for using icons as white on a dark background. */
.material-icons.md-light{
color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive{
color: rgba(255, 255, 255, 0.3);
}
.left{
float: left;
}
.right{
float: right;
}
/*Small Devices*/
#media all and (max-width: 699px){
/* Rules for sizing the icon. */
.material-icons.md-18{
font-size: 18px;
}
.material-icons.md-24{
font-size: 24px;
}
.material-icons.md-36{
font-size: 36px;
}
.material-icons.md-48{
font-size: 48px;
}
/* Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes */
.logo-big{
width: 102px;
margin: 70px auto;
}
.logo-small{
width: 66px;
}
.logo-search{
margin: 55px 0 30px ;
}
/* Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes */
.btn{
color: #FFFFFF;
font-weight: 600;
font-size: 15px;
}
.btn-main{
background-color: #80CCFF;
}
.btn-secondary{
background-color: #4C4C4C;
}
.btn-card{
border-radius: 0 0 3px 3px;
width: 100%;
height: 60px;
line-height: 60px;
}
.btn-fab{
width: 60px;
height: 60px;
border-radius: 100%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.12);
line-height: 10px;
}
.card-infocard > .btn-fab{
position: absolute;
bottom: 0;
right: 0;
z-index: 9999;
margin: 0 20px -20px 0;
}
.btn-bar{
height: 55.5px;
width: 56px;
border-radius: 0 3px 3px 0;
}
.btn-bar > .text{
display: none;
}
/* Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes */
.card{
background-color: #FFFFFF;
color: #4C4C4C;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.12);
text-align: left;
border-radius: 3px;
}
.card-small{
max-width: 350px;
margin: 0 auto;
}
.card-searchcard{
width: 315px;
height: 56px;
margin: 35px auto 20px;
padding: 0 0 0 20px !important;
}
.card-infocard{
max-width: 315px;
padding: 23px 5%;
margin: 0 auto 35px;
}
.card-infocard > label{
display: inline;
}
.card-infocard > span:nth-child(3){
font-size: 16px;
font-weight: bolder;
display: block;
margin: 12px 0 0;
}
.entry{
background-color: rgba(0,0,0,0.3);
max-width: 300px;
padding: 10px 0;
margin: 20px auto;
border-radius: 5px;
}
.entry > div{
display: inline-block;
}
.entry > div:nth-child(1){
margin: 0 55px 0 20px;
}
.entry > div:nth-child(2){
margin: 0 20px 0 55px;
}
.entry > div > span{
display: block;
margin: 5px 0;
text-align: left;
}
.entry > div > span:nth-child(1){
font-weight: bolder;
font-size: 16px;
}
.entry > div > i{
vertical-align: baseline;
font-size: 30px;
}
/* Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes */
label{
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #393950;
display: block;
}
/* No blue outline on inputs */
textarea, input{
outline: none;
}
input[type=mail], input[type=password]{
padding: 15px 0 10px 0;
margin-bottom: 30px;
font-size: 14px;
color: #4C4C4C;
font-family: 'Raleway';
width: 100%;
font-weight: 600;
border: solid rgba(0,0,0,0.18);
border-width: 0 0 2px 0;
display: block;
}
input[type=search]{
height: 56px;
width: 70%;
font-size: 14px;
}
/* Placeholder Styling */
::-webkit-input-placeholder{
color: #808080;
font-family: 'Raleway';
}
:-moz-placeholder{
/* Firefox 18- */
color: #808080;
font-family: 'Raleway';
}
::-moz-placeholder{
/* Firefox 19+ */
color: #808080;
font-family: 'Raleway';
}
:-ms-input-placeholder{
color: #808080;
font-family: 'Raleway';
}
/* No arrows on number input*/
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
/*No color autofill*/
input:-webkit-autofill{
background-color: rgba(255,255,255,1); !important;
background-color: #FFFFFF !important;
}
/* Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes */
body{
font-size: 14px;
background-color: #0C77F8;
text-align: center;
font-size: 14px;
color: #FFFFFF;
}
.remora{
margin: 25px 0;
font-size: 12px;
color: #FFFFFF;
font-weight: 400;
}
.navbar{
width: 100%;
font-size: 12px;
color: #FFFFFF;
background-color: #0C77F8;
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
}
.navbar-icon{
margin: 15px 50px;
display: inline-table;
}
.navbar-icon > i{
margin-bottom: 5px;
}
.wrapper{
padding: 45px 12% 0;
}
span.link > a{
border-bottom: solid 2px #80CCFF;
font-weight: 600;
}
.scroller-box{
}
/* End of small devices styling - End of small devices styling - End of small devices styling - End of small devices styling - End of small devices styling*/
}
And the animation code, again, in case you want it.
.animated{
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/* Searchbar Animation -Searchbar Animation -Searchbar Animation -Searchbar Animation -Searchbar Animation */
.logo-search.active{
-webkit-animation-name: logoSearchActive;
animation-name: logoSearchActive;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
}
.copy.active{
opacity: 0;
transition: 0.5s ease-in;
}
.card-searchcard.active{
-webkit-animation-name: searchcardActive;
animation-name: searchcardActive;
z-index: 9999;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
transition: 0.8s ease-in;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#-webkit-keyframes searchcardActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
20%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
60%{
width: 315px;
}
100%{
-webkit-transform: translateY(-221px);
transform: translateY(-221px);
border-radius: 0px;
width: 100vw;
}
}
#keyframes searchcardActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
20%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
60%{
width: 315px;
}
100%{
-webkit-transform: translateY(-221px);
transform: translateY(-221px);
border-radius: 0px;
width: 100vw;
}
}
#-webkit-keyframes logoSearchActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
50%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
visibility: hidden;
}
}
#keyframes logoSearchActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
50%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
visibility: hidden;
}
}

I think that all you need is to fix the PHP script and fix the response from your Ajax call.
First of all, you PHP need and 'echo' statement to print some output. The output will be passed to the response from the ajax call, than JS have some material to work on.
An example:
<?php echo $info; ?>
After fix the php, try to edit this JS part:
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function(data) {
console.log(data);
}
});
If you PHP script return to you an HTML markup or print HTML, you can use the .append() or .prepend() functions from jQuery to append the data on the body like:
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function(data) {
$('body').append(data);
}
});
To show some CSS animation, I think you need to use .addClass() to the element you want to animate.

Problem is your the post data that you are sending. Change
var dataString = document.getElementById("searchBox").value;
To
var dataString = $("#searchbar").serialize();
Your search.php is expecting a value in $_POST['searchBox']
if(isset($search)){...
but never finds it so its skips that whole process of the search

Hiding a text when a sections width is set to 0

so I've had a bit of a problem with trying to make a section's width to 0 and have everything inside the object do the same thing. Essentially hide the section and everything inside it. Thing is, the section will change to a width of 0px but the text inside still displays and also sort of pushes off to the side. Is there any way that I can use either css or javascript to hide the text and bring it back when the sections width changes back over?
Code pasted into jsfiddle:
http://jsfiddle.net/t6ck9ajb/
$(document).ready(function(){
$("#about").click(function(){
if ($("#about-me").css("width") <= "0vw") {
$("#introduction").animate({width:"0vw"}, 500);
/*$("#intro").css("display","none");
$("#port").css("display","none");
$("#about").css("display","none"); */
}
else {
$("#introduction").animate({width:"0vw"});
}
});
});
This is what I have to attempt at hiding the text, but this didn't really hide it.

Here is a different approach:
$(function(){
$('#about').on('click', homeAboutToggle);
$('#home').on('click', homeAboutToggle);
});
function homeAboutToggle(){
$('#introduction').toggleClass('active');
$('#about-me').toggleClass('active');
}
* {
margin: 0px 0px;
padding: 0px 0px;
font-family: "Open Sans";
}
#container{
width: 100vw;
height: 100vh;
overflow:hidden;
position:relative;
}
.full-page {
width: 100vw;
height: 100vh;
background-color: #5085aa;
position: absolute;
float: left;
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
}
.full-page.right{
transform: translateX(100vw);
-webkit-transform: translateX(100vw);
}
.full-page.left{
transform: translateX(-100vw);
-webkit-transform: translateX(-100vw);
}
.full-page.active{
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
transform: translateX(0);
-webkit-transform: translateX(0);
}
#introduction {
z-index: 1;
}
#about-me {
z-index: 0;
}
#information {
text-align: center;
}
#intro {
font-size: 4vw;
color: white;
text-align: center;
padding-top: 30vh;
}
#port{
position: absolute;
right: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#home,
#about{
position: absolute;
left: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#about:active #about-me {
width: 100vw;
}
.big {
font-size: 8vw;
color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<section class="full-page right" id="about-me">
<h1 id="information">About Me</h1>
<a id="home">Back home</a>
</section>
<section class="full-page left active" id="introduction">
<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span> </h1>
<a id="port">Portfolio</a>
<a id="about">About Me</a>
</section>
</div>
</body>

If you're wanting to hide the content when the '#about' selector is clicked, why not just use $('#introduction').toggle()?

This a CSS issue. You need to add overflow: hidden; to whatever you want to be hidden with a change of width, in this case #intro.

Here a working fiddle with the intended animation: fiddle
CSS:
#introduction {
z-index: 1;
visibility:"visible";
overflow:hidden;
}
jQuery
$(document).ready(function () {
$("#about").click(function () {
if ($("#about-me").css("width") <= "0px") {
$("#introduction").animate({
width: "0px"
}, 500, function () {
$("#introduction").css("visibility", "hidden");
})
} else {
$("#introduction").animate({
width: "0px"
});
}
});
});