Hai. My Project is Google Module Tab Application using html,css,jquery. here i take 10 tabs in a div. the overflow tabs as assigned as scroll.so the default scrollbar get viewed.For my Project completion,i am adjusted the left side moving tab and default scroll position and move the tab with scrollLeft() based on their current positions.The left side is fully working.If i am tried it on second side,somewhat fluctuations are coming.How do i configure my tab and default scroll position as parallel on right side and remove the fluctuations while moving.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/jquery.min.js"></script>
<script>
$(document).ready(function () {
var limit = $(".limit").innerWidth(); var Right,maxScrollLeft,count=0;
console.log("parent width" + limit);
var one, two; var left1;
var p = $("#parent");
var counts = $(".limit").children().length;
var singletabwidth = $(".limit").children().width();
var total = counts * singletabwidth;
console.log("the total tabs width" + total);
console.log("single tab width " + singletabwidth);
var l = $(".limit");
var e,b1;
console.log("the total number of childrens are" + counts);
var drag_min_xpos, drag_max_xpos, original_xpos;
var CursorLeft, CursorRight,Left;
var tab_id; var li = $(".limit").width();
var button, button_id, parent_width, left, original_xpos, my_xpos, prev_button, drag_start_xpos;
var next_button, prev_button_pos, next_button_pos, drag = null;
var tabLeft, tabTop, tabRight, tabBottom,Top2,Left2,T,outsideLeft,outsideRight,outsideBottom,outsideTop,P;
var X, Y,CursorBottom,CursorTop,direction;
P = $("#parent").offset();
outsideLeft = P.left;
outsideRight = outsideLeft + $("#parent").width();
outsideTop = P.top;
outsideBottom = outsideTop + $("#parent").height();var b;
$(".button").mousedown(function (event) {
if (event.which === 1) {
tab_id = $(this).attr('data-tab');
$('.tab').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
button = $(this);
drag = $(this);
T = $(this).offset();
tabLeft = event.pageX - T.left;
if (count != 0) {
$(button).removeClass("current");
}
button_id = button.attr('id');
parent_width = button.parent().innerWidth();
left = parseInt(button.css('left'));
original_xpos = button.position().left;
Right = original_xpos + $(button).innerWidth;
drag_min_xpos = 0 - original_xpos;
drag_max_xpos = parent_width - original_xpos - button.outerWidth();
drag_start_xpos = event.clientX;
my_xpos = original_xpos;
Left = event.pageX - my_xpos;
$('.button').each(function (i) {
$(this).attr('data-order', (i + 1));
});
prev_button = button.prev('.button');
next_button = button.next('.button');
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
$(window).on('mousemove', function (event) {
X = event.clientX;
Y=event.clientY;
tab_id = $(this).attr('data-tab');
$('.tab').removeClass('current');
$(this).addClass('current');
var one = $(this);
$(button).addClass('drag');
direction = my_xpos > button.position().left ? 'left' : 'right';
var new_left = left + (event.clientX - drag_start_xpos);
my_xpos =button.position().left;
if (direction=='right') {
console.log("direction" + direction);
console.log(my_xpos);
console.log(original_xpos);
}
else
{
console.log("direction" + direction);
console.log("my x pos"+my_xpos);
console.log("original x pos"+original_xpos);
}
button.css({ left: new_left + 'px' });
if (new_left < drag_min_xpos) { button.css({ left: drag_min_xpos + 'px' }); }
if (new_left > drag_max_xpos) { button.css({ left: drag_max_xpos + 'px' }); }
if (direction == 'right') {
if (my_xpos > original_xpos) {
if (X > 1000) {
direction = 'right';
console.log("direction" + direction);
console.log("myx_pos" + my_xpos);
console.log("button.pos().left" + button.position().left);
b1 = my_xpos-prev_button_xpos-(event.pageX-event.clientX);
console.log("event.ClientX" + event.clientX);
console.log("b1"+b1);
console.log("pageX" + event.pageX);
$(l).scrollLeft(event.pageX+b1);
my_xpos = my_xpos + b1;
if (drag) {
tabLeft = event.pageX - T.left;
CursorLeft = event.pageX - tabLeft;
CursorRight = CursorLeft + $(button).width();
if (((CursorTop >= outsideTop) && (CursorTop <= outsideBottom)) && ((CursorLeft >= outsideLeft) && (CursorLeft <= outsideRight)))
if ((((CursorRight) >= outsideLeft) && ((CursorRight) <= outsideRight)) && ((CursorBottom >= outsideTop) && ((CursorBottom) <= outsideBottom))) {
drag.offset({
left: event.pageX - tabLeft
});
}
}
if ((my_xpos + 50) > next_button_xpos) {
next_button.css({ left: (parseInt(next_button.css('left')) - next_button.outerWidth(true)) + 'px' });
var tmp_order = next_button.attr('data-order');
next_button.attr('data-order', button.attr('data-order'));
button.attr('data-order', tmp_order);
prev_button = next_button;
next_button = next_button.nextAll('.button:not(.drag)').first();
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
}
}
$(button).offset({
left: event.clientX,
});
if ((my_xpos + 50) > next_button_xpos) {
next_button.css({ left: (parseInt(next_button.css('left')) - next_button.outerWidth(true)) + 'px' });
var tmp_order = next_button.attr('data-order');
next_button.attr('data-order', button.attr('data-order'));
button.attr('data-order', tmp_order);
prev_button = next_button;
next_button = next_button.nextAll('.button:not(.drag)').first();
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
}
}
} else if (direction == 'left') {
if (my_xpos < original_xpos) {
if (X>=-1000) {
console.log(direction);
direction = 'left';
b = event.pageX + event.clientX;
console.log("event.clientX" + event.clientX);
console.log("event.pageX" + event.pageX);
console.log("b" + b);
$(l).scrollLeft(event.pageX + b);
my_xpos = my_xpos + b;
if (drag) {
CursorLeft = event.pageX - tabLeft;
CursorRight = CursorLeft + $(button).width();
if (((CursorTop >= outsideTop) && (CursorTop <= outsideBottom)) && ((CursorLeft >= outsideLeft) && (CursorLeft <= outsideRight)))
if ((((CursorRight) >= outsideLeft) && ((CursorRight) <= outsideRight)) && ((CursorBottom >= outsideTop) && ((CursorBottom) <= outsideBottom))) {
drag.offset({
left: event.pageX - tabLeft
});
}
}
if (my_xpos < (prev_button_xpos + 50)) {
prev_button.css({ left: (parseInt(prev_button.css('left')) + prev_button.outerWidth(true)) + 'px' });
var tmp_order = prev_button.attr('data-order');
prev_button.attr('data-order', button.attr('data-order'));
button.attr('data-order', tmp_order);
next_button = prev_button;
prev_button = prev_button.prevAll('.button:not(.drag)').first();
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
}
}
$(button).offset({
left: event.clientX,
});
if (my_xpos < (prev_button_xpos + 50)) {
prev_button.css({ left: (parseInt(prev_button.css('left')) + prev_button.outerWidth(true)) + 'px' });
var tmp_order = prev_button.attr('data-order');
prev_button.attr('data-order', button.attr('data-order'));
button.attr('data-order', tmp_order);
next_button = prev_button;
prev_button = prev_button.prevAll('.button:not(.drag)').first();
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
}
}
}
});
$(window).on('mouseup', function (event) {
dragging = null;
$(button).removeClass("active");
button = null;
if (event.which === 1) {
count++;
$('.button').removeClass('drag');
$(window).off('mouseup mousemove');
one = null; two = null;
$('.button').each(function () {
var this_order = parseInt($(this).attr('data-order'));
var prev_order = $(this).siblings('.button[data- order="' + (this_order - 1) + '"]');
if (prev_order.length > 0) { $(this).insertAfter(prev_order); }
});
$('.button').css('left', '0'); $('.button').removeAttr('data-order');
}
});
}
});
});
</script>
.limit
{
white-space:nowrap;
overflow-y:hidden;
overflow-x:scroll;
position:relative;
}
#parent {
/*/*position:relative;*/
/*margin: 20px;
width: 800px;
height: 40px;*/
position:relative;
}
.button {
position:relative;
display: inline;
width: 170px;
height: 70px;
background-color:lightgray;
font-size:large;
-webkit-transform: perspective(100px)rotateX(30deg);
-moz-transform: perspective(100px)rotateX(30deg);
}
.button:hover {
cursor: default;
position:relative;
}
.button:active
{
cursor:move;
z-index:40;
background-color:lightpink;
}
.button.drag {
z-index: 99;
background-color:magenta;
}
.pic
{
height:400px;
width:700px;
}
button.current{
background-color:yellowgreen;
}
.tab-content{
margin-top:40px;
display: none;
background-color:lightgoldenrodyellow;
height:350px;
width:700px;
}
.tab-content.current{
display: inherit;
position:absolute;
}
</head>
<body>
<div id="parent" class="parent">
<div class="limit">
<button data-tab="1" class="button current " >Car 1</button>
<button data-tab="2" class="button">Car 2</button>
<button data-tab="3" class="button">Car 3</button>
<button data-tab="4" class="button">Car 4</button>
<button data-tab="5" class="button">Car 5</button>
<button data-tab="6" class="button">Computer</button>
<button data-tab="7" class="button">Message</button>
<button data-tab="8" class="button">Nature</button>
<button data-tab="9" class="button">Power</button>
</div>
<div id="1" class="tab-content current"> Car 1</div>
<div id="2" class="tab-content">Car 2</div>
<div id="3" class="tab-content"> Car 3</div>
<div id="4" class="tab-content">Car 4</div>
<div id="5" class="tab-content">Car 5</div>
<div id="6" class="tab-content">Computer</div>
<div id="7" class="tab-content">Message</div>
<div id="8" class="tab-content">Nature</div>
<div id="9" class="tab-content">Power</div>
</div>
</body>
</html>
What I have tried:
Scroll move left side:-
1.I took the (event.pageX-event.clientX) values as b.
2.Move the scroll to left side with parent container $(l).ScrollLeft(event.pageX+b).
3.The scroll moved successfully on left side.
Right side:-
1.For Right side i am follow the same scenario,but i get error on both left and right?how do correctly move the scroll and tab as parallel positions both on left and right ps
Submit an article or tip