Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #486797

    i have implemented a floating table header that floats when the table is big so that users can easily read the table . the problem is that i have sticky header with shrinking header activated and the floating header of the table goes under the header . i want it to replicate the function similar to sub-menu it stick below the header . i cannot seem to replicate it .

    jQuery.noConflict();
    (function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
    (function( $ ) {
    	$(function() {
    		$('table').each(function() {
    			if($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
    			// Clone <thead>
    			var $w	   = $(window),
    			$t	   = $(this),
    			$thead = $t.find('thead').clone(),
    			$col   = $t.find('thead, tbody').clone();
    
    			// Add class, remove margins, reset width and wrap table
    			$t
    			.addClass('sticky-enabled')
    			.css({
    				margin: 0,
    				width: '100%'
    			}).wrap('<div class="sticky-wrap" />');
    
    			if($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');
    
    			// Create new sticky table head (basic)
    			$t.after('<table class="sticky-thead" />');
    
    			// If <tbody> contains <th>, then we create sticky column and intersect (advanced)
    			if($t.find('tbody th').length > 0) {
    				$t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
    			}
    
    			// Create shorthand for things
    			var $stickyHead  = $(this).siblings('.sticky-thead'),
    			$stickyCol   = $(this).siblings('.sticky-col'),
    			$stickyInsct = $(this).siblings('.sticky-intersect'),
    			$stickyWrap  = $(this).parent('.sticky-wrap');
    
    			$stickyHead.append($thead);
    
    			$stickyCol
    			.append($col)
    			.find('thead th:gt(0)').remove()
    			.end()
    			.find('tbody td').remove();
    
    			$stickyInsct.html('<thead><tr><th>'+$t.find('thead th:first-child').html()+'</th></tr></thead>');
    
    			// Set widths
    			var setWidths = function () {
    				$t
    				.find('thead th').each(function (i) {
    					$stickyHead.find('th').eq(i).width($(this).width());
    				})
    				.end()
    				.find('tr').each(function (i) {
    					$stickyCol.find('tr').eq(i).height($(this).height());
    				});
    
    					// Set width of sticky table head
    					$stickyHead.width($t.width());
    
    					// Set width of sticky table col
    					$stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())
    				},
    				repositionStickyHead = function () {
    					// Return value of calculated allowance
    					var allowance = calcAllowance();
    
    					// Check if wrapper parent is overflowing along the y-axis
    					if($t.height() > $stickyWrap.height()) {
    						// If it is overflowing (advanced layout)
    						// Position sticky header based on wrapper scrollTop()
    						if($stickyWrap.scrollTop() > 0) {
    							// When top of wrapping parent is out of view
    							$stickyHead.add($stickyInsct).css({
    								opacity: 1,
    								top: $stickyWrap.scrollTop()
    							});
    						} else {
    							// When top of wrapping parent is in view
    							$stickyHead.add($stickyInsct).css({
    								opacity: 0,
    								top: 0
    							});
    						}
    					} else {
    						// If it is not overflowing (basic layout)
    						// Position sticky header based on viewport scrollTop
    						if($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {
    							// When top of viewport is in the table itself
    							$stickyHead.add($stickyInsct).css({
    								opacity: 1,
    								top: $w.scrollTop() - $t.offset().top
    							});
    						} else {
    							// When top of viewport is above or below table
    							$stickyHead.add($stickyInsct).css({
    								opacity: 0,
    								top: 0
    							});
    						}
    					}
    				},
    				repositionStickyCol = function () {
    					if($stickyWrap.scrollLeft() > 0) {
    						// When left of wrapping parent is out of view
    						$stickyCol.add($stickyInsct).css({
    							opacity: 1,
    							left: $stickyWrap.scrollLeft()
    						});
    					} else {
    						// When left of wrapping parent is in view
    						$stickyCol
    						.css({ opacity: 0 })
    						.add($stickyInsct).css({ left: 0 });
    					}
    				},
    				calcAllowance = function () {
    					var a = 0;
    					// Calculate allowance
    					$t.find('tbody tr:lt(3)').each(function () {
    						a += $(this).height();
    					});
    
    					// Set fail safe limit (last three row might be too tall)
    					// Set arbitrary limit at 0.25 of viewport height, or you can use an arbitrary pixel value
    					if(a > $w.height()*0.25) {
    						a = $w.height()*0.25;
    					}
    
    					// Add the height of sticky header
    					a += $stickyHead.height();
    					return a;
    				};
    
    				setWidths();
    
    				$t.parent('.sticky-wrap').scroll($.throttle(250, function() {
    					repositionStickyHead();
    					repositionStickyCol();
    				}));
    
    				$w
    				.load(setWidths)
    				.resize($.debounce(250, function () {
    					setWidths();
    					repositionStickyHead();
    					repositionStickyCol();
    				}))
    				.scroll($.throttle(250, repositionStickyHead));
    			}
    		});
    		$( "#table tr td" ).hover(function() {
    				$(this).addClass("hover");
    				var index = $(this).index() + 1;
    				$("#table tr td:nth-child("+index+")").addClass("hover");
    			}, function() {
    				$(this).removeClass("hover");
    				var index = $(this).index() + 1;
    				$("#table tr td:nth-child("+index+")").removeClass("hover");
    			});
    $( "#table tr td" ).hover(function() {
    				$(this).addClass("hover");
    				var index = $(this).index() + 1;
    				$("#table tr td:nth-child("+index+")").addClass("hover");
    			}, function() {
    				$(this).removeClass("hover");
    				var index = $(this).index() + 1;
    				$("#table tr td:nth-child("+index+")").removeClass("hover");
    			});
    });
    })(jQuery)

    p.s. if possible implement this script in your theme by default . it helps reading tables that are long and wide . it is also responsive too.

    #487251

    Hi 7thflow!

    Not sure if we will be able to help you here but send us a link to your page and we’ll take a look.

    Regards,
    Elliott

    #500731

    https://stardustimpex.com/tools/nps-nominal-bore/

    this is the page, i have floating header activated , on desktop website the floating header stay perfectly below the header but same is not working fine in mobile view as the floating header does not work with mobile website , so if you can help me that would be better

    #501113

    Hi!

    I don’t see an easy way of going about that unfortunately. We could give it a fixed position via CSS but if you want it to continue scrolling then some custom javascript would be required. It would be best to hire a freelancer to help you out with this customization.

    Regards,
    Elliott

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.