We Keep Coding

Scrolling Tabs in Bootstrap 4

I am working on scrolling tab. Below is my code. I am facing problem that I am not able to click middle tabs. On right button click tabs scrolls move it gradually. What should I do to move tabs gradually? Please help
var hidWidth;
var scrollBarWidths = 40;
var widthOfList = function() {
var itemsWidth = 0;
$('.list a').each(function() {
var itemWidth = $(this).outerWidth();
itemsWidth += itemWidth;
});
return itemsWidth;
};
var widthOfHidden = function() {
return (($('.wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
};
var getLeftPosi = function() {
return $('.list').position().left;
};
var reAdjust = function() {
if (($('.wrapper').outerWidth()) < widthOfList()) {
$('.scroller-right').show().css('display', 'flex');
} else {
$('.scroller-right').hide();
}
if (getLeftPosi() < 0) {
$('.scroller-left').show().css('display', 'flex');
} else {
$('.item').animate({
left: "-=" + getLeftPosi() + "px"
}, 'slow');
$('.scroller-left').hide();
}
}
reAdjust();
$(window).on('resize', function(e) {
reAdjust();
});
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({
left: "+=" + widthOfHidden() + "px"
}, 'slow', function() {
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({
left: "-=" + getLeftPosi() + "px"
}, 'slow', function() {
});
});
Fiddle http://jsfiddle.net/vedankita/2uswn4od/13
Help me to scroll slowly on button click so that I can click on ease tab. Thanks

You should incrementally move the tabs "width of hidden", but no more than wrapper width...
var widthOfHidden = function(){
var ww = 0 - $('.wrapper').outerWidth();
var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
if (ww>hw) {
return ww;
}
else {
return hw;
}
};
var getLeftPosi = function(){
var ww = 0 - $('.wrapper').outerWidth();
var lp = $('.list').position().left;
if (ww>lp) {
return ww;
}
else {
return lp;
}
};
And then "readjust" after each movement to determine whether or not the scroll arrows still need to show...
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
reAdjust();
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
reAdjust();
});
});
Demo: https://www.codeply.com/go/Loo3CqsA7T
Also, you can improve the position of the last tab by making sure it's right position is never less than wrapper width to keep it aligned to the right edge...
var widthOfHidden = function(){
var ww = 0 - $('.wrapper').outerWidth();
var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());
if (ww>hw) {
return (rp>ww?rp:ww);
}
else {
return (rp>hw?rp:hw);
}
};

https://embed.plnkr.co/NcdGqX/
Look at this example. this tabs move gradually. and also you can use bootstrap 4.
I hope it might be helpful.

Make Javascript event happen only when scrolled to

I currently have a JavaScript creating small pop ups when the page loads. I would like to make them appear only when the user scrolls down to where they appear (over a photo).
Is this possible?
Here is the code:
jQuery(function(){
// initialize of labels
$('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300);
});
});
});
});
});
// dialog close
$('.dialog .close').click(function() {
$(this).parent().fadeOut(500);
return false;
});
// display dialog on click by labels
$('.labels a').click(function() {
$('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500);
return false;
});
// close dialog on click outside
$('.container').click(function() {
$('.dialog').fadeOut(500);
});
});

Check out this question: How to animate this when scrolled
Here is the basic code you want to use:
<script>
$(window).scroll(function() {
$('.labels').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + 400) {
$(this).fadeIn(100).effect('bounce', { times:3 }, 300);
}
});
});
</script>
You will also want to call the function on page load to initialize any elements that are visible without having to scroll
The OP in the question above links to a page with lots of cool animations you can use as well

Jquery dynamically created element won't ClearTimeout();

I'm trying to make a hover popup window with event information for a school project.
when i'm not hovering the popup i need to to be removed, but if you enter within a second apart it should clear my timeout. but it wont.
here's my code :
var timer;
var events = [1, 10, 18, "Museum De Vishal", 'event informatie', 'imgpath'];
$('.event:not(.order)').hover(function () {
var offset = $("#planyourday").offset();
var offsetTop = $(this).offset();
var width = $("#planyourday").width();
var height = $("#planyourday").height();
var eventHeader = events[3];
var eventImg = events[5];
var eventInfo = events[4];
$('#planyourday').append("<div title='press here for more information' class='hidden meh' id='eventInfo'><div class='arrow_box'></div><div class='eventMenu'><h2 class='eventHeader'></h2><div title='Close this' class='eventRemove'>X</div></div> <br /><img class='eventImg' /><br /><p class='eventInfo'></p></div>");
$('#eventInfo').css({ "top": offsetTop.top + 35 + "px", "left": offsetTop.left + "px", "height": (height - 8) + "px", "bottom": -height + "px" });
$('.arrow_box').css({ left: offsetTop.left + "px" });
$('.eventHeader').html(eventHeader);
$('.eventImg').attr('src', eventImg);
$('.eventInfo').html(eventInfo);
$('#eventInfo').slideDown();
}).children('.order').mouseover(function () {
return false;
});
$('body').on("mouseenter", "#eventInfo, .event", function () {
$(this).css({ border: "1px solid red" })
ClearTimer();
});
$('body').on("mouseout", "#eventInfo, .event", function () {
StartTimer();
});
function ClearTimer() {
clearTimeout(timer);
}
function StartTimer() {
timer = window.setTimeout(function () {
$('#eventInfo').remove();
}, 5000);
}
i hope you guys can help me, Thnx :)
update: here's a JSFiffle, http://jsfiddle.net/3uzo25cj/
update: i used the wrong mouse event i used mouseout and should have used mouseleave.

You should clear the running timer before starting a new one:
function ClearTimer() {
clearTimeout(timer);
}
function StartTimer() {
ClearTimer();
timer = window.setTimeout(function () {
$('#eventInfo').remove();
}, 5000);
}

$('body').on("mouseleave", "#eventInfo, .event", function () {
StartTimer();
});

Firing an animation when aligned

I am creating a splitscrolling website and it's working great. But i have one problem, when the user stops scrolling it fires a function called alignWhenIdle and what this does is align the columns so they become "one".
Now that is working nicely but i can't seem to target a specific part of the column that aligns. let's say when the number 2 column aligns ( see image ) i want to be able to fire an animation. I tried using a callback but that fires a function every time the columns are aligned.
This is my JS:
(function ($) {
var top = 0;
var contentHeight, contents, totalHeight;
var locked = false;
var timeout;
var align = function () {
var pos = (top + $(window).scrollTop());
var snapUp = 0 - (pos % contentHeight) < (contentHeight / 2);
var multiplier = snapUp
? Math.ceil(pos / contentHeight)
: Math.floor(pos / contentHeight);
var newTop = contentHeight * multiplier;
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200);
locked = false;
};
var reset = function () {
contentHeight = $('.right').height();
contents = $('.right > .content').length;
totalHeight = contentHeight * (contents - 1);
top = (0 - totalHeight);
};
var scrollRight = function () {
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
};
var alignWhenIdle = function (delay) {
clearTimeout(timeout);
timeout = setTimeout(align, delay);
};
$(document).on('ready', function () {
reset();
scrollRight();
});
$(window).on('scroll', function () {
locked = true;
scrollRight();
});
$(window).on('mouseup', function (e) {
if (locked) {
align();
}
});
$(window).resize(function () {
locked = true;
reset();
scrollRight();
alignWhenIdle(300);
});
$(window).on('mousewheel', function (e) {
alignWhenIdle(300);
});
$(window).on("keyup", function (e) {
alignWhenIdle(300);
});
})(jQuery);
http://jsfiddle.net/ev3B8/
Any help is much appreciated,
Cheers

See http://jsfiddle.net/5T9Y8/
Scroll till the column 2 and see result...
In the method align I've added a callback:
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
$(".animate").animate({ marginLeft: "200px" },300);
});
Works well, did you need exactly that?
EDIT
You should just check for some condition.
E.g. based on this solution Check if element is visible after scrolling you can build this:
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
if (isScrolledIntoView(".animate")) $(".animate").animate({ marginLeft: "200px" },300);
});
See updated solution here http://jsfiddle.net/5T9Y8/1/
This is only one way, I'm really sure there is a way to do it even better. E.g. you can calculate the current elements which are shown and then just find the things only inside of them.

I tried using a callback but that fires a function every time the columns are aligned.
Use one method for functioning only once instead of on.

Toggling height of single div in group of divs

I have a number of divs with the same class on one page. I would like them to have a fixed height which expands to full height when clicking a toggle button. So far I have assembled a script from the internet which sort of does that, but currently it expands ALL divs on the page, not just the one div associated with the expand buttons. Could someone help me fix the script so it only expands one div, possibly resets the other one if it is expanded and toggles it back when the expand button is click again?
jQuery(document).ready(function($) {
$.fn.toggleClick = function() {
var functions = arguments;
return this.click(function() {
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(this, arguments);
iteration = (iteration + 1) % functions.length;
$(this).data('iteration', iteration);
});
};
var $dscr = $(".textblock"),
$switch = $(".expand a"),
$initHeight = 130; // Initial height
$dscr.each(function() {
$.data(this, "realHeight", $(this).height()); // Create new property realHeight
}).css({ overflow: "hidden", height: $initHeight + 'px' });
$switch.toggleClick(function() {
$dscr.animate({ height: $dscr.data("realHeight") }, 300);
$switch.html("-");
}, function() {
$dscr.animate({ height: $initHeight}, 300);
$switch.html("+");
});
});
See my jsfiddle for the script so far:
http://jsfiddle.net/N9DfH/1/

http://jsfiddle.net/N9DfH/21/
jQuery(document).ready(function () {
$.fn.toggleClick = function () {
var functions = arguments;
return this.each(function () {
var divel = $(this);
$('.expand a', divel.parent()).click(function () {
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(divel, arguments);
iteration = (iteration + 1) % functions.length;
$(this).data('iteration', iteration);
});
});
};
var $dscr = $(".textblock"),
$initHeight = 130; // Initial height
$dscr.each(function () {
$.data(this, "realHeight", $(this).height()); // Create new property realHeight
}).css({
overflow: "hidden",
height: $initHeight + 'px'
}).toggleClick(function () {
this.animate({
height: this.data("realHeight")
}, 300);
}, function () {
this.animate({
height: $initHeight
}, 300);
});
});