My head is a mess right now. I want to create two jQuery plugins :
A tab plugin
A slider plugin.
This plugins has to talk to each other, for example, if I click on a tab, this tab will activate the correct index in the associated slider.
If i click on a slide, this will activate the correct tab too.
I started to create events listeners and triggers for that, when my tab was clicked, an event tabChanged is triggered, and in my slider plugin I'm listening to it.
But here is the trouble, my sliders can be loaded before my tabs, so the listeners is not attached correctly...
I tried to trigger another event on the document this time, called tabsLoaded and waiting for that response, it works but it start to be a bit confusing.
I was wondering if someone has a better solution for this ?
Tabs and sliders can work as standalone too, it might be possible to have only tabs without slider associated.
This is my tab plugin:
(function($) {
let pluginName = 'Tabs';
function Tabs(element, options) {
let settings = {};
this.element = element;
this.$element = $(this.element);
this.settings = $.extend({}, settings, options);
this.children = null;
this.activeTabIndex = 0;
this.nbTabs = 0;
this.init();
}
$.extend(Tabs.prototype, {
init: function() {
this.children = this.$element.children();
this.nbTabs = this.children.length;
// Listeners
this.children.on('click', {
tabs: this
}, this.onTabChange); // Click on a tab
$(this).on('tabChange', this.setActive);
// On Init, active the first tab
if (this.children && this.nbTabs > 0) {
$(this).trigger({
type: 'tabChange',
tab: this.children.first().index(),
});
}
$(document).trigger({
type: 'tabLoaded',
tabs: this,
});
},
setActive: function(event) {
this.activeTabIndex = event.tab;
this.children.eq(this.activeTabIndex).addClass('is-active');
},
onTabChange: function(event) {
event.preventDefault();
const tabs = event.data.tabs;
// Reset active classes
tabs.children.removeClass('is-active');
// Launch changeTab
$(tabs).trigger({
type: 'tabChange',
tab: tabs.children.index(event.currentTarget),
});
}
});
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, pluginName)) {
$.data(this, pluginName, new Tabs(this, options));
}
});
};
})(jQuery);
jQuery(document).ready(function($) {
$('.js-tabs').Tabs();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And this is my slider plugin listening to tabs :
(function($) {
let pluginName = 'Slider';
function Slider(element, options) {
let settings = {};
this.element = element;
this.$element = $(this.element);
this.settings = $.extend({}, settings, options);
this.id = null;
this.tabs = null;
this.children = null;
this.activeSlideIndex = 0;
this.nbSlides = 0;
this.init();
}
$.extend(Slider.prototype, {
init: function() {
this.id = this.$element.attr('id');
this.children = this.$element.children();
this.nbSlides = this.children.length;
// Listeners
// Click on slide
this.children.on('click', {
slider: this
}, this.onSlideChange);
// On slide change
$(this).on('slideChange', {
slider: this
}, this.onSlideChange);
$(this).on('change', this.update);
// On Init, active the first tab
if (this.children && this.nbSlides > 0) {
$(this).trigger({
type: 'slideChange',
slide: this.children.first().index(),
});
}
$(document).trigger({
type: 'sliderLoaded',
slider: this,
});
},
update: function() {
// if Slider has an associated Tabs
if (this.tabs) {
$(this.tabs).on('tabChange', {
slider: this
}, this.onTabChange);
}
},
onSlideChange: function(event) {
event.preventDefault();
const slider = event.data.slider;
const slide = event.slide;
// Reset active classes
slider.children.removeClass('is-active');
slider.activeSlideIndex = slide ? slide : event.currentTarget;
console.log(slider.activeSlideIndex);
slider.children.eq(slider.activeSlideIndex).addClass('is-active');
},
// TABS
onTabChange: function(event) {
const slider = event.data.slider;
const tabIndex = event.tab;
if ($(slider.children).eq(tabIndex).length >= 0) {
$(slider).trigger({
type: 'slideChange',
slide: tabIndex,
});
}
}
});
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, pluginName)) {
$.data(this, pluginName, new Slider(this, options));
}
});
};
})(jQuery);
jQuery(document).ready(function($) {
$('.js-slider').Slider();
});
// On Tabs loaded, insert it into slider
jQuery(document).on('tabLoaded', function(event) {
const tabs = event.tabs;
const sliderId = jQuery(tabs.element).data('slider-id');
if (jQuery('#' + sliderId).first().data('Slider')) {
const slider = jQuery('#' + sliderId).first().data('Slider');
slider.tabs = tabs;
slider.update();
}
});
I followed #Anton's advices and i split my tabs and sliders and it's working nice :)
First, i removed my plugins' inits from plugins' files.
Then i put every inits into another file that i called "app.js"
My App.js looks like this :
jQuery(document).ready(function ($) {
let $sliders = $('.js-slider').Slider();
let $tabs = $('.js-tabs').Tabs();
$sliders.on('slideChanged', function (event) {
const sliderId = $(this).attr('id');
const slide = event.slide;
$tabs.filter('[data-slider-id=' + sliderId + ']').data('Tabs').select(slide);
});
$tabs.on('tabChanged', function (event) {
const sliderId = $(this).data('slider-id');
const tab = event.tab;
$sliders.filter('#' + sliderId).data('Slider').select(tab);
});
});
I'm listening every events sent like 'slideChanged', or 'tabChanged' then i get the right tabs or slider instance by their matching IDs.
Here my code for tabs :
(function($) {
let pluginName = 'Tabs';
function Tabs(element, options) {
let settings = {};
this.element = element;
this.$element = $(this.element);
this.settings = $.extend({}, settings, options);
this.children = null;
this.activeTabIndex = 0;
this.nbTabs = 0;
this.init();
}
$.extend(Tabs.prototype, {
init: function() {
this.children = this.$element.children();
this.nbTabs = this.children.length;
// Listeners
this.children.on('click', {
tabs: this
}, this.onTabClick); // Click on a tab
$(this).on('tabChanged', this.onTabClick);
// On Init, active the first tab
if (this.children && this.nbTabs > 0) {
this.children.first().click();
}
},
select: function(tab) {
// Reset active classes
this.children.removeClass('is-active');
this.activeTabIndex = tab;
this.children.eq(tab).addClass('is-active');
},
onTabClick: function(event) {
event.preventDefault();
const tabs = event.data.tabs;
const tab = tabs.children.index(event.currentTarget);
tabs.select(tab);
// Launch changeTab
$(tabs.element).trigger({
type: 'tabChanged',
tab: tab,
});
}
});
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, pluginName)) {
$.data(this, pluginName, new Tabs(this, options));
}
});
};
})(jQuery);
and slider :
(function($) {
let pluginName = 'Slider';
function Slider(element, options) {
let settings = {};
this.element = element;
this.$element = $(this.element);
this.settings = $.extend({}, settings, options);
this.id = null;
this.tabs = null;
this.children = null;
this.activeSlideIndex = 0;
this.nbSlides = 0;
this.init();
}
$.extend(Slider.prototype, {
init: function() {
this.id = this.$element.attr('id');
this.children = this.$element.children();
this.nbSlides = this.children.length;
// Listeners
// Click on slide
this.children.on('click', {
slider: this
}, this.onSlideClick);
// On slide change
$(this).on('slideChanged', this.onSlideClick);
// On Init, active the first tab
if (this.children && this.nbSlides > 0) {
this.children.first().click();
}
},
select: function(slide) {
// Reset active classes
this.children.removeClass('is-active');
this.activeSlideIndex = slide;
this.children.eq(this.activeSlideIndex).addClass('is-active');
},
onSlideClick: function(event) {
event.preventDefault();
const slider = event.data.slider;
const slide = slider.children.index(event.currentTarget);
slider.select(slide);
// Launch changeTab
$(slider.element).trigger({
type: 'slideChanged',
slide: slide,
});
},
});
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, pluginName)) {
$.data(this, pluginName, new Slider(this, options));
}
});
};
})(jQuery);
Related
I installed Shuffle.js from a codepen demo with some customizations to style and figure cards. I've added in recommended js code but the shuffle function doesn't seem work.
Getting several errors:
console errors
I've tried updating script based on some past answers to this problem. I've also downloaded and added the actual js file on my site and referenced it in the script. Here's what my script looks like right now:
<script src="/v/vspfiles/assets/js/shuffle.js"></script>
<script>
'use strict';
var Shuffle = window.shuffle;
var Demo = function (element) {
this.element = element;
// Log out events.
this.addShuffleEventListeners();
this.shuffle = new Shuffle(element, {
itemSelector: '.picture-item',
sizer: element.querySelector('.my-sizer-element'),
});
this._activeFilters = [];
this.addFilterButtons();
this.addSorting();
this.addSearchFilter();
this.mode = 'exclusive';
};
Demo.prototype.toArray = function (arrayLike) {
return Array.prototype.slice.call(arrayLike);
};
Demo.prototype.toggleMode = function () {
if (this.mode === 'additive') {
this.mode = 'exclusive';
} else {
this.mode = 'additive';
}
};
/**
* Shuffle uses the CustomEvent constructor to dispatch events. You can listen
* for them like you normally would (with jQuery for example). The extra event
* data is in the `detail` property.
*/
Demo.prototype.addShuffleEventListeners = function () {
var handler = function (event) {
console.log('type: %s', event.type, 'detail:', event.detail);
};
this.element.addEventListener(Shuffle.EventType.LAYOUT, handler, false);
this.element.addEventListener(Shuffle.EventType.REMOVED, handler, false);
};
Demo.prototype.addFilterButtons = function () {
var options = document.querySelector('.filter-options');
if (!options) {
return;
}
var filterButtons = this.toArray(
options.children
);
filterButtons.forEach(function (button) {
button.addEventListener('click', this._handleFilterClick.bind(this), false);
}, this);
};
Demo.prototype._handleFilterClick = function (evt) {
var btn = evt.currentTarget;
var isActive = btn.classList.contains('active');
var btnGroup = btn.getAttribute('data-group');
// You don't need _both_ of these modes. This is only for the demo.
// For this custom 'additive' mode in the demo, clicking on filter buttons
// doesn't remove any other filters.
if (this.mode === 'additive') {
// If this button is already active, remove it from the list of filters.
if (isActive) {
this._activeFilters.splice(this._activeFilters.indexOf(btnGroup));
} else {
this._activeFilters.push(btnGroup);
}
btn.classList.toggle('active');
// Filter elements
this.shuffle.filter(this._activeFilters);
// 'exclusive' mode lets only one filter button be active at a time.
} else {
this._removeActiveClassFromChildren(btn.parentNode);
var filterGroup;
if (isActive) {
btn.classList.remove('active');
filterGroup = Shuffle.ALL_ITEMS;
} else {
btn.classList.add('active');
filterGroup = btnGroup;
}
this.shuffle.filter(filterGroup);
}
};
Demo.prototype._removeActiveClassFromChildren = function (parent) {
var children = parent.children;
for (var i = children.length - 1; i >= 0; i--) {
children[i].classList.remove('active');
}
};
Demo.prototype.addSorting = function () {
var menu = document.querySelector('.sort-options');
if (!menu) {
return;
}
menu.addEventListener('change', this._handleSortChange.bind(this));
};
Demo.prototype._handleSortChange = function (evt) {
var value = evt.target.value;
var options = {};
function sortByDate(element) {
return element.getAttribute('data-created');
}
function sortByTitle(element) {
return element.getAttribute('data-title').toLowerCase();
}
if (value === 'date-created') {
options = {
reverse: true,
by: sortByDate,
};
} else if (value === 'title') {
options = {
by: sortByTitle,
};
}
this.shuffle.sort(options);
};
// Advanced filtering
Demo.prototype.addSearchFilter = function () {
var searchInput = document.querySelector('.js-shuffle-search');
if (!searchInput) {
return;
}
searchInput.addEventListener('keyup', this._handleSearchKeyup.bind(this));
};
/**
* Filter the shuffle instance by items with a title that matches the search input.
* #param {Event} evt Event object.
*/
Demo.prototype._handleSearchKeyup = function (evt) {
var searchText = evt.target.value.toLowerCase();
this.shuffle.filter(function (element, shuffle) {
// If there is a current filter applied, ignore elements that don't match it.
if (shuffle.group !== Shuffle.ALL_ITEMS) {
// Get the item's groups.
var groups = JSON.parse(element.getAttribute('data-groups'));
var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;
// Only search elements in the current group
if (!isElementInCurrentGroup) {
return false;
}
}
var titleElement = element.querySelector('.picture-item__title');
var titleText = titleElement.textContent.toLowerCase().trim();
return titleText.indexOf(searchText) !== -1;
});
};
document.addEventListener('DOMContentLoaded', function () {
window.demo = new Demo(document.getElementById('grid'));
});
</script>
Any insight into what I need to remedy to get this working properly would be great. Thanks!
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
Hey all I am using flexslider in my website for slider the slider is running fine on my server at http://www.reurl.in/31830875a but when checked on local server or made life somewhere else I am getting this error in console "Cannot read property 'wrapup' of undefined" and slider is not working
Here is the function
function FlexsliderManualDirectionControls( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._flexslider = $(element).data('flexslider');
this._originalFlexsliderWrapupFunction = this._flexslider.wrapup;
this._defaults = defaults;
this._name = flexsliderManualDirectionControls;
this.init();
}
This is just a single function out of full page code.
the console says error at this._originalFlexsliderWrapupFunction = this._flexslider.wrapup;
If you find something helpful please do reply back.
Incase you need full code
/*jshint bitwise:true, curly:true, eqeqeq:true, forin:true, immed:false, latedef:true, newcap:true, noarg:true, noempty:true, nonew:true, undef:true, strict:false, trailing:true, browser:true, jquery:true */
/*!
* jQuery flexslider extension
* Original author: #markirby
* Licensed under the MIT license
*/
(function ( $, window, document, undefined ) {
var flexsliderManualDirectionControls = 'flexsliderManualDirectionControls',
defaults = {
previousElementSelector: ".previous",
nextElementSelector: ".next",
disabledStateClassName: "disable"
};
function FlexsliderManualDirectionControls( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options);
this._flexslider = $(element).data('flexslider');
this._originalFlexsliderWrapupFunction = this._flexslider.wrapup;
this._defaults = defaults;
this._name = flexsliderManualDirectionControls;
this.init();
}
FlexsliderManualDirectionControls.prototype.init = function () {
this.addEventListeners();
var self = this;
this._flexslider.wrapup = function(direction) {
self.onAnimationEnd.call(self, direction);
};
};
FlexsliderManualDirectionControls.prototype.addEventListeners = function() {
$(this.element).find(this.options.previousElementSelector).bind('touchstart.flexsliderPromo click.flexsliderPromo', {self:this}, function(event) {
event.stopPropagation();
event.preventDefault();
if (!event.handled) {
event.data.self.goToTargetInDirection('prev');
event.handled = true;
}
});
$(this.element).find(this.options.nextElementSelector).bind('click.flexsliderPromo', {self:this}, function(event) {
event.stopPropagation();
event.preventDefault();
if (!event.handled) {
event.data.self.goToTargetInDirection('next');
event.handled = true;
}
});
};
FlexsliderManualDirectionControls.prototype.goToTargetInDirection = function(direction) {
var target = this._flexslider.getTarget(direction);
if (this._flexslider.canAdvance(target)) {
this._flexslider.flexAnimate(target);
}
return false;
};
FlexsliderManualDirectionControls.prototype.addOrRemoveDisabledStateForDirection = function(direction, $navElement) {
var target = this._flexslider.getTarget(direction);
if (!this._flexslider.canAdvance(target)) {
$navElement.addClass(this.options.disabledStateClassName);
} else {
$navElement.removeClass(this.options.disabledStateClassName);
}
};
FlexsliderManualDirectionControls.prototype.onAnimationEnd = function(direction) {
var $nextElement = $(this.element).find(this.options.nextElementSelector),
$previousElement = $(this.element).find(this.options.previousElementSelector);
this.addOrRemoveDisabledStateForDirection('next', $nextElement);
this.addOrRemoveDisabledStateForDirection('prev', $previousElement);
this._originalFlexsliderWrapupFunction(direction);
};
$.fn[flexsliderManualDirectionControls] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + flexsliderManualDirectionControls)) {
$.data(this, 'plugin_' + flexsliderManualDirectionControls,
new FlexsliderManualDirectionControls( this, options ));
}
});
};
})( jQuery, window, document );
My website uses onePageNav and scrollTo jquery code. I would like to insert code which correct my position on the website when i click on the same link in the navigation (i scroll mouse up or down but current button (hover) in navigation has not moved yet on to the next one).
OnePageNav code:
;
(function ($, window, document, undefined) {
// our plugin constructor
var OnePageNav = function (elem, options) {
this.elem = elem;
this.$elem = $(elem);
this.options = options;
this.metadata = this.$elem.data('plugin-options');
this.$nav = this.$elem.find('a');
this.$win = $(window);
this.sections = {};
this.didScroll = false;
this.$doc = $(document);
this.docHeight = this.$doc.height();
};
// the plugin prototype
OnePageNav.prototype = {
defaults: {
currentClass: 'current',
changeHash: true,
easing: 'swing',
filter: '',
scrollSpeed: 750,
scrollOffset: 0,
scrollThreshold: 0.5,
begin: false,
end: false,
scrollChange: false
},
init: function () {
var self = this;
// Introduce defaults that can be extended either
// globally or using an object literal.
self.config = $.extend({}, self.defaults, self.options, self.metadata);
//Filter any links out of the nav
if (self.config.filter !== '') {
self.$nav = self.$nav.filter(self.config.filter);
}
//Handle clicks on the nav
self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));
//Get the section positions
self.getPositions();
//Handle scroll changes
self.bindInterval();
//Update the positions on resize too
self.$win.on('resize.onePageNav', $.proxy(self.getPositions, self));
return this;
},
adjustNav: function (self, $parent) {
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
$parent.addClass(self.config.currentClass);
},
bindInterval: function () {
var self = this;
var docHeight;
self.$win.on('scroll.onePageNav', function () {
self.didScroll = true;
});
self.t = setInterval(function () {
docHeight = self.$doc.height();
//If it was scrolled
if (self.didScroll) {
self.didScroll = false;
self.scrollChange();
}
//If the document height changes
if (docHeight !== self.docHeight) {
self.docHeight = docHeight;
self.getPositions();
}
}, 250);
},
getHash: function ($link) {
return $link.attr('href').split('#')[1];
},
getPositions: function () {
var self = this;
var linkHref;
var topPos;
var $target;
self.$nav.each(function () {
linkHref = self.getHash($(this));
$target = $('#' + linkHref);
if ($target.length) {
topPos = $target.offset().top;
self.sections[linkHref] = Math.round(topPos) - self.config.scrollOffset;
}
});
},
getSection: function (windowPos) {
var returnValue = null;
var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
for (var section in this.sections) {
if ((this.sections[section] - windowHeight) < windowPos) {
returnValue = section;
}
}
return returnValue;
},
handleClick: function (e) {
var self = this;
var $link = $(e.currentTarget);
var $parent = $link.parent();
var newLoc = '#' + self.getHash($link);
if (!$parent.hasClass(self.config.currentClass)) {
//Start callback
if (self.config.begin) {
self.config.begin();
}
//Change the highlighted nav item
self.adjustNav(self, $parent);
//Removing the auto-adjust on scroll
self.unbindInterval();
//Scroll to the correct position
$.scrollTo(newLoc, self.config.scrollSpeed, {
axis: 'y',
easing: self.config.easing,
offset: {
top: -self.config.scrollOffset
},
onAfter: function () {
//Do we need to change the hash?
if (self.config.changeHash) {
window.location.hash = newLoc;
}
//Add the auto-adjust on scroll back in
self.bindInterval();
//End callback
if (self.config.end) {
self.config.end();
}
}
});
}
e.preventDefault();
},
scrollChange: function () {
var windowTop = this.$win.scrollTop();
var position = this.getSection(windowTop);
var $parent;
//If the position is set
if (position !== null) {
$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
//If it's not already the current section
if (!$parent.hasClass(this.config.currentClass)) {
//Change the highlighted nav item
this.adjustNav(this, $parent);
//If there is a scrollChange callback
if (this.config.scrollChange) {
this.config.scrollChange($parent);
}
}
}
},
unbindInterval: function () {
clearInterval(this.t);
this.$win.unbind('scroll.onePageNav');
}
};
OnePageNav.defaults = OnePageNav.prototype.defaults;
$.fn.onePageNav = function (options) {
return this.each(function () {
new OnePageNav(this, options).init();
});
};
})(jQuery, window, document);
$(function () { // this is the shorthand for document.ready
$(window).scroll(function () { // this is the scroll event for the document
scrolltop = $(window).scrollTop(); // by this we get the value of the scrolltop ie how much scroll has been don by user
if (parseInt(scrolltop) >= 80) // check if the scroll value is equal to the top of navigation
{
$("#navbar").css({
"position": "fixed",
"top": "0"
}); // is yes then make the position fixed to top 0
} else {
$("#navbar").css({
"position": "absolute",
"top": "80px"
}); // if no then make the position to absolute and set it to 80
}
}); //here
}); //here
I have a plugin with the following structure:
(function($){
function pluginName(el, options) {
var _this = this;
_this.defaults = {
someOptions: '',
onSlideStart: function() {},
onSlideEnd: function() {},
};
_this.opts = $.extend({}, _this.defaults, options);
$(el).on("slideStart", function() {
_this.opts.onSlideStart.call();
});
$(el).on("slideEnd", function() {
_this.opts.onSlideEnd.call();
});
}
pluginName.prototype = {
someFunctions: function() {
}
};
$.fn.pluginName = function(options) {
if(this.length) {
this.each(function() {
var rev = new pluginName(this, options);
rev.init();
$(this).data('pluginName', rev);
});
}
};
})(jQuery);
If I call it the following way, everything is okay:
$('.element').pluginName({
someOptions: 'full',
onSlideStart: function() {
console.log('slideStart!');
},
onSlideEnd: function() {
console.log('slideEnd!');
},
});
But I want to dynamic load the custom event handler like this:
(function($){
function pluginName(el, options) {
var _this = this;
_this.defaults = {
someOptions: '',
onSlideStart: function() {},
onSlideEnd: function() {},
};
_this.opts = $.extend({}, _this.defaults, options);
for (var optionName in _this.opts) {
var
optionValue = _this.opts[optionName],
optionType = typeof(optionValue)
;
if(optionType == 'function') {
optionNames = optionName.split('on');
eventName = global.lowerFirstLetter(optionNames[1]);
$(el).on(eventName, function() {
eval('_this.opts.' + optionName + '.call();');
});
}
}
}
...
})(jQuery);
But this does not work. When I call the plugin with the "dynamic" part, it always call the slideEnd-function. So am I doing it wrong or is it just impossible with my plugin-pattern to call the custom event-handler dynamically?
Why use eval ? It's usually bad to use eval.
if(optionType == 'function') {
optionNames = optionName.split('on');
eventName = global.lowerFirstLetter(optionNames[1]);
$(el).on(eventName, _this.opts[optionName]);
}
Try it and let me know.