Develop Reference

OnMouseScroll increment a variable JS

I want to make a JS function.
It will work like this :
If I use my Mouse Wheel to Scroll Down so my variable will decrement. And if I use my Mouse Wheel to Scroll Up my variable will increment
I want to put that in a Condition with a max and min number.
I will send you a screenshot of my website and you will understand
So like you see, I need to make it work without scrollbar. I've only one page in 100vh.
I've make something very bad but you will understand the idea
https://jsfiddle.net/tuzycreo/
i= 1;
if (i>0 && i<5) {
//if(MouseScrollUp)
//i++;
document.querySelector('.number').innerHTML = i;
//else if(MouseScrollDown)
//i--;
// document.querySelector('.number').innerHTML = number;
}
Thanks you guys !

You can try like this,
var scrollCount = 0,
latestScrollTop = 0,
doc = document.documentElement,
top = 0;
// Bind window scroll event
$(window).bind('scroll', function (e) {
top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if (latestScrollTop < top) {
// Scroll down, increment value
scrollCount += 1;
} else {
// Scroll up, decrement value
scrollCount -= 1;
}
// Store latest scroll position for next position calculation
latestScrollTop = top;
});

I make something that is working for me
https://jsfiddle.net/u93c9eth/2/
var scrollCount = 1;
window.addEventListener('mousewheel', function(e){
if(e.wheelDelta<0 && scrollCount<5){
scrollCount++;
}
else if(e.wheelDelta>0 && scrollCount>1){
scrollCount--;
}
document.querySelector('.number').innerHTML = scrollCount;
});

JS/Jquery Random Position of divs

This has been asked before and I got my code running.
The problem is with some weird viewport sizes the script seems to freeze.
There is nothing you can do but kill the tab.
I tried to script some backup that will kill the loop if its frozen, but it does not seem to get the job done.
Can anyone tell me whats wrong? Or show me an error in the script in general thats causing the freeze?
Thats the site where the code is running:
http://unkn0wn3d.com
JS Code is eithere there:
http://unkn0wn3d.com/css/pos.js
or here:
var pos = function(){
var containerW = $("article").width();
var containerH = $("article").height();
var langH = parseInt($( ".languages" ).position().top + $( ".languages" ).height());
var langW = parseInt($( ".languages" ).position().left + $( ".languages" ).width());
var creditW = parseInt($( ".credit" ).position().left - $(".link:first").width() + 15);
var positions = [];
var froze = false;
setTimeout(function(){froze=true;}, 2000)
$('.link').each(function() {
var coords = {
w: $(this).outerWidth(true)+5,
h: $(this).outerHeight(true)+5
};
var success = false;
while (!success)
{
coords.x = parseInt(Math.random() * (containerW-coords.w));
coords.y = parseInt(Math.random() * (containerH-coords.h));
var success = true;
$.each(positions, function(){
if (froze){return false;}
if (
(coords.x <= langW &&
coords.y <= langH) ||
(coords.x >= creditW &&
coords.y <= langH) ||
(coords.x <= (this.x + this.w) &&
(coords.x + coords.w) >= this.x &&
coords.y <= (this.y + this.h) &&
(coords.y + coords.h) >= this.y)
)
{
success = false;
}
});
}
positions.push(coords);
$(this).css({
top: coords.y + 'px',
left: coords.x + 'px',
display: 'block'
});
})};
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
$(document).ready(
pos()
);
$(window).resize(function () {
waitForFinalEvent(function(){pos();}, 500, "resize");
});

You have 2 problems. I don't see where you are doing it, but the size of your A.link elements is being controlled only by the height of the viewport. So if the viewport is tall and narrow, then the links are large, and it's simply impossible to fit them all.
The second problem is that if the links can't be placed your code just keeps trying forever. The timer will never fire because the main script is still busy running. Rather than just do
while (!success)
it would be better to do a limited number of attempts:
var success = false;
for (var attempt = 0; !success && attempt < 50; attempt++)
{
....
}
By limiting the number of tries it will stop it freezing, even if the links are left overlapping. Then you can remove froze and the timer.
Even better would be to introduce a tolerance as the number of attempts increases - so they are allowed to overlap a little bit.

Your while loop never terminates since inside it you wrote var success = true
You redefined your success variable again by using var, so now you have 2 instances of success and the first one is never set to true so the loop never terminates. Try removing var from var success = true

Sticky Tabs Attaching To Specific Div

Ok so I have some sticky tabs that I am using to automatically pin to the top of the content area when scrolling so the user always knows that category they are in. You can see this here http://www.codeclimb.com/menus3/index2.html as you scroll the tab will stick the top. I am achieving this with the following javascript
function stickyTitles(stickies) {
this.load = function() {
stickies.each(function(){
var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
thisSticky.parent().height(thisSticky.outerHeight());
jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
});
}
this.scroll = function() {
stickies.each(function(i){
var thisSticky = jQuery(this),
nextSticky = stickies.eq(i+1),
prevSticky = stickies.eq(i-1),
pos = jQuery.data(thisSticky[0], 'pos');
if (pos <= jQuery(window).scrollTop()) {
thisSticky.addClass("fixed");
if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
}
} else {
thisSticky.removeClass("fixed");
if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
prevSticky.removeClass("absolute").removeAttr("style");
}
}
});
}
}
jQuery(document).ready(function(){
var newStickies = new stickyTitles(jQuery(".followMeBar"));
newStickies.load();
jQuery(window).on("scroll", function() {
newStickies.scroll();
});
});
However you can see that this is designed to stick the tabs to the very top of the browser and not right below the header. Currently I have applied a margin-top to the CSS to make the followbar stick to the bottom of the div I want it to (the "now serving" section) but you can see that it takes longer for the title tab to snap to the next category because it is really doing it when it hits the top of the browser.
So as each time it passes the "now serving" section I want it to snap the tab there.
Any fix on how I can make it work to the div I want specifically?

You can accomplish this by accounting for the height of the header in the $(window).scroll event like so:
this.scroll = function() {
stickies.each(function(i){
var thisSticky = jQuery(this),
nextSticky = stickies.eq(i+1),
prevSticky = stickies.eq(i-1),
pos = jQuery.data(thisSticky[0], 'pos');
if (pos - 120 <= jQuery(window).scrollTop()) {
//**120px is the height of the header
thisSticky.addClass("fixed");
if (nextSticky.length > 0 && thisSticky.offset().top - 120 >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight() - 120);
}
} else {
thisSticky.removeClass("fixed");
if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
prevSticky.removeClass("absolute").removeAttr("style");
}
}
});
}
P.S. When can I buy a chicken kabob drink? :)

I would change the line:
if (pos <= jQuery(window).scrollTop())
To something like this:
if (pos <= jQuery(window).scrollTop() + offset)
Where offset is equal to the height of the header.

Get scroll position to set variable

I am using this to scroll the page. However I would like it to stop scrolling at set positions on the page.
var t;
var scrolling = false;
function doScroll() {
$('body').scrollTop($('body').scrollTop() + 20);
}
$('#pause').on('click',function(){
scrolling = !scrolling;
if(!scrolling){
clearInterval(t);
return;
}
t = setInterval(doScroll, 10);
});
I was hoping that by adding this to the doScroll function would stop the scroll at positions between 100 and 150 but, it does not.
if($("#pause").offset().top >=100 && <150){
clearInterval(t);
}
Any ideas?

Got it! if condition was incorrect, scrolling had to be set to false to allow restart...
function doScroll() {
$('body').scrollTop($('body').scrollTop() + 20);
if($("#pause").offset().top >=100 && $("#pause").offset().top < 150){
clearInterval(t);
scrolling = false;
return;
}
}
Thanks to zvona

jScrollPane scrolling on element drag

I am trying to scroll by highlighting text and dragging down. Now, as you are probably aware, this is standard, default behavior for a standard overflow: auto element, however I am trying to do it with some fancy scrollbars courtesy of jQuery jScrollPane by Kelvin Luck.
I have created a fiddle here: DEMO
basically as you can see, highlighting and scrolling works in the top box (the default overflow: auto box) but in the second it doesn't and, to compound matters, once you reach the bottom it INVERTS your selection!
So, my question(s) is(are) this(these): is there a way to fix this? If so, how?
UPDATE
I have been working on this quite a bit and have found a slight solution using setTimeout()
however, it doesn't work as intended and if anybody is willing to help I have forked it to a new fiddle here: jsFiddle
the code itself is:
pane = $('#scrolldiv2');
pane.jScrollPane({animateEase: 'linear'});
api = pane.data('jsp');
$('#scrolldiv2').on('mousedown', function() {
$(this).off().on('mousemove', function(e) {
rel = $(this).relativePosition();
py = e.pageY - rel.y;
$t = $(this);
if (py >= $(this).height() - 20) {
scroll = setTimeout(scrollBy, 400, 20);
}
else if (py < 20) {
scroll = setTimeout(scrollBy, 400, -20);
}
else {
clearTimeout(scroll);
}
})
}).on('mouseup', function() {
$(this).off('mousemove');
clearTimeout(scroll);
})
var scrollBy = function(v) {
if (api.getContentPositionY < 20 & v == -20) {
api.scrollByY(v + api.getContentPositionY);
clearTimeout(scroll);
} else if (((api.getContentHeight - $t.height()) - api.getContentPositionY) < 20 & v == 20) {
api.scrollByY((api.getContentHeight - $t.height()) - api.getContentPositionY);
clearTimeout(scroll);
} else {
api.scrollByY(v, true)
scroll = setTimeout(scrollBy, 400, v)
}
}
$.fn.extend({
relativePosition: function() {
var t = this.get(0),
x, y;
if (t.offsetParent) {
x = t.offsetLeft;
y = t.offsetTop;
while ((t = t.offsetParent)) {
x += t.offsetLeft;
y += t.offsetTop;
}
}
return {
x: x,
y: y
}
},
})​

You just have to scroll down/up depending on how close the mouse is to the end of the div; is not as good as the native solution but it gets the job done ( http://jsfiddle.net/PWYpu/25/ )
$('#scrolldiv2').jScrollPane();
var topScroll = $('#scrolldiv2').offset().top,
endScroll = topScroll + $('#scrolldiv2').height(),
f = ($('#scrolldiv2').height() / $('#scrolldiv2 .jspPane').height())*5 ,
selection = false,
_prevY;
$(document).mousemove(function(e){
var mY;
var delta = _prevY - e.pageY;
if((e.pageY < endScroll && (mY = ((e.pageY - endScroll + 80)/f)) > 0) ||
(e.pageY > topScroll && (mY = (e.pageY - (topScroll + 80))/f) < 0)){
if(selection && (delta > 10 || delta < -10) )
$('#scrolldiv2').data('jsp').scrollByY(mY, false) ;
}
})
$('#scrolldiv2').mousedown(function(e){_prevY = e.pageY; selection = true ;})
$(window).mouseup(function(){selection = false ;})​
BTW, the reason it inverts the selection is because it reached the end of the document, just put some white space down there and problem solved.

I really hate to say it, I know it's an issue even I ran into with the update to this plugin, but in the old plugin (seen here) it works just fine with basic call. So I just reverted my copy.