I'm trying to make my first 3 columns of my table fixed so that they always show when scrolling horizontally. But they need to move when scrolling vertically
I made a excel table with what it needs to do :
I have tried http://jsfiddle.net/YMvk9/5294/
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px;
margin-top:-3px;
with scrollTop of jquery of the right scrollbar so I move the top value of the yellow cells.
The current problem is that when I fill up the html table with the database the yellow cells are shown even tho my overflow is "scrolled" since they are absolute.
See next image :
Any way to fix this problem. So that they are hidden?
Or any other solution to what I have to do would be appreciated
You could use the JQUERY scroll function and move the column you want to "freeze" in the opposite way.
You also need to set the z-index so the column stays on top of the others.
In your css:
.frezedCell
{
z-index: 1000;
position:relative;
}
In your page :
$(document).ready(function () {
$(".divTableParts").scroll(function () {
var divTable = $(".divTableParts");
$(".frezedCell").css("left", 0 + divTable.scrollLeft());
});
});
You could use datatables for it: https://datatables.net/extensions/fixedcolumns/
Basically you'd have datatables as it's dependency and use this piece of code:
$(document).ready( function () {
var table = $('#example').DataTable( {
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
} );
new $.fn.dataTable.FixedColumns( table );
} );
Related
I'm making a website which is responsive so I'm working with datatables since it is responsive I want to change the datatable appearance in different #media screens. What I want to do is when I'm in desktop version the table will be in a normal state and for tablet form I want it to be in FIXED COLUMNS and when in mobile version I want it to be like
Responsive Table like so. What is best approach for this? Do I need to create multiple table or just use a script? Please let me know.
This should do the trick. You need to destroy the first DataTable before initializing it again.
$(window).on('resize load', function () {
var width = $(window).width();
if (width < 720) {
//for screens with less than 720px
var table = $('#example').DataTable({
destroy : true,
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
});
new $.fn.dataTable.FixedColumns(table);
} else {
$('#example').DataTable({
destroy : true,
responsive: true
});
}
}
I would suggest using a single script to change the look of the table based on media screen properties. Below is an example script that would load different views of a table based on screen width.
$(window).on('resize load', function () {
var width = $(window).width();
if (width < 720) {
//for screens with less than 720px
var table = $('#example').DataTable({
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
});
new $.fn.dataTable.FixedColumns(table);
} else {
$('#example').DataTable({
responsive: true
});
}
}
Responsive and Fixed Column code is taken from datatables website links you have provided. This piece of code should fire on window resize and when loading as explained here.
You can use bootstrap's class as shown in given link
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
I am trying to position text within a viewport so that as the user scrolls along the viewport the text in the column remains visible for as long as possible. The issue is that the view port may be smaller than the width of the column in the table. So I have something close to working here: http://jsfiddle.net/Deterus/6eU24/15/
$rowDiv.scroll(function (e) {
$headerDiv.css({
left: -$rowDiv[0].scrollLeft + 'px'
});
var thresh = $('.peek').width();
$.leftofscreen("#lookInMe", ".peek", {
threshold: thresh
}).removeClass("textAdjustTL").addClass("textAdjustTR");
$.rightofscreen("#lookInMe", ".peek", {
threshold: thresh
}).removeClass("textAdjustTR").addClass("textAdjustTL");
$.inviewportCenter("#lookInMe", ".peek", {
threshold: 0
}, thresh);
});
This is where I am able to add or manipulate the css needed to keep the row elements at the edge of the viewport. Currently the classes just align the text to the right or left and doesnt allow the sliding nature I need. Any leads would be appreciated.
I'm trying to create a programme page, this page consists of columns that you can expand by clicking on a button. When you get to a certain point on the programme a menu will appear and stay on top of the page. However, when you expand one of the columns, a problem will occur where the Y position isn't returned correctly. This makes the menu jump to the top of the page too early.
My Jquery knowledge is limited so I hope someone can help me with this. I've tried looking for an answer but unfortunately no results yet.
HTML:
<body>
<div id="column1">Expand this div and scroll down to see the problem</div>
<div id="fixed-row"></div>
<div id="column2"></div>
</body>
CSS:
#column1{height:250px; width:200px; background-color:#545454; cursor:pointer; margin-bottom:5px; color:#fff;}
#column2{height:1000px; width:200px; background-color:#cecece;}
#fixed-row{height:50px; width:200px; background-color:#ff00ff; margin-bottom:5px;}
.fixed{position:fixed; top:0;}
JQuery:
$(document).ready(function () {
$('#column1').click(function() {
if ($('div#column1').height() > 251) {
($('div#column1').animate({height: '250px', navigation: true}))
} else {
($('div#column1').animate({height: '500px', navigation: true}));
}
});
var top = $('#fixed-row').offset().top;
$(window).scroll(function () {
//Y position of scroll
var y = $(window).scrollTop();
//Whether below form
if (y >= top) {
//If so, add class fixed
$('#fixed-row').addClass('fixed');
}else {
//Otherwise remove class fixed
$('#fixed-row').removeClass('fixed');
}
});
});
I also created a JSfiddle to illustrate the problem
Many thanks in advance
Basically, you calculate top value before the animation, and do not update it afterwards. You need to update it when the animation is done.
Try something like this:
$(document).ready(function () {
var top = $('#fixed-row').offset().top;
$('#column1').click(function() {
if ($('div#column1').height() > 251) {
($('div#column1').animate({height: '250px', navigation: true},function() { top = $('#fixed-row').offset().top; }));
} else {
($('div#column1').animate({height: '500px', navigation: true},function() { top = $('#fixed-row').offset().top; }));
}
});
just change as below it works
$(window).scroll(function () {
var top = $('#column1').height();
//Y position of scroll
var y = $(window).scrollTop();
//Whether below form
if (y >= top) {
//If so, add class fixed
$('#fixed-row').addClass('fixed');
}else {
//Otherwise remove class fixed
$('#fixed-row').removeClass('fixed');
} });
http://jsfiddle.net/jb36m/4/
Please check this almost identical question first: jQuery Sortable List - scroll bar jumps up when sorting
I have exactly the same problem, only that I tried all the suggested solutions there with no luck
Here is the way to reproduce
create a sortable list
have it scrollable
scroll down
reorder items
scroll position "jumps" up
Here is the code (see also in JSFiddle)
Html
<ul id="panel" class="scroll">
<li class="content" style="background-color:red">item1</li>
<li class="content" style="background-color:green">item2</li>
<li class="content" style="background-color:blue">item3</li>
<li class="content" style="background-color:gray">item4</li>
<li class="content" style="background-color:yellow">item5</li>
</ul>
JavaScript
$(function() {
$("#panel").sortable({
items: ".content",
forcePlaceholderSize: true
}).disableSelection();
$(".content").disableSelection();
});
CSS
.scroll{
overflow: scroll;
border:1px solid red;
height: 200px;
width: 150px;
}
.content{
height: 50px;
width: 100%;
}
Here is the code (in JSFiddle) after trying the notion of the accepted answer (with no luck)
I can try to understand why it happens (list get's "shortened" for a quick second), but all attempts to use placeholders or helpers to avoid it didn't work either. I feel I tried almost any permutation of the "scrollable" options with no luck
Browsers I tried
IE9, Firefox 10.0.1, and Chrome 17
JQuery versions
core 1.7.1, UI v 1.8.17
Am I doing something wrong? Is there a solution? Could it be a bug?
If you modifiy your CSS for the .scroll element by adding:
position:relative;
That should resolve this issue.
Adding overflow-y:scroll to the sortable list even without the height property solved it for me. It only shows a disabled scrollbar, but that's okay.
아래로 스크롤 할때 는 이런식으로 하면 됩니다.
var cY = -1;
var base = 0;
$("").sortable({
sort: function(event, ui) {
var nextCY = event.pageY;
if(cY - nextCY < -10){
if(event.clientY + ui.helper.outerHeight(true) - 20 > document.body.clientHeight) {
base = base === 0 ? event.clientY : base;
var move = event.clientY - base;
var curScrollY = $(document).scrollTop();
$(document).scrollTop(curScrollY + move+3);
base = event.clientY;
}
}
},
// .....
});
Seems like jQuery UI 1.9.2 solved the issue.
If you are unable to change the library, there's a workaround including a simple scroll bar operation. The idea is simple:
Keep the previous scroll position every time you scroll.
Set scroll back to the previous position when you start dragging your element.
Here you go;
var lastScrollPosition = 0; //variables defined in upper scope
var tempScrollPosition = 0;
window.onscroll = function () { // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function () {
tempScrollPosition = lastScrollPosition; // Scrolls don't change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That's why we pick the previous scroll position with a timer of 250ms.
}, 250));
lastScrollPosition = $(document).scrollTop(); // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
};
$("#YourSortablePanel").sortable({
start: function (event, ui) {
$(document).scrollTop(tempScrollPosition);
}
});
This is caused by the height of the container changing when sorting (just before the placeholder is created)
The problem is well described and answered in this stack overflow : https://stackoverflow.com/a/32477389/2604980
For me this sortable options were working if you don't want to remove overflow css from body:
start(e, ui) {
if (fixOffset) ui.item.css('transform', `translateY(${document.body.scrollTop}px)`);
fixOffset = true;
},
change(e, ui) {
ui.item.css('transform', `translateY(${document.body.scrollTop}px)`);
},
stop(e, ui) {
ui.item.css('transform', 'translateY(0)');
},
I need that when I scroll down or up with mouse wheel or sidebar my div change incrementally the Y position (for example 50px up or down ). I need this in Javascript/Jquery.
I Try this code, but only works for scrolling down(The Scrolling Down and Up Function is working well, only the animate part is working wrong):
UPDATE:
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("body").offset();
$(window).scroll(function ()
{
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top)
{
$("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
}
else
{
$("#legend").stop().animate({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );
}
});
});
$(window).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
$(document).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
Thanks
You can use
$(window).scroll(function() {
// Your scroll code here
});
to grab whenever the user is scrolling on the page.
Next you want to change the div's y-value.
If the div is positioned absolute, this is just changing its top-value.
$('my-div').top = original-top-value + $(window).pageYOffset;
I believe you need is to keep the div always showing even when user scrolls down. If that is the case then it can be done with only CSS:
div {
position: fixed;
z-index: 100;
top: 100px;
left: 100px;
}
The values of z-index, top and left are dummy values. Change em with your ones.
UPDATE:
Since CSS Solution won't work for you, here is a working example writter in JS: http://jsfiddle.net/qCtt5/