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.

JQuery continuous image carousel only moving one image at a time?

Currently working on an image carousel and I believe it is 99% done, except for one thing... I can only move one picture at a time, and then I have to rehover in order to keep the slider going. So is there some sort of jump statement or goto statement that I can use to continually run the loops?
Here is what I have so far :
Fiddle
JQuery
$(document).ready(function(){
$('.carousel').each(function(){
if($(this).width() < $(this).children('ul').width()){
$(this).children('carrow').each(function(){
$(this).hide();
});
}
});
$('.carousel').hover(function(){
$(this).children('.carrow').each(function(){
$(this).addClass('carrow-hover');
});
}, function(){
$(this).children('.carrow').each(function(){
$(this).removeClass('carrow-hover');
});
});
$('.carrow').hover(function(){
var SD = 210;
var $carousel = $(this).parent();
var $ul = $carousel.children('ul');
var distance = SD;
var time = 2500;
var rate = distance/time;
//When animation is completed, Jump back to here
distance = Math.abs($ul.position().left);
if($(this).hasClass('left-arrow')){
if(distance == 0) {
$ul.css({left: -210});
$ul.prepend($ul.children('li:last-child'));
} else {
time = distance/rate;
}
$ul.stop().animate({
left: 0
}, time, 'linear');
}
else if($(this).hasClass('right-arrow')){
if(distance != 0){
distance = SD - distance;
time = distance/rate;
}
$ul.stop().animate({
left: -210
}, time, 'linear', function(){
$ul.append($ul.children('li:first-child'));
$ul.css({left: 0});
});
}
}, function(){
$(this).parent().children('ul').stop();
});
});

You can separate animation routine in it's own function, e.g.
function myAnimate(that){
// animation goes here
}
And call itself as a callback function at the animation end
$ul.stop().animate({
left: 0
}, time, 'linear', function(){myAnimate(that)});
This way as soon as one animation ends - the other begins
Demo: http://jsfiddle.net/bjyuA/1/

All I did was loop the part I had wanted and created a few extra dependencies which Yuriy had fixed, but I figured I would share my approach as well.
$('.carrow').hover(function(){
var SD = 210;
var $this = $(this);
var $carousel = $(this).parent();
var $ul = $carousel.children('ul');
var distance = SD;
var time = 2500;
var rate = distance/time;
distance = Math.abs($ul.position().left);
continue_scroll = function(dist) {
time = 2500;
if(arguments.length != 0){
distance = dist;
}
if($this.hasClass('left-arrow')){
if(distance == 0) {
time = 2500;
} else {
time = distance/rate;
}
$ul.stop().animate({
left: 0
}, time, 'linear', function(){
$ul.prepend($ul.children('li:last-child'));
$ul.css({left: -210});
continue_scroll(210);
});
}
else if($this.hasClass('right-arrow')){
if(distance != 0 && arguments.length == 0){
distance = SD - distance;
time = distance/rate;
}
$ul.stop().animate({
left: -210
}, time, 'linear', function(){
$ul.append($ul.children('li:first-child'));
$ul.css({left: 0});
continue_scroll(0);
});
}
}
continue_scroll();
}, function(){
$(this).parent().children('ul').stop();
});

jQuery animate() doesn't correctly animate height the second time

I have built a toggle that will slide down a div to reveal content. I am not using the normal toggle() function of jQuery because I wanted to show the top 300px of content and then slide to reveal the rest.
Anyways, I have a script setup that animates the height of the container div, which reveals the content inside.
function slideCut() {
var revertHeight = 300;
var finalHeight = 0;
var s = 1000;
$('.cutBottom a').click(function() {
event.stopPropagation();
var p = $(this).parent().parent();
var h = p.css('height', 'auto').height();
var cut = $(this).parent().find('.cutRepeat');
// Fix height
if (finalHeight == 0) {
p.css('height', 'auto');
finalHeight = p.height();
p.height(revertHeight);
}
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
p.animate({height:revertHeight}, {
duration: s
});
cut.fadeIn('fast');
} else {
$(this).addClass('toggled');
p.animate({height:finalHeight}, {
duration: s,
complete: function() {
cut.fadeOut('fast');
}
});
}
return false;
});
}//end
The problem is, the second time it animates the height to the full size (sliding the div to reveal content) it does not animate, it just jumps to the full height. Why is this happening?
Working example: http://jsfiddle.net/6xp2Y/3/

After all that hard work and fiddle being broken, all we had to do was remove one line from your code:
function slideCut() {
var revertHeight = 300;
var finalHeight = 0;
var s = 1000;
$('.cutBottom a').click(function() {
event.stopPropagation();
var p = $(this).parent().parent();
//var h = p.css('height', 'auto').height(); //REMOVE THIS LINE
var cut = $(this).parent().find('.cutRepeat');
// Fix height
if (finalHeight == 0) {
p.css('height', 'auto');
finalHeight = p.height();
p.height(revertHeight);
}
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
p.animate({height:revertHeight}, {
duration: s
});
cut.fadeIn('fast');
} else {
$(this).addClass('toggled');
p.animate({height:finalHeight}, {
duration: s,
complete: function() {
cut.fadeOut('fast');
}
});
}
return false;
});
}//end
slideCut();
Updated your fiddle: http://jsfiddle.net/brandonscript/6xp2Y/5/

Updated answer!
The proplem lies here
if (finalHeight == 0) {
parent.css('height', 'auto');
finalHeight = parent.height();
parent.height(revertHeight);
console.log('finalHeight:'+finalHeight);
}
This is only running at the beginning, because finalHeight is not 0 anymore after first run.
You can fix this by setting finalHeight back to 0 after closing it again, like so
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
parent.animate({height:revertHeight}, {
duration: speed
});
cut.fadeIn('fast');
finalHeight = 0;
} else { [...]

marginLeft only resets if called twice

I have created a basic carousel type slidshow, however to get it to work I had to call the following function twice for it to actually set the margin-left property to 0px.
$("#slide ul").stop().css('marginLeft', '0px');
I was wondering what I'm doing wrong, as I'm new to jquery.
The entire thing can be found here http://jsfiddle.net/xZBZK/
Just the JavaScript for convenience:
var offset = 0;
var count;
var width = 500;
var height = 333;
var interval;
$(document).ready(function() {
count = $("#slide ul").children().length;
// Add the first image to the end so it loops.
$("#slide ul").children().first().clone().appendTo("#slide ul");
start();
});
function nextImage() {
$("#slide ul").stop();
offset+=width;
if(offset / width == count) {
$("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
}
$("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);
return offset;
}
function resetImage() {
$("#slide ul").stop().css('marginLeft', '0px');
$("#slide ul").stop().css('marginLeft', '0px');
offset = 0;
//start();
}
function stop() {
clearInterval(interval);
}
function start() {
interval = setInterval(nextImage, 3000);
}
I'm using JQuery 1.9.1

Is it because you are loading two animations into the queue?
if(offset / width == count) {
$("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
}
$("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);
Maybe you want:
if(offset / width == count) {
$("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
}else{
$("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);
}
I think .stop() only stops the current animation and doesn't clear the queue. so its defaulting to the animation before it.

How can I make a div appear over specific area tags on an image on mouseover?

I have some javascript that moves an image continuously left. When you mouseover the image, I want the scrolling to stop, and I want a slightly transparent div with some custom text to appear over whatever area tag your mouse is over.
Here is the JS I'm using, and I commented out where things should happen. How would I do this?
$(document).ready(function() {
var date = new Date();
var style = "day"
if (date.getHours() >= 17 && date.getHours() <=5) {
style="night";
}
setInterval(wells_fancy_slider, 50);
$('area').hover(function() {
// here is where the code should go
paused = true;
}, function() {
// here is where you hide the div
paused = false;
})
})
function wells_fancy_slider() {
if (!paused) {
if (parseInt($('#pic1').css('left')) < -2770) {
$('#pic1').css('left', '5586');
}
if (parseInt($('#pic2').css('left')) < -2770) {
$('#pic2').css('left', '5586');
}
if (parseInt($('#pic3').css('left')) < -2770) {
$('#pic3').css('left', '5586');
}
$('#pic1, #pic2, #pic3').css('left', '-=5');
}
}

Not sure it will fit your needs:
CSS:
#mydiv{position:absolute;display:none}
$('area').hover(function() {
$('mydiv').offset({ top: $(this).offset().top, left: $(this).offset().left}).fadeIn();
paused = true;
}, function() {
$('#mydiv').hide();
paused = false;
})

Try this one..
t = setInterval(wells_fancy_slider, 50);
$('#area').hover(function(e) {
clearInterval(t);
var parentOffset = $(this).offset(); // or $(this).parent().offset();
var x = e.pageX - parentOffset.left;
var y = e.pageY - parentOffset.top;
paused = true;
}, function() {
clearInterval(t);
t = setInterval(wells_fancy_slider, 50);
paused = false;
});