I'm using Stick-Kit to keep some images in place while scrolling, and it seems to be affecting another script that initiates a CSS animation by adding a class to a div when it enters the viewport. I assume the Sticky-Kit script is 'reseting' the other, as the animation only occurs once when Sticky-Kit is removed. The issue is visible when the animated div gets to the top of the screen. How do I ensure the animation occurs only one time (when it first appears in the viewport)?
http://codepen.io/SeanLindsay1/pen/ZBVyLZ
HTML
<div id="bg">
<h2 class="header-title"><span>HEADER</span></h2>
<div id="pic1">
1
</div>
<div id="pic2">
2
</div>
<div id="pic3">
3
</div>
</div>
CSS
/* STICKY-KIT */
#bg {
background-color: white;
width:100%;
height:1500px;
padding:0;
margin:0;
font-size:30px
}
#pic1 {
position:relative;
width:60% ;
height:500px;
background-color:blue;
}
#pic2 {
position:relative;
width:60% ;
height:500px;
background-color:green;
}
#pic3 {
position:relative;
width:60% ;
height:500px;
background-color:red;
}
/* HEADER TITLES */
.header-title span {
display: inline-block;
position: relative;
}
.change:after {
content: " ";
position: absolute;
height: 5px;
border-bottom: 1px solid #bebebe;
-webkit-animation: extend .1s 1 forwards;
animation: extend 1s 1 forwards;
margin-left: 4px;
top: 1.2em !important;
}
#-webkit-keyframes extend {
0% {
width: 0;
}
100% {
width: 200px;
}
}
#keyframes extend {
0% {
width: 0;
}
100% {
width: 200px;
}
}
jQuery
// Check to see if element is in viewport
function isElementInViewport(elem) {
var $elem = jQuery(elem);
// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = jQuery(scrollElem).scrollTop();
var viewportBottom = viewportTop + jQuery(window).height();
// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top ) + 200 ;
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation
function extendLine() {
var $elem = jQuery('.header-title span').each(function() {
var $elem = jQuery(this);
// If the animation has already been started
if ($elem.hasClass('change')) return;
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('change');
}
});
}
// Capture scroll events
jQuery(window).scroll(function(){
extendLine();
});
$("#bg").stick_in_parent();
$("#text").stick_in_parent({offset_top: 390});
$("#pic1").stick_in_parent();
$("#pic2").stick_in_parent();
$("#pic3").stick_in_parent();
If possible, you can use a CSS Transition instead of an Animation. It'll have better browser support, and will work. I can't really find out what's happening in your code, but if you change a couple of lines, it'll work as expected.
Here is a forked codepen: http://codepen.io/ddanielbee/pen/BQbQqj
Here are the specific lines:
.header-title span::after {
content: " ";
transition: all 1.5s ease-out;
width: 0;
}
.header-title span.change::after {
position: absolute;
height: 5px;
border-bottom: 1px solid #bebebe;
width: 200px;
margin-left: 4px;
top: 1.2em !important;
}
Removing this line of code:
$("#bg").stick_in_parent();
ensures that the header text block is not influenced by Stick-Kit and eliminates the problem of repeated execution of the animation, as shown in this codepen.
I haven't observed any ill effects caused by that change, but I cannot guarantee that there aren't any, since I don't know why this line was in the original code.
Related
I am trying to make a header for a website where the header changes to different colors at different positions on the page.
Trying to get blue color background for header if the page is scrolled down with less than 40 pixels. And then red color background for header if the page is scrolled down between 40 pixels and 100 pixels. And then when the page is moved completely up, the header background is a yellow color.
Edit 1:
In short, Trying to make a sticky header change colors at different positions of the scroll on a page.
Edit 2:
Tried a new way of putting conditions. Updated the below code with latest working sticky header.
My problem is, when the header goes to the top position, it doesn't change back to orange color
So far I have got this code.
JS Fiddle
jQuery(document).ready(function($){
var mywindow = $(window);
var transoffset = $('#stickyheaders').offset().top;
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
{
$('#stickyheaders').addClass('headerup');
}
else
{
if(mywindow.scrollTop() < 155) {
$('#stickyheaders').addClass('headertranspup');
} else {
//$('#stickyheaders').removeClass('headerup');
$('#stickyheaders').addClass('headerstyleup');
}
}
}
mypos = mywindow.scrollTop();
});
});
body { margin: 0; }
section {
height: 2000px;
padding-top: 100px; }
#stickyheaders{
background: orange;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
position: fixed;
top:0; left:0;
width: 100%;
background: orange !important;
//transform: translateY(-110px);
//adjust this value to the height of your header
}
.headerstyleup{
background-color: blue !important;
}
.headertranspup{
background-color: red !important;
}
.headertranpup{
background-color: yellow !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<section>
<div id="stickyheaders">This div will stick to the top</div>
</section>
The easiest solution for a problem like this is by assigning background-colour to the header directly in the element property using jquery rather than adding a new class with the same css property like background-colour in this case.
jQuery(document).ready(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
{
$('#stickyheaders').addClass('headerup');
//$('#stickyheaders').addClass('headertranpup');
$('#stickyheaders').css("background-color","orange");
}
else
{
if(mywindow.scrollTop() < 75) {
$('#stickyheaders').removeClass('headerup');
$('#stickyheaders').css("background-color","transparent");
}
else
{
$('#stickyheaders').css("background-color","blue");
}
}
}
mypos = mywindow.scrollTop();
});
});
body { margin: 0; }
section {
height: 2000px;
padding-top: 100px; }
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
position: fixed;
top:0; left:0;
width: 100%;
adjust this value to the heigt of your header*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section>
<div id="stickyheaders">This div will stick to the top</div>
</section>
I want my navbar to be transparent, but when the user scrolls a bit I want it to change to a solid color and I am using bootstrap for the navbar, I have done the code that is needed with javascript.
I had this javascript in my HTML file, but it doesn't seems to work and I don't really know why
<script>
var myNav = document.getElementById("mynav");
window.onscroll = function() {
use strict";
if (document.body.scrollTop >= 100) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
</script>
and I have also added the CSS code.
.scroll {
background-color: transparent !important;
transition: all 0.5s ease-in;
}
I don't know why it doesn't work, it is not displaying any errors, I have also manually put the class and it worked so the problem is from the js code and not the CSS.
Use scrollY property of Window object.
See the Snippet below:
var myNav = document.getElementById("mynav");
window.onscroll = function() {
if (window.scrollY >= 100) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
.scroll {
background-color: transparent !important;
transition: all 0.5s ease-in;
}
.main-container{
height: 1000px;
}
#mynav{
position: fixed;
background-color: gray;
height: 50px;
margin:0 auto;
top: 0;
bottom:0;
line-height: 50px;
padding:5px;
width: 100%;
}
<div class="main-container">
<div class="mynav" id="mynav">
Hello World! this is mynav
</div>
</div>
Try using window.scrollY instead of document.body.scrollTop.
if (window.scrollY >= 100)
You can also use document.documentElement.scrollTop. It's the html element that actually scrolls, not the body. Typically document.body.scrollTop will always be 0.
The problem with my slider is that when it gets to the last slide and i click next it jumps over the two slides to get to the first one. Similarly when i am on the first slide and click previous, it jumps over slides to get to the last one. I would like to make it that when i get to the last slide and click NEXT the first slide would come from the right to left. (similar concept for the PREVIOUS button on first slide). I tried using insertBefore() and appendChild() for the slides but couldn't figure it out...
Here is my code:
// Slider
const slider_wrapp = document.querySelector('.tract-slider');
const slider = document.querySelector('.tract-slider-wrapp');
var slide = document.getElementsByClassName('tract-slide');
const leftBtn = document.querySelector('.slide-left');
const rightBtn = document.querySelector('.slide-right');
let swWidth = slider_wrapp.clientWidth;
let sliderWidth = swWidth * slide.length;
let slideWidth = 0;
slider.style.width = sliderWidth + "px";
for (var i = 0; i < slide.length; i++) {
slide.item(i).style.width = swWidth + "px";
}
function moveRight() {
slideWidth === sliderWidth - swWidth ? slideWidth = 0 : slideWidth += swWidth;
slider.style.transform = "translateX(" + (-slideWidth) + "px)";
}
function moveLeft() {
slideWidth === 0 ? slideWidth = sliderWidth - swWidth : slideWidth -= swWidth;
slider.style.transform = "translateX(" + (-slideWidth) + "px)";
}
rightBtn.addEventListener("click", function() {
moveRight();
});
leftBtn.addEventListener("click", function() {
moveLeft();
});
.tract-slider {
width: 100%;
height: 75vh;
position: relative;
overflow: hidden;
}
.tract-slider-wrapp {
height: 100%;
position: relative;
-webkit-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
-o-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
transition: all 350ms cubic-bezier(.08, .13, 0, .81);
}
.tract-slide {
height: 100%;
float: left;
position: relative;
display: block;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
.tract-slide:nth-child(1) {
background-image: url("https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg");
}
.tract-slide:nth-child(2) {
background-image: url("https://static.pexels.com/photos/29017/pexels-photo-29017.jpg");
}
.tract-slide:nth-child(3) {
background-image: url("https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg");
}
.tract-slider-control {
position: absolute;
left: 0;
bottom: 0;
background: #ffffff;
padding: 1em;
}
.tract-slider-btn {
display: inline-block;
cursor: pointer;
margin-left: 1em;
}
.tract-slider-btn:nth-child(1) {
margin-left: 0;
}
<div class="tract-slider">
<div class="tract-slider-wrapp">
<div class="tract-slide"></div>
<div class="tract-slide"></div>
<div class="tract-slide"></div>
</div>
<div class="tract-slider-control">
<div class="tract-slider-btn slide-left">Prev</div>
<div class="tract-slider-btn slide-right">Next</div>
</div>
</div>
PS. Please use JavaScript for solution
Creating an infinite slider means you need to move your slides around in DOM so they give the impression of a continuous track.
The first thing you need to change is having their backgrounds tied up to their position in DOM. If we want to slide back from first slide to the last one, we need to take the last slide, prepend it before the first one but, considering your current CSS, that will change the backgrounds of all slides, as they are currently bound to their position in DOM (...:nth-child {background-image:...}...).
The second thing that needs changing is positioning the slides into the slider track. If they're floated, whenever we change their order, all the rest of the slides will be affected. By positioning them with position:absolute each slide moves independently, without affecting the others, so it's easier to rearrange them while keeping control.
Long story short, I started from scratch and placed all methods inside a single object: theSlider.
The reset() function does the heavy lifting: it puts before class on first element, current on second and after on all the rest. So you have to put the "last" slide first, because the slider will start with it appended before the "current" one.
The sliding is done by applying go-left and go-right classes to the track. After the transition is done, I just move the first/last slide into the new position, depending on case, and run reset() again (which strips all classes and reapplies them based on new positions).
Animations are handled by CSS. All JavaScript does is apply/remove classes and move the slides in DOM.
var theSlider = {
track : document.querySelector('.tract-slider-wrapp'),
// has to match `transition-duration` in CSS:
duration : 600,
reset : function() {
var slides = document.querySelectorAll('.tract-slider-wrapp > div');
for (var i = 0; i < slides.length; i++) {
slides[i].className = '';
slides[i].classList.add(i > 1? 'after' : (i ? 'current':'before'))
}
},
init : function() {
theSlider.reset();
theSlider.track.classList.remove('not-loaded')
},
next : function() {
theSlider.track.classList.add('go-right');
setTimeout(function(){
var firstSlide = document.querySelector('.tract-slider-wrapp > div:first-child');
theSlider.track.appendChild(firstSlide);
theSlider.reset();
theSlider.track.classList.remove('go-right')
},theSlider.duration)
},
prev : function() {
theSlider.track.classList.add('go-left');
setTimeout(function() {
var lastSlide = document.querySelector('.tract-slider-wrapp > div:last-child');
theSlider.track.insertBefore(lastSlide, theSlider.track.firstChild);
theSlider.reset();
theSlider.track.classList.remove('go-left')
},theSlider.duration)
},
prevButton : document.querySelector('.slide-left'),
nextButton : document.querySelector('.slide-right')
};
window.addEventListener("load", theSlider.init);
theSlider.prevButton.addEventListener('click', theSlider.prev);
theSlider.nextButton.addEventListener('click', theSlider.next);
.tract-slider {
width: 100%;
height: 75vh;
position: relative;
overflow: hidden;
background-color: #f5f5f5;
}
.tract-slider-wrapp {
height: 100%;
transition: all 350ms cubic-bezier(.08, .13, 0, .81);
opacity: 1;
}
.tract-slider-wrapp.not-loaded {
opacity: 0;
}
.tract-slider-wrapp>div {
height: 100%;
position: absolute;
background: transparent no-repeat 50% 50% /cover;
width: 100%;
}
.tract-slider-wrapp > div.before {
margin-left: -100%;
}
.tract-slider-wrapp > div.current + div {
margin-left: 100%;
}
.tract-slider-wrapp > div.after ~ div {
opacity: 0;
}
.tract-slider-control {
position: absolute;
width: 100%;
z-index: 1;
top: 50%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.tract-slider-control div {
background-color: rgba(0,0,0,.35);
padding: .5rem 1rem;
color: white;
cursor: pointer;
}
.tract-slider-control :first-child {
border-radius: 0 17px 17px 0;
}
.tract-slider-control :last-child {
border-radius: 17px 0 0 17px;
}
body {
margin: 0;
}
.go-right div {
transform: translateX(-100%);
}
.go-left div {
transform: translateX(100%);
}
.go-right div, .go-left div {
transition-property: transform;
transition-timing-function: cubic-bezier(.4,0,.2,1);
/* has to match `duration` in js: */
transition-duration: 600ms;
}
<div class="tract-slider">
<div class="tract-slider-wrapp not-loaded">
<div style="background-image:url('https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg')"></div>
<div style="background-image:url('https://static.pexels.com/photos/29017/pexels-photo-29017.jpg')"></div>
<div style="background-image:url('https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg')"></div>
</div>
<div class="tract-slider-control">
<div class="tract-slider-btn slide-left">Prev</div>
<div class="tract-slider-btn slide-right">Next</div>
</div>
</div>
If you want to change the animation duration you need to change it in both js and css.
The only current limitation is it needs at least 3 slides to work. I guess it could be adjusted to work with only two slides by: cloning the "inactive" slide into third position, removing the clone after transition and cloning the other one.
ToDo's:
prefix CSS so it works in more browsers
replace .classList.add('whatever') with .className += ' whatever' and
.classList.remove('whatever') with .className.replace('whatever', '') if you want to show IE some love.
I told the above just to tell you this: if you want to get going, don't reinvent the wheel.
It's great you use vanilla javascript. But sooner or later you'll end up writing your own wrappers for common things. Depending on how good you are/have become, you'll write your own, limited, custom version of jQuery. Allow me to put things into perspective: Google included a lite version of jQuery into AngularJS. It's that good.
You, as an single developer, do not stand a chance at writing a better, more streamlined and tested version of it. And besides, you don't have to. Use your skill and abilities to go forward, not sideways.
This should be simple but I guess no jQuery makes it a bit difficult.
I want to repeat a process where a div goes 100px to the right (with animation) and then 100px to the left (so i want a continuous movement).
There seems to be plenty of jQuery answers to this question yet no pure javascript solution. I'm probably missing something obvious here yet I can't find it.
Here is the code:
var left = 0;
var id = setInterval(function(){goRight()}, 10);
var ed = setInterval(function(){goLeft()}, 10);
function goRight(){
var redpixel = document.getElementById("redpixel");
left++;
redpixel.style.left = left + "px";
if (left>100) {
clearInterval(id)
goLeft();
}
}
function goLeft(){
var redpixel = document.getElementById("redpixel");
left-=1;
redpixel.style.left = left + "px";
if (left<100) {
clearInterval(ed);
goRight()
}
}
HTML:
<button onclick="goRight()">Go Right</button>
<div id="redpixel"></div>
CSS:
.container {
width: 480px;
height: 800px;
border: 1px solid black;
}
#redpixel {
position: absolute;
top: 200px;
left: 0;
background: red;
width: 25px;
height: 25px;
}
Last comments:
The animation starts without me calling any function (without using the button), how is that possible?
The animation works but stops when it hits the first 100px.
(Additional question) - if i put the var redpixel out of the function it doesn't work at all, why?
All help appreciated, thanks!
The problem with your code is that you set left and right animations at the same time, and the left one is cleared immediately because left<100. Fixed code:
var left = 0,
id = setInterval(goRight, 10);
ed;
function goRight() {
var redpixel = document.getElementById("redpixel");
left++;
redpixel.style.left = left + "px";
if (left > 100) {
clearInterval(id);
ed = setInterval(goLeft, 10);
}
}
function goLeft() {
var redpixel = document.getElementById("redpixel");
left -= 1;
redpixel.style.left = left + "px";
if (left < 1) {
clearInterval(ed);
id = setInterval(goRight, 10);
}
}
#redpixel {
position: absolute;
top: 50px;
left: 0;
background: red;
width: 25px;
height: 25px;
}
<div id="redpixel"></div>
One more point, is as demonstrated by Adjit it really makes sense to look at CSS approach as simpler and more effective.
You don't need any JavaScript at all actually, and it is quite simple to do with CSS3.
Just need to set up keyframes and animation like so: (obviously including the necessary browser compatibility)
#box {
height: 100px;
width: 100px;
background: red;
position: relative;
animation: waver 2s infinite;
-webkit-animation: waver 2s infinite;
}
#keyframes waver {
0% {left: 0px;}
50% {left: 100px;}
100% {left: 0px;}
}
#-webkit-keyframes waver {
0% {left: 0px;}
50% {left: 100px;}
100% {left: 0px;}
}
See this fiddle for an example: http://jsfiddle.net/bwsd3eoy/
I found the following on codepen and really liked this effect. Now I'm trying to adapt this to my needs and ran into some problems:
Whenever a user scrolls down or is resizing his screen, the image is behaving weird (I can't describe it in my own words, see jsfiddle for what I mean).
I guess this problem might relate to the 'background-attachment: fixed' property.
See:
.image {
width:100%;
height:100%;
position:absolute;
bottom:0;
background:url("http://lorempixel.com/400/200/") fixed top center no-repeat;
background-clip:content-box;
opacity: 0.4;
filter: alpha(opacity=40);
}
.show {
width:100%;
height:100%;
position:absolute;
bottom:0;
background:url("http://lorempixel.com/400/200/") fixed top center no-repeat;
background-clip:content-box;
}
I tried to experiment with both, the position of the div and the background-attachment property, but I didn't get a decent result. You can see my updated fiddles for that (Rev.: 2-4).
Does one of you have an idea of how I can use this effect without the shown weird behaviours?
Maybe there's some jQuery magic with whose help I can achieve this effect?
It would be best if the solution also supports the IE 8, but it's not a must at this point, as I only want to understand what I did wrong.
Thanks in advance.
The problem is that author used fixed background attachment, without it the script is more complex.
If I get it right you want to control the position by clicking the buttons.
I created a snippet that will give you a good starting point: JSnippet
As you can see things are more complex there but it does not uses fixed background and allows you to easily update the "loading" to any point you want, I have not tested it but it should work on most of the browsers and even older once.
You can set all you need using attributes:
data-loader-size -> sets the size.
data-back-image -> sets the back image.
data-front-image -> sets the front image.
data-update-to -> For the controls set the percentage you want.
The CSS:
div.loader {
position:relative;
background-repeat:no-repeat;
background-attachment: scroll;
background-clip:content-box;
background-position:0 0;
margin:0;
padding:0;
}
div.loader .loaded {
position:absolute;
top:0;
left:0;
background-repeat:no-repeat;
background-attachment: scroll;
background-clip:content-box;
background-position:0 0;
margin:0;
padding:0;
}
div.loader .position {
position:absolute;
left:0;
border-top:1px dashed black;
width: 100%;
text-align:center;
margin:0;
padding:0;
min-height: 40px;
}
div.loader .position div {
font-family: 'Concert One';
background:#2f574b;
width: 25%;
margin:0;
padding:5px;
margin: 0 auto;
text-align:center;
border-radius: 0 0 4px 4px;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
color:white;
}
The HTML:
<div class="loader"
data-loader-size="450px 330px"
data-back-image="http://fdfranklin.com/usf-bull-bw.png"
data-front-image="http://fdfranklin.com/usf-bull.png"
>
<div class="loaded"></div>
<div class="position"><div>0%</div></div>
</div>
<br><br>
<div>
<button class="set-loader" data-update-to="0">Set 0%</button>
<button class="set-loader" data-update-to="25">Set 25%</button>
<button class="set-loader" data-update-to="50">Set 50%</button>
<button class="set-loader" data-update-to="100">Set 100%</button>
</div>
The jQuery:
$(function() {
var loader_class = ".loader",
control_class= ".set-loader";
var oLoader = {
interval : 10,
timer : null,
upPerc : 0,
upHeight : 0,
curHeight : 0,
step : 1,
diff_bg : 0,
diff_top : 0,
size : $(loader_class).data("loader-size").split(" "),
heightInt : 0,
bimage : $(loader_class).data("back-image"),
fimage : $(loader_class).data("front-image"),
loader : $(loader_class).children('.loaded').eq(0),
position : $(loader_class).children('.position').eq(0),
pos_height : 0
};
oLoader.heightInt = parseInt(oLoader.size[1],10);
oLoader.pos_height = parseInt($(oLoader.position).height(),10);
$(loader_class).css({
width: oLoader.size[0],
height: oLoader.size[1],
'background-image':'url(' + oLoader.fimage + ')',
'background-size':oLoader.size.join(' ')
});
$(oLoader.loader).css({
width: oLoader.size[0],
height: oLoader.size[1],
'background-image':'url(' + oLoader.bimage + ')',
'background-size':oLoader.size.join(' ')
});
$(oLoader.position).css({
bottom: 0 - oLoader.pos_height
});
$(control_class).each(function(){
$(this).click(function(){
clearInterval(oLoader.timer);
oLoader.upPerc = parseInt($(this).data('update-to'));
oLoader.upHeight = Math.ceil((oLoader.upPerc/100)*oLoader.heightInt);
oLoader.upHeight = (oLoader.upHeight>oLoader.heightInt?oLoader.heightInt:oLoader.upHeight);
oLoader.curHeight = parseInt($(oLoader.loader).height(),10);
oLoader.step = (oLoader.upHeight>(oLoader.heightInt - oLoader.curHeight)?-1:1);
oLoader.diff_bg = (oLoader.step === 1?
(oLoader.heightInt - oLoader.curHeight) - oLoader.upHeight:
oLoader.upHeight - (oLoader.heightInt - oLoader.curHeight));
oLoader.diff_top = parseInt($(oLoader.position).css('bottom'),10);
oLoader.timer = setInterval(function () {
if (oLoader.diff_bg) {
oLoader.diff_bg--;
oLoader.curHeight += oLoader.step;
oLoader.diff_top += -oLoader.step;
oLoader.calc_perc = Math.ceil((oLoader.diff_top + oLoader.pos_height) / oLoader.heightInt * 100);
oLoader.calc_perc = (oLoader.calc_perc < 0?0:oLoader.calc_perc);
oLoader.calc_perc = (oLoader.calc_perc > 100?100:oLoader.calc_perc);
$(oLoader.loader).css({ height: oLoader.curHeight });
$(oLoader.position).css({ bottom: oLoader.diff_top });
$(oLoader.position).children('div').text(oLoader.calc_perc + "%");
} else {
clearInterval(oLoader.timer);
$(oLoader.position).children('div').text(oLoader.upPerc + "%");
}
}, oLoader.interval);
});
});
});