I have a follwoing script.
It enables the fixed header for a jquery datatable..
var alertion = 0;
$(document).ready(function()
{
$(window).on('scroll', function()
{
var scrollTop = $(this).scrollTop();
var topDistance = $("#campaigns_list").offset().top;
if(topDistance < scrollTop)
{
if($(".fixedHeader").length == 0)
{
new $.fn.dataTable.FixedHeader(campaign_overview_table, {"offsetTop": 82},{ "top": true });
}
else
{
$(".fixedHeader").not(':last-child').remove();
}
}
else
{
$(".fixedHeader").remove();
}
});
});
The datatable is initialized by this way
campaign_overview_table = $("#campaigns_list").DataTable();
Now every thing runs fine, but when the fixed header appears and i click on a column to sort it, the sorting arrow doesn't change
How can I solve this issue?
Related
I'm working on a sticky header for tables that are placed in the middle and towards the bottom of the page. I have this working, for the most part, but I cannot figure out how to properly position the header.
I've tried fixed position, but it has an issue with the scrolling outside the box, absolute messes with the headers width and sticky seems to insert the header into the table and mess with formatting.
Any ideas?
function stickyTableHead(tableID) {
var $tmain = $(tableID);
var $parent = $(tableID).parent();
var pos = $parent.offset().top + $tmain.find(">thead").height();
var $tScroll = $tmain.children("thead")
.clone()
.wrapAll('<table id="tScroll" />')
.parent()
.addClass($(tableID).attr("class"))
.css("position", "sticky")
.css("top", 0)
.css("display", "none")
.prependTo($tmain);
$($parent).scroll(function() {
var dataScroll = $tScroll.data("scroll");
dataScroll = dataScroll || false;
if (jQuery(this).scrollTop() >= $tmain.find(">thead").height()) {
if (!dataScroll) {
$tScroll
.data("scroll", true)
.show()
.find("th").each(function() {
$(this).width($tmain.find(">thead>tr>th").eq($(this).index()).width());
});
}
} else {
if (dataScroll) {
$tScroll
.data("scroll", false)
.hide();
}
}
});
}
$(document).ready(function() {
stickyTableHead('#transactionT');
});
JsFiddle for example because it's too long for the text editor here
https://jsfiddle.net/zazvorniki/7g245fr6/54/
I am trying to offset an announcement bar when scrolling down, taking into consideration that the height of the bar is more important on smaller devices.
Here's an example of what I want to achieve : https://8kflexwarm.com/
So I ended up with this piece of code, which is working, but I feel like it is not optimized, not clean code. I figure there must be a way to offset $('.announcement-bar') instead of doing it manually with window size.
Also, why is this code not working when I refresh the screen and I'm not on top of the page ?
Is there a way to improve this code without using a library ?
if($(window).width() >= 686){
var a = $(".site-header").offset().top;
function scrollListener(){
if($(document).scrollTop() > a)
{
$('.site-header').css({"margin-top":"-40px"});
$('.site-header').css({"transition":"0.4s"});
} else {
$('.site-header').css({"margin-top":"0px"});
$('.site-header').css({"transition":"0.4s"});
}
};
$(document).scroll(scrollListener);
scrollListener();
} else if($(window).width() >= 370) {
var a = $(".site-header").offset().top;
function scrollListener(){
if($(document).scrollTop() > a)
{
$('.site-header').css({"margin-top":"-65px"});
$('.site-header').css({"transition":"0.4s"});
} else {
$('.site-header').css({"margin-top":"0px"});
$('.site-header').css({"transition":"0.4s"});
}
};
$(document).scroll(scrollListener);
scrollListener();
} else {
var a = $(".site-header").offset().top;
function scrollListener(){
if($(document).scrollTop() > a)
{
$('.site-header').css({"margin-top":"-90px"});
$('.site-header').css({"transition":"0.4s"});
} else {
$('.site-header').css({"margin-top":"0px"});
$('.site-header').css({"transition":"0.4s"});
}
};
$(document).scroll(scrollListener);
scrollListener();
};
Please provide a codePen, it makes it easier to help you with your question.
I came up with this untested piece of javascript:
var myApp = (function(app) {
const $elements = {
siteHeader = null,
}
function setPosition() {
const scrollTop = $(document).scrollTop()
const offsetTop = $elements.siteHeader.offset().top
if(scrollTop > offsetTop){
$elements.siteHeader.css({'margin-top':`${$elements.siteHeader.height() * -1}px`})
} else {
$elements.siteHeader.css({'margin-top':'0px'})
}
}
function initialize() {
// Wait for all elements to be created
$(function() {
$elements.siteHeader = $('.site-header')
setPosition()
$(document).scroll(setPosition)
$(document).resize(setPosition)
})
}
initialize()
return app;
})(myApp || {})
I'm sure this is a trivial problem but I cannot seem to figure it out. I'm trying to fade a side bar in and out, and because I have a few of them in my website, I need to give them individual IDs for Javascript.
This code works
$(window).on("scroll", function() {
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$("#menu").fadeOut();
} else {
$("#menu").fadeIn();
}
});
This doesn't
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
menu.fadeOut();
} else {
menu.fadeIn();
}
});
In the latter piece, all I'm trying to do is assign a variable.
Here's the fiddle: https://jsfiddle.net/gavinfriel/nhovvj6q/1/
Your help would be appreciated.
You have to wrap it in a jQuery call to make it a jQuery object. Otherwise it cannot find the fadeOut and fadeIn functions:
var menu = $("#menu");
or
var menu = $(document.getElementById("menu"));
You need to use jquery to convert menu to jQuery object.
So it will have the fade property
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$(menu).fadeOut();
} else {
$(menu).fadeIn();
}
});
Because if you use menu.fadeOut() it will generate error because menudoesn't have fade property
Checkout this it will work.
$(window).on("scroll", function() {
var menu = $("#menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
menu.fadeOut();
} else {
menu.fadeIn();
}
});
As others have mentioned, you've declared a JavaScript variable but are trying to use it as a jQuery object.
I would personally go with PierreDuc's answer but if you refactor your code slightly you can carry on using the vanilla JS declared vaiable, but pass the variable slightly differently:
var test = document.getElementById("test");
$(test).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="test">
TEST
</div>
In your 2nd code, this might look as follows:
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$(menu).fadeOut();
} else {
$(menu).fadeIn();
}
});
I want to hide .isi-jumo-link when .indication is fully visible in the viewport. Currently it only disappears once .indication is at the top of the viewport.
User needs to scroll from the top and once .indication is fully in view then .isi-jump-link will disappear.
$(window).on('scroll', function () {
if ($(this).scrollTop() >= $('.indication').offset().top) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});
Just to note... using a fixed scrollTop in my case will not work.
You could check if the both the top and the bottom of your indication is within the viewport:
$(window).on('scroll', function () {
var bottomIsVisible = $(this).scrollTop() + $(this).height() >= $('.indication').offset().top + $('.indication').height();
var topIsVisible = var topIsVisible = $(this).scrollTop() <= $('.indication').offset().top;
if (bottomIsVisible && topIsVisible) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});
You need to add the height of the .indication <div> also to the equation:
$(window).on('scroll', function () {
if ($(this).scrollTop() >= ($('.indication').offset().top + $('.indication).height())) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});
I've this function:
$(function() {
$(window).scroll(function(e) {
var sl = $(this).scrollLeft();
var lbl = $("#waypoints");
if (sl > 0) {
lbl.show('');
}
else {
lbl.hide();
}
if (sl > 750) {
lbl.html("<p>now passed 750</p>");
}
if (sl > 1000) {
lbl.html("<p>now passed 1000</p>");
}
});
});
Which work when i scroll the browser window. But I need to adjust it, so that it is set for a div (#main) which scrolls inside another div (.content) which has a fixed width and css overflow enabled.
I've tried $(#main).scroll(function(e) { no joy ...
thanks for reading, any help would be awesome.
Try to change to class:
$(function() {
$('.content').scroll(function(e) {
var sl = $(this).scrollLeft();
var lbl = $("#waypoints");
if (sl > 0) {
lbl.show();
}
else {
lbl.hide();
}
if (sl > 750) {
lbl.html("<p>now passed 750</p>");
}
if (sl > 1000) {
lbl.html("<p>now passed 1000</p>");
}
});
});
Here's a JSFiddle
I don't see what's the problem here - it's working (I mean the scroll events are fired, as you can see by scrollLeft value that is changing) http://jsfiddle.net/DTKeX/2/