$(document).ready(function(){
/***************** Green tab animation ****************/
var slider_tab = $("#slider_tab");
var green_slider = $("#green_slider");
slider_tab.click(function(){
if(green_slider.hasClass("open")){
green_slider.removeClass("open");
}else{
green_slider.addClass("open");
}
});
/***************** Yellow tabs animation ****************/
$(".tab").click(function(e){
e.preventDefault();
//This is the parent div for the tab and content divs
var content = $(this).parent().parent();
//Get height and remove "px" from string
var height = content.css("height");
//Remove 50 pixels from the height to account for the tab height
height = parseInt(height) - 50;
var margin = content.css("marginTop").slice(0, -2);
if(margin >= 0){
/*If there is not a margin the tab is closed. Add
negative margin to the top to make it move up*/
content.css("margin-top", "-" + height + "px");
}else{
//Remove top margin to close tab
content.css("marginTop", "0px");
}
});
/*test - transition yellow tabs with top position*/
/* $(".tab").click(function(){
var content = $(this).parent().parent();
content.toggleClass("open_yellow_tab");
}); */
/***************** Copyright bar ****************/
$("#copy").keyup(function(){
$("#output").text($(this).val());
if (!($(this).val())){
$("#output").text(" ");
}
});
/***************** Canvas ****************/
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(262, 46);
ctx.lineTo(212, 0);
ctx.lineTo(0, 0);
ctx.fillStyle = '#eeca14';
ctx.fill();
ctx.font = "22px Oswald";
ctx.fillStyle = '#000';
ctx.fillText("CANVAS TEXT", 20, 35);
});
@import url('https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Condensed');
body {
font-family: 'Oswald', sans-serif;
/* position: relative;
display: flex;
flex-direction: column;
max-height: 100vh; */
}
#wrap {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
}
a {
text-decoration: none;
color: black;
}
#top {
background-color: #282526;
height: 300px;
}
#hide_overflow {
width: auto;
height: auto;
display: block;
z-indez: 4;
}
/*********************************** GREEN TAB **********************/
#green_slider {
position: fixed;
left: -352px;
margin-top: 100px;
width: 343px;
height: 115px;
border: 9px solid #3fae29;
border-right: 45px solid #3fae29;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #fff;
transition: margin-left ease 1s;
z-index: 4;
}
#slider_tab {
/*******Positioning******/
position: absolute;
top: 34px;
left: 300px;
width: 130px;
height: 45px;
transform: rotate(90deg);
cursor: pointer;
/*Round Corners to match green borders*/
border: 1px solid transparent;
border-radius: 15px 15px 0px 0;
/*******Text*********/
text-align: center;
vertical-align: middle;
line-height: 45px;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
color: white;
/*This is so the text stops shaking during the transition*/
-webkit-backface-visibility: hidden;
}
#green_content {
width: 100%;
}
#green_content_left {
max-width: 60%;
margin: 0;
padding: 0;
float: left;
}
#green_content_left p {
margin: 10px 5px 5px 5px;
padding: 0;
font-size: 19px;
font-weight: bold;
text-transform: uppercase;
}
#green_content_left p:nth-child(2) {
margin-top: 5px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
font-weight: 100;
}
#green_content_left p:nth-child(3) {
font-size: 24px;
font-weight: bold;
color: #cf112b;
letter-spacing: 1px;
margin-top: 20px;
}
#green_content_right {
position: relative;
width: 39%;
hegith: 300px;
margin: 0;
padding: 0;
float: right;
}
#green_content_right img {
width: 60px;
height: 60px;
margin: 5px 5px 5px 5px;
float: left;
}
#green_content_right span {
display: inline-block;
position: absolute;
top: 24px;
right: -8px;
max-width: 72px;
font-size: 21px;
font-weight: bold;
color: #3fae29;
transform: rotate(90deg);
}
#green_content a {
display: inline-block;
float: right;
width: 106px;
margin: 2px 5px;
padding: 10px 12px;
font-size: 12px;
text-transform: uppercase;
text-align: center;
font-weight: 400;
color: #fff;
background-color: #313131;
background: linear-gradient(to bottom, #777777 0%, #222222 100%);
border: 1px solid transparent;
border-radius: 6px;
}
.open {
position: relative;
margin-left: 352px;
}
/*********************************** MIDDLE SECTION **********************/
#middle_section {
position: relative;
width: 100%;
height: 290px;
margin: 0;
}
#content {
width: 899px;
/* height: 290px; */
margin: auto;
}
#content p {
width: 654px;
margin: 20px auto;
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #000;
}
#content p span {
display: block;
width: 35px;
height: 80px;
float: left;
font-family: "Times New Roman", sans-serif;
font-size: 24px;
}
/*********************************** YELLOW TABS **********************/
#tabs_wrapper{
position: relative;
display: flex;
width: 100%;
}
#all_tabs {
width: 899px;
margin: auto;
}
.tab_container {
box-sizing: border-box;
width: 150px;
min-height: 176px;
position: absolute;
top: -50px;
transition: margin-top ease 1s;
/****** TEST TO TRANSITION WITH TOP POSITION *******/
/* box-sizing: border-box;
width: 150px;
min-height: 176px;
position: absolute;
top: -50px;
transition: top ease 1s; */
}
/*test*/
.open_yellow_tab {
top: -176px;
}
.tab_area{
width: 100%;
height: 50px;
box-sizing: border-box;
}
.tab{
display: inline-block;
min-width: 120px;
height: 20px;
text-align: center;
background-color: #EEC917;
padding: 15px;
text-transform: uppercase;
font-size: 18px;
}
.tab_content {
width: 500px;
min-height: 176px;
background-color: #EEC917;
padding: 15px;
font-family: 'Roboto', sans-serif;
font-size: 12px;
box-sizing: border-box;
}
#tab1 {
z-index: 3;
}
#tab2{
margin-left: 160px;
z-index: 2;
}
#tab3{
margin-left: 320px;
z-index: 1;
}
/*********************************** FOOTER **********************/
footer {
width: 100%;
height: 271px;
/* height: 281px; */
background-color: #282526;
z-index: 3;
}
#footer_content {
width: 100%;
height: 100%;
/* height: 90%; */
background-color: #282526;
}
#copyright_bar {
width: 100%;
/* height: 10%; */
min-height: 30px;
background-color: #fff;
z-index: 3;
}
#copyright_bar p {
padding: 0;
margin: 0;
font-size: 12px;
font-weight: 300;
color: #555;
text-align: center;
line-height: 28px;
}
/*********************************** COPY BAR **********************/
#copyright_bar input {
outline: none;
outline-style: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #000;
margin-left: 5px;
padding-left: 4px;
font-size: 14px;
}
#output {
margin-left: 10px;
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<section id="top">
<div id="green_slider">
<div id="green_content">
<div id="green_content_left">
<p>I am the title</p>
<p>I am the longer sub title.</p>
<p>content!</p>
</div>
<div id="green_content_right">
<img>
<span>Green</span>
</div>
<a href="#">button text</a>
</div>
<div id="slider_tab">HELLO :)</div>
</div>
</section>
<section id="middle_section">
<div id="content">
<canvas id="canvas" width="272" height="100"></canvas>
<p><span>A:</span>Lorem ipsum dolor sit amet, morbi amet aenean ante pede blandit, vitae magna sit orci, quis sagittis purus sed senectus dis malesuada. Mi nibh elit veritatis nunc eget nunc, sit magna vivamus cras velit justo purus, vestibulum turpis mauris massa in eleifend dolor. Mauris vitae id, neque mi ultricies risus ridiculus.</p>
</div><!-- #content -->
</section>
<div id="tabs_wrapper">
<div id="all_tabs">
<div class="tab_container" id="tab1">
<div class="tab_area"><a href="#" class="tab">Tab 1</a></div>
<div class="tab_content" id="tab1_content">
<p>This is the content of tab 1</p>
</div>
</div>
<div class="tab_container" id="tab2">
<div class="tab_area"><a href="#" class="tab">Tab 2</a></div>
<div class="tab_content" id="tab2_content">
<p>Lorem ipsum dolor sit amet, morbi amet aenean ante pede blandit, vitae magna sit orci, quis sagittis purus sed senectus dis malesuada.</p>
<p>Mi nibh elit veritatis nunc eget nunc, sit magna vivamus cras velit justo purus, vestibulum turpis mauris massa in eleifend dolor. Mauris vitae id, neque mi ultricies risus ridiculus, consectetuer vitae congue morbi pellentesque a mollis.</p>
</div>
</div>
<div class="tab_container" id="tab3">
<div class="tab_area"><a href="#" class="tab">Tab 3</a></div>
<div class="tab_content" id="tab3_content">
<p>Lorem ipsum dolor sit amet, tellus facilisis elit est suspendisse elit quis, erat ipsum dignissim donec imperdiet vitae, aenean egestas pellentesque dui sed, metus ornare blandit sociosqu sit duis tellus, non arcu ipsum metus at.</p>
<p> Viverra ut, amet nec orci, vitae diam, bibendum donec a placerat nulla ad. Lorem ipsum dolor sit amet.</p>
<p>Donec est dictum velit pellentesque quis.</p>
<p>Dui nascetur sociis mi nascetur, omnis sed fugiat erat amet dignissim condimentum. Tellus facilisis elit est suspendisse elit quis.</p>
</p>Massa quis diam duis, lacus erat nec libero, eu ullamcorper mi magna mauris felis ante, eu in gravida ut lorem aliquam.</p>
<p>Sapien ullamcorper pellentesque orci fermentum nunc.</p>
<p>Aliquam erat, ultrices quisque erat.</p>
<p>Pede lorem vestibulum velit sed, suspendisse sollicitudin, vitae lorem sed sed posuere leo, nullam autem ad, neque ante purus nec pede venenatis dis.</p>
</div>
</div><!-- tab_container -->
</div><!-- #all_tabs -->
</div><!-- #tabs_wrapper -->
<footer>
<div id="footer_content"></div>
<div id="copyright_bar">
<p>Hi I am the copy bar. Enter something here:<input type="text" id="copy"><span id="output"></span></p>
</div>
</footer>
<!-- <div id="copyright_bar">
<p>Hi I am the copy bar. Enter something here:<input type="text" id="copy"><span id="output"></span></p>
</div> -->
</div><!--#wrapper-->
<!-- <div id="hide_overflow"></div> -->
Vielen Dank für Ihre schnelle Antwort! und ich stimme Ihnen zu, JS sollte getrennt von der HTML sein – Martin