Develop Reference

HTML Select item show div and post problem

I am confused. I want two products to be selected. These products will be open by clicking the button. The selection will be made on the screen that opens. And the selected product will replace the button clicked.
I can show the products by clicking the button. I even got the result I wanted as text with jquery. But I used <select> <option> for this. There will be no drop-down list and only one will be selected. The selected image will replace the clicked area. I couldn't :(
$(document).ready(function() {
$(".showbutton, .showbutton img").click(function(event) {
var buttonName = $(this).closest('div').attr('id');
var buttonNo = buttonName.slice(4);
var boxName = "#box" + buttonNo;
$(boxName).fadeIn(300);
});
$(".closebtn").click(function() {
$(".box").fadeOut(200);
});
$(".box").click(function() {
$(".box").fadeOut(200);
});
$(".innerbox").click(function() {
event.preventDefault();
event.stopPropagation();
});
});
div.showbutton {}
div.showbutton:hover {}
.box {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.innerbox {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#box1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#box2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.closebutton {
width: 20%;
float: right;
cursor: pointer;
}
.closebtn {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="showbutton" id="link1">
click for first items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
<div class="showbutton" id="link1">
click for second items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
JSFIDDLE example of my codes: https://jsfiddle.net/j5fqhat6/

You can add data attribute to your kutu div this will help us to identify from where click event has been occurred .So, whenever your gosterButonu is been clicked you can use this data-id to add selected images text to your gosterButonu div.
Demo Code :
$(document).ready(function() {
$(".gosterButonu, .gosterButonu img").click(function(event) {
var butonAdi = $(this).attr('id');
console.log(butonAdi)
//if on click of button you want to remove active class
// $("div[data-id="+butonAdi+"]").find("li").removeClass("active")
$("div[data-id=" + butonAdi + "]").fadeIn(300);
});
$(".kapatButonu").click(function() {
var data_id = $(this).closest(".kutu").data("id");
$("#" + data_id).text($(this).closest(".icKutu").find("li.active").text())
$(".kutu").fadeOut(200);
});
$(".kutu").click(function() {
$(".kutu").fadeOut(200);
});
$(".icKutu").click(function() {
event.preventDefault();
event.stopPropagation();
});
//on click of li
$(".images li").click(function() {
//remove active class from other lis
$(this).closest(".images").find("li").not(this).removeClass("active")
//add active class to li which is clicked
$(this).addClass("active");
})
});
div.gosterButonu {}
div.gosterButonu:hover {}
.kutu {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.icKutu {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#kutu1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#kutu2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.kapatButonuCerceve {
width: 20%;
float: right;
cursor: pointer;
}
.kapatButonu {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
ul li {
list-style-type: none
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="gosterButonu" id="link1">
clickfor first items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu1" data-id="link1" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<!--added ul li-->
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>
<div class="gosterButonu" id="link2">
click for second items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu2" data-id="link2" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>

Add image below a certain class of element using css

What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example

You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}

I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>

Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>

You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>

Creating an onclick event for a button with a dropdown menu

I've been learning HTML and CSS for some weeks now and I start feeling comfortable with those. However I'm trying to learn JavaScript too.
I've been working on a button in HTML and CSS, you can view the demo of the button here.
I want to make the dropdown menu visible when you click the button and also if you click the button again the dropdown menu disappears.
Is there any simple or understandable way for creating a function which does this in JavaScript?
Here is the code I have:
HTML:
<div id="language-wrapper">
<a class="language-icon fr" href="#" alt="choose-your-language">Language</a>
<div id="language-dropdown">
<h3>Choose your language</h3>
<a class="language-links" href="#">Chinese</a>
<a class="language-links" href="#">Danish</a>
<a class="language-links" href="#">Deutsch</a>
<a class="language-links" href="#">English</a>
<a class="language-links" href="#">Espanol</a>
<a class="language-links" href="#">Filipino</a>
<a class="language-links" href="#">Hindu</a>
<a class="language-links" href="#">Italiano</a>
<a class="language-links" href="#">Norsk</a>
<a class="language-links" href="#">Nederlands</a>
<a class="language-links" href="#">Polski</a>
<a class="language-links" href="#">Portugues</a>
<a class="language-links" href="#">Svenska</a>
<a class="language-links" href="#">Suomi</a>
<a class="language-links" href="#">Turkce</a>
<a class="language-links" href="#">Urdu</a>
<p>Do you speak multiple languages or can't find your language? <font color="#d13030">Help us translate!</font><p>
</div> <!-- end of language-dropdown class -->
</div> <!-- end of language-wrapper -->
CSS:
#language-wrapper { display: inline-block; }
#language-wrapper:hover #language-dropdown { opacity: 1; display: block; }
.language-icon {
color: #fff;
font-weight:700;
padding-right:20px;
padding-left:30px;
display:inline-block;
font-size:11px;
text-align:right;
text-decoration:none;
position:relative;
left: 0; top: 0;
}
.fr { background: url("images/language-sprite.png") no-repeat 0 0; }
.fr:hover { background: url("images/language-sprite.png") no-repeat 0 -20px; color: #d13030; }
.language-icon:before {
content:'\25BE';
width:0px;
height:0;
position:absolute;
right:16px;
top: 0;
}
.language-icon:hover:before {
color: #d13030;
content: '\25B4';
top: -1px;
}
/* ------------------ LANGUAGE DROPDOWN ------------------ */
#language-dropdown {
opacity: 0;
width: 1023px;
display: none;
margin-top: 3px;
left: 0;
position: absolute;
border: 1px solid #ddd;
background: #fff;
box-shadow: 0px 3px 3px #b3b3b3;
}
#language-dropdown h3 {
color: #d13030;
font-size: 14px;
font-weight: normal;
padding: 5px 15px 0px 15px;
}
#language-dropdown p {
font-size: 12px;
padding: 0px 0px 10px 15px;
}
#language-dropdown a {
padding: 0px 0px 0px 15px;
}
.language-links {
font-size: 12px;
text-decoration: none;
color: #2793e6;
}
.language-links:hover {
text-decoration: underline;
}

it can be a basic toggle display function on onclik event:
function toggle(el) {
var tag=document.getElementById(el);
tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document
// here defaut is set to block cause it is none in CSS
}
<a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');">Language</a>
test here : http://codepen.io/anon/pen/cHIrd/
note:
opacity:0; removed from your initial CSS
Better practice is to toggle class not style values :)
and maybe to set onclick event via javScript.
return false can be added to avoid link to href .
<a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');return false;">Language</a>

The Html
<button id="clickme">Clickme</button>
<h1 id="Another">Menu</h1>
The JavaScript:
document.getElementById("clickme").onclick=function(){
var el = document.getElementById('Another');
if (el.style.display == '') {
el.style.display = 'none';
alert("hide");
}else{
el.style.display = '';
alert("show");
}
};
Here is a sample

Trying to add a show/hide button, but overwritten by theme's javascript

Edit - I was able to find the js file and remove the hover-over effect.
I'm working on WP.
I have an optin form that I need to show on click on a button. The functionality provided by the theme shows the form on hover-over but it's buggy and makes the user experience bad.
I have managed to add the button, but I don't know how to overwrite the current hover-over function.
Here's that I have
Javascript
<script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
HTML
<div id="nav_subscription" class="subscription_form clearfix">
<span id="subscribe_dd" class="contrast"><?php gb_e( 'Get the Latest Deals' ) ?><span>Toggle Div</spa>
</div><!-- #main_navigation -->
<div id="subscription_form_wrap" style="display:none;">
<div class="optinbar_close" style="bottom: 202px; left: -10px;"></div>
<p class="fillout2">Συμπλήρωσε την παρακάτω φόρμα και μπες στο club επικοινωνίας του Fitness Forum για να σου στείλουμε αμέσως με email το δώρο σου. Απλά, γράψε το όνομα και το email σου και κλίκαρε 'Στείλτε το δώρο μου'.</p>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
</div>
</div><!-- #header_subscription.subscription_form -->
CSS
#subscription_form_wrap {
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background: none;
background-color: #FFFFFF;
padding: 0;
float: left;
position: absolute;
top: 34px;
right: 0;
height: auto;
min-width: 200px;
border: 1px solid #CCC;
font-size: 13px;
}
#subscribe_dd {
color: white;
font-size: 16px;
text-align: center;
line-height: 17px;
background-color: #999;
width: 255px;
height: 19px;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
.optinbar_close {
float: right;
background: url(assets/images/close3.png) no-repeat;
display: inline;
height: 32px;
width: 32px;
cursor: pointer;
text-decoration: underline;
color: white;
position: absolute;
right: 10px;
}
Here's a [link] to the website.
I'm trying to fix the gray box on the navigation bar that writes: "Έχεις ήδη κερδίσει ένα δώρο!".

Not sure if that's what you want, but instead of:
<span id="subscribe_dd" class="contrast">Έχεις ήδη κερδίσει ένα δώρο!<span>
Toggle Div</spa>
You could try to wrap the span into the a href:
<a href="#" onclick="toggle('subscription_form_wrap');">
<span id="subscribe_dd" class="contrast">Έχεις ήδη κερδίσει ένα δώρο!<span>
</a>
If you really want to use only Javascript, this also works:
<span id="subscribe_dd" class="contrast" onclick="toggle
('subscription_form_wrap')>Έχεις ήδη κερδίσει ένα δώρο!<span>
Didn't know what that tag
</spa>
was about though. ;)

jquery show() breaks css position properties while acting

my problem is in my website,when I load the page and click Home,if article is visible on screen, the js I've written hides it smoothly and great with no problem.but when I click the About Us Link,it shows the article but with broken css position while its act is finished.
here is the code:
HTML:
<nav>
<ul class="sf-menu sf-vertical">
<li><a href=# onclick=home()>Home</a></li>
<li><a href=#about onclick=about()>About Us</a></li>
<li><a href=#>Cuisines</a>
<ul>
<li><a href=#starters>Starters</a></li>
<li><a href=#>Main Dishes</a></li>
<li><a href=#>Desserts</a></li>
<li><a href=#>Mezes</a></li>
</ul>
</li>
<li><a href=#>Wine List</a></li>
<li><a href=#gallery>Gallery</a></li>
<li><a href=#contacts>Contacts</a></li>
</ul>
</nav>
<article class=vanished id=about>
<h1>About Us</h1>
<div class="main-wrapper scroll">
<div class="wrapper clearfix">
<img src=img/bazar-place.png alt=bazar-place width=222 height=150 class=about-img>
<h4>Our Restaurant</h4>
<p>Bazar is a restaurant located between the districts Haga and Vasastaden in Gothenburg with a focus on Turkish and Persian food of the best quality that creates opportunities for an exciting mix all the way, from appetizer to dessert.</p>
</div>
<div class="wrapper clearfix">
<img src=img/belly.jpg alt=belly-dancing width=222 height=167 class=about-img id=belly>
<h4>Events</h4>
<p>Every Saturday from 21, we have Belly dancing at Bazar.</p>
</div>
<div class="wrapper clearfix">
<img src=img/food.jpg alt=food-services width=222 height=167 class=about-img id=food>
<h4>Food Services</h4>
<p>Taste our famous pasta dish to the human price of 69 :- We offer 10% discount for take-away at our entire menu.</p>
<p>At lunchtime you can choose from three Turkish pasta dishes or among two or three different main dishes. Ask about vegetarian options! Drinking, salad and coffee / tea included. Lunch can also be picked up.</p>
</div>
<div class="wrapper last clearfix">
<img src=img/extra.jpg alt=extra-services width=222 height=167 class=about-img id=extra>
<h4>Extra Services</h4>
<p>We can help with everything from after work, kick-off to the birthday called with food and drink that lasts all night. Do you want more entertainment we can arrange live music and belly dancing.</p>
</div>
</div>
</article>
JAVASCRIPT:
function home(){
if ($(".active") == [])
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
}
}
function about(){
if ($(".active") == [])
{
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
else
{
if ($("#about").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
}
}
CSS:
article{
position: absolute;
width: 550px;
height: 100%;
background-image: url("../img/blockBG.png");
z-index: 1;
left: 235px;
border-left: 1px solid #4A4A4A;
border-right-color: #7b7b7b;
border-right-style: solid;
border-right-width: thick;
padding-right: 40px;
padding-left: 40px;
text-align: center;
}
.vanished{
display:none;
}
.main-wrapper{
position:relative;
z-index:1;
width: 100%;
height: 590px;
display:block;
}
.wrapper{
border-bottom:1px solid #4A4A4A;
margin-bottom: 15px;
}
.last{
border: none;
}
h4{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:'Yeseva One',cursive;
font-size: 17px;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0;
line-height: 19px;
}
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
p{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:Arial, sans-serif;
font-size: 12px;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}

The problem is with the <h1> margin-top only being correctly applied at the end of the animation.
Try turning the distance top into a padding instead of margin, it should fix it:
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 0;
padding-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
Alternatively, you could give the parent <article> a padding or border top. This will prevent the <h1> margin from collapsing outside it's container while the animation runs.