We Keep Coding

jQuery plugin that bind mousedown prevent click in client code

I have plugin jQuery-splitter that bind to document.documentElement:
$(document.documentElement).bind('mousedown.splitter touchstart.splitter', function(e) {
if (splitter_id !== null) {
current_splitter = splitters[splitter_id];
$('<div class="splitterMask"></div>').css('cursor', current_splitter.children().eq(1).css('cursor')).insertAfter(current_splitter);
current_splitter.settings.onDragStart(e);
}
}).bind('mouseup.splitter touchend.splitter touchleave.splitter touchcancel.splitter', function(e) {
if (current_splitter) {
$('.splitterMask').remove();
current_splitter.settings.onDragEnd(e);
current_splitter = null;
}
}).bind('mousemove.splitter touchmove.splitter', function(e) {
if (current_splitter !== null) {
var limit = current_splitter.limit;
var offset = current_splitter.offset();
if (current_splitter.orientation == 'vertical') {
var pageX = e.pageX;
if(e.originalEvent && e.originalEvent.changedTouches){
pageX = e.originalEvent.changedTouches[0].pageX;
}
var x = pageX - offset.left;
if (x <= current_splitter.limit) {
x = current_splitter.limit + 1;
} else if (x >= current_splitter.width() - limit) {
x = current_splitter.width() - limit - 1;
}
if (x > current_splitter.limit &&
x < current_splitter.width()-limit) {
current_splitter.position(x, true);
current_splitter.find('.splitter_panel').
trigger('splitter.resize');
//e.preventDefault();
}
} else if (current_splitter.orientation == 'horizontal') {
var pageY = e.pageY;
if(e.originalEvent && e.originalEvent.changedTouches){
pageY = e.originalEvent.changedTouches[0].pageY;
}
var y = pageY-offset.top;
if (y <= current_splitter.limit) {
y = current_splitter.limit + 1;
} else if (y >= current_splitter.height() - limit) {
y = current_splitter.height() - limit - 1;
}
if (y > current_splitter.limit &&
y < current_splitter.height()-limit) {
current_splitter.position(y, true);
current_splitter.find('.splitter_panel').
trigger('splitter.resize');
//e.preventDefault();
}
}
current_splitter.settings.onDrag(e);
}
});
And in user code when I use this code the click don't work when I click on splitter (div between panels) it work when I click on the panel.
var counter = 0;
$(document.documentElement).on('click', function(e) {
console.log('x');
var $target = $(e.target);
if ($target.is('.vsplitter, .hsplitter')) {
if (++counter == 2) {
console.log('double click');
$target.parents('.splitter_panel').eq(0).data('splitter').position(20);
counter = 0;
}
} else {
counter = 0;
}
});
When I comment out the $(document.documentElement).bind('mousedown.splitter touchstart.splitter' code I can double click on the splitter. Anybody have a clue why is this happening?

It was caused by .splitterMask div.

Complex jquery scroll

I need to trigger a function specifically after an user scroll almost at the bottom of the page then up until certain point. How do I do it properly?
advertisement.refreshAd = function() {
$(window).scroll(function(event) {
if('almost at the end then scroll up to certain point')
{console.log('trigger refresh!');}
});
}

What you are looking for is the jQuery function scrollTop(). The code would look something like this:
var atEnd = false;
advertisement.refreshAd = function() {
$(window).scroll(function(event) {
if($(document).scrollTop() > $(document).height()-500) { //point1
atEnd = true;
} if (($(document).scrollTop() < point2) && atEnd){
console.log('trigger refresh!');
}
});
}

Try below code
<script>
var touchedBottom = 0;
jQuery(window).scroll(function(event) {
if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
touchedBottom = 1;
console.log("touched Bottom");
}
if(touchedBottom){
if(jQuery(window).scrollTop() < jQuery("#point_2").offset().top){
touchedBottom = 0;
console.log("touched point 1");
}
}
});
</script>

advertisements.refreshAd = function() {
var furthestPoint = false;
var point2 = 1700 //will be dynamic;
var lastScrollTop = 0;
var scrolledToPosition = false;
$(window).scroll(function() {
var st = $(this).scrollTop();
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
furthestPoint = true;
}
if (st < lastScrollTop && st < point2 && furthestPoint){
if (!scrolledToPosition) {
console.log('TRIGGER! - once only!');
scrolledToPosition = true;
}
}
lastScrollTop = st;
});
};
advertisements.refreshAd();

hotspots not linking in product viewer

So using a script for 360 image rotation, i've set up a tags to act as hot spots and lead to different pages within a jquery mobile document. Everything works a desktop, but when i test the page on an ipad, none of the links do anywhere. Heres the script for the rotation.
<script>
jQuery(document).ready(function ($) {
var $product = $('#product'),
$imgs = $product.find(".child"),
imageTotal = $imgs.length - 1,
clicked = false,
widthStep = 4,
currPos,
currImg = 0,
lastImg = 0;
$imgs.bind('mousedown', function (e) {
e.preventDefault(); // prevent dragging images
})
.filter(':gt(0)').addClass('notseen');
$product.bind('mousedown touchstart', function (e) {
if (e.type == "touchstart") {
currPos = window.event.touches[0].pageX;
} else {
currPos = e.pageX;
}
clicked = true;
return false;
});
$(document)
.bind('mouseup touchend', function () {
clicked = false;
})
.bind('mousemove touchmove', function (e) {
if (clicked) {
var pageX;
if (e.type == "touchmove") {
pageX = window.event.targetTouches[0].pageX;
} else {
pageX = e.pageX;
}
widthStep = 4;
if (Math.abs(currPos - pageX) >= widthStep) {
if (currPos - pageX >= widthStep) {
currImg++;
if (currImg > imageTotal) {
currImg = 0;
}
} else {
currImg--;
if (currImg < 1) {
currImg = imageTotal;
}
}
currPos = pageX;
$imgs.eq(lastImg).addClass('notseen');
$imgs.eq(currImg).removeClass('notseen');
lastImg = currImg;
// $obj.html('<img src="' + aImages[options.currImg] + '" />');
}
}
});
});
</script>
I'm know its the script because when i remove it, the links work. Any ideas?

jQuery(document).ready() is not supported in jQM.
http://view.jquerymobile.com/1.3.0/docs/faq/dom-ready-not-working.php

Perform an action when near the bottom of the page

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/

How do I tell IE to add the class 'Selected' to my LI on scroll?

I was hoping to get a little help with my code. This works in moz/webkit but not in ie. I don't quite understand why :(
$(window).trigger('hashchange');
// Add .selected class to nav on page scroll
var $sections = $('section');
var $navs = $('nav > ul > li');
var topsArray = $sections.map(function() {
return $(this).position().top - 50;
}).get();
var len = topsArray.length;
var currentIndex = 0;
var getCurrent = function( top ) {
for( var i = 0; i < len; i++ ) {
if( top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1] ) {
return i;
}
}
};
$(document).scroll(function(e) {
var scrollTop = $(this).scrollTop();
var secondSection = topsArray[1];
if(scrollTop <= 200) { // moved past the header
$navs.eq(0).removeClass("selected")
} else if(scrollTop >= 205 && scrollTop <= secondSection ) { // between header and 2nd section
$navs.eq(0).addClass("selected")
}
var checkIndex = getCurrent( scrollTop );
if( checkIndex !== currentIndex ) {
currentIndex = checkIndex;
$navs.eq( currentIndex ).addClass("selected").siblings(".selected").removeClass("selected");
}
});

IE is not very forgiving of javascript errors. Try adding some missing semicolons:
if(scrollTop <= 200) { // moved past the header
$navs.eq(0).removeClass("selected"); //missing semicolon
} else if(scrollTop >= 205 && scrollTop <= secondSection ) { // between header and 2nd section
$navs.eq(0).addClass("selected"); //missing semicolon
}
If it is IE only, then IE is having trouble parsing the js. Try running your js through a debugger like JsLint if you run into issues.