Develop Reference

How to avoid collapse menubar and cover carousel in website?

first of all im sorry for taking your time. I used album cover slider and superfish in my first site and they collapsed. I can use slider perfectly but i cant use my menu. Submenus and everything shows when i take my cursor to there. I want to learn how to avoid click collapse in js projects, little explanation would help me big time.
Here are the JS's.
for menu
* jQuery Superfish Menu Plugin - v1.7.9
* Copyright (c) 2016 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
;(function ($, w) {
"use strict";
var methods = (function () {
// private properties and methods go here
var c = {
bcClass: 'sf-breadcrumb',
menuClass: 'sf-js-enabled',
anchorClass: 'sf-with-ul',
menuArrowClass: 'sf-arrows'
},
ios = (function () {
var ios = /^(?![\w\W]*Windows Phone)[\w\W]*(iPhone|iPad|iPod)/i.test(navigator.userAgent);
if (ios) {
// tap anywhere on iOS to unfocus a submenu
$('html').css('cursor', 'pointer').on('click', $.noop);
}
return ios;
})(),
wp7 = (function () {
var style = document.documentElement.style;
return ('behavior' in style && 'fill' in style && /iemobile/i.test(navigator.userAgent));
})(),
unprefixedPointerEvents = (function () {
return (!!w.PointerEvent);
})(),
toggleMenuClasses = function ($menu, o, add) {
var classes = c.menuClass,
method;
if (o.cssArrows) {
classes += ' ' + c.menuArrowClass;
}
method = (add) ? 'addClass' : 'removeClass';
$menu[method](classes);
},
setPathToCurrent = function ($menu, o) {
return $menu.find('li.' + o.pathClass).slice(0, o.pathLevels)
.addClass(o.hoverClass + ' ' + c.bcClass)
.filter(function () {
return ($(this).children(o.popUpSelector).hide().show().length);
}).removeClass(o.pathClass);
},
toggleAnchorClass = function ($li, add) {
var method = (add) ? 'addClass' : 'removeClass';
$li.children('a')[method](c.anchorClass);
},
toggleTouchAction = function ($menu) {
var msTouchAction = $menu.css('ms-touch-action');
var touchAction = $menu.css('touch-action');
touchAction = touchAction || msTouchAction;
touchAction = (touchAction === 'pan-y') ? 'auto' : 'pan-y';
$menu.css({
'ms-touch-action': touchAction,
'touch-action': touchAction
});
},
getMenu = function ($el) {
return $el.closest('.' + c.menuClass);
},
getOptions = function ($el) {
return getMenu($el).data('sfOptions');
},
over = function () {
var $this = $(this),
o = getOptions($this);
clearTimeout(o.sfTimer);
$this.siblings().superfish('hide').end().superfish('show');
},
close = function (o) {
o.retainPath = ($.inArray(this[0], o.$path) > -1);
this.superfish('hide');
if (!this.parents('.' + o.hoverClass).length) {
o.onIdle.call(getMenu(this));
if (o.$path.length) {
$.proxy(over, o.$path)();
}
}
},
out = function () {
var $this = $(this),
o = getOptions($this);
if (ios) {
$.proxy(close, $this, o)();
}
else {
clearTimeout(o.sfTimer);
o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay);
}
},
touchHandler = function (e) {
var $this = $(this),
o = getOptions($this),
$ul = $this.siblings(e.data.popUpSelector);
if (o.onHandleTouch.call($ul) === false) {
return this;
}
if ($ul.length > 0 && $ul.is(':hidden')) {
$this.one('click.superfish', false);
if (e.type === 'MSPointerDown' || e.type === 'pointerdown') {
$this.trigger('focus');
} else {
$.proxy(over, $this.parent('li'))();
}
}
},
applyHandlers = function ($menu, o) {
var targets = 'li:has(' + o.popUpSelector + ')';
if ($.fn.hoverIntent && !o.disableHI) {
$menu.hoverIntent(over, out, targets);
}
else {
$menu
.on('mouseenter.superfish', targets, over)
.on('mouseleave.superfish', targets, out);
}
var touchevent = 'MSPointerDown.superfish';
if (unprefixedPointerEvents) {
touchevent = 'pointerdown.superfish';
}
if (!ios) {
touchevent += ' touchend.superfish';
}
if (wp7) {
touchevent += ' mousedown.superfish';
}
$menu
.on('focusin.superfish', 'li', over)
.on('focusout.superfish', 'li', out)
.on(touchevent, 'a', o, touchHandler);
};
return {
// public methods
hide: function (instant) {
if (this.length) {
var $this = this,
o = getOptions($this);
if (!o) {
return this;
}
var not = (o.retainPath === true) ? o.$path : '',
$ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector),
speed = o.speedOut;
if (instant) {
$ul.show();
speed = 0;
}
o.retainPath = false;
if (o.onBeforeHide.call($ul) === false) {
return this;
}
$ul.stop(true, true).animate(o.animationOut, speed, function () {
var $this = $(this);
o.onHide.call($this);
});
}
return this;
},
show: function () {
var o = getOptions(this);
if (!o) {
return this;
}
var $this = this.addClass(o.hoverClass),
$ul = $this.children(o.popUpSelector);
if (o.onBeforeShow.call($ul) === false) {
return this;
}
$ul.stop(true, true).animate(o.animation, o.speed, function () {
o.onShow.call($ul);
});
return this;
},
destroy: function () {
return this.each(function () {
var $this = $(this),
o = $this.data('sfOptions'),
$hasPopUp;
if (!o) {
return false;
}
$hasPopUp = $this.find(o.popUpSelector).parent('li');
clearTimeout(o.sfTimer);
toggleMenuClasses($this, o);
toggleAnchorClass($hasPopUp);
toggleTouchAction($this);
// remove event handlers
$this.off('.superfish').off('.hoverIntent');
// clear animation's inline display style
$hasPopUp.children(o.popUpSelector).attr('style', function (i, style) {
return style.replace(/display[^;]+;?/g, '');
});
// reset 'current' path classes
o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass);
$this.find('.' + o.hoverClass).removeClass(o.hoverClass);
o.onDestroy.call($this);
$this.removeData('sfOptions');
});
},
init: function (op) {
return this.each(function () {
var $this = $(this);
if ($this.data('sfOptions')) {
return false;
}
var o = $.extend({}, $.fn.superfish.defaults, op),
$hasPopUp = $this.find(o.popUpSelector).parent('li');
o.$path = setPathToCurrent($this, o);
$this.data('sfOptions', o);
toggleMenuClasses($this, o, true);
toggleAnchorClass($hasPopUp, true);
toggleTouchAction($this);
applyHandlers($this, o);
$hasPopUp.not('.' + c.bcClass).superfish('hide', true);
o.onInit.call(this);
});
}
};
})();
$.fn.superfish = function (method, args) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
}
else {
return $.error('Method ' + method + ' does not exist on jQuery.fn.superfish');
}
};
$.fn.superfish.defaults = {
popUpSelector: 'ul,.sf-mega', // within menu context
hoverClass: 'sfHover',
pathClass: 'overrideThisToUse',
pathLevels: 1,
delay: 800,
animation: {opacity: 'show'},
animationOut: {opacity: 'hide'},
speed: 'normal',
speedOut: 'fast',
cssArrows: true,
disableHI: false,
onInit: $.noop,
onBeforeShow: $.noop,
onShow: $.noop,
onBeforeHide: $.noop,
onHide: $.noop,
onIdle: $.noop,
onDestroy: $.noop,
onHandleTouch: $.noop
};
})(jQuery, window);
Album Cover Slider
--------------------------------*/
//start added by Chase
var a = document.getElementsByTagName("a");
var cfImg = document.getElementsByClassName("coverflow__image")
var scaleI = 0;
for (scaleI; scaleI < a.length; scaleI++) {
if (scaleI === 3) {
continue;
} else {
a[scaleI].style.cursor = "default";
a[scaleI].addEventListener("click", prevDef);
}
}
function prevDef(e) {
e.preventDefault();
}
function forScale(coverflowPos) {
for (scaleI = 0; scaleI < a.length; scaleI++) {
a[scaleI].style.cursor = "default";
a[scaleI].addEventListener("click", prevDef);
}
for (scaleI = 0; scaleI < cfImg.length; scaleI++) {
if (cfImg[scaleI].getAttribute("data-coverflow-index") == coverflowPos) {
cfImg[scaleI].parentElement.style.cursor = "pointer";
cfImg[scaleI].parentElement.removeEventListener("click", prevDef);
}
}
}
//end added by Chase
function setupCoverflow(coverflowContainer) {
var coverflowContainers;
if (typeof coverflowContainer !== "undefined") {
if (Array.isArray(coverflowContainer)) {
coverflowContainers = coverflowContainer;
} else {
coverflowContainers = [coverflowContainer];
}
} else {
coverflowContainers = Array.prototype.slice.apply(document.getElementsByClassName('coverflow'));
}
coverflowContainers.forEach(function(containerElement) {
var coverflow = {};
var prevArrows, nextArrows;
//capture coverflow elements
coverflow.container = containerElement;
coverflow.images = Array.prototype.slice.apply(containerElement.getElementsByClassName('coverflow__image'));
coverflow.position = Math.floor(coverflow.images.length / 2) + 1;
//set indicies on images
coverflow.images.forEach(function(coverflowImage, i) {
coverflowImage.dataset.coverflowIndex = i + 1;
});
//set initial position
coverflow.container.dataset.coverflowPosition = coverflow.position;
//get prev/next arrows
prevArrows = Array.prototype.slice.apply(coverflow.container.getElementsByClassName("prev-arrow"));
nextArrows = Array.prototype.slice.apply(coverflow.container.getElementsByClassName("next-arrow"));
//add event handlers
function setPrevImage() {
coverflow.position = Math.max(1, coverflow.position - 1);
coverflow.container.dataset.coverflowPosition = coverflow.position;
//call the functin forScale added
forScale(coverflow.position);
}
function setNextImage() {
coverflow.position = Math.min(coverflow.images.length, coverflow.position + 1);
coverflow.container.dataset.coverflowPosition = coverflow.position;
//call the function Chase added
forScale(coverflow.position);
}
function jumpToImage(evt) {
coverflow.position = Math.min(coverflow.images.length, Math.max(1, evt.target.dataset.coverflowIndex));
coverflow.container.dataset.coverflowPosition = coverflow.position;
//start added by Chase
setTimeout(function() {
forScale(coverflow.position);
}, 1);
//end added by Chase
}
function onKeyPress(evt) {
switch (evt.which) {
case 37: //left arrow
setPrevImage();
break;
case 39: //right arrow
setNextImage();
break;
}
}
prevArrows.forEach(function(prevArrow) {
prevArrow.addEventListener('click', setPrevImage);
});
nextArrows.forEach(function(nextArrow) {
nextArrow.addEventListener('click', setNextImage);
});
coverflow.images.forEach(function(image) {
image.addEventListener('click', jumpToImage);
});
window.addEventListener('keyup', onKeyPress);
});
}
setupCoverflow(); ```

Appending DOM Loses Menu Drop Down Functionality

I am appending dynamic DOM elements (after Ajax calls to gather the data) as seen below. I have narrowed the code down to what I believe is most important:
<!-- SideMenu HTML -->
<div id="sidebar-menu">
<ul id="folders">
<!-- AJAX DATA POPULATES MENU HERE -->
<!-- HTML File calling JS function -->
<script>
$(document).ready(function() {
getParentFolders('parentFolderTitle');
});
</script>
// JS File function...
var parentFolders; // Values retrieved from AJAX calls
function buildFolderMenu(index) {
var markup = '<li class="has_sub">' +
'<a ... > parentFolders[index].Name + '</a>' +
'<ul ...>' +
'<li> SUB FOLDER TEST <li>' +
'</ul>' +
'</li>';
$(#folders').append(markup);
}
EDIT: My code is interacting with a 3rd party template, after reading the replies, I was able to track down the file which handles the 'click events'. However, based on my own code shown above, I am not sure how to adjust the template code to work with my dynamically appended DOM.
Here is the template code handling the click: (I can see the 'menuItemClick' function is where this is likely handled, but how do I apply the '.on('', function())' adjustments here, based on how this file is written?)
/**
* Theme: Adminto Admin Template
* Author: Coderthemes
* Module/App: Main Js
*/
!function($) {
"use strict";
var Sidemenu = function() {
this.$body = $("body"),
this.$openLeftBtn = $(".open-left"),
this.$menuItem = $("#sidebar-menu a")
};
Sidemenu.prototype.openLeftBar = function() {
$("#wrapper").toggleClass("enlarged");
$("#wrapper").addClass("forced");
if($("#wrapper").hasClass("enlarged") && $("body").hasClass("fixed-left")) {
$("body").removeClass("fixed-left").addClass("fixed-left-void");
} else if(!$("#wrapper").hasClass("enlarged") && $("body").hasClass("fixed-left-void")) {
$("body").removeClass("fixed-left-void").addClass("fixed-left");
}
if($("#wrapper").hasClass("enlarged")) {
$(".left ul").removeAttr("style");
} else {
$(".subdrop").siblings("ul:first").show();
}
toggle_slimscroll(".slimscrollleft");
$("body").trigger("resize");
},
//menu item click
Sidemenu.prototype.menuItemClick = function(e) {
if(!$("#wrapper").hasClass("enlarged")){
if($(this).parent().hasClass("has_sub")) {
}
if(!$(this).hasClass("subdrop")) {
// hide any open menus and remove all other classes
$("ul",$(this).parents("ul:first")).slideUp(350);
$("a",$(this).parents("ul:first")).removeClass("subdrop");
$("#sidebar-menu .pull-right i").removeClass("md-remove").addClass("md-add");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("subdrop");
$(".pull-right i",$(this).parents(".has_sub:last")).removeClass("md-add").addClass("md-remove");
$(".pull-right i",$(this).siblings("ul")).removeClass("md-remove").addClass("md-add");
}else if($(this).hasClass("subdrop")) {
$(this).removeClass("subdrop");
$(this).next("ul").slideUp(350);
$(".pull-right i",$(this).parent()).removeClass("md-remove").addClass("md-add");
}
}
},
//init sidemenu
Sidemenu.prototype.init = function() {
var $this = this;
var ua = navigator.userAgent,
event = (ua.match(/iP/i)) ? "touchstart" : "click";
//bind on click
this.$openLeftBtn.on(event, function(e) {
e.stopPropagation();
$this.openLeftBar();
});
// LEFT SIDE MAIN NAVIGATION
$this.$menuItem.on(event, $this.menuItemClick);
// NAVIGATION HIGHLIGHT & OPEN PARENT
$("#sidebar-menu ul li.has_sub a.active").parents("li:last").children("a:first").addClass("active").trigger("click");
},
//init Sidemenu
$.Sidemenu = new Sidemenu, $.Sidemenu.Constructor = Sidemenu
}(window.jQuery),
function($) {
"use strict";
var FullScreen = function() {
this.$body = $("body"),
this.$fullscreenBtn = $("#btn-fullscreen")
};
//turn on full screen
// Thanks to http://davidwalsh.name/fullscreen
FullScreen.prototype.launchFullscreen = function(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
},
FullScreen.prototype.exitFullscreen = function() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
},
//toggle screen
FullScreen.prototype.toggle_fullscreen = function() {
var $this = this;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
if(fullscreenEnabled) {
if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
$this.launchFullscreen(document.documentElement);
} else{
$this.exitFullscreen();
}
}
},
//init sidemenu
FullScreen.prototype.init = function() {
var $this = this;
//bind
$this.$fullscreenBtn.on('click', function() {
$this.toggle_fullscreen();
});
},
//init FullScreen
$.FullScreen = new FullScreen, $.FullScreen.Constructor = FullScreen
}(window.jQuery),
//main app module
function($) {
"use strict";
var App = function() {
this.VERSION = "1.5.0",
this.AUTHOR = "Coderthemes",
this.SUPPORT = "coderthemes#gmail.com",
this.pageScrollElement = "html, body",
this.$body = $("body")
};
//on doc load
App.prototype.onDocReady = function(e) {
FastClick.attach(document.body);
resizefunc.push("initscrolls");
resizefunc.push("changeptype");
$('.animate-number').each(function(){
$(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-duration")));
});
//RUN RESIZE ITEMS
$(window).resize(debounce(resizeitems,100));
$("body").trigger("resize");
// right side-bar toggle
$('.right-bar-toggle').on('click', function(e){
$('#wrapper').toggleClass('right-bar-enabled');
});
},
//initilizing
App.prototype.init = function() {
var $this = this;
//document load initialization
$(document).ready($this.onDocReady);
//init side bar - left
$.Sidemenu.init();
//init fullscreen
$.FullScreen.init();
},
$.App = new App, $.App.Constructor = App
}(window.jQuery),
//initializing main application module
function($) {
"use strict";
$.App.init();
}(window.jQuery);
/* ------------ some utility functions ----------------------- */
//this full screen
var toggle_fullscreen = function () {
}
function executeFunctionByName(functionName, context /*, args */) {
var args = [].slice.call(arguments).splice(2);
var namespaces = functionName.split(".");
var func = namespaces.pop();
for(var i = 0; i < namespaces.length; i++) {
context = context[namespaces[i]];
}
return context[func].apply(this, args);
}
var w,h,dw,dh;
var changeptype = function(){
w = $(window).width();
h = $(window).height();
dw = $(document).width();
dh = $(document).height();
if(jQuery.browser.mobile === true){
$("body").addClass("mobile").removeClass("fixed-left");
}
if(!$("#wrapper").hasClass("forced")){
if(w > 990){
$("body").removeClass("smallscreen").addClass("widescreen");
$("#wrapper").removeClass("enlarged");
}else{
$("body").removeClass("widescreen").addClass("smallscreen");
$("#wrapper").addClass("enlarged");
$(".left ul").removeAttr("style");
}
if($("#wrapper").hasClass("enlarged") && $("body").hasClass("fixed-left")){
$("body").removeClass("fixed-left").addClass("fixed-left-void");
}else if(!$("#wrapper").hasClass("enlarged") && $("body").hasClass("fixed-left-void")){
$("body").removeClass("fixed-left-void").addClass("fixed-left");
}
}
toggle_slimscroll(".slimscrollleft");
}
var debounce = function(func, wait, immediate) {
var timeout, result;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) result = func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) result = func.apply(context, args);
return result;
};
}
function resizeitems(){
if($.isArray(resizefunc)){
for (i = 0; i < resizefunc.length; i++) {
window[resizefunc[i]]();
}
}
}
function initscrolls(){
if(jQuery.browser.mobile !== true){
//SLIM SCROLL
$('.slimscroller').slimscroll({
height: 'auto',
size: "7px"
});
$('.slimscrollleft').slimScroll({
height: 'auto',
position: 'right',
size: "7px",
color: '#828e94',
wheelStep: 5
});
}
}
function toggle_slimscroll(item){
if($("#wrapper").hasClass("enlarged")){
$(item).css("overflow","inherit").parent().css("overflow","inherit");
$(item). siblings(".slimScrollBar").css("visibility","hidden");
}else{
$(item).css("overflow","hidden").parent().css("overflow","hidden");
$(item). siblings(".slimScrollBar").css("visibility","visible");
}
}
// === following js will activate the menu in left side bar based on url ====
$(document).ready(function() {
$("#sidebar-menu a").each(function() {
var pageUrl = window.location.href.split(/[?#]/)[0];
if (this.href == pageUrl) {
$(this).addClass("active");
$(this).parent().addClass("active"); // add active to li of the current link
$(this).parent().parent().prev().addClass("active"); // add active class to an anchor
$(this).parent().parent().prev().click(); // click the item to make it drop
}
});
});
var resizefunc = [];

This could because of the redraw event not firing on the browser implicitly after your DOM manipulation. Refer this post on how to redraw so your generated DOM is refreshed on the UI
Force DOM redraw/refresh on Chrome/Mac
If this doesn't work please share your CSS and the before DOM and after DOM generation screenshot

Default filtering item

I have a page like this page:
http://www.sungeetheme.com/html/our_gallery_3_colums.html
In the filtering Gallery, the default item is "all"
How do I change the default to something else on page load, for example: Portrait?
I tried to change in the code section the variable dataFilterVal from "All" to something else and it did not work well
var masonryFilter = {
massMasonry: [],
dataFilterVal: "all",
init: function () {
var self = this;
self.filterEl('.j-filter', '~ .j-filter-content');
self.masonry();
},
masonry: function () {
var self = this;
var msnry;
var i = 0;
$('.j-masonry').each(function () {
var el = $(this),
newClass = 'j-masonry-' + i;
el.addClass(newClass).attr('data-masonry-id', i);
i++;
el.imagesLoaded(function () {
var container = document.querySelector('.' + newClass);
msnry = new Masonry(container,
{
itemSelector: '.j-masonry-item',
columnWidth: '.' + newClass + ' .masonry-gridSizer',
transitionDuration: '1.2s'
});
self.massMasonry.push(msnry);
el.data('masonry', msnry);
});
});
},
filterEl: function (filterNav, filterContent) {
var self = this;
$(filterNav + ' a').click(function (e) {
e.preventDefault();
var el = $(this);
var activeClass = "is-category-filter-active";
var activeContainer = $(filterContent, $(this).parents(filterNav)).eq(0);
console.log(activeContainer);
$('li', $(this).parents(filterNav)).removeClass(activeClass);
el.closest('li').addClass(activeClass);
self.dataFilterVal = el.attr('data-filter');
self.filterStart(self.dataFilterVal, activeContainer);
});
},
filterStart: function (dataFilterVal, filterContent) {
var self = this;
if (dataFilterVal == "all") {
$('[class*="j-filter-"]', filterContent).show().stop(true, false).animate({
opacity: 1
}, 400);
} else {
var hideItems = $('[class*="j-filter-"]', filterContent).not(dataFilterVal);
hideItems.stop(true, false).animate({
opacity: 0
}, 400);
setTimeout(function () {
hideItems.hide();
}, 301);
$(dataFilterVal, filterContent).show().stop(true, false).animate({
opacity: 1
}, 400);
}
setTimeout(function () {
var masonryId = $(filterContent).find('.j-masonry').attr('data-masonry-id');
self.massMasonry[masonryId].layout();
}, 501);
}
};
masonryFilter.init();

jQuery - How to make sticky header return to default state on top of the page without scroll event?

I have sticky header and a stats counter on my page, and when fires if i return to top of the page, header won't return to default.
Here is the code
//here is counter
$(function () {
var screenSize = $(window).height();
var scrollHeight = ( screenSize ) + 100;
function comma(num) {
var parts = num.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join(".");
};
var fx = function fx() {
$(".stat-number").each(function (i, el) {
var data = parseInt(this.dataset.n, 10);
var props = {
"from": {
"count": 0
},
"to": {
"count": data
}
};
$(props.from).animate(props.to, {
duration: 1000 * 1,
step: function (now, fx) {
$(el).text(comma(Math.ceil(now)));
},
complete:function() {
if (el.dataset.sym !== undefined) {
el.textContent = el.textContent.concat(el.dataset.sym)
}
}
});
});
};
var reset = function reset() {
console.log($(this).scrollTop())
if ($(this).scrollTop() > scrollHeight) {
$(this).off("scroll");
fx()
}
};
$(window).on("scroll", reset);
});
//here is sticky header
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop() > 2) {
$('.header').addClass('fixed-head');
} else {
$('.header').removeClass('fixed-head');
}
});
});
I think the problem is they both use 'scroll' event, and counter have this line
$(this).off("scroll");
So my question is, is there way to check if user is on top of the page without 'scroll' event?

Automaticly scrollTo closest div

I'm building a single page ScrollTo website with 4 div's. These divs represent my pages.
Home -> My work -> About me -> Contact
The width and hight are defined by a small piece of javascript that reads the users screen resolution on bodyload or resize. So the divs are always the inner-width and height of the users screen.
function resize() {
document.getElementById("home").style.height = viewportheight+"px";
document.getElementById("work").style.height = viewportheight+"px";
document.getElementById("about").style.height = viewportheight+"px";
document.getElementById("contact").style.height = viewportheight+"px";
What I'm trying to accomplish is that once the user scrolls (let's say 100px down or up), the window automaticly snaps to the top of the nearest div.
Something like:
onScroll("100px") up or down { scrollTo("closest #div") };

The methods you can use to start here are:
//OnScroll:
$(window).scroll(function(){
//Get current scoll position:
var iSrollT = $(document).scrollTop();
//Get the position of your element:
var iOffT = $('#home').offset().top;
});
//Set scroll top using an animation:
$('html, body').animate({
scrollTop: iOffT
}, 300);
But you will have to implement more ... e.g. prevent that the scoll position always snaps to the next div and scolling is no more possible.

var STELLARJS = {
init: function() {
var self = this;
$(function(){
self.$sections = $('#landing_page, #work, #about, #contact').each(function(index){
$(this).data('sectionIndex', index);
});
self.handleEvents();
});
},
handleEvents: function() {
var self = this,
//Debounce function from Underscore.js
debounce = function(func, wait) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
}
},
handleScroll = function() {
var scrollTop = $(window).scrollTop(),
sectionIndex = Math.round((scrollTop) / self.$sections.first().outerHeight()),
$activeSection = self.$sections.eq(sectionIndex);
if ($activeSection.length === 0) {
$activeSection = self.$sections.last();
}
if ($activeSection.length === 0) return;
$(window).unbind('scroll.stellarsite');
if (scrollTop === 0) {
$(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
} else {
$('html,body').animate({
scrollTop: $activeSection.offset().top
}, 600, 'easeInOutExpo', function() {
setTimeout(function(){
$(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
}, 10);
});
}
$(window).bind('mousewheel', function(){
$('html,body').stop(true, true);
});
$(document).bind('keydown', function(e){
var key = e.which;
if (key === 37 || key === 39) {
$('html,body').stop(true, true);
}
});
};
if (window.location.href.indexOf('#show-offset-parents-default') === -1) {
$(window).bind('scroll.stellarsite', debounce(handleScroll, 500));
}
} });