Progress bar in a div - javascript

I have a progress bar on my body. When I click on a button a div appear, we can scoll on this div and I would liked to have also a progress bar for this one. I took the Jquery code of the progress bar
MY JSFIDDLE
window.onscroll = function() {
myFunction()
};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$(this).text("Open ↓");
} else {
$(this).text("Close ↑");
}
$('.blue-container').toggleClass('In');
$('body').toggleClass('hideOverflow');
$(this).toggleClass("clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<button> Open ↓</button>
<div class='blue-container'>
<div class='blue'>
<p>Hello ! Scroll down. I would like to have a progress bar for this div, like the body.</p>
</div>
</div>

You need to create same progress setter function like you've set on window, except this one should use blue container scrollable element for scroll position measurement.
Remember that after your blue box is closed, you don't need setting progress from this box anymore, so you should unbind setter function ($scroller.off('scroll', progressSetter)). It will be bound again after next opening of blue box.
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
$('button').on('click', function() {
var $container = $('.blue-container'),
$scroller = $container.find('.blue'),
$btn = $(this),
$bar = $('#myBar'),
progressSetter = function () {
var height = $scroller[0].scrollHeight - $scroller.outerHeight();
$bar.css({
height: $scroller.scrollTop() / height * 100 + '%'
});
};
if ($btn.hasClass("clicked")) {
$btn.text("Open ↓");
$scroller.off('scroll', progressSetter)
} else {
$btn.text("Close ↑");
$scroller.on('scroll', progressSetter)
}
$container.toggleClass('In');
$('body').toggleClass('hideOverflow');
$btn.toggleClass("clicked");
});
https://jsfiddle.net/uo34ru7d/76/
As I can see, you used example code from tutorial. Try to figure out how this scrolling bound functions work (and event binding itself) and you will be able to create one function for both window and your blue container, make that your homework ;)

Related

How to start my scroll progress bar from 10% instead of 0?

I've managed to implement a scrolling progress bar that works fine (copied the one from w3schools). My issue is that before the user starts scrolling, I want the progress bar to not start from 0 but from 10% (width). It looks fine initially, but after you start scrolling, it resets to 0, and when you scroll back up it scrolls back to a value of 0.
Here's a fiddle to show what I mean: https://jsfiddle.net/z3s4hqvj/
Also, here's my code:
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 96;
document.getElementById("myBar").style.width = scrolled + "%";
};
Try this little tweak.
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 96;
if(scrolled>10){
document.getElementById("myBar").style.width = scrolled + "%";
}
};

Auto scrolling to element in scrollable div

I have 5 elements that are within a div larger than the screen (on a mobile phone).
I want the user to be able to click on one of the elements and have that element scroll to the centre of the screen.
I've tried writing this with jQuery myself, but I can't seem to get the logic quite right. I've got it kind of moving but the element selected doesn't go to the centre of the screen.
Here's a Fiddle of what I have do far: http://jsfiddle.net/geQ64/1/
Here's the JS from the fiddle also:
$(window).on('load', function() {
$('.tab-3').trigger('click');
var width = $(window).width();
if (width < 651) {
$('.ul-wrap').scrollLeft( $('.tab-3').offset().left );
}
});
$('.single-tabs').on('click', function() {
var offset = $('.tabs').width();
offset = offset/5;
var center = offset/2;
var tab = $(this).data('tab');
$('.tabs-content').hide();
$('.tab'+ tab +'').show();
var width = $(window).width();
if (width > 650) {
var arrow = tab*20-12;
$('.arrow-up').css('margin-left', '' + arrow + '%');
} else {
tab = tab - 1;
var position = offset * tab - center;
$('.ul-wrap').scrollLeft(position);
}
});
Found a fix, here's the JS is anyone needs it.
The - 55 in the var position is for an arrow that sits in the centre of the page below the elements I'm moving with this script.
$(window).on('load', function() {
$('.tab-3').trigger('click');
var width = $(window).width();
if (width < 651) {
var offset = $('.tabs').width();
offset = offset/7;
var center = offset/2;
var position = offset * 2 + center - 50;
$('.ul-wrap').animate({
scrollLeft: position
}, 200);
}
});
$('.single-tabs').on('click', function() {
var offset = $('.tabs').width();
offset = offset/7;
var center = offset/2;
var tab = $(this).data('tab');
$('.tabs-content').hide();
$('.tab'+ tab +'').show();
var width = $(window).width();
if (width > 650) {
var arrow = tab*20-12;
$('.arrow-up').css('margin-left', '' + arrow + '%');
} else {
tab = tab - 1;
var position = offset * tab + center - 50;
$('.ul-wrap').animate({
scrollLeft: position
}, 200);
}

Text parallax not working

I'm using jquery.parallax-1.1.3.js for a parallax effect. (site: http://ianlunn.co.uk/plugins/jquery-parallax/)
Problem: it works with css background-position. This works for background images but not for text in my html.
What I want: add some code to this js file that allows me to use the parallax effect on html text (H1, H2). I prefer with an ID. So a H1 would have a div around it with an ID that is connected with the parallax effect.
This is the js:
(function( $ ){
var $window = $(window);
var windowHeight = $window.height();
$window.resize(function () {
windowHeight = $window.height();
});
$.fn.parallax = function(xpos, speedFactor, outerHeight) {
var $this = $(this);
var getHeight;
var firstTop;
var paddingTop = 0;
//get the starting position of each element to have parallax applied to it
$this.each(function(){
firstTop = $this.offset().top;
});
if (outerHeight) {
getHeight = function(jqo) {
return jqo.outerHeight(true);
};
} else {
getHeight = function(jqo) {
return jqo.height();
};
}
// setup defaults if arguments aren't specified
if (arguments.length < 1 || xpos === null) xpos = "50%";
if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
if (arguments.length < 3 || outerHeight === null) outerHeight = true;
// function to be called whenever the window is scrolled or resized
function update(){
var pos = $window.scrollTop();
$this.each(function(){
var $element = $(this);
var top = $element.offset().top;
var height = getHeight($element);
// Check if totally above or totally below viewport
if (top + height < pos || top > pos + windowHeight) {
return;
}
$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
});
}
$window.bind('scroll', update).resize(update);
update();
};
})(jQuery);
This is how to call the js from html:
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#third').parallax("50%", 0.5);
})
</script>
You give a div an ID. You give this Div a background-image. You connect the ID to the parallax effect above. I want to do the same, but then with an H1.

dynamic div not firing

I'm trying to create a dynamic scroll in my div where data can keep loading before I get to the bottom of the div. I fairly wet behind the ears and am not sure as to if I'm looking at this the right way, because my code is not firing at all. Any guidance will be greatly appreciated
function yHandler (){
var movelist = document.getElementById('movelist');
//turning div into an object
var contentHeight = movelist.offsetHeight;
//gets page content height, this so you know how much vetical pixel height you
//have on the page
var yOffset = movelist.pageYoffset;
//get vertical scroll position, lets you know where the user is in their scroll
//postion
var y = yOffset + movelist.innerHeight;
//getting inner height of div
if(y >= contentHeight){
//if the user scrolls to the bottom. If user goes over or hits it
movelist.innerHTML += '<div class ="newData">hey look at me</div>';
}
}
div.onscroll = yHandler;
//listening and will fire off yHandler whenever the div is scrolled up or down
Instead of
div.onscroll = yHandler;
try
window.onscroll = yHandler;
Demo
But
if you want to set scroll handler to the div with then try this:
/*
* Keep reference of div id=movelist
* out of yHandler method
*/
var movelist = document.getElementById('movelist');
function yHandler() {
var contentHeight = movelist.offsetHeight;
var yOffset = movelist.pageYoffset;
var y = yOffset + movelist.innerHeight;
if (y >= contentHeight) {
movelist.innerHTML += '<div class ="newData">hey look at me</div>';
}
}
// handler to div with id=movelist
movelist.onscroll = yHandler;
Working sample​
Update to your code
var movelist = document.getElementById('movelist');
function yHandler() {
var contentHeight = movelist.scrollHeight;
var yOffset = movelist.clientHeight;
var y = yOffset + movelist.scrollTop;
if (y >= contentHeight) {
movelist.innerHTML += '<div class ="newData">hey look at me</div>';
}
}
movelist.onscroll = yHandler;​
​
Working sample
You should replace your following line:
div.onscroll = yHandler;
for this one:
$(window).bind("scroll", yHandler);
that would do what you want.

Edit this expression to turn fixed bottom in fixed top

this function is supoused to work in iphone,
$(document).ready(function() {
$('#head').css('position','fixed');
window.onscroll = function() {
document.getElementById('head').style.top =
(window.pageYOffset + window.innerHeight + 25) + 'px';
// alert((window.pageYOffset + window.innerHeight - 25) + 'px');
};
});
but it's supoused to keep the div (25px) at the bottom of the page, i need it on top of the page no matter how much i scroll
i'm tring like this
$(document).ready(function() {
$('#head').css('position','fixed');
var height = $('#head').height();
window.onscroll = function() {
document.getElementById('head').style.top =
(window.pageYOffset) - height + 'px';
// alert(window.pageYOffset); alert(window.innerHeight);
};
});
but it seems that the #head div is not following properly the scroll (it seems like it bounces), any idea what i'm missing??
Position fixed do not work in iPhone. So it is bound to bounce whenever you scroll the page until the scroll handler set its new position.
$(document).ready(function() {
$('#head').css('position','absolute');
$(window).scroll(function() {
$('#head').css({
top: window.pageYOffset
});
});
});
Try a little more jQuery:
window.onscroll = function() { $('#head').offset(0,0); }

Categories

Resources