We Keep Coding

Lock table headers when scrolling (ColResizable)

I am not very familiar with HTML, CSS and Javascript, and yet I am tasked with creating a table system that will allow the user to resize table columns but also have said headers fixed to the top of the section the table is displayed in when the user scrolls the table.
I know this sounds confusing, so i created a Fiddle that can accurately represent what I have currently and hopefully where it needs to be updated.
I have settled on using the plugin JSColResizable found here:
http://www.bacubacu.com/colresizable/
and have set it up in the fiddle allowing the table to be resized. I have also wrapped the table in a div that only allows 300px height to be displayed at any time.
When the user mouses over the table division and scrolls down, the table headers scroll outside of the division making it difficult for users to relate which column was what. I simply need the table entries to continue to work the same way and scroll outside the div, yet allow the headers to remain static at the top of the div so that they can more easily be related to the columns.
If anyone has experience with this issue, I would greatly appreciate any help that can be offered.

You have to write a little jquery for it, and a class in css
Here is the Working Fiddle of what you want.
I have written some jQuery code for it you can use it.
jQuery
$(function(){
$.fn.fixMe = function () {
return this.each(function () {
var $this = $(this),
$t_fixed;
function init() {
$this.wrap('<div class="container" />');
$t_fixed = $this.clone();
$t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
resizeFixed();
}
function resizeFixed() {
$t_fixed.find("th").each(function (index) {
$(this).css("width", $this.find("th").eq(index).innerWidth() + "px");
});
}
function scrollFixed() {
var offset = $(this).scrollTop(),
tableOffsetTop = $this.offset().top,
tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
if (offset < tableOffsetTop || offset > tableOffsetBottom) {
$t_fixed.hide();
}
else if (offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden")) {
$t_fixed.show();
}
var tboffBottom = (parseInt(tableOffsetBottom) );
var tboffTop = (parseInt(tableOffsetTop));
if (offset >= tboffBottom && offset <= tableOffsetBottom) {
$t_fixed.find("th").each(function (index) {
$(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
});
}
}
$(window).resize(resizeFixed);
$(window).scroll(scrollFixed);
init();
});
};
$("table").fixMe();
});
Hope this helps you.

There is currently no native way for a table to have sticky headers and footers. All libraries that provide that functionality use divs or other tags to achieve that. That being said, I would probably not try to reinvent the wheel here. You could give SlickGrid a try - it is pretty stable and works great even with huge data-sets

Here is a pure CSS way of making the table scrollable without the use of a plugin or library, it uses table-layout:fixed to make the header fixed. Check out this example, meybe it is what you want.
.fixed_headers {
width: #table_width;
table-layout: fixed;
border-collapse: collapse;
Check out the full code of the tabe in this codepen link
https://codepen.io/tjvantoll/pen/JEKIu

Check all divs widths and resize any bigger than window

I have a blog with new responsive template. I want to check all divs inside the posts to get any that has width bigger than window size and change the width of ONLY those divs to have max-width: windowsize.
Truth is the blog has 350+ posts and I don't have time to edit every single post to remove the ones with divs with fixed width going offscreen.
I'm not very good with jQuery and js, but I got this code and got this far:
var div = $(".post div").width();
var win = $(window).width();
if (div > win ) {
$(" ONLY THE DIV THATS BIGGER? ").css('max-width', ' WINDOW-WIDTH? ');
}
But it's changing the size of ALL divs. Any ideas?
[SOLUTION - for my needs, anyway]
As much as all your jQuery codes were amazing, I couldn't get any of them to work on the divs I wanted (but I'm sure they'll help people seeing this post in the future), so I just went for basic CSS and it fits my needs. I was afraid of ruling ALL DIVS inside posts width:100% because it would affect the nested ones, so I just used:
.post-body > * {
max-width:100% !important;
}
It calls ONLY all direct children of my post, which is already the same size of the window on mobile, and sets the rule max-width to prevent going off the screen. Perfect!
Thank you for your help!

first of all you might want to start using a loop to go through all the divs thats being inside the variable "div" also dont try to immediately go after the width statement but get all the divs
so your code:
var div = $(".post div").width();
var win = $(window).width();
if (div > win ) {
$(" ONLY THE DIV THATS BIGGER? ").css('max-width', ' WINDOW-WIDTH? ');
}
should become something like this:
var div = $(".post div");
var win = $(window).width();
for(var i=0; i<div.length;i++){
if(div[i].width() > win){
$(div[i]).css('max-width','WINDOW-WIDTH?');
}
}
also if you want to find out what exactly div is use this code:
var div=$(".post div");
console.log(div);

try
var win = $(window).width();
$(".post div").each(function () {
if ( $(this).width() > win ) {
$(this).css('max-width', win );
}
});

The problem of overflow does not come from this. In fact, it comes from the div class linkwithin_inner where the width has been set to a fixed width of 680px !important.
You should change the width to 100% in the CSS found on that page.
.linkwithin_inner {
width: 100% !important;
}
and the problem will be solved out.

You'd need to filter out the divs that are wider than the window and then set max width to only those, like below.
var winWidth = $(window).width();
$(".post div").filter(function(){
return $(this).width() > winWidth
}).css({"max-width": winWidth + "px"});
Hers is a demo along the same lines

Basically you want to loop though all divs which are found by this `$(".post div")'
Which boils down to:
$(".post div").each(function () {
$(this).width("50px");
});
And here you have a working fiddle:
https://jsfiddle.net/gkLmx6d1/2/

CSS footer div won't hide

In this sample app I have a header , footer and the content div contains a table which holds various stats of some basketball players.
I was having a problem with the footer when i have a lot of entries in the table. What ends up happening is that the footer will block the other entries as displayed in the picture below.
Then when i click in the middle the footer disappears as shown in picture below.
I was wondering if there is generic way where i can check to see if there are a lot of entries then dont show the footer at all? or is there some way around this problem? Please advice i am new to web dev and dont know much css tricks.
Here is the FIDDLE.
This is roughly what i want to achieve, however i am not sure if its the best solution so i am open to all suggestions.
if table contains > x entries
{
hide footer
} else {
show footer
}

I think the best solution for you is to remove the data-position="fixed" on the footer as suggested by others, but then also add some javascript that sets the min-height of the content div according to device height. That way for a small number of rows in the table, the footer still appears at the bottom of the screen. As the number of rows increases beyond the device height, the footer just gets pushed down remaining below the table.
Below, the SetMinHeight function calculates the minimum height for the content div that would fill the given device height. Then you call it on pagecontainershow and whenever the window resizes or the orientation changes:
$(document).on("pagecontainershow", function () {
SetMinHeight();
});
$(window).on("resize orientationchange", function () {
SetMinHeight();
});
function SetMinHeight() {
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").css("min-height", content + "px");
}
Updated FIDDLE
NOTE: for the calc to work, I had to remove the CSS zoom: #tbcontent{zoom:80%;}. If you really need the zoom, you may have to adjust the min-height calculation...

The footer shouldn't be fixed:
http://jsfiddle.net/fmpeyton/L2vQ3/
Remove data-position='fixed' from this line:

Well, you can check the number of rows in that table with something like this:
var rowCount = $('#myTable tr').length;
Then add a condition such as if rowCount > 5, you can add a hidden class to the footer.
A hidden class can be something like this:
.hidden { display: none; }
So basically,
if(rowCount > x) { $('.footer').addClass('hidden'); }

try this:
$(document).ready(function(){
var tablerow = $("table tr").length-1;
if(tablerow>20)
{
$(".ui-title").hide();
}
else
{
$(".ui-title").show();
}
});

How would I make div stick to top of screen using this code?

The code below is test code I'm using. The blue bar is supposed to stick to the top of the screen when it reaches the top.
This works on my browser, but the reason I'm here is because when it sticks to the top, it all of a sudden becomes smaller. As you see the blue bar starts with a full width across the container, but on my computer/browser, after it sticks to the top, the div shrinks to just the size of the text.
To make matters worse, I cannot reproduce the problem on jfiddle, because in jfiddle it doesn't work at all! (The images are just there to create a scroll).
Here is the jfiddle
Here is the jquery:
var titlePosition = $('.title').offset().top;
$(window).scroll(function () {
var scrollBar = $(this).scrollTop();
if (scrollBar > titlePosition) {
$('.title').css("top", "0px");
$('.title').css("position", "fixed");
} else {
$('.title').css("position", "relative");
}
});

Try this code:
Fiddle
CSS:
.title {
font-size:200%;
background-color:blue;
width:100%
}

Update your code:
if (scrollBar > titlePosition) {
$('.title').css("top", scrollBar+"px");
$('.title').css("position", "fixed");
} else {
$('.title').css("position", "static"); //otherwise it will still get that top value and cause unwanted position;
}

Just add this css:
.title {
...
width: 100%; /*This does the trick*/
}
Here you have it working: http://jsfiddle.net/edgarinvillegas/yPWAC/3/
Cheers

Set left to 0 as well. Additionally, some optimizations.
I prefer appending/removing classes to put all your CSS in your stylesheet. Saves you from problems later on when the code gets huge (who would be looking for CSS in JS files anyway?).
Also, cache objects. Everytime you fire scroll, your code fetches every single .title in the DOM and generates a jQuery object. Not very optimal. Instead, get all .title and just do the modifications on each scroll.
CSS:
.title.fixed {
position:fixed;
left:0;
right:0;
top:0;
}
JS:
var titlePosition = $('.title').offset().top;
var win = $(window);
var title = $('.title');
win.scroll(function () {
var scrollBar = win.scrollTop();
if (scrollBar > titlePosition) title.addClass('fixed');
else title.removeClass('fixed');
});
As for your non-working fiddle, you forgot to include jQuery. That should be found on the top left.

Try giving z-index:999 or, using jQuery - $('.title').css("z-index", "999");
Rest looks ok.

var titlePosition = $('.title').offset().top;
.top is not a function. offset() returns an object containing the properties top and left
Replace with:
var titlePosition = $('.title').offset();
You can now access the properties like so:
titlePosition.top or titlePosition.left
reference: .offset() http://api.jquery.com/offset/

Thanks for all the feedback.
Even though it helped improve, in the end the div was still resizing. Fixing the width to specific values was not responsive enough.
I finally stumbled upon a solution, based on all the advice:
http://jsfiddle.net/yPWAC/8/
var titleWidth = $('.title').width()
/*then after the div is fixed I change the width */
$('.title').css("width",titleWidth);
I made jquery hold the original width of the div, then change the width of the sticky div to whatever that value is.
For some reason, even if I defined the original width in CSS, the new sticky width would still come out a different size in the browser. So this method gives it the same width as the original (whatever it may be)

how to stick the footer to the bottom of the page while moving it upward in a parallax-like effect?

I have a project where the requirement is to move the footer ( #footer ) upward while scrolling down the page in a parallax-like effect. When you start scrolling down the page, the footer should start moving upward only until it's visible in the (bottom part of the) viewport.
The footer should have covered most of the preceding <div> half way up and in full when it has reached the top of the viewport.
The page may have a similar html structure like this :
<body>
<div id="sectionA" class="div">First section</div>
<div id="sectionB" class="div">Second section</div>
<div id="sectionC" class="div">Third section
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="footer" class="div cf">Footer</div>
</body>
The parallax-like effect is achieved via javascript/jQuery adding a dynamic negative value to the top CSS property of the (relative positioned) footer. Here is the code for what it matters :
var $window = jQuery(window),
$footer = jQuery("#footer"),
$viewport = window.innerHeight,
$startEffect = $footer.offset().top - $viewport;
function footerParallax() {
var $scrollPos = $window.scrollTop() - $startEffect,
$ratio = 0.6;
$footer.css({
top: -($scrollPos * $ratio)
});
}
$window.scroll(function () {
footerParallax();
});
The (obvious) issue is that as soon as the top property starts getting a negative value, the footer starts moving away from the bottom of the page.
I have prepared a JSFIDDLE and assigned colors to each section and body to make it clearer. The body (dark-red) is visible under the footer after scrolling to the bottom.
What have I tried?
modifying the margin-top instead of the top property:  this does the trick, however the preceding <div> that has to be covered by the footer (#sectionC in the example above) overlaps the contents of the footer and breaks its layout regardless that it is not visible due to its z-index property (added some floating boxes in the fiddle to make it evident.... a clearfix hack didn't help either.)
setting a static position to the footer: neither top or margin-top have effect over a static element.
Changing/reducing dynamically the height of #sectionC instead of top of footer to produce the effect of moving the second upwards :  the footer stops moving as soon as height is equal to 0 (neither negative size or negative paddings are allowed)
Changed the height dynamically of the html and/or body tags to no avail.
I have also tried some parallax plugins like skrollr and skrollr-stylesheets and some others.
The problem with this solution (same with others) is that it relays in an specific (offset) position of the footer measured in px and set in a data attribute, but if the content changes dynamically, for example using the masonry plugin to arrange elements in another section of the document, the measures become inaccurate and the footer may start moving too early or too late.
By the way, other CSS sticky-footer techniques won't work because, well, they actually push the footer to the bottom of the page, and here we are doing the opposite.
I guess the question is either :
how to keep the footer stick to the bottom of the page while it is moved upwards? - or -
how to reduce the gap to 0 between the end of the document and the bottom edge of the footer?
I am starting to think that this issue has not a real solution the way it is, or maybe I am already too tired to see the obvious. I am interested in learning alternative solutions or hacks via CSS / javascript / jQuery or all of the above.
Bear in mind that I am not asking how to create the parallax effect UNLESS a totally different approach (or tweaks to the existing js code) solves the position issue.
IMPORTANT : Please consider that this is a WP site with an XHTML 1.0 Transitional DOCTYPE, and has installed many other jQuery plugins like masonry, scrollTo, jQuery UI, etc. I may have not control to change many things from the original structure (and I don't want to) so the idea is to implement this without breaking too many things and from a modular script.
EDIT #1 : Added a graphic to clarify the question.
Figure A. shows a regular web page scrolled down to the end. The red square represents the viewport and the footer (grey) is slighted moved to the right for illustration purposes. The body has a reddish background color (not visible in normal conditions) just for illustration purposes too. NOTE: the height of each section as well as the height of the footer is determined by their content (forms, images, text, etc.) so is NOT fixed.
Figure B. shows the current issue: If footer slides up in a parallax-like effect (see JSFIDDLE for reference) while scrolling down the page, it starts covering any preceding section above it (WITHOUT modifying neither its own height or the height of the preceding sections) AND it also starts separating itself from the bottom of the page, therefore the body's color background becomes visible. NOTE: the bigger the viewport is (fullscreen mode for instance) the higher the footer is moved upward (and more content is covered by it)
Figure C. is the expected result: the footer should be stuck to the bottom of the page, in other words, it should be the last visible element after the page has been totally scrolled down (and not the body background as in Figure B.) Notice that the contents and the size of each section (including the footer) should (ideally) remain untouched. Having said that, adding padding bottom to the footer or increasing its height is not the expected result since it would break its original visual layout.

Updated Version
Below is an updated version that should better matches your requirements.
This version goes back to relative positioning for the footer element and uses margin-top to position it.
margin-top is calculated off of the previous elements offset, height and current window scroll position. It then uses either
the viewport height if the footer starts offscreen
the initial top value of the footer element ($startEffect) if the footer started onscreen
to determine the actual value for margin-top.
To help keep the footer's layout from being affected by this, wrapping the content of the footer in an absolutely positioned div did the trick for the sample code provided.
Example Fiddle
CSS:
#footer > div {
position: absolute;
top: 0;
left: 0;
...
}
HTML:
<div id="footer" class="div cf"><div>Footer</div></div>
Code:
var $window = jQuery(window),
$footer = jQuery("#footer"),
$viewport = window.innerHeight,
$startEffect = $footer.offset().top;
$prev = $footer.prev(),
$useStartEffect = $startEffect < $viewport;
function footerParallax() {
var $scrollPos = $window.scrollTop() - $startEffect,
$ratio = 0.6;
var prevOffset = $prev.offset().top + $prev.height() - $window.scrollTop();
var marginTop = 0;
if(prevOffset < $viewport && prevOffset < $startEffect) {
if($useStartEffect) {
marginTop = (prevOffset - $startEffect)*$ratio;
} else {
marginTop = (prevOffset - $viewport)*$ratio;
}
}
$footer.css({
"margin-top": marginTop + 'px'
});
}
$window.scroll(function () {
footerParallax();
});
footerParallax();

How was it solved?
As I mentioned in my question, I was too tired to see the obvious but #dc5's answer put me on the right track :
To help keep the footer's layout from being affected,
wrapping the content of the footer in an absolutely
positioned div does the trick
Based on that comment, the answer became simpler than the whole code he proposed needing only :
(dynamically) wrapping the content of the footer in an absolutely positioned div using jQuery's .wrapInner() method
animating the footer by setting the margin-top property instead of the top property
So this extra CSS :
#footerInnerWrapper {
position: absolute;
top:0;
left:0;
width: 100%;
background-color: #666 /* same as footer */
}
and the tweaked original code
var $window = jQuery(window),
$footer = jQuery("#footer"),
$viewport = window.innerHeight,
$startEffect = $footer.offset().top - $viewport;
// add inner wrapper
$footer.wrapInner('<div id="footerInnerWrapper" />');
function footerParallax() {
var $scrollPos = $window.scrollTop() - $startEffect,
$ratio = 0.6;
$footer.css({
// top: -($scrollPos * $ratio)
marginTop: -($scrollPos * $ratio)
});
}
$window.scroll(function () {
footerParallax();
});
did the trick. See JSFIDDLE

This does what I think you need, the footer sticks when it has scrolled in view entirely:
jsFiddle
Code added:
function footerParallax() {
var $scrollPos = $window.scrollTop() - $startEffect,
$ratio = 0.6,
$newTop = -($scrollPos * $ratio),
$oldTop = parseInt($footer.css('top')),
$nonRelTop = $footer.offset().top - $oldTop,
$wanted = ($window.scrollTop()+$viewport-$footer.height());
if ($nonRelTop + $newTop < $wanted) {
$('#sectionC').css('display', 'none');
$wanted = ($window.scrollTop()+$viewport-$footer.height());
$nonRelTop = $footer.offset().top - $oldTop;
$newTop = $wanted - $nonRelTop;
} else {
$('#sectionC').css('display', 'block');
}
$footer.css('top', $newTop);
}
$window.scroll(footerParallax);
And in the CSS I added this so that $footer.css('top') wouldn't produce NaN:
#footer {
top:0;
/* ... */
}
EDIT: A completely new approach after more clarification of OP. I now have a fixed position footer that starts increasing in height to take over the entire screen when the user has scrolled passed half of the document. The HTML, CSS and Javascript have all been updated to achieve this:
jsFiddle