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.

Where to add code in wordpress js file?

I am having trouble with where to add some js/jquery. code. I have a js file in my wordpress template and want to add a simple piece of code to show/hide a div, although it breaks the exisiting js/jquery. Where do I add it in the file, so it will not break it and/or what is the way to structure this file?
Exisiting Wordpress JS file...
jQuery(document).ready(function( $ ) {
//VIDEO
var iframe = $('.videoPlayer')[0],
player = $f(iframe),
status = $('.status');
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('.playPause').bind('click', function() {
player.api($(this).text().toLowerCase());
console.log('clicked'); // triggers
player.api('paused', function(paused) {
console.log('inside paused'); // doesn't trigger
if (paused) {
player.api('play');
}
else {
player.api('pause');
}
});
});
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// IFRAME RESIZE
function videoWrapper() {
var winW = $(window).width();
var winH = $(window).height();
var winR = winH / winW;
var video = $("#videoContainer iframe");
// console.log( winW, winH, winR );
// ratio of original video
var vidR = video.attr("height") / video.attr("width");
// ratio of iframe
var ifrR = video.height() / video.width();
// ifrR nedds to be 0.65
//var diff = winW / (winH / vidR);
if ( winR > vidR ) {
// diff between current video height and winH
var diff = winH / (winW * vidR);
var newW = winW * diff;
var newH = winW * diff * 0.65;
video.css({
"width": newW,
"margin-left": 0 - (newW - winW) / 2,
"margin-top": 0 - (newH - winH) / 2,
"height": newH
});
} else {
video.css({
"width": winW,
"margin-left": "",
"margin-top": 0 - ( (winW * 0.65) - winH ) / 2,
"height": winW * 0.65
});
}
}
// VIDEO SELECT
if ( iOS ) {
$("#kvVideo").remove();
$("#kvVideoMobile").show();
}
// VIDEO MUTE
if ( iOS ) {
var iframe = document.getElementById("kvVideoMobile");
} else {
var iframe = document.getElementById("kvVideo");
}
var player = $f(iframe);
player.addEvent('ready', function() {
// player.api('setVolume', 0);
// $("#videoContainer").on('click', function() {
// // Play the video
// player.api('play');
// alert("play");
// });
});
function muteVideo () {
player.api('setVolume', 0);
mute = true;
$("#mute_button").hide();
$("#volume_button").show();
// console.log("mute");
}
function unmuteVideo () {
player.api('setVolume', 1);
mute = false;
$("#mute_button").show();
$("#volume_button").hide();
// console.log("unmute");
}
var mute = false;
$('#button').on("click", function(){
// console.log("button click");
if ( !mute ) {
muteVideo();
} else {
unmuteVideo();
}
});
// EVENTS
$(window).on("load", function(){
videoWrapper();
}).on("resize", function(){
videoWrapper();
sectionCalc();
});
});
The second part of code I want to add into the js file, so it will work with the code already there...
$(document).ready(function(){
$(".colophon").hide();
$(".newsletter").hide();
$("#colophon").click(function(){
$(".newsletter").hide();
$(".colophon").fadeToggle('slow');
});
$("#newsletter").click(function(){
$(".colophon").hide();
$(".newsletter").fadeToggle('slow');
});
});
Thanks!

I would create you own file and then enqueue it using WordPress's wp_enqueue_script() in your functions.php file

stop an event upon mouseup fired by mousedown in jquery

I have searched a lot but i could not find any solution for this or may be i was unable to find good keywords for the question.
I am working on an audio player and the problem is volume control.
Here is my code the dragging function should only occur when mousedown function is working otherwise it should not work , but it does not disable onmousemove event on leaving the mouse button so i need your help..
$(document).ready(function(){
$(".volume_wrapper_slider").on("mousedown", function(e) {
$(this).on("mousemove", function(e) {
isDragging = true;
var slider_width = $(this).width();
var slider_offset = $(this).offset().left;
var percentage1 = (100 / slider_width);
var current_percentage = percentage1 * (e.clientX-slider_offset);
// move the bar w.r.t click
$(".vol_slided").width(current_percentage+"%");
now_playing.volume = parseFloat(percentage1 * ($(".vol_slided").width()/100));
});
});
// mouse up
$(".volume_wrapper_slider").mouseup(function(e) {
e.stopPropagation();
});
});
Update -----------------------------
this solved my problem thanks to #jaromanda-x
// volume control
$(document).ready(function(){
$(".volume_wrapper_slider").on("mousedown", function(e) {
canDrag = true;
$(this).on("mousemove", function(e) {
if (canDrag == true) {
var slider_width = $(this).width();
var slider_offset = $(this).offset().left;
var percentage1 = (100 / slider_width);
var current_percentage = percentage1 * (e.clientX-slider_offset);
// move the bar w.r.t click
$(".vol_slided").width(current_percentage+"%");
now_playing.volume = parseFloat(percentage1 * ($(".vol_slided").width()/100));
}
});
// mouse up
$(".volume_wrapper_slider").mouseup(function(e) {
canDrag = false;
});
});
});

that worked for me..
// volume control
$(document).ready(function(){
$(".volume_wrapper_slider").on("mousedown", function(e) {
canDrag = true;
$(this).on("mousemove", function(e) {
if (canDrag == true) {
var slider_width = $(this).width();
var slider_offset = $(this).offset().left;
var percentage1 = (100 / slider_width);
var current_percentage = percentage1 * (e.clientX-slider_offset);
// move the bar w.r.t click
$(".vol_slided").width(current_percentage+"%");
now_playing.volume = parseFloat(percentage1 * ($(".vol_slided").width()/100));
}
});
// mouse up
$(".volume_wrapper_slider").mouseup(function(e) {
canDrag = false;
});
});
});

jQuery resize function with css height

I'm trying to set a height to a div that it's parent have. I've tried and when I use console.log() it's actually working. But the height doesn't set without a refresh.....
This is my function
// Set Hight
function fixingHeight() {
function setHeight() {
var windowWidth = window.innerWidth;
var latestPostsWrapperHeight = $('#latestPosts').height();
var tabPane = $('#latestPosts').find('.tab-pane');
var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
var popularPostsWrapperHeight = $('#popularPosts').height();
var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
if(windowWidth > 767) {
$.each(tabPane, function() {
$(this).height(latestPostsWrapperHeight - 70);
});
$.each(tabPaneLists, function() {
$(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
});
$.each(profileWrapper, function() {
$(this).outerHeight(popularPostsWrapperHeight);
});
}
//console.log(windowWidth);
}setHeight();
$(window).resize(function() {
setHeight();
});
}fixingHeight();

To handle window resize event, call the function $(window).resize outside of the function setHeight()
to call setHeight() on first load, use the jquery handler $(document).ready
This is the final code :
function setHeight() {
var windowWidth = window.innerWidth;
var latestPostsWrapperHeight = $('#latestPosts').height();
var tabPane = $('#latestPosts').find('.tab-pane');
var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
var popularPostsWrapperHeight = $('#popularPosts').height();
var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
if(windowWidth > 767) {
$.each(tabPane, function() {
$(this).height(latestPostsWrapperHeight - 70);
});
$.each(tabPaneLists, function() {
$(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
});
$.each(profileWrapper, function() {
$(this).outerHeight(popularPostsWrapperHeight);
});
}
console.log(windowWidth);
}
$(document).ready(function() {
setHeight();
});
$(window).resize(function() {
setHeight();
});

remove the function wrapper fixingHeight(), 'setHeight()' is enough
$(window).resize dont't run because it is in a function so this is not working without calling the function wrapper, so get it outside of the function.
as # joram say, you can call $(document).ready when your document finish loading, so is ready.
$(document).ready(function() {
setHeight();
});
$(window).resize(function() {
setHeight();
});
function setHeight() {
var windowWidth = window.innerWidth;
console.log(windowWidth);
var latestPostsWrapperHeight = $('#latestPosts').height();
var tabPane = $('#latestPosts').find('.tab-pane');
var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
var popularPostsWrapperHeight = $('#popularPosts').height();
var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
if(windowWidth > 767) {
$.each(tabPane, function() {
$(this).height(latestPostsWrapperHeight - 70);
});
$.each(tabPaneLists, function() {
$(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
});
$.each(profileWrapper, function() {
$(this).outerHeight(popularPostsWrapperHeight);
});
}
}

javascript, slide div down on button click?

i am trying to get a div to slide down about 200px down a page using javascript when the user clicks another div which acts as a close button.
can someone please show me how i would do this?
<script>
$('.chat_close').click(function(e){
$('.chat_box').slideDown();
});
</script>

Someone already asked the same question a while ago. Avinash replied:
var minheight = 20;
var maxheight = 100;
var time = 1000;
var timer = null;
var toggled = false;
window.onload = function() {
var controler = document.getElementById('slide');
var slider = document.getElementById('slider');
slider.style.height = minheight + 'px'; //not so imp,just for my example
controler.onclick = function() {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height); // Current height
var init = (new Date()).getTime(); //start time
var height = (toggled = !toggled) ? maxheight: minheight; //if toggled
var disp = height - parseInt(slider.style.height);
timer = setInterval(function() {
var instance = (new Date()).getTime() - init; //animating time
if(instance <= time ) { //0 -> time seconds
var pos = instanceheight + Math.floor(disp * instance / time);
slider.style.height = pos + 'px';
}else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
}
},1);
};
};
You can see it here at this URL:
http://jsbin.com/azewi5

Use animate
Also, use .on
<script type="text/javascript">
$('.chat_close').on('click', function(e){
$('.chat_box').animate({"top": "200px");
});
</script>
HTML:
<div class="chat_close">
</div>