Perform an action when near the bottom of the page - javascript

Javascript code:
var next_page = 2;
var next_previews = 36;
function ajax_autopaginate(a, b) {
function incrementPage () {
next_page += 1;
next_previews += 36;
}
jQuery('#' + b).load(a , function() {
incrementPage();
setTimeout(pollScrollPosition, 500);
});
}
function pollScrollPosition() {
var y = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
var max = window.scrollMaxY || (document.body.scrollHeight - document.body.clientHeight);
if ((max - y) <= 1500) {
ajax_autopaginate('http://www.wallpaperup.com/welcome/get_wallpapers/date_added/DESC/' + next_previews + '/','content' + next_page);
} else {
setTimeout(pollScrollPosition, 500);
}
}
setTimeout(pollScrollPosition, 500);
I'm using this code to execute a function if we are 1500px or less from the end of the page, all works good in Firefox, but in IE and Chrome the function is always executed, how should I fix it?
this is the page that gives me problems: http://www.wallpaperup.com/

Related

Slideshow in JavaScript not working

Okay I successfully created a basic slideshow but I wanted to add more effects and such to make it look more realistic. I am doing some coding but I don't know what is wrong. I end up crashing my MOZILLA everytime I run the script. Can anyone help me do this correctly? And not to mention I don't want any kind of jQuery modification to my code
JavaScript
var img = new Array("a.jpg","b.jpg","c.jpg");
var len = img.length - 1;
var pos = 0;
function slid(e){
pos = pos + e;
if(pos < 0)
{
pos = len;
}
if(pos > len)
{
pos = 0;
}
var a = 1;
var i = 1;
while(i<=50)
{
function op(a) {
a -= 0.02;
if(a < 0)
{
a = 1;
}
document.getElementById("slide").style.opacity = a;
}
i++;
}
document.getElementById("slide").src = img[pos];
return false;
};
and yeah it's not fading(in this case changing opacity) help me on that too?
Take a look here:
while(i<=50)
{
function op(a) {
a -= 0.02;
if(a < 0)
{
a = 1;
}
document.getElementById("slide").style.opacity = a;
}
}
You are not incrementing your 'i' counter variable, resulting in an infinite loop, and hence browser crashing. Replace with this:
while(i<=50)
{
function op(a) {
a -= 0.02;
if(a < 0)
{
a = 1;
}
document.getElementById("slide").style.opacity = a;
}
i++; //increment the counter variable to prevent an infinite loop
}

Javascript scroll issue in Opencart theme

I'm working on a project based on Opencart with the theme Tranda Social (I think it's deprecated). The problem I'm facing is that at Home page ONLY I can't get the scroll-effects (eg. When scrolling-down keep the navbar in fixed position, or getting to the TOP by just clicking the button with the UP-arrow). After some research I've concluded that for some reason a Javascript function isn't get called correctly.
setTimeout(function () {
/* Menu */
$('#menu ul > li > a + div').each(function (index, element) {
var menu = $('#menu').offset();
var dropdown = $(this).parent().offset();
i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
if (i > 0) {
$(this).css('margin-left', '-' + (i + 5) + 'px');
}
});
/* Fixed Menu */
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#bottomh').addClass('bottomfixed');
} else {
$('#bottomh').removeClass('bottomfixed');
}
});
}
});
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#bottomh').addClass('bottomfixed');
} else {
$('#bottomh').removeClass('bottomfixed');
}
});
}
});
/* Margin Menu */
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#container').addClass(' topmargin');
} else {
$('#container').removeClass(' topmargin');
}
});
}
});
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#container').addClass(' topmargin');
} else {
$('#container').removeClass(' topmargin');
}
});
}
});
}, 500);
The functions after fixed-menu and margin-menu comments are NOT working when I'm navigating in Home page. Also if you notice, there is a duplicate of each function (don't know for what reason). Have you any ideas? Any help will be greatly appreciated.
It was a problem caused by Slidesshow module (Nivo Slider) because of a JS error related to it. Uninstall-reinstall the module fixes the problem.

attachEvent and addEvent render unexpected result

I guess I must have made some amateur mistake that I keep on overlooking, but I can't seem to figure it out.
I'm making a onepage smoothscrolling website. If you scroll, the browser detects the direction and then scrolls you to the appropriate div. However when I scroll, an incorrect pagenumber is passed every time.
Here's the relevant javacript code:
var mousewheelevt;
var wheeldirection;
var wheeldirectiontype;
function ScrollToPage(pageNumber, directionNumber, directionNumberType) {
console.log('pageNumber: ' + pageNumber);
var direction;
var newPageNumber;
var directionType; //0=up, 1=down
console.log('directionNumberType: ' + directionNumberType);
console.log('directionNumber: ' + directionNumber);
if (directionNumberType == 0){
//non ff
if (directionNumber > 0) {
directionType = 0; //up
} else {
directionType = 1; //down
}
} else {
//ff
if (directionNumber < 0) {
directionType = 0; //up
} else {
directionType = 1; //down
}
}
console.log('directionType: ' + directionType);
console.log('pageNumber: ' + pageNumber);
if (directionType == 0) {
direction = 'up';
if(pageNumber > 1) {
newPageNumber = pageNumber - 1;
} else {
newPageNumber = 1
}
} else {
direction = 'down';
if(pageNumber < 5) {
newPageNumber = pageNumber + 1;
} else {
newPageNumber = 5;
}
}
$.scrollTo( $('#Page_' + newPageNumber), 800);
console.log(direction + ' - ' + newPageNumber);
}
$(document).ready(function() {
var y;
if(/Firefox/i.test(navigator.userAgent)) {
mousewheelevt = "DOMMouseScroll";
wheeldirectiontype = 1;
} else {
mousewheelevt = "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x
wheeldirectiontype = 0;
}
for (y = 1; y <= 5; y++) {
console.log(y);
if (document.attachEvent) {//if IE (and Opera depending on user setting)
if(wheeldirectiontype == 0) {
document.getElementById('Page_' + y).attachEvent("on"+mousewheelevt, function(e){ScrollToPage(y, w.wheelDelta, wheeldirectiontype)});
} else {
document.getElementById('Page_' + y).attachEvent("on"+mousewheelevt, function(e){ScrollToPage(y, e.detail, wheeldirectiontype)});
}
} else if (document.addEventListener) {//WC3 browsers
if(wheeldirectiontype == 0) {
document.getElementById('Page_' + y).addEventListener(mousewheelevt, function(e){ScrollToPage(y, e.wheelDelta, wheeldirectiontype)}, false);
} else {
document.getElementById('Page_' + y).addEventListener(mousewheelevt, function(e){ScrollToPage(y, e.detail, wheeldirectiontype)}, false);
}
}
console.log(y);
$("#Page_" + y).wipetouch({
wipeUp: function(result) {ScrollToPage(y,1,0);},
wipeDown: function(result) {ScrollToPage(y,0,0);}
});
}
});
and here's the html:
<body>
<div id="Page_1" class="Landscape">
Ankerrui 2
</div>
<div id="Page_2" class="Landscape">
Voorwoord
</div>
<div id="Page_3" class="Landscape">
Beschrijving
</div>
<div id="Page_4" class="Landscape">
In de buurt
</div>
<div id="Page_5" class="Landscape">
Foto's
</div>
</body>
the page loads right on the first page, when I scroll down it scrolls to the bottom page wih the console showing 6 as the pageNumber. When I scroll back up, it stays on the last page, with the console showing 6 as the pageNumber as well. This is right if the pageNumber would actually be 6, but it should be respectively 1 and 5.
The console does show the right values for the y variable that is used to add the attachEvents, so I'm a bit clueless here.

jQuery pager not working on last page

My pager works except for the last page that you click on. So if my last page is 11 that has been clicked the pager stops working when going backwards. If you click a page and then click another it works fine except for the last page. here it is on jsFiddle (its been updated and working now
Javascript:
$(document).ready(function () {
var pageIndex = 1;
function pagerControl(pageIndex, pageCount, step) {
var result = "";
if (pageCount > 1) {
var startPoint = Math.floor((pageIndex / step)) * step;
if ((pageIndex % step) == 0) {
startPoint -= step;
}
if (pageIndex < pageCount) {
result += 'Next';
}
else {
result += '<span>Next<span>';
}
//alert(startPoint);
for (var i = startPoint + 1; i <= pageCount && i <= (startPoint + step + 1); i++) {
if (i != pageIndex) {
result += '' + i + '';
}
else {
result += '<span>' + i + '</span>';
}
}
if (pageIndex > 1) {
result += 'Prev';
} else {
result += '<span>Prev</span>';
}
}
$('#pager').html(result);
$('#pager > a').click(function (e) {
reload($(e.target).attr('rel'));
e.preventDefault();
});
}
function reload(page) {
pagerControl(page, 11, 4);
}
pagerControl(1, 11, 4);
});
jsFiddle
Try this ' $('#pager a').click ' while binding click event with links instead of present ' $('#pager > a').click '.
It's working on my side. I know this isn't an elaborated answer but a quick correction.
.. :)
Sometimes we complicate things too much. How about abolish the "if" statement ... for most cases?
var pageIndex = 1;
function pagerControl(pageIndex, pageCount, step) {
var result = '';
if (pageCount > 1) {
pageIndex = (pageIndex > pageCount) ? pageCount : pageIndex;
var startPoint = Math.floor((pageIndex / step)) * step;
var endPoint = pageCount;
startPoint = (startPoint < 1) ? 1 : startPoint;
endPoint = ((startPoint + step) > pageCount) ? pageCount : (startPoint + step -1);
result = 'PREV ';
for (var i=startPoint;i<(endPoint+1);i++)
result += '' + i + '';
result += ' NEXT';
}
$('#pager').html(result);
$('#pager > a').click(function (e) {
reload(parseInt($(e.target).attr('rel')));
e.preventDefault();
});
}
function reload(page) {
pagerControl(page, 11, 4);
}
pagerControl(1, 11, 4);

Javascript arrays (Image slider)(bug in Webkit?)

I've got a image slider on my website, it seems to work fine on IE, Firefox and Opera. But it doesn't work on Chrome and Safari. (Example: http://tommy-design.nl/ari/index.php)
<script type="text/javascript">
var data = [
["fotos/DSC_0055 (Large).JPG","Duitse herder","fotos/DSC_0055 (Large).JPG"],
["fotos/DSC_0154 (Large).JPG","Duitse herder","fotos/DSC_0154 (Large).JPG"],
["fotos/DSC_0194 (Large).JPG","Duitse herder","fotos/DSC_0194 (Large).JPG"],
["fotos/SSA41896 (Large).jpg","Duitse herder","fotos/SSA41896 (Large).jpg"],
["fotos/DSC_0143 (Large).JPG","Duitse herder","fotos/DSC_0143 (Large).JPG"]
]
imgPlaces = 4
imgWidth = 230
imgHeight = 122
imgSpacer = 0
dir = 0
newWindow = 1
moz = document.getElementById &&! document.all
step = 1
timer = ""
speed = 10
nextPic = 0
initPos = new Array()
nowDivPos = new Array()
function initHIS3()
{
for (var i = 0;i < imgPlaces+1;i++)
{
newImg=document.createElement("IMG")
newImg.setAttribute("id","pic_"+i)
newImg.setAttribute("src","")
newImg.style.position = "absolute"
newImg.style.width=imgWidth + "px"
newImg.style.height=imgHeight + "px"
newImg.style.border = 0
newImg.alt =""
newImg.i = i
newImg.onclick = function()
{
his3Win(data[this.i][2])
}
document.getElementById("display").appendChild(newImg)
}
containerEL = document.getElementById("container1")
displayArea = document.getElementById("display")
pic0 = document.getElementById("pic_0")
containerBorder = (document.compatMode == "CSS1Compat"?0:parseInt(containerEL.style.borderWidth) * 2)
containerWidth = (imgPlaces * imgWidth) + ((imgPlaces - 1) * imgSpacer)
containerEL.style.width=containerWidth + (!moz?containerBorder:"") + "px"
containerEL.style.height=imgHeight + (!moz?containerBorder:"") + "px"
displayArea.style.width = containerWidth+"px"
displayArea.style.clip = "rect(0," + (containerWidth+"px") + "," + (imgHeight+"px") + ",0)"
displayArea.onmouseover = function()
{
stopHIS3()
}
displayArea.onmouseout = function()
{
scrollHIS3()
}
imgPos = - pic0.width
for (var i = 0;i < imgPlaces+1;i++)
{
currentImage = document.getElementById("pic_"+i)
if (dir === 0)
{
imgPos += pic0.width + imgSpacer
}
initPos[i] = imgPos
if (dir === 0)
{
currentImage.style.left = initPos[i]+"px"
}
if (dir === 1)
{
document.getElementById("pic_"+[(imgPlaces-i)]).style.left = initPos[i]+"px"
imgPos += pic0.width + imgSpacer
}
if (nextPic == data.length)
{
nextPic = 0
}
currentImage.src = data[nextPic][0]
currentImage.alt = data[nextPic][1]
currentImage.i = nextPic
currentImage.onclick = function()
{
his3Win(data[this.i][2])
}
nextPic++
}
scrollHIS3()
}
timer = ""
function scrollHIS3()
{
clearTimeout(timer)
for (var i = 0;i < imgPlaces+1;i++)
{
currentImage = document.getElementById("pic_"+i)
nowDivPos[i] = parseInt(currentImage.style.left)
if (dir === 0)
{
nowDivPos[i] -= step
}
if (dir === 1)
{
nowDivPos[i] += step
}
if (dir === 0 && nowDivPos[i] <= -(pic0.width + imgSpacer) || dir == 1 && nowDivPos[i] > containerWidth)
{
if (dir === 0)
{
currentImage.style.left = containerWidth + imgSpacer + "px"
}
if (dir === 1)
{
currentImage.style.left = - pic0.width - (imgSpacer * 2) + "px"
}
if (nextPic > data.length-1)
{
nextPic = 0
}
currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i = nextPic
currentImage.onclick = function()
{
his3Win(data[this.i][2])
}
nextPic++
}
else
{
currentImage.style.left=nowDivPos[i] + "px"
}
}
timer = setTimeout("scrollHIS3()",speed)
}
function stopHIS3()
{
clearTimeout(timer)
}
function his3Win(loc)
{
if(loc === "")
{
return
}
if(newWindow === 0)
{
location = loc
}
else
{
newin = window.open(loc,'win1','left = 430,top = 340,width = 300 ,height = 300')
newin.focus()
}
}
</script>
I'm almost 100% sure that the problem lies in the array, but I can't seem to figure out what exactly the problem is..
Thanks in advance. :)
Try to use
position:relative;
and moving the first one from left to right / right to left(the others will follow accordingly as relative will tell em to follow the first image )
. i am pretty sure that that will start working on chrome then. as relative position tells it to use different positions. while opening your slider i found some bugs in chrome console : they all have the same left: thats getting changed together.

Categories