I have html which has header footer and divs between. I am trying to create an event when the window is scrolled to footer. As the footer appears immediately an alert must popup which shows a message.
Here is my HTML content
http://jsfiddle.net/q4bw82gy/
I have tried the below jquery code, but it is not working for resolutions other than desktop
$(window).scroll(function() {
var scrollPosition = $(window).height() + $(window).scrollTop();
var theight = ($('.banner-section').height()+$('.section-one').height()+$('.section-two').height()+$('.read-one').height()+$('.read-two').height()+$('.next-program').height())-($('.navbar-dark').height()+
($('.main-navigation').height()));
var height1 = $(window).scrollTop();
var height2 = $('.main').height()-$('.expand-section').height()-$('.ftr').height();
if(height1 >= theight){
alert('message 1');
}
else{
alert('message 2');
}
});
Please help with a better solution
Do you want something like this?
$(function() {
$(window).scroll(function() {
var footerTop = $('.ftr').position().top; // or .offset().top
var scrollTop = $(window).scrollTop();
var viewportHeight = $(window).height();
if (footerTop <= scrollTop + viewportHeight) {
console.log("true|" + footerTop + "|" + scrollTop + "|" + viewportHeight);//alert
} else {
console.log("false|" + footerTop + "|" + scrollTop + "|" + viewportHeight);//alert
}
});
});
Related
I am creating a popup form. I am using the code below and I want the form to show up in the center of the page with the pre determined height/width. The popup is all over the place. It will pop up on the left top, right middle and with different sizes. How can I set it to be consistent?
<a class="collapse-item" href="#" onclick="reqcred()">Cards</a>
<script>
function reqcred() {
w = window.open("{% url 'test_popup' %}","popup_form", 'left=100,top=100,height=450,width=650');
w.onload =
function() {
w.onunload = function() {
location.reload(true);
}}}
</script>
I figured it out. This is what I did.
<script>
function reqcred() {
var height = 750
var width = 950
var left = Number((screen.width/2)-(width/2));
var top = Number((screen.height/2)-(height/2));
w = window.open("{% url 'test_popup' %}","popup_form", 'width='+ width + ', height=' + height + ', top='
+ top + ', left=' + left);
w.onload =
function() {
w.onunload = function() {
location.reload(true);
}}}
</script>
How to fix the error line of:
var targetTop = $('#' + page).offset().top;
I am trying last 3 months but still did not find a fix.
$(document).ready(function(){
$(window).scroll(function() {
$('.page').each(function () {
changePage(this.id);
});
});
});
function changePage (page) {
var position = $(window).scrollTop();
var targetTop = $('#' + page).offset().top;
var targetBottom = targetTop + $('#' + page).height();
if (position >= targetTop && position < targetBottom && !$('#' + page).hasClass('active')) {
console.log('id: ' + page);
$('.page').removeClass('active');
$('#' + page).addClass('active');
$('iframe').attr('src', '<?=SITE_URL?>upload_files/collection/TS.pdf#page=' + page[page.length - 1]+'&zoom=45&toolbar=0&navpanes=0');
}
}
$('#' + page) doesn't return any elements, which means $('#' + page).offset() returns undefined.
You can't get the .top property of undefined.
Apparently, the selector created with '#' + page is incorrect.
The cause is probably a undefined id in changePage(this.id);.
So I have a several tables with several rows and columns. Since the information is huge I want to keep the table headers fixed on top when scrolling.
When the one header comes, the previous one will hide and the current one will stay fixed.
This is the js code I have so far:
function makeTableHeadersSticky(tableId) {
var thArr = $(tableId + " th");
var thWidthsArr = [];
var calcWidth = 0;
$(tableId + " th").each(function(){
calcWidth = $(this).css("width");
thWidthsArr.push(calcWidth);
});
var pos = $(tableId).offset();
var thTop = pos.top + "px";
var count = 0;
$(tableId + " tr:first-child > th").each(function(){
$(this).css("width", thWidthsArr[count]);
count++;
});
count = 0;
$(tableId + " tr:last-child > td").each(function(){
$(this).css("width", thWidthsArr[count]);
count++;
});
$(window).scroll(function() {
//var firstRow = $(tableId + " tr:first-child").offset();
var lastRow = $(tableId + " tr:last-child").offset();
var w = $(window);
//console.log("(first,last): ("+(firstRow.top-w.scrollTop())+","+(lastRow.top-w.scrollTop())+")");
if(($(window).scrollTop() > pos.top) && (lastRow.top-w.scrollTop() >= 0)) {
$(tableId + " tr:first-child").css("position", "fixed");
$(tableId + " tr:first-child").css("top", "0px");
$(tableId + " tr:first-child").css("left", "9px");
} else {
$(tableId + " tr:first-child").css("position", "static");
$(tableId + " tr:first-child").css("top", thTop);
}
});
}
makeTableHeadersSticky("#myTable");
If you see on my code I played with the positions of the table and the last row of the table to see where the table is. This way I can set the header position as fixed or static.
Here is my jsfiddle
Everything works just fine here. You just omitted to call the makeTableHeadersSticky function for the second table :
makeTableHeadersSticky("#myTable2");
demo
I'm having issues increasing a variable by 1 every time I scroll. I successfully increase the variable by 1, but only once. This is the code I got. I need to increase the variable page.
$(document).ready(function () {
$(document).scroll(function (e) {
currentPage = 0;
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
++currentPage;
$.getJSON("../campus/Settings/TranslationSettings.ashx?command=show&page=" + currentPage + "&Lang=en", function (data) {
var items = [];
$.each(data.Keys, function (key, val) {
$("<ul/>", {
"class": "translateinfo",
html: "<li class='keystring'><span class='label'>text string:</span>" + val["text string"] + "</li>" + "<li class='autotranslate'><span class='label'>Automated translation:</span>" + val["automated translation"] + "</li>" + "<li class='functionnumber'><span class='label'>Function Number:</span>" + val["function number"] + "</li>" + "<li class='translateurl'><span class='label'>URL:</span>" + val["url"] + "</li>"
}).appendTo("#updatepanel");
});
});
}
});
});
Not sure if you copy/paste your entire code. But you're recreating currentPage everytime the user scroll
Working fiddle, I create the variable before the scroll loop.
var currentPage = 0;
$(document).scroll(function (e) {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
++currentPage;
console.log(currentPage);
}
})
http://jsfiddle.net/dCr3Z/
Is there a possible way to do a PDF page count in javascript (with titanium)?
I'm working on an application, and i need the amount of pages to know on which page a user is. Right now i'm doing the amount of pages hard coded, but I want to retrieve the pages via javascript.
var pageheight;
var numPages = 180;
wv.addEventListener('load', function(e){
var documentHeight = wv.evalJS('window.outerHeight');
var innerHeight = wv.evalJS('window.innerHeight');
var ratio = innerHeight / wv.height;
pageHeight = parseInt(ratio * (documentHeight / numPages), 10);
Ti.API.info(title);
wv.evalJS("var currentPage = 1;");
wv.evalJS("window.onscroll = function() { currentPage = parseInt(window.pageYOffset/" + pageHeight + ") + 1;}");
wv.evalJS("window.onclick = function() { currentPage = parseInt(window.pageYOffset/" + pageHeight + ") + 1;}");
setInterval(getCurrentPage, 100);
});
function jumpToPage(page){
wv.evalJS('window.scrollTo(0, ' + pageHeight * (page - 1) + ');');
}
function getCurrentPage(){
var currentPage = parseInt(wv.evalJS("currentPage"), 10);
Ti.API.info('currentpage: ' + currentPage);
Ti.API.info(title)
}
I hope someone can help me, i really needs this to work.
thanks in advance
You could set the pageHeight manually, since this is most likely static. Then you would just divide the document height with the page height.
wv.evalJS( "Math.ceil( document.body.scrollHeight / " + pageHeight + " )" );
If not, then you could get page count server side and then just get it with XHR from the app.