jQuery slideToggle — div jumps - javascript

I've got one problem.
There is a jQuery "more text" animated div (slideToggle) and showed text jumps. I don't know why. Could somebody help me?
HTML:
<div class="slide-button two">
<span>More</span>
<div class="hidden">
<p>hidden</p>
</div>
</div>
jQuery:
$(document).ready(function () {
$('.hidden').hide();
$('.slide-button').click(function () {
$('.hidden').slideToggle('slow');
});
});
ISSUE on jsfiddle

Just remove float:left from the span:
.slide-button span {
display: block;
font-family: "Playfair Display";
font-size: 20px;
font-weight: 400;
color: #da3c2b;
width: 90%;
margin: 0;
}
JSFiddle Demo

You can remove float: left as suggested by Jacob Gray, but you can also try adding overflow: hidden; to the class .slide-button .hidden
As an example:
$(document).ready(function() {
$('.hidden').hide();
$('.slide-button').click(function() {
$('.hidden').slideToggle('slow');
});
});
.slide-button {
display: block;
width: 94.230769%;
-webkit-box-shadow: 0 0 3px rgba(166, 166, 166, 0.5);
box-shadow: 0 0 3px rgba(166, 166, 166, 0.5);
background-color: #f7f7f7;
background: -webkit-linear-gradient(180deg, #f7f7f7 0%, #f2f2f2 100%);
background: linear-gradient(180deg, #f7f7f7 0%, #f2f2f2 100%);
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
padding: 25px 0 0 30px;
position: relative;
margin-bottom: 30px;
min-height: 57px;
overflow: hidden;
}
.slide-button span {
display: block;
font-family: "Playfair Display";
font-size: 20px;
font-weight: 400;
color: #da3c2b;
float: left;
width: 90%;
margin: 0;
}
.slide-button:after {
position: absolute;
content: '';
background: url(../imgs/arrow.png) no-repeat;
display: inline-block;
width: 20px;
height: 20px;
top: 40px;
right: 30px;
}
.slide-button:hover {
background-color: #f7f7f7;
background: -webkit-linear-gradient(0deg, #f7f7f7 0%, #f2f2f2 100%);
background: linear-gradient(0deg, #f7f7f7 0%, #f2f2f2 100%);
}
.slide-button .hidden {
width: 100%;
display: block;
position: relative;
overflow: hidden;
}
.slide-button .hidden p {
padding: 25px 0 40px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-button two">
<span>More</span>
<div class="hidden">
<p>content jumps</p>
</div>
</div>

Related

How to change css dynamically after click? And after again click go back to default?

I have problem little problem... unfortunately big for me yet... I prepared demo for you guys:
$('#rulerSlider').click(function() {
$('#canvas').css({
'margin-left': '0px',
'margin-top': '0px'
});
});
#justdraw {
position: relative;
width: 100%;
height: 200px;
overflow-y: hidden;
margin-left: 20px;
margin-top: 20px
}
#ruler {
position: relative;
width: 100%;
height: 100%;
overflow-y: hidden;
}
#canvas {
position: relative;
width: 100%;
height: 200px;
overflow: scroll;
}
/* slider */
.slider {
bottom: 350px;
left: 300px;
width: 80px;
height: 26px;
background: #333;
/*margin: 20px auto;*/
margin-left: 35px;
position: absolute;
border-radius: 50px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slider:after {
content: 'OFF';
color: #000;
position: absolute;
right: 10px;
bottom: 0px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slider:before {
content: 'ON';
color: #3bb100;
position: absolute;
left: 10px;
top: 1px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
}
.slider label {
display: block;
width: 34px;
height: 20px;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
background: #fcfff4;
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
border-radius: 50px;
transition: all 0.4s ease;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slider input[type=checkbox] {
visibility: hidden;
}
.slider input[type=checkbox]:checked+label {
left: 43px;
}
/* end slider */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="justdraw">
<div id="ruler">
<div id="canvas">
<canvas id="diagram" width="2100" height="2100">
</canvas>
</div>
</div>
</div>
<div>
<div class="slider">
<input type="checkbox" value="None" id="rulerSlider" name="check" checked />
<label for="rulerSlider"></label>
</div>
</div>
I have problems with the following steps:
0. Slider default state is (ON)
1. Click the slider (OFF)
2. Delete margins 20 from #justdraw
#justdraw {
margin-left: 20px; /* ---> margin-left: 0px; */
margin-top: 20px /* ---> margin-right: 0px; */
}
3. Click the slider again (ON)
4. Add margins 20 to #justdraw
#justdraw {
margin-left: 0px; /* ---> margin-left: 20px; */
margin-top: 0px /* ---> margin-right: 20px; */
}
Can someone help? I am done with this... I tried using javascript a little but without succes.
#Brarod
Try this code to add and remove css, it works properly.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn4").click(function(){
$("#toggle1").toggleClass("intro");
});
});
</script>
<style>
.intro {
font-size: 200%;
background-color:black;
text-shadow:1px 2px 3px yellow;
color: red;
}
</style>
<title>Tenth Demo Page</title>
</head>
<body>
<div>
<h3>Toggle Class</h3>
<p id="toggle1">Hello!! This My Tenth Demo Page....<code>◙♣♣♣♣☼╧#á</code></p>
<button id="btn4">Add Toggle Class</button>
</div>
</body>
</html>
I hope above code will be useful for you.
Thank you.

Replace icons in circular-3d buttons by Brandon Pierce

I am using Brandon Pierce's https://css-tricks.com/circular-3d-buttons/ but want to replace 'fontello' icons by icons of my choice like this one https://image.flaticon.com/icons/svg/451/451694.svg.
I just can't seem to get it done!
Tried replacing the icon classes by a 'image1' class of my own with random image as background but it just wouldn't show.
Please help!
.nav1 {
list-style: none;
text-align: center;
}
.nav1 li {
position: relative;
display: inline-block;
margin-right: -4px;
}
.nav1 li:before {
content: "";
display: block;
border-top: 1px solid #ddd;
border-bottom: 1px solid #fff;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: -1;
}
.nav1 a {
display: block;
background-color: #f7f7f7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
color: #a7a7a7;
margin: 36px;
width: 144px;
height: 144px;
position: relative;
text-align: center;
line-height: 144px;
border-radius: 50%;
box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}
.nav1 a:before {
content: "";
display: block;
background: #fff;
border-top: 2px solid #ddd;
position: absolute;
top: -18px;
left: -18px;
bottom: -18px;
right: -18px;
z-index: -1;
border-radius: 50%;
box-shadow: inset 0px 8px 48px #ddd;
}
.nav1 a:hover {
text-decoration: none;
color: #555;
background: #f5f5f5;
}
/* Random class I made to replace icon by image */
.image1 {
background: url("https://www.w3schools.com/css/trolltunga.jpg");
width: 100%;
}
HTML
<nav1>
<ul class="nav1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav1>
Need to do a couple things. Here's a demo.
This is your icon
.image1:after {
background-image: url("https://image.flaticon.com/icons/svg/451/451694.svg");
background-size: cover;
display: block;
content: '';
width: 100%;
height: 100%;
}
add these two styles to make it sit in the middle of the button without overflowing
.nav1 a
{
......
box-sizing: border-box;
padding: 17px;
}

CSS or JS conflict?

I'm a novice so this may seem like a rather basic problem.
A html page has 4 html embedded audio players which looked as styled and worked fine.
I then added a slide player called Fancy Box. The CSS and JS files are linked to separate folders than the CSS and JS files of the audio player.
The audio players continue to work fine however, the style attributes no longer show up, instead the browser’s audio player shows. Fancy Box works fine.
Is there a CSS or JS conflict of some sort?
Any advice is much appreciated in solving my dilemma.
(Sorry for all my incompetence.)
Here is the HTML and Both CSS.
/** audio player styles **/
.audio-player,
.audio-player div,
.audio-player h2,
.audio-player a,
.audio-player span,
.audio-player button {
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
div.audio-player {
position: relative;
width: 300px;
height: 70px;
margin: 0 auto;
}
.audio-player h2 {
position: absolute;
top: 7px;
left: 10px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 11px;
color: #000000;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
/* play/pause control */
.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
position: absolute;
text-indent: -9999px;
}
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
width: 34px;
height: 34px;
top: 32px;
left: 7px;
background: transparent url('playpause.png') 0 0 no-repeat;
}
.mejs-controls .mejs-pause button {
background-position: 0 -35px;
}
/* volume scrubber bar */
.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
top: 23px;
right: 85px;
cursor: pointer;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 85px;
height: 11px;
background: #212227;
-webkit-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
height: 9px;
top: 1px;
left: 1px;
background: #c82530;
background: -webkit-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -moz-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -o-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -ms-linear-gradient(top, #c82530 0%, #c82530 100%);
background: linear-gradient(top, #c82530 0%, #c82530 100%);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* time scrubber bar */
.mejs-controls div.mejs-time-rail {
width: 160px;
}
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
width: 160px;
height: 12px;
top: 40px;
left: 55px;
cursor: pointer;
-webkit-border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
background: #565860;
width: 160px !important;
/* fixes display bug using jQuery 1.8+ */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
top: 0;
left: 0;
width: 0;
background: #7b7d82;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
top: 0;
left: 0;
width: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #00873d;
background: -webkit-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -moz-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -o-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -ms-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: linear-gradient(top, #00873d 0%, #83bb63 100%);
}
/* metallic sliders */
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
display: block;
width: 20px;
height: 22px;
top: -6px;
background: url('handle-lg.png') no-repeat;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
position: absolute;
display: block;
width: 12px;
height: 14px;
top: -1px;
background: url('handle-sm.png') no-repeat;
}
/* time progress tooltip */
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
margin-left: -17px;
z-index: 9999;
background: url('time-box.png');
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
width: 33px;
display: block;
left: 0;
top: 4px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666;
text-align: center;
z-index: 9999;
}
/** clearfix **/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Paul Minotto: Music</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}
a:link {
color: #00873d;
text-decoration: none;
}
a:visited {
color: #cc3333;
text-decoration: none;
}
a {
font-size: 14px;
}
a:hover {
color: #cc3333;
text-decoration: none;
}
a:active {
text-decoration: none;
}
h1 {
font-size: 36px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.green {color: #11772E;
}
.red {color: #cc3333;
}
#rcorners { border-radius: 45%;
border: 5px solid #000000;
padding: 0px;
width: 700px;
height: 130px;
}
.color {
color: #FFF;
}
</style>
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css"/>
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/mediaelement-and-player.min.js"></script>
<title>slideShow</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen"/>
<link rel="stylesheet" href="/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen"/>
<script type="text/javascript" src="/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
</head>
CSS for slide show player.
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('fancybox_overlay.png');
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #FFF;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 0px;
background: #000;
background: rgba(0, 0, 0, 0.8);
}
/*Retina graphics!*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite#2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('fancybox_loading#2x.gif');
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}

Animate the Bar Chart Height using jQuery

I want to create an automatically animated bar chart when the user scrolls into view. Kinda look like this one http://www.adhamdannaway.com/about
I had created the chart using CSS and wanted to toggle the height percentage animation,using the jquery waypoint.
I tried to write the jquery code but it seems fail. I'm still new in jQuery and CSS so i hope someone can help enlighten me.
Here is my attempt so far.
Fiddle link : http://jsfiddle.net/C5v4t/
HTML code :
<ul class="chart">
<li class="axis">
<div class="label">MVP</div>
<div class="label">All Star</div>
<div class="label">Slugger</div>
<div class="label">Rookie</div>
<div class="label">Triple A</div>
</li>
<li id="teal" class="teal p-95" style="visibility: visible; height: 95%; opacity: 1;">
<div class="percent">"95"<span>%</span></div>
<div class="skill">Karate</div></li>
<li id="salmon" class="salmon p-90" style="visibility: visible; height: 90%; opacity: 1;">
<div class="percent">"90"<span>%</span></div>
<div class="skill">Taekwondo</div></li>
<li id="peach" class="peach p-80" style="visibility: visible; height: 80%; opacity: 1;">
<div class="percent">"80"<span>%</span></div>
<div class="skill">Nunchucks</div></li>
<li id="lime" class="lime p-75" style="visibility: visible; height: 75%; opacity: 1;">
<div class="percent">"75"<span>%</span></div>
<div class="skill">Bow Staff</div></li>
<li id="grape" class="grape p-40" style=" visibility: visible; height: 40%; opacity: 1;">
<div class="percent">"40"<span>%</span></div>
<div class="skill">Suplex</div></li>
CSS code:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
body {
font-family: 'Open Sans', sans-serif;
}
.chart {
clear: both;
padding: 0;
width: 100%;
}
#media (min-width: 700px) {
.chart {
background: url("http://cl.ly/QSpc/bg-chart.png") right top repeat-x;
height: 425px;
margin: 0 auto emCalc(-32px);
}
}
.chart li {
display: block;
height: 125px;
padding: emCalc(25px) 0;
position: relative;
text-align: center;
vertical-align: bottom;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}
#media (min-width: 700px) {
.chart li {
display: inline-block;
height: 425px;
margin: 0 1.8% 0 0;
width: 15%;
}
}
.chart .axis {
display: none;
top: emCalc(-45px);
width: 8%;
}
#media (min-width: 700px) {
.chart .axis {
display: inline-block;
}
}
.chart .label {
background: #cccccc;
margin: -9px 0 71px 0;
}
.chart .percent {
letter-spacing: -3px;
opacity: .4;
width: 100%;
font-size: 30px;
font-size: 1.875rem;
}
#media (min-width: 700px) {
.chart .percent {
position: absolute;
font-size: 62px;
font-size: 3.875rem;
}
}
.chart .percent span {
font-size: 30px;
font-size: 1.875rem;
}
.chart .skill {
font-weight: 800;
opacity: .5;
overflow: hidden;
text-transform: uppercase;
width: 100%;
font-size: 14px;
font-size: 0.875rem;
}
#media (min-width: 700px) {
.chart .skill {
bottom: 20px;
position: absolute;
font-size: 16px;
font-size: 1rem;
}
}
.chart .teal {
background: #4ecdc4;
border: 1px solid #4ecdc4;
background-image: -moz-linear-gradient(#76d8d1, #4ecdc4 70%);
background-image: -webkit-linear-gradient(#76d8d1, #4ecdc4 70%);
background-image: linear-gradient(#76d8d1, #4ecdc4 70%);
}
.chart .salmon {
background: #ff6b6b;
border: 1px solid #ff6b6b;
background-image: -moz-linear-gradient(#ff9e9e, #ff6b6b 70%);
background-image: -webkit-linear-gradient(#ff9e9e, #ff6b6b 70%);
background-image: linear-gradient(#ff9e9e, #ff6b6b 70%);
}
.chart .lime {
background: #97f464;
border: 1px solid #97f464;
background-image: -moz-linear-gradient(#b7f794, #97f464 70%);
background-image: -webkit-linear-gradient(#b7f794, #97f464 70%);
background-image: linear-gradient(#b7f794, #97f464 70%);
}
.chart .peach {
background: #ffcd92;
border: 1px solid #ffcd92;
background-image: -moz-linear-gradient(#ffe4c5, #ffcd92 70%);
background-image: -webkit-linear-gradient(#ffe4c5, #ffcd92 70%);
background-image: linear-gradient(#ffe4c5, #ffcd92 70%);
}
.chart .grape {
background: #ab64f4;
border: 1px solid #ab64f4;
background-image: -moz-linear-gradient(#c594f7, #ab64f4 70%);
background-image: -webkit-linear-gradient(#c594f7, #ab64f4 70%);
background-image: linear-gradient(#c594f7, #ab64f4 70%);
}
.chart .p-95{
height:95%;
}
.chart .p-90{
height:90%;
}
.chart .p-80{
height:80%;
}
.chart .p-75{
height:75%;
}
.chart .p-40{
height:40%;
}
Script code using waypoint JS:
<script>
// Animate Chart
$('.chart').waypoint(function(event, direction) {
$('#teal').css({'visibility':'visible', 'height': '0%'}).stop().delay(200).animate({'opacity':'1', 'height':'95%'}, 1000, 'easeOutExpo');
$('#salmon').css({'visibility':'visible', 'height': '0%'}).stop().delay(400).animate({'opacity':'1', 'height':'90%'}, 1000, 'easeOutExpo');
$('#lime').css({'visibility':'visible', 'height': '0%'}).stop().delay(600).animate({'opacity':'1', 'height':'80%'}, 1000, 'easeOutExpo');
$('#peach').css({'visibility':'visible', 'height': '0%'}).stop().delay(800).animate({'opacity':'1', 'height':'75%'}, 1000, 'easeOutExpo');
$('#grape').css({'visibility':'visible', 'height': '0%'}).stop().delay(1000).animate({'opacity':'1', 'height':'40%'}, 1000, 'easeOutExpo');
}, {
offset: '80%',
triggerOnce: true
});
</script>

Fixed bar script makes slideshow "jump" - How to remove?

i couldnt find a better tittle because its a specific error of my site, that i will provide a link to see it and his code.
The issue is when i scroll, there is a script that when the bar touches the top of the browser, the bar will remain there, but that make the slideshow make a little jump and the bars cuts part of the slideshow.
See it here: http://optential.co.nf/
Code:
$(window).bind('scroll', function () {
var h = $('.header').height();
if ($(window).scrollTop() > h) {
$('.mail2, .optimize').addClass('fixed');
} else {
$('.mail2, .optimize').removeClass('fixed');
}
});
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
background-size: cover;
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
position:relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: cover;
position: absolute;
}
.controls {
width:100%;
width: 350px;
margin: 5px auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundos.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
#pc {
height: 600px;
width: 50%;
float: left;
background-size: 100%
background-repeat:no-repeat;
background-image: url("img/pc.jpg");
}
#pctexto {
height: 600px;
width: 50%;
float: left;
background-size: cover;
background-color: blue;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: 100%;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 #btn {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 4px;
padding: 10px 0px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/fixedbar.js"></script>
<script src="js/slider.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<div class="controls">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
<div id="pc">
</div>
<div id="pctexto">
</div>
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form method="POST" action="form/contactengine.php">
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="Name" size="50" placeholder="Name"/>
<input type="text" name="Email" size="50" placeholder="Email"/>
<input type="text" name="Subject" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
<input type="submit" id="btn"value="Send"/>
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
<script src="js/slider.js"></script>
</body>
</html>
The css of the bar is "mail2", of the slideshow is "slider" and "controls".
Hope someone can help.
When you apply .fixed, you are taking the menu element out of the flow. This is because it is changing from position: relative to position: fixed. That's why the elements below it are jumping up 100px . To complete the effect you're after, you will need to compensate for the missing 100px.
OPTION 1
You can apply a margin-top to the #slider element below:
if ($(window).scrollTop() > h) {
$('.mail2, .optimize').addClass('fixed');
$('#slider').css('margin-top', '100px');
} else {
$('.mail2, .optimize').removeClass('fixed');
$('#slider').css('margin-top', '0px');
}
OPTION 2
You can add an element with 100px of height into the flow.
In your HTML, add this below the .mail2 element
<div id="menu-block" style="height: 100px; display: none;">
And add this to your JS:
if ($(window).scrollTop() > h) {
$('.mail2, .optimize').addClass('fixed');
$('#menu-block').css('display', 'block');
} else {
$('.mail2, .optimize').removeClass('fixed');
$('#menu-block').css('display', 'none');
}
In this particular case, both ways will work the same. In other situations, only one technique will be suitable. Hope this helps!
Considering the bar is a fixed height of 100px, you could add a rule like so:
.fixed + #slider {
padding-top: 100px;
}
or if other pages have more dynamic layouts, you could use .fixed + *
It is because as soon as you make it be position:fixed it no longer takes up space on the page, so the content under it jumps up to fill the space.
I have come across this in the past, and my solution was to put another div under the bar that is going to get fixed. It needs to be the same height as the div that is going to become fixed. Make it display:none and then change it to display:block when you toggle the bar to be fixed, that way it appears right when the fixed bar stops taking up space on the page. This should stop it from jumping.

Categories