I'm implementing the kendo.drag component on the endless scroll. The idea is to auto-hide the nav bar and tab strip on scroll up and re-show on scroll down (Like some native apps are doing.)
This code seems to work pretty well on the phone but when I test in a browser the page won't scroll. I know the events are being fired when I add alerts but the page stays unscrollable. Any ideas?
Thanks.
This code seems to work pretty well on the phone but when I test in a browser the page won't scroll. I know the events are being fired when I add alerts but the page stays unscrollable. Any ideas?
Thanks.
function
hideNavBarsOnScroll() {
var
ggPosn =
'0'
;
var
log =
''
;
var
drag =
new
kendo.Drag($(
'#endless-scrolling'
), {
start:
function
(e) {
if
(e.y) {
ggPosn = $(
'#endless-scrolling'
).offset().top;
}
},
move:
function
(e) {
if
(e.y) {
if
($(
'#endless-scrolling'
).offset().top < ggPosn) {
if
($(
'#homeview header'
).is(
':visible'
)) {
$(
'#homeview header'
).slideUp(
'slow'
);
$(
'#homeview .km-footer'
).attr(
'style'
,
'position:absolute;'
).animate({
'bottom'
:
'-'
+ $(
'#homeview .km-footer'
).height() +
'px'
},
'slow'
,
function
() { });
}
}
else
{
if
($(
'#endless-scrolling'
).offset().top > ggPosn) {
if
($(
'#homeview header'
).is(
':visible'
) ==
false
) {
$(
'#homeview header'
).slideDown(
'slow'
);
$(
'#homeview .km-footer'
).attr(
'style'
,
'position:absolute;'
).animate({
'bottom'
:
'0px'
},
'slow'
,
function
() { });
}
}
}
}
},
end:
function
(e) {
if
(e.y) {
ggPosn = $(
'#endless-scrolling'
).offset().top;
}
}
});
}