jQuery UI Slider doesn't work (fiddle is provided) - javascript

I've inserted a jQuery UI slider in my website, which works pretty good. Here you can see the slider: FIDDLE
When you click on 'back to the top' you see it just scrolls to the top. But when I go with the slider to for example 1918, it just goes without any slide.
Is there any way to apply this scroll jquery to the jQuery slider, so that also scrolls down the page just like the button 'back to the top'.
Thanks in advance.
Here's the code for the smooth scroll:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});

Use the same approach for scrolling down that you are using for scrolling up. The change function for your slider should use the same animate method. You can also simplify your function by removing the if statement and reusing the array for obtaining the anchor:
change: function(event, ui) {
$('html, body').animate({ scrollTop: $('#'+araObj[ui.value-1]).offset().top }, 900); }
});
Changing just that function would give you this:
$(function() {
var araObj = new Array( 1900, 1918, 1931, 1975, 1976, 1978, 2000, 2002, 2004, 2012, 2013 );
$("#slider-range-max").slider({
min: 0,
max: araObj.length,
value: 0,
create: function() {
for (i=0;i<=araObj.length;i++)
{
$(this).append($('<span></span>').css("left",((i+0.97)*(100/araObj.length))+"%").addClass("slider-digit").text(araObj[i]));
};
},
change: function(event, ui) {
$('html, body').animate({ scrollTop: $('#'+araObj[ui.value-1]).offset().top }, 900); }
});
});
// This is for the smooth scroll
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});

One major problem is that you are initializing $(function() { and $(document).ready(function(){ all the code can and should be written in one initialization function that runs when the document is ready.
The way you have it setup currently is causing some issues with the document and sometimes your elements are not being found by Id because of this.
I would consolidate your code into one ready function:
Something like this would work:
$(document).ready(function(){
var araObj = new Array( 1900, 1918, 1931, 1975, 1976, 1978, 2000, 2002, 2004, 2012, 2013 );
$("#slider-range-max").slider({
min: 0,
max: araObj.length,
value: 0,
create: function() {
for (i=0;i<=araObj.length;i++)
{
$(this).append($('<span></span>').css("left",((i+0.97)*(100/araObj.length))+"%").addClass("slider-digit").text(araObj[i]));
};
},
change: function(event, ui) {
var year = '';
var val=ui.value;
if(val == 1)
{
year = '1900'; //same tab
}
else if(val == 2)
{
year = '1918';
}
else if(val == 3)
{
year = '1931';
}
else if(val == 4)
{
window.location.href='http://www.google.com';
}
else if(val == 5)
{
window.location.href='http://www.google.com';
}
if(year != ''){
$('html, body').stop().animate({
'scrollTop': $('#'+year).offset().top
}, 900, 'swing', function () {
});
}
}
});
console.log(araObj);
$('.link').click(function(e){
e.preventDefault();
$('html, body').stop().animate({
'scrollTop': 0
}, 900, 'swing', function () {
});
});
});
Example:
http://jsfiddle.net/trevordowdle/wqB5q/9/

Related

How to make slow the Scroll-Top Speed

ScrollTop is a jquery plugin (go to top of page), trying to make slow Scroll Speed, but not working. I have changed scrollSpeed : 'fast', to scrollSpeed : 'slow', but it still fast, nothing change.
JS:
$.fn.extend({
addScrollTop: function(options) {
var defaults = {
useObjWindow : false,
scrollSpeed : 'fast',
zIndex: '99'
}
var options = $.extend(defaults, options);
if($('body').find('.scrollTop-btn').length == 0) {
$('body').append('<div class="scrollTop-btn" style="display:none;"><i class="fa fa-chevron-up"></i></div>');
}
if(options.useObjWindow) {
var parentWindow = this;
var scrollWindow = this;
}
else {
var parentWindow = window;
var scrollWindow = 'html, body';
}
$(document).ready(function() {
$('.scrollTop-btn').on('click', function() {
$(scrollWindow).animate({scrollTop:0}, options.scrollSpeed);
});
$(parentWindow).scroll(function() {
$('.scrollTop-btn').hide();
var aTop = $('.scrollTop-btn').height() + 20;
if($(this).scrollTop() >= (aTop + 20)) {
$('.scrollTop-btn').css('z-index', options.zIndex);
$('.scrollTop-btn').show();
}
else {
if($('.scrollTop-btn').is(":visible")) {
$('.scrollTop-btn').hide();
}
}
});
});
}
});
Call:
jQuery(document).ready(function() {
jQuery("body").addScrollTop();
});
How to make it slower or smoother, when it go to top?
use jquery animate()
$('html,body').animate({ scrollTop: 0 }, 'slow');
refer this stack overflow question
Only with CSS:
html {
scroll-behavior: smooth;
}
Using jQuery
If you want you can customize how much time you would like the "scrolling" to last. Or do something else when scroll effect is finished.
I have a: <a href="#" class="scrollToTop">
And want to scroll to an element with class "beginning"
$('.scrollToTop').on('click', function(event){
event.preventDefault();
$('html, body').stop().animate({scrollTop: $('.beginning').offset().top}, 500);
});
The last part where you have the 500. You can set there how much time you want the effect to last. In milliseconds.
http://api.jquery.com/animate/
Replace 'slow' with - Ex. 1000, 5000, 10000
$('html,body').animate({ scrollTop: 0 }, <milliseconds>);
// Scroll 2 sec
$('html,body').animate({ scrollTop: 0 }, 2000);
// Scroll 5 sec
$('html,body').animate({ scrollTop: 0 }, 5000);

jQuery animate callback with promise still fires too early

I scroll my homepage back up if the logo in my menu is clicked. I also have a listener on $(window).scroll() which animates an object out of the screen with a negative margin.
My problem is that this event gets triggered with the animation (animate scrollTop).
This shouldn't occur because I have a boolean variable which has to be true to do this, I only set this on true AFTER the scroll animation using a combination of .promise() and .done().
This is my JavaScript:
var firstscroll=true;
$(function(){
var captionWidth= $(".caption").children().size() * 35;
$(".caption").width(captionWidth);
$(window).scroll(function() {
if(firstscroll){
$(".hidden-menu").removeClass("hidden-menu", {duration:500});
$('.header').animate({
marginTop: $('.header').height() * -1
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500);
firstscroll = false;
}
});
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500).promise().done(resetFirstScroll());
});
});
var resetFirstScroll = function() {
firstscroll=true;
}
A solution would be to give the function a setTimeout of 50 milliseconds, but I'd rather do it correctly after the animation is completed.
Using the standard callback gives the same output:
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500, function() {
resetFirstScroll();
});
});
});
var resetFirstScroll = function() {
firstscroll=true;
}
For those who want the "hacky" solution:
var firstscroll=true;
$(function(){
var captionWidth= $(".caption").children().size() * 35;
$(".caption").width(captionWidth);
$(window).scroll(function() {
if(firstscroll){
$(".hidden-menu").removeClass("hidden-menu", {duration:500});
$('.header').animate({
marginTop: $('.header').height() * -1
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500);
firstscroll = false;
}
});
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500, function() {
setTimeout( resetFirstScroll, 50 );
});
});
});
var resetFirstScroll = function() {
firstscroll=true;
}

Jquery offset with % instead of px - possible?

I have this script were i want it to make an offset for 15% top of the id its scrolling to. I have try many things, so im kinda curious what approach you guys would take. I have stripped it down to what works, since all of my own attempts failed. Hope someone can help me out.
$('a[href*=#]').bind('click', function (e) {
e.preventDefault();
var target = $(this).attr("href");
$('html, body').stop().animate({ scrollTop: $(target).offset().top }, 800, function () {
location.hash = target;
});
return false;
});
i made a fiddle here: http://jsfiddle.net/77rFz/
I didn't try it, but I would say something like this could work:
$('a[href*=#]').bind('click', function (e) {
e.preventDefault();
var target = $(this).attr("href");
var offset = $(target).offset().top - $(target).height * 0.15;
$('html, body').stop().animate({ scrollTop: offset }, 800, function () {
location.hash = target;
});
return false;
});
Try something like this
Math.round(parseInt($(target).offset().top) * 0.15)
This worked!
$('a[href*=#]').bind('click', function (e) {
e.preventDefault();
var target = $(this).attr("href");
var parentDiv = $(this).parent(".wrap1");
var offset = Math.round(parseInt($(target).offset().top) - (0.15 * parentDiv.height()));
$('html, body').stop().animate({ scrollTop: offset }, 800, function () {
//location.hash = target;
});
return false;
});

Delay mousewheel function

I'm using the mousewheel and waypoints plugin to scroll sections of my page; The problem I am having is when I scroll using the apple mighty mouse the scrolling is too sensitive and the function gets triggered more then once when the animation is complete. I tried to set a timeout function and variable to check if the animation is complete but neither of these worked.
I would like to replicate an effect similar to the one on this website.
JQUERY
$('body').mousewheel(function(event, delta, deltaX, deltaY) {
clearTimeout(interval);
console.log('test');
$('section').waypoint(function(direction){
thisID = $(this);
},{ offset: '350' });
indexPos = thisID.index('section');
if (completed == true) {
completed = false;
var interval = "";
if (delta > 0) {
interval = setTimeout(function(){
if ($(this).not(":first-child")) {
//$(this).animate(function(){
$('html, body').stop().animate({
scrollTop: thisID.prev().offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
//});
}else {
$('html, body').stop().animate({
scrollTop: thisID.offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
},400);
}
else if (delta < 0) {
interval = setTimeout(function(){
if ($(this).not(":first-child")) {
$('html, body').stop().animate({
scrollTop: thisID.next().offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
else {
$('html, body').stop().animate({
scrollTop: thisID.offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
},400);
}
};
return false; // prevent default
});
I don't know what this is doing: indexPos = thisID.index('section'); but before doing anything, I would check if ins't anything in progress already:
$('body').mousewheel(function(event, delta, deltaX, deltaY) {
if($('html').is(':animated') || $('body').is(':animated')) return false;
// else, do your stuff...
});
You can use underscore js http://underscorejs.org/
and do something like this:
$('body').mousewheel(_.debounce(function() {
//handle the mouse wheel event in here
}, 30)
This will wait for 30 ms from the last mousewheel event before firing the callback
This website doesn't seem to use scrolling. It merely moves to a new anchor (watch the url when scrolling) which is triggered by moving (scrolling) your mouse up or down as a trigger which feels like lagged scrolling (but in fact, you don't have any control over the direction once it moves). You can use jquery animate to do that.

Desandro's new masonry example giving me "Uncaught ReferenceError: container is not defined"

I've been designing a freelance web design portfolio for my company. Which is static on s3 # http://drootech.com.s3-website-us-west-1.amazonaws.com/dtindex.html
Originally I had been customizing the older version of masonry (using jQuery/Javascript to create a responsive portfolio) with the ability to filter out various content types by category (design, engineering, etc.)
It seems to be working fine, however I am getting an error in my console "Uncaught ReferenceError: container is not defined"
Here's the code:
$(function (){
var columns = 3,
setColumns = function() { columns = $( window ).width() > 640 ? 3 : $(window).width() > 320 ? 2 : 1; };
setColumns();
$(window).resize(setColumns);
var $container = $('#portfoliocontainer');
$container.imagesLoaded(function(){
var msnry = new Masonry( container, {
itemSelector : '.item',
columnWidth: function( containerWidth ) { return containerWidth / columns;
}
});
});
});
Any kind of help or light on the situation would be greatly appreciated, I'm not sure why I'm getting the error.
EDIT I fixed the error with the following code.
// responsive masonry function
$(function msnry(){
var columns = 3,
setColumns = function() { columns = $( window ).width() > 640 ? 3 : $(window).width() > 320 ? 2 : 1; };
setColumns();
$(window).resize(setColumns);
// layout Masonry again after all images have loaded
var $container = $('#portfoliocontainer').masonry();
var msnry;
$container.imagesLoaded( function(){
var container = document.querySelector('#portfoliocontent')
msnry = new Masonry( container, {
itemSelector : '.item',
columnWidth: function( containerWidth ) { return containerWidth / columns;}
});
});
$('.expandi').click(function(){
$('.expand').slideDown('fast');
$(this).siblings('ul').toggle();
});
$('.engineeringiC').click(function(){
if($('div.item').hasClass('designshwr')){
masonry.hide(($this));
$container.masonry('reloadItems');
}
});
});
$("#seemore").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#mrkting").offset().top - 85
}, 2000);
//});
});
$("#home").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $(".masthead").offset().top - 85
}, 2000);
//});
});
$("#info").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#mrkting").offset().top - 85
}, 2000);
//});
});
$("#portfolio").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#portfolioo").offset().top - 85
}, 2000);
//});
});
$("#menui").click(function (){
//$(this).animate(function(){
$('#navbar').addClass('slicknav');
$('#navbar').slideDown('fast');
//});
});
$("#socialmedia").click(function (){
$("#myModal").modal('show');
});
$(window).scroll(function(){
if ($(this).scrollTop() > 1080) {
$('#contentnav').fadeIn('fast');
$('#contentnav').addClass('dynamicnav');
}
if ($(this).scrollTop() > 400) {
$('#navbar').slideUp('fast');
$('#navbarm').slideDown('fast');
} if ($(this).scrollTop() < 1080) {
$('#contentnav').removeClass('dynamicnav');
}
});
What I'm attempting to do with the code above when you click the div engineeringiC is hide everything that has the class "designshwr".
$('.engineeringiC').click(function(){
if($('div.item').hasClass('designshwr')){
masonry.hide(($this));
$container.masonry('reloadItems');
}
});
But I'm having a really difficult time making it work. Any thoughts, or suggestions? P.S. Ignore the expandi function that's something I need to rewrite.

Categories