I have to display a table with many columns on a web page. The columns are basically days of the week therefore only 7 columns need to be displayed at once (out of four weeks in total).
I have set up a window with the overflow set to hidden which displays the first seven days and managed to get the table to scroll left seven days however the table won't scroll further that this. If I scroll back then the table scrolls back too far and the table totally disappears to the right.
I am quite new to jQuery and realise that I should be using possibly the position() or offset() functions. I am sure this is a simple piece of code although my hours of googling have turned up nothing that covers this problem.
Does anyone know any decent tutorials out there to get me started ? Thanks
It is simply having a container div of 500px with overflow set to hidden continaing a seperare div of 2000px. When the user clicks on the previous or next buttons the inner div will scroll plus or minus 500px dependent on the position.
try this:
$('.next').click(function(event){
if($('.table').css('left') != '-1500px') {
$(this).prop('disabled', true)
$('.table').animate({left:'-=500px'}, 500, function() {
$('.next').prop('disabled', false)
});
}
});
$('.prev').click(function(event){
if($('.table').css('left') != '0px') {
$(this).prop('disabled', true)
$('.table').animate({left:'+=500px'}, 500, function() {
$('.prev').prop('disabled', false)
});
}
});
http://jsfiddle.net/ZSFFS/27/
Related
I'm trying to scroll through my horizontal Bootstrap tabs, however, the scroller goes all the way to the end of the tab list, making some tabs not even visible. So is there a way to incrementally scroll through the tabs until you get to a certain point? (then I'd be fine with it scrolling to the end).
I've googled this subject quite a bit, and all the examples seem to go right to the end of the tablist.
jsFiddle: https://jsfiddle.net/82c4ged0/
$('.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(){
});
});
In the fiddle, with the much smaller window, it's much clearer to see how the scroller goes straight to the last tabs in the list
The way things are currently setup, you're getting the amount to scroll with this variable/function.
var widthOfHidden = function(){
return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi());
};
You'll need to calculate how many pixels to move over on each click. It's roughly -220px which you can put in manually to try it out. You can put that in manually, like below, and see if things behave close to how you want them to.
var widthOfHidden = function(){
return -224;
};
I've seen a few different threads seemingly about this but none of the answers in them have a working solution for me.
Here's what I want:
Big transparent header with a big logo on the top.
Small colored header with a small logo when user has scrolled past the topmost area.
I'm using navbar-fixed-top and and Bootstrap's scrollspy to add and remove certain classes from the header.
Here's why it hasn't worked so far:
$(window).scrollTop() doesn't return anything meaningful at all.
It seems wrong to change at a certain amount of pixels from the top anyway, since it can vary between screen resolutions.
Initiating a change based on what activate.bs.scrollspy captures works rather well except it shows the wrong header when I load the page for the first time.
It seems impossible to place a <div id="whatever"> at a certain spot and have the header change when scrollspy finds it. I've tried making the div 1px in dimension and placed at the absolute top of the page, but the scrollspy still identifies it from way off.
Here's my jQuery code at the moment, which is very imprecise AND shows the wrong header at the first load of the page (remember, you're not always at the top of the page when loading (reloading) the page!).
$(document).ready(function() {
$('body').scrollspy({ target: '.navbar-inverse' });
$('#main-header').on('activate.bs.scrollspy', function () {
var currentItem = $('.nav li.active > a').text();
var header = $('.navbar');
var logosmall = $('.small-brand');
var logobig = $('.big-brand');
if (currentItem == 'top' && header.hasClass('navbar-small')) {
header.removeClass('navbar-small');
header.addClass('navbar-big');
logosmall.css('display', 'none');
logobig.css('display', 'inline-block');
}
else if (currentItem != 'top' && header.hasClass('navbar-big')) {
header.removeClass('navbar-big');
header.addClass('navbar-small');
logobig.css('display', 'none');
logosmall.css('display', 'inline-block');
}
});
});
Wrap your code into window scroll event as mentioned below then only $(window).scrollTop() will work as you expecting.
$(window).scroll(function () {});
Here is a great example of your problem, it is a bit tricky to shrink your navbar but not impossible. You have to take into account a lot of things. I found this a while ago: http://www.bootply.com/109943
It is really strange that $(window).scrollTop() does not return anything by the way. What browser are you on? And your problem with reloading the browser:
$(window).load(function{
//logic to check how far scrolled
})
I would like to scroll horizontally the given element. The only way I find is using ScrollIntoView DOM method, which allows either align the element's bottom with the view bottom or the top - with the view top.
But what if the element is OK with respect to the Y axis, and I only want to scroll it horizontally? How can I align its left with the view left or its right with the view right?
EDIT
Here is more context. I have a YUI table with a horizontal scrollbar. I wish to scroll it programmatically to a certain TD node. I do not think window.scrollTo is of any help to me, since the scrollbar is on a div element, not on the whole page.
EDIT2
Turns out there is a duplicate SO question with the right answer - How can I scroll programmatically a div with its own scrollbars?
Voting to close mine.
I've recently had a problem with a table header that had inputs as filters for each column. Tabbing through the filters would move the focus, but if one of the inputs wasn't visible or if it was partly visible, it would only JUST bring the input into view, and I was asked to bring the full input and column into view. And then I was asked to do the same if tabbing backwards to the left.
This link helped to get me started: http://www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizontal
The short answer is that you want to use:
document.getElementById('myElement').scrollLeft = 50;
or:
$('#myElement')[0].scrollLeft = 50;
Here's my solution (which may be overkill for this question, but maybe it'll help someone):
// I used $.on() because the table was re-created every time the data was refreshed
// #tableWrapper is the div that limits the size of the viewable table
// don't ask me why I had to move the head head AND the body, they were in 2 different tables & divs, I didn't make the page
$('#someParentDiv').on('focus', '#tableWrapper input', function () {
var tableWidth = $('#tableWrapper')[0].offsetWidth;
var cellOffset = $(this).parent()[0].offsetLeft;
var cellWidth = $(this).parent()[0].offsetWidth;
var cellTotalOffset = cellOffset + cellWidth;
// if cell is cut off on the right
if (cellTotalOffset > tableWidth) {
var difference = cellTotalOffset - tableWidth;
$('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft = difference;
$('#tableWrapper').find('.dataTables_scrollBody')[0].scrollLeft = difference;
}
// if cell is cut off on the left
else if ($('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft > cellOffset) {
$('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft = cellOffset;
$('#tableWrapper').find('.dataTables_scrollBody')[0].scrollLeft = cellOffset;
}
});
This is something I used a while back. There might be better and more efficient way of doing it but this gets the work done:
$(".item").click(function(event){
event.preventDefault();
// I broke it down into variable to make it easier to read
var tgt_full = this.href,
parts = tgt_full.split("#"),
tgt_clean = parts[1],
tgt_offset = $("#"+tgt_clean).offset(),
tgt_left = tgt_offset.left;
$('html, body').animate({scrollLeft:tgt_left}, 1000, "easeInOutExpo");
})
You just need to make sure that the item is an a tag with an href that corresponds to the target id element:
HTML:
go to section 1
...
<section id="one"> Section 1</section>
Hope this helps!
I'm looking for a solution to only display a div if there is space to do so.
On my blog's post pages I display latest posts in the left sidebar, like so...
No Nay Never post page
I want to show a different number of sidebar items dependent on how long the post is. Currently I have three divs displaying different numbers of items and run this script.
if ($("#contentheight").height()>960 && $("#contentheight").height()<1200) {
document.getElementById("threeposts").className += "hide";
}
else if ($("#contentheight").height()>1200 && $("#contentheight").height()<1880) {
document.getElementById("fiveposts").className += "hide";
}
else if ($("#contentheight").height()>1880) {
document.getElementById("sevenposts").className += "hide";
}
However, this is hardly convenient and for very short posts it shows no items at all.
Is there a workaround whereby I can, for example, code for 7 items, but only show as many as the parent div can take? I tried using overflow:hidden but then you end up with the end item chopped in half.
For example, if there is enough room for three full items, they would be shown but any after that would not.
You can create a hidden div or a div which is not inserted into the DOM with the desired width.
Then insert item by item until the height of this div exceeds the length of your post.
Now you know how many items will fit into the div.
try something like this:
$('#container').children().each( function() {
var top = $(this).top;
var height = $(this).height;
if (top + height > $(this).parent().height()) {
$(this).className += "hide";
}
});
I have a UL with LI's set to display horizontally. The UL has a fixed width and it's set to hide the overflow. This is so I can display my images, which are to be used in a gallery, neatly. It works and looks nice.
I want to, however, use jQuery to scroll the contents of the UL rather than set the overflow property to auto and be presented with those ugly scroll bars. I recycled some code I used to do the same thing a few weeks back but, back then, I was doing it in DIV's. Much easier, apparently.
$('.gallery_container span').hover(
function()
{
if ($(this).attr('class') == 'up')
direction = '-=';
else
direction = '+=';
var divOffset = $('ul.gallery').offset().top;
$('ul.gallery').animate({scrollTop: direction + divOffset}, 5000);
},
function()
{
$('ul.gallery').stop();
});
I saw a site that says the scrollTop property can be applied to UL's. So I'm not sure what exactly is causing this not to work.
Any ideas?
EDIT: Found what was causing it to not work at all but not it scrolls vertically - Kind of expected that. Is there any way to scroll it horizontally?
Perhaps:
$('ul.gallery').animate({scrollLeft: direction + divOffset},2000);