I am using jquery.rd-navbar.js for mobile mode responsiveness. The plugin takes my HTML title and makes it into a mobile-title. I want to make that header title a link back to my home page rather than having it as part of the dropdown menu. I've removed the normal link to the home page in the mobile dropdown.
The plugin:
/*
* Author: Evgeniy Gusarov StMechanus (Diversant)
* Under the MIT License
*
* Version: 1.0.1
*
*/
;
(function ($) {
var settings = {
cntClass: 'rd-mobilemenu',
menuClass: 'rd-mobilemenu_ul',
submenuClass: 'rd-mobilemenu_submenu',
panelClass: 'rd-mobilepanel',
toggleClass: 'rd-mobilepanel_toggle',
titleClass: 'rd-mobilepanel_title'
},
lastY, dir;
var RDMobileMenu = function (element, options) {
this.options = options;
this.$source = $(element);
};
RDMobileMenu.prototype = {
init: function () {
var nav = this;
nav.createDOM();
nav.createListeners();
},
createDOM: function () {
var nav = this;
$('body')
.append($('<div/>', {
'class': settings.cntClass
}).append(nav.createNavDOM()))
.append($('<div/>', {
'class': settings.panelClass
})
.append($('<button/>', {
'class': settings.toggleClass
}).append($('<span/>')))
.append($('<h2/>', {
'class': settings.titleClass
}).append($('[data-type="rd-navbar-brand"]').length? $('[data-type="rd-navbar-brand"]').html() : document.title))
);
},
createNavDOM: function () {
var nav = this;
var menu = $('<ul>', {'class': settings.menuClass});
var li = nav.$source.children();
for (var i = 0; i < li.length; i++) {
var o = li[i].children,
item = null;
for (var j = 0; j < o.length; j++) {
if (o[j].tagName) {
if (!item) {
item = document.createElement('li');
if (li[i].className.indexOf('active') > -1) {
item.className = 'active';
}
}
switch (o[j].tagName.toLowerCase()) {
case 'a':
var link = o[j].cloneNode(true);
item.appendChild(link);
break;
case 'ul':
var submenu = o[j].cloneNode(true);
submenu.className = settings.submenuClass;
$(submenu).css({"display": "none"});
item.appendChild(submenu);
$(item).find('> a')
.each(function () {
$this = $(this);
$this.addClass('rd-with-ul')
.append($('<span/>', {class: 'rd-submenu-toggle'}))
.find('.rd-submenu-toggle')
.on('click', function (e) {
e.preventDefault();
$this = $(this).parent();
if ($this.hasClass('rd-with-ul') && !$this.hasClass('active')) {
$('.rd-with-ul').removeClass('active');
var submenu = $this.addClass('active').parent().find('.' + settings.submenuClass);
submenu.stop().slideDown();
$('.' + settings.submenuClass).not(submenu).stop().slideUp();
} else {
var submenu = $this.removeClass('active').parent().find('.' + settings.submenuClass);
submenu.stop().slideUp();
}
});
});
break;
default:
break;
}
}
}
if (item) {
menu.append(item);
}
}
return menu;
},
createListeners: function () {
var nav = this;
nav.createToggleListener();
nav.createResizeListener();
},
createToggleListener: function () {
var nav = this,
type;
if (nav.isMobile()){
type = 'touchstart';
}else{
type = 'click';
}
$('body').delegate('.' + settings.toggleClass, type, function () {
var o = $('.' + settings.cntClass);
$(this).toggleClass('active');
if (o.hasClass('active')) {
$(this).removeClass('active');
o.removeClass('active');
$('body').undelegate('*', 'mousewheel', nav.scroll);
$('body').undelegate('*', 'touchmove', nav.scroll);
$('body').undelegate('*', 'touchend', nav.touchend);
$('body').undelegate('*', 'touchstart', nav.close);
$('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
} else {
$(this).addClass('active');
o.addClass('active');
$('body').delegate('*', 'mousewheel', nav.scroll);
$('body').delegate('*', 'touchmove', nav.scroll);
$('body').delegate('*', 'touchend', nav.touchend);
$('body').delegate('*', 'touchstart', {type: type}, nav.close);
$('body').delegate('*:not(.' + settings.toggleClass + ' span)', 'click', {type: type}, nav.close);
}
});
},
createResizeListener: function () {
var nav = this;
$(window).on('resize', function () {
var o = $('.' + settings.cntClass);
if (o.css('display') == 'none') {
o.removeClass('active');
$('.' + settings.toggleClass).removeClass('active');
$('body').undelegate('*', 'mousewheel', nav.scroll);
$('body').undelegate('*', 'touchmove', nav.scroll);
$('body').undelegate('*', 'touchend', nav.touchend);
$('body').undelegate('*', 'touchstart', nav.close);
$('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
}
});
},
scroll: function (e) {
e.preventDefault();
var menu = $('.' + settings.menuClass);
var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;
if (
y > menu.offset().top &&
y < (menu.offset().top + menu.outerHeight()) &&
x > menu.offset().left &&
x < (menu.offset().left + menu.outerWidth())
) {
var delta = 0;
if (e.originalEvent.targetTouches) {
if (!lastY) lastY = y;
delta = (lastY - y);
lastY = y;
dir = delta > 0;
} else {
delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail) * (-50)
}
menu.stop().scrollTop(menu.scrollTop() + delta);
}
return false;
},
touchend: function (e) {
var menu = $('.' + settings.menuClass);
menu.stop().animate({
scrollTop: menu.scrollTop() + (dir ? 100 : -100)
}, 3000, 'easeOutQuint');
lastY = undefined;
},
close: function (e) {
if (!e.originalEvent) {
return;
}
var menu = $('.' + settings.menuClass);
var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;
if (!(
y > menu.offset().top &&
y < (menu.offset().top + menu.outerHeight()) &&
x > menu.offset().left &&
x < (menu.offset().left + menu.outerWidth())
)
) {
$('.' + settings.toggleClass).trigger(e.data.type);
}
},
isMobile: function () {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
};
$.fn.rdparallax = function (option) {
var o = this;
if (o.length) {
new RDMobileMenu(o[0]).init();
}
return o;
};
window.RDMobilemenu_autoinit = function (selector) {
var o = $(selector);
if (o.length) {
new RDMobileMenu(o[0]).init();
}
};
})(jQuery);
$(document).ready(function () {
RDMobilemenu_autoinit('[data-type="navbar"]');
});
I can either adjust the plugin or add my own JS in my main.js file. I just can't seem to figure it out. This is how it appears in the window in mobile mode
<h2 class="rd-mobilepanel_title">Title</h2>
Related
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(); ```
Alright! So I got a jQuery sheet in "borrowing" from another page. The jQuery works fine with the code that links it to the original location.
<script type="text/javascript" src="http://restaurantleduc.com/wp-content/themes/leduc/js/LD.js"></script>
However, when I try to export the whole code from the original website it wont work for me. Not in my script and not in an stylesheet for itself... Could really use some help on this one . :) Here is the original "raw" code:
if ( !window.$ ) window.$ = window.jQuery;
// Create Namespace
var LD = window.LD || {};
/* EVENT MANAGER */
LD.EM = LD.EM || $({});
/*
* EVENTS
*/
LD.Events = {
APP_READY : "APP_READY",
SCROLLED : "SCROLLED",
RESIZED : "RESIZED"
};
// VARS-CONST
LD.WIDTH = 0;
LD.HEIGHT = 0;
$(window).ready(function(){
$("html").addClass( (LD.Utils.hasTouch() ? "touch" : "no-touch") );
LD.Resize.init();
LD.Scroll.init();
LD.Menu.init();
LD.Carousel.init();
LD.Footer.init();
if ( $(".home").length )
LD.Home.init();
if ( $(".news").length )
LD.News.init();
});
$(window).load(function() {
$(window).trigger("resize");
$(window).trigger("scroll");
});
LD.Utils = {
hasTouch : function() {
return 'ontouchstart' in window;
},
isValidEmailAddress : function (emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
},
map : function(value, start1, stop1, start2, stop2) {
return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
},
createCookie : function(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires="+date.toGMTString();
}
document.cookie = name+"="+value+expires+"; path=/";
},
readCookie : function(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
}
return null;
},
eraseCookie : function(name) {
LD.Utils.createCookie(name,"",-1);
}
};
LD.Carousel = LD.Carousel ||Â {
sliders : [],
init : function() {
if ( $(".article-carousel").length === 0 ) return;
this.initSwipe();
},
initSwipe : function() {
var self = this;
$(".article-carousel .swipe").each( function( i, swipe ) {
var slider = new Swipe(swipe, {
speed: 900,
continuous: true,
callback : $.proxy( self.callbackSlider, self )
});
$(swipe).parents(".article-preview").data("index", i);
self.sliders.push( slider );
});
imagesLoaded( $('body'), function() {
LD.EM.trigger( LD.Events.RESIZED );
});
$(".btn-next, .btn-prev", ".article-carousel").on("click", $.proxy( this.navSwipe, this ));
$(".btn-dot", ".article-carousel").on("click", $.proxy( this.dotSwipe, this ));
},
callbackSlider : function(index, el) {
var
$el = $(el),
$parent = $el.parents(".article-preview, .article-full"),
sliderIndex = $parent.data("index") || 0,
slider = this.sliders[ sliderIndex ];
$(".btn-dot.selected", $parent).removeClass("selected");
$(".btn-dot:eq(" + slider.getPos() + ")", $parent).addClass("selected");
},
navSwipe : function(e) {
e.preventDefault();
var
$el = $(e.currentTarget),
sliderIndex = $el.parents(".article-preview").data("index") ||Â 0,
slider = this.sliders[ sliderIndex ];
if ( $el.hasClass("btn-prev") ) {
slider.prev();
} else {
slider.next();
}
},
dotSwipe : function(e) {
e.preventDefault();
var
$el = $(e.currentTarget),
sliderIndex = $el.parents(".article-preview").data("index") ||Â 0,
slider = this.sliders[ sliderIndex ];
slider.slide( $el.data("index") );
}
};
LD.Footer = LD.Footer ||Â {
init : function() {
this.initBtn();
this.initNewsletter();
},
initBtn : function() {
$("footer .btn-top").on("click", $.proxy( this.onTopClick, this ));
},
onTopClick : function(e) {
e.preventDefault();
$("html, body").animate({
scrollTop : 0
}, 1200);
},
initNewsletter : function () {
var
$context = $("footer"),
email;
$(".form-newsletter", $context).on("submit", function(e){
e.preventDefault();
$(".valid-error, .post-error, .valid", $context).hide();
email = $(".form-email", this).val();
if ( LD.Utils.isValidEmailAddress(email) ) {
$.post( $(this).attr("action"), $(this).serialize(), function() {
$(".valid", $context).show();
})
.fail(function() {
$(".post-error", $context).show();
});
} else {
$(".valid-error", $context).show();
}
});
},
};
LD.Menu = LD.Menu ||Â {
init : function() {
this.initLang();
},
initLang : function() {
var newlang;
$(".btn-lang").on("click", function(e){
e.preventDefault();
newlang = $(this).data("lang");
LD.Utils.eraseCookie("leduc_lang");
LD.Utils.createCookie("leduc_lang", newlang, 365);
window.location.reload();
});
}
};
LD.Resize = LD.Resize ||Â {
init : function() {
LD.WIDTH = $(window).width();
LD.HEIGHT = $(window).height();
$(window).on("resize", $.proxy(this.onResize, this));
},
kill : function() {
$(window).off("resize", $.proxy(this.onResize, this));
},
onResize : function() {
LD.WIDTH = $(window).width();
LD.HEIGHT = $(window).height();
LD.EM.trigger( LD.Events.RESIZED );
}
};
LD.Scroll = LD.Scroll ||Â {
$body : null,
$carte : null,
$lunch : null,
$starters : null,
$mains : null,
$restaurant : null,
scrollPos : null,
scrollLunch : null,
scrollStarters : null,
scrollMains : null,
scrollRestaurant : null,
init : function() {
this.$body = $("body");
this.$carte = $(".home-carte");
this.$lunch = $(".block-lunch");
this.$starters = $(".block-starters");
this.$mains = $(".block-mains");
this.$restaurant = $(".home-restaurant");
this.onResized();
LD.EM.on( LD.Events.RESIZED, $.proxy( this.onResized, this ) );
$(window).on("scroll", $.proxy(this.onScroll, this));
},
kill : function() {
$(window).off("scroll", $.proxy(this.onScroll, this));
},
onResized : function() {
if ( this.$carte.length === 0 ) return;
var
offset = Math.round(LD.HEIGHT*0.5),
offsetTopCarte = this.$carte.position().top;
this.scrollLunch = offsetTopCarte - offset;
this.scrollStarters = offsetTopCarte + this.$starters.position().top - offset - 150;
this.scrollMains = offsetTopCarte + this.$mains.position().top - offset - 150;
this.scrollRestaurant = this.$restaurant.position().top - offset;
},
onScroll : function() {
this.checkScroll( 128, this.$body, "sticky" );
if ( !LD.Utils.hasTouch() ) {
this.checkScroll( this.scrollLunch, this.$lunch, "show-lunch" );
this.checkScroll( this.scrollStarters, this.$starters, "show-starters" );
this.checkScroll( this.scrollMains, this.$mains, "show-mains" );
this.checkScroll( this.scrollRestaurant, this.$restaurant, "show-restaurant" );
}
LD.EM.trigger( LD.Events.SCROLLED );
},
checkScroll : function( limit, $el, className ) {
var currentScrollPos = $(document).scrollTop();
LD.scrollPos = currentScrollPos;
if ( currentScrollPos > limit ) {
$el.addClass(className);
} else {
$el.removeClass(className);
}
}
};
LD.Home = LD.Home ||Â {
$sliders : null,
sliders : [],
init : function() {
this.$sliders = $(".swipe-container");
this.initMenu();
this.initSliders();
this.initCarte();
// GOOGLE MAPS
this.initMap();
LD.EM.on( LD.Events.SCROLLED, $.proxy( this.onScrolled, this ) );
LD.EM.on( LD.Events.RESIZED, $.proxy( this.onResized, this ) );
},
initMenu : function () {
$(".logo a").on("click", function(e) {
if ( $(".home").length ) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 1000);
}
});
$("a.btn-internal").on("click", function(e) {
e.preventDefault();
var target = $(this).attr("href").replace("/", "");
$('html,body').animate({
scrollTop: $( target ).offset().top - 110
}, 1000);
});
},
initSliders : function() {
var self = this;
$(".swipe").each( function( i, swipe ) {
var slider = new Swipe(swipe, {
auto : 6000,
speed: 900,
continuous: true,
callback : $.proxy( self.callbackSlider, self )
});
self.sliders.push( slider );
});
$(".btn-next, .btn-prev").on("click", $.proxy( this.navSwipe, this ));
$(".btn-dot").on("click", $.proxy( this.dotSwipe, this ));
},
navSwipe : function(e) {
e.preventDefault();
var
$el = $(e.currentTarget),
sliderIndex = $el.parents(".swipe-container").data("index"),
slider = this.sliders[ sliderIndex ];
if ( $el.hasClass("btn-prev") ) {
slider.prev();
} else {
slider.next();
}
},
dotSwipe : function(e) {
e.preventDefault();
var
$el = $(e.currentTarget),
sliderIndex = $el.parents(".swipe-container").data("index"),
slider = this.sliders[ sliderIndex ];
slider.slide( $el.data("index") );
},
callbackSlider : function( index, el ) {
var
$el = $(el),
$parent = $el.parents(".swipe-container"),
sliderIndex = $parent.data("index"),
slider = this.sliders[ sliderIndex ];
$(".btn-dot.selected", $parent).removeClass("selected");
$(".btn-dot:eq(" + slider.getPos() + ")", $parent).addClass("selected");
},
initMap : function() {
var
$el = $(".map"),
center = new google.maps.LatLng( $el.data("lat"), $el.data("lng") ),
mapOptions = {
scrollwheel : false,
disableDefaultUI : true,
center: center,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles : [{"featureType":"all","stylers":[{"saturation":0},{"hue":"#e7ecf0"}]},{"featureType":"road","stylers":[{"saturation":-70}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"visibility":"simplified"},{"saturation":-60}]}]
},
map = new google.maps.Map($el[0], mapOptions);
new google.maps.Marker({
"position": center,
"map": map
});
},
initCarte : function() {
this.$carteWrap = $(".home-carte");
this.$carteHeight = this.$carteWrap.height();
this.$carteTop = this.$carteWrap.position().top;
this.$fishes = $(".fish", this.$carteWrap);
},
onScrolled : function() {
if ( LD.Utils.hasTouch() ) return;
if ( this.$carteTop < LD.scrollPos + LD.HEIGHT && this.$carteTop + this.$carteHeight > LD.scrollPos ) {
var
val = this.$carteTop - (LD.scrollPos + LD.HEIGHT),
max = this.$carteHeight + LD.HEIGHT,
p = LD.Utils.map( val, 0, max, 0, 150 ),
$fish = null;
this.$fishes.each(function (i, fish) {
$fish = $(fish);
$fish.css("transform", "translateY(" + (p * $fish.data("speed")) + "%)");
});
}
},
onResized : function() {
}
};
LD.News = LD.News ||Â {
init : function() {
this.initBtnTop();
},
initBtnTop : function() {
$(".btn-top").on("click", $.proxy(this.toTop, this));
},
toTop : function() {
$("html, body").animate({
"scrollTop" : 0
}, 300);
}
};
Are you linking the jquery library? If you don't want to download and host it yourself you can use the link below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I used a plug-in called jquery.rd-navbar.js to take my desktop version of the navbar and make it into a nice responsive mobile menu. The only problem is that if there are submenus, the code never hits the plug-in and they are displayed as normal menu. Any ideas? The problem is that I built too much of the CSS to go back now and not use the plugin.
/*
* Author: Evgeniy Gusarov StMechanus (Diversant)
* Under the MIT License
*
* Version: 1.0.1
*
*/
;
(function ($) {
var settings = {
cntClass: 'rd-mobilemenu',
menuClass: 'rd-mobilemenu_ul',
submenuClass: 'rd-mobilemenu_submenu',
panelClass: 'rd-mobilepanel',
toggleClass: 'rd-mobilepanel_toggle',
titleClass: 'rd-mobilepanel_title'
},
lastY, dir;
var RDMobileMenu = function (element, options) {
this.options = options;
this.$source = $(element);
};
RDMobileMenu.prototype = {
init: function () {
var nav = this;
nav.createDOM();
nav.createListeners();
},
createDOM: function () {
var nav = this;
$('body')
.append($('<div/>', {
'class': settings.cntClass
}).append(nav.createNavDOM()))
.append($('<div/>', {
'class': settings.panelClass
})
.append($('<button/>', {
'class': settings.toggleClass
}).append($('<span/>')))
.append($('<h2/>', {
'class': settings.titleClass
}).append($('[data-type="rd-navbar-brand"]').length? $('[data-type="rd-navbar-brand"]').html() : document.title))
);
},
createNavDOM: function () {
var nav = this;
var menu = $('<ul>', {'class': settings.menuClass});
var li = nav.$source.children();
for (var i = 0; i < li.length; i++) {
var o = li[i].children,
item = null;
for (var j = 0; j < o.length; j++) {
if (o[j].tagName) {
if (!item) {
item = document.createElement('li');
if (li[i].className.indexOf('active') > -1) {
item.className = 'active';
}
}
switch (o[j].tagName.toLowerCase()) {
case 'a':
var link = o[j].cloneNode(true);
item.appendChild(link);
break;
case 'ul':
var submenu = o[j].cloneNode(true);
submenu.className = settings.submenuClass;
$(submenu).css({"display": "none"});
item.appendChild(submenu);
$(item).find('> a')
.each(function () {
$this = $(this);
$this.addClass('rd-with-ul')
.append($('<span/>', {class: 'rd-submenu-toggle'}))
.find('.rd-submenu-toggle')
.on('click', function (e) {
e.preventDefault();
$this = $(this).parent();
if ($this.hasClass('rd-with-ul') && !$this.hasClass('active')) {
$('.rd-with-ul').removeClass('active');
var submenu = $this.addClass('active').parent().find('.' + settings.submenuClass);
submenu.stop().slideDown();
$('.' + settings.submenuClass).not(submenu).stop().slideUp();
} else {
var submenu = $this.removeClass('active').parent().find('.' + settings.submenuClass);
submenu.stop().slideUp();
}
});
});
break;
default:
break;
}
}
}
if (item) {
menu.append(item);
}
}
return menu;
},
createListeners: function () {
var nav = this;
nav.createToggleListener();
nav.createResizeListener();
},
createToggleListener: function () {
var nav = this,
type;
if (nav.isMobile()){
type = 'touchstart';
}else{
type = 'click';
}
$('body').delegate('.' + settings.toggleClass, type, function () {
var o = $('.' + settings.cntClass);
$(this).toggleClass('active');
if (o.hasClass('active')) {
$(this).removeClass('active');
o.removeClass('active');
$('body').undelegate('*', 'mousewheel', nav.scroll);
$('body').undelegate('*', 'touchmove', nav.scroll);
$('body').undelegate('*', 'touchend', nav.touchend);
$('body').undelegate('*', 'touchstart', nav.close);
$('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
} else {
$(this).addClass('active');
o.addClass('active');
$('body').delegate('*', 'mousewheel', nav.scroll);
$('body').delegate('*', 'touchmove', nav.scroll);
$('body').delegate('*', 'touchend', nav.touchend);
$('body').delegate('*', 'touchstart', {type: type}, nav.close);
$('body').delegate('*:not(.' + settings.toggleClass + ' span)', 'click', {type: type}, nav.close);
}
});
},
createResizeListener: function () {
var nav = this;
$(window).on('resize', function () {
var o = $('.' + settings.cntClass);
if (o.css('display') == 'none') {
o.removeClass('active');
$('.' + settings.toggleClass).removeClass('active');
$('body').undelegate('*', 'mousewheel', nav.scroll);
$('body').undelegate('*', 'touchmove', nav.scroll);
$('body').undelegate('*', 'touchend', nav.touchend);
$('body').undelegate('*', 'touchstart', nav.close);
$('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
}
});
},
scroll: function (e) {
e.preventDefault();
var menu = $('.' + settings.menuClass);
var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;
if (
y > menu.offset().top &&
y < (menu.offset().top + menu.outerHeight()) &&
x > menu.offset().left &&
x < (menu.offset().left + menu.outerWidth())
) {
var delta = 0;
if (e.originalEvent.targetTouches) {
if (!lastY) lastY = y;
delta = (lastY - y);
lastY = y;
dir = delta > 0;
} else {
delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail) * (-50)
}
menu.stop().scrollTop(menu.scrollTop() + delta);
}
return false;
},
touchend: function (e) {
var menu = $('.' + settings.menuClass);
menu.stop().animate({
scrollTop: menu.scrollTop() + (dir ? 100 : -100)
}, 3000, 'easeOutQuint');
lastY = undefined;
},
close: function (e) {
if (!e.originalEvent) {
return;
}
var menu = $('.' + settings.menuClass);
var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;
if (!(
y > menu.offset().top &&
y < (menu.offset().top + menu.outerHeight()) &&
x > menu.offset().left &&
x < (menu.offset().left + menu.outerWidth())
)
) {
$('.' + settings.toggleClass).trigger(e.data.type);
}
},
isMobile: function () {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
};
$.fn.rdparallax = function (option) {
var o = this;
if (o.length) {
new RDMobileMenu(o[0]).init();
}
return o;
};
window.RDMobilemenu_autoinit = function (selector) {
var o = $(selector);
if (o.length) {
new RDMobileMenu(o[0]).init();
}
};
})(jQuery);
$(document).ready(function () {
RDMobilemenu_autoinit('[data-type="navbar"]');
});
HTML:
<li class="dropdown ">
About Us
<ul class="dropdown-menu">
<li>
Company Overview
</li>
<li>
Company Profile
</li>
<li>
Customers
</li>
<li>
Contact Us
</li>
</ul>
</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
<li>
Service 1
</li>
<li>
Service 2
</li>
<li class="dropdown">
Service 3 w/dropdown <b class="caret-right"></b>
<ul class="dropdown-menu">
<li>
abc Approach
</li>
<li>
Performance Services
</li>
<li>
Continuous Improvement
</li>
</ul>
Something in this Curtains.js plug-in is preventing user text selection on my page. When I comment it out, I'm able to select text, when I put it back in, I'm not. Can someone identify it and tell me how to fix it? I'm at my wit's end.
<script>
/*
* Curtain.js - Create an unique page transitioning system
* ---
* Version: 2
* Copyright 2011, Victor Coulon (http://victorcoulon.fr)
* Released under the MIT Licence
*/
(function ( $, window, document, undefined ) {
var pluginName = 'curtain',
defaults = {
scrollSpeed: 400,
bodyHeight: 0,
linksArray: [],
mobile: false,
scrollButtons: {},
controls: null,
curtainLinks: '.curtain-links',
enableKeys: true,
easing: 'swing',
disabled: false,
nextSlide: function() {},
prevSlide: function() {}
};
// The actual plugin constructor
function Plugin( element, options ) {
var self = this;
// Public attributes
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this._ignoreHashChange = false;
this.init();
}
Plugin.prototype = {
init: function () {
var self = this;
// Cache element
this.$element = $(this.element);
this.$li = $(this.element).find('>li');
this.$liLength = this.$li.length;
self.$windowHeight = $(window).height();
self.$elDatas = {};
self.$document = $(document);
self.$window = $(window);
self.webkit = (navigator.userAgent.indexOf('Chrome') > -1 || navigator.userAgent.indexOf("Safari") > -1);
$.Android = (navigator.userAgent.match(/Android/i));
$.iPhone = ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)));
$.iPad = ((navigator.userAgent.match(/iPad/i)));
$.iOs4 = (/OS [1-4]_[0-9_]+ like Mac OS X/i.test(navigator.userAgent));
if($.iPhone || $.iPad || $.Android || self.options.disabled){
this.options.mobile = true;
this.$li.css({position:'relative'});
this.$element.find('.fixed').css({position:'absolute'});
}
if(this.options.mobile){
this.scrollEl = this.$element;
} else if($.browser.mozilla || $.browser.msie) {
this.scrollEl = $('html');
} else {
this.scrollEl = $('body');
}
if(self.options.controls){
self.options.scrollButtons['up'] = $(self.options.controls).find('[href="#up"]');
self.options.scrollButtons['down'] = $(self.options.controls).find('[href="#down"]');
if(!$.iOs4 && ($.iPhone || $.iPad)){
self.$element.css({
position:'fixed',
top:0,
left:0,
right:0,
bottom:0,
'-webkit-overflow-scrolling':'touch',
overflow:'auto'
});
$(self.options.controls).css({position:'absolute'});
}
}
// When all image is loaded
var callbackImageLoaded = function(){
self.setDimensions();
self.$li.eq(0).addClass('current');
self.setCache();
if(!self.options.mobile){
if(self.$li.eq(1).length)
self.$li.eq(1).nextAll().addClass('hidden');
}
self.setEvents();
self.setLinks();
self.isHashIsOnList(location.hash.substring(1));
};
if(self.$element.find('img').length)
self.imageLoaded(callbackImageLoaded);
else
callbackImageLoaded();
},
// Events
scrollToPosition: function (direction){
var position = null,
self = this;
if(self.scrollEl.is(':animated')){
return false;
}
if(direction === 'up' || direction == 'down'){
// Keyboard event
var $next = (direction === 'up') ? self.$current.prev() : self.$current.next();
// Step in the current panel ?
if(self.$step){
if(!self.$current.find('.current-step').length){
self.$step.eq(0).addClass('current-step');
}
var $nextStep = (direction === 'up') ? self.$current.find('.current-step').prev('.step') : self.$current.find('.current-step').next('.step');
if($nextStep.length) {
position = (self.options.mobile) ? $nextStep.position().top + self.$elDatas[self.$current.index()]['data-position'] : $nextStep.position().top + self.$elDatas[self.$current.index()]['data-position'];
}
}
position = position || ((self.$elDatas[$next.index()] === undefined) ? null : self.$elDatas[$next.index()]['data-position']);
if(position !== null){
self.scrollEl.animate({
scrollTop: position
}, self.options.scrollSpeed, self.options.easing);
}
} else if(direction === 'top'){
self.scrollEl.animate({
scrollTop:0
}, self.options.scrollSpeed, self.options.easing);
} else if(direction === 'bottom'){
self.scrollEl.animate({
scrollTop:self.options.bodyHeight
}, self.options.scrollSpeed, self.options.easing);
} else {
var index = $("#"+direction).index(),
speed = Math.abs(self.currentIndex-index) * (this.options.scrollSpeed*4) / self.$liLength;
self.scrollEl.animate({
scrollTop:self.$elDatas[index]['data-position'] || null
}, (speed <= self.options.scrollSpeed) ? self.options.scrollSpeed : speed, this.options.easing);
}
},
scrollEvent: function() {
var self = this,
docTop = self.$document.scrollTop();
if(docTop < self.currentP && self.currentIndex > 0){
// Scroll to top
self._ignoreHashChange = true;
if(self.$current.prev().attr('id'))
self.setHash(self.$current.prev().attr('id'));
self.$current
.removeClass('current')
.css( (self.webkit) ? {'-webkit-transform': 'translateY(0px) translateZ(0)'} : {marginTop: 0} )
.nextAll().addClass('hidden').end()
.prev().addClass('current').removeClass('hidden');
self.setCache();
self.options.prevSlide();
} else if(docTop < (self.currentP + self.currentHeight)){
// Animate the current pannel during the scroll
if(self.webkit)
self.$current.css({'-webkit-transform': 'translateY('+(-(docTop-self.currentP))+'px) translateZ(0)' });
else
self.$current.css({marginTop: -(docTop-self.currentP) });
// If there is a fixed element in the current panel
if(self.$fixedLength){
var dataTop = parseInt(self.$fixed.attr('data-top'), 10);
if(docTop + self.$windowHeight >= self.currentP + self.currentHeight){
self.$fixed.css({
position: 'fixed'
});
} else {
self.$fixed.css({
position: 'absolute',
marginTop: Math.abs(docTop-self.currentP)
});
}
}
// If there is a step element in the current panel
if(self.$stepLength){
$.each(self.$step, function(i,el){
if(($(el).position().top+self.currentP) <= docTop+5 && $(el).position().top + self.currentP + $(el).height() >= docTop+5){
if(!$(el).hasClass('current-step')){
self.$step.removeClass('current-step');
$(el).addClass('current-step');
return false;
}
}
});
}
if(self.parallaxBg){
self.$current.css({
'background-position-y': docTop * self.parallaxBg
});
}
if(self.$fade.length){
self.$fade.css({
'opacity': 1-(docTop/ self.$fade.attr('data-fade'))
});
}
if(self.$slowScroll.length){
self.$slowScroll.css({
'margin-top' : (docTop / self.$slowScroll.attr('data-slow-scroll'))
});
}
} else {
// Scroll bottom
self._ignoreHashChange = true;
if(self.$current.next().attr('id'))
self.setHash(self.$current.next().attr('id'));
self.$current.removeClass('current')
.addClass('hidden')
.next('li').addClass('current').next('li').removeClass('hidden');
self.setCache();
self.options.nextSlide();
}
},
scrollMobileEvent: function() {
var self = this,
docTop = self.$element.scrollTop();
if(docTop+10 < self.currentP && self.currentIndex > 0){
// Scroll to top
self._ignoreHashChange = true;
if(self.$current.prev().attr('id'))
self.setHash(self.$current.prev().attr('id'));
self.$current.removeClass('current').prev().addClass('current');
self.setCache();
self.options.prevSlide();
} else if(docTop+10 < (self.currentP + self.currentHeight)){
// If there is a step element in the current panel
if(self.$stepLength){
$.each(self.$step, function(i,el){
if(($(el).position().top+self.currentP) <= docTop && (($(el).position().top+self.currentP) + $(el).outerHeight()) >= docTop){
if(!$(el).hasClass('current-step')){
self.$step.removeClass('current-step');
$(el).addClass('current-step');
}
}
});
}
} else {
// Scroll bottom
self._ignoreHashChange = true;
if(self.$current.next().attr('id'))
self.setHash(self.$current.next().attr('id'));
self.$current.removeClass('current').next().addClass('current');
self.setCache();
self.options.nextSlide();
}
},
// Setters
setDimensions: function(){
var self = this,
levelHeight = 0,
cover = false,
height = null;
self.$windowHeight = self.$window.height();
this.$li.each(function(index) {
var $self = $(this);
cover = $self.hasClass('cover');
if(cover){
$self.css({height: self.$windowHeight, zIndex: 999-index})
.attr('data-height',self.$windowHeight)
.attr('data-position',levelHeight);
self.$elDatas[$self.index()] = {
'data-height': parseInt(self.$windowHeight,10),
'data-position': parseInt(levelHeight, 10)
};
levelHeight += self.$windowHeight;
} else{
height = ($self.outerHeight() <= self.$windowHeight) ? self.$windowHeight : $self.outerHeight();
$self.css({minHeight: height, zIndex: 999-index})
.attr('data-height',height)
.attr('data-position',levelHeight);
self.$elDatas[$self.index()] = {
'data-height': parseInt(height, 10),
'data-position': parseInt(levelHeight, 10)
};
levelHeight += height;
}
if($self.find('.fixed').length){
var top = $self.find('.fixed').css('top');
$self.find('.fixed').attr('data-top', top);
}
});
if(!this.options.mobile)
this.setBodyHeight();
},
setEvents: function() {
var self = this;
$(window).on('resize', function(){
self.setDimensions();
});
if(self.options.mobile) {
self.$element.on('scroll', function(){
self.scrollMobileEvent();
});
} else {
self.$window.on('scroll', function(){
self.scrollEvent();
});
}
if(self.options.enableKeys) {
self.$document.on('keydown', function(e){
if(e.keyCode === 38 || e.keyCode === 37) {
self.scrollToPosition('up');
e.preventDefault();
return false;
}
if(e.keyCode === 40 || e.keyCode === 39){
self.scrollToPosition('down');
e.preventDefault();
return false;
}
// Home button
if(e.keyCode === 36){
self.scrollToPosition('top');
e.preventDefault();
return false;
}
// End button
if(e.keyCode === 35){
self.scrollToPosition('bottom');
e.preventDefault();
return false;
}
});
}
if(self.options.scrollButtons){
if(self.options.scrollButtons.up){
self.options.scrollButtons.up.on('click', function(e){
e.preventDefault();
self.scrollToPosition('up');
});
}
if(self.options.scrollButtons.down){
self.options.scrollButtons.down.on('click', function(e){
e.preventDefault();
self.scrollToPosition('down');
});
}
}
if(self.options.curtainLinks){
$(self.options.curtainLinks).on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
if(!self.isHashIsOnList(href.substring(1)) && position)
return false;
var position = self.$elDatas[$(href).index()]['data-position'] || null;
if(position){
self.scrollEl.animate({
scrollTop:position
}, self.options.scrollSpeed, self.options.easing);
}
return false;
});
}
self.$window.on("hashchange", function(event){
if(self._ignoreHashChange === false){
self.isHashIsOnList(location.hash.substring(1));
}
self._ignoreHashChange = false;
});
},
setBodyHeight: function(){
var h = 0;
for (var key in this.$elDatas) {
var obj = this.$elDatas[key];
h += obj['data-height'];
}
this.options.bodyHeight = h;
$('body').height(h);
},
setLinks: function(){
var self = this;
this.$li.each(function() {
var id = $(this).attr('id') || 0;
self.options.linksArray.push(id);
});
},
setHash: function(hash){
// "HARD FIX"
el = $('[href=#'+hash+']');
el.parent().siblings('li').removeClass('active');
el.parent().addClass('active');
if(history.pushState) {
history.pushState(null, null, '#'+hash);
}
else {
location.hash = hash;
}
},
setCache: function(){
var self = this;
self.$current = self.$element.find('.current');
self.$fixed = self.$current.find('.fixed');
self.$fixedLength = self.$fixed.length;
self.$step = self.$current.find('.step');
self.$stepLength = self.$step.length;
self.currentIndex = self.$current.index();
self.currentP = self.$elDatas[self.currentIndex]['data-position'];
self.currentHeight = self.$elDatas[self.currentIndex]['data-height'];
self.parallaxBg = self.$current.attr('data-parallax-background');
self.$fade = self.$current.find('[data-fade]');
self.$slowScroll = self.$current.find('[data-slow-scroll]');
},
// Utils
isHashIsOnList: function(hash){
var self = this;
$.each(self.options.linksArray, function(i,val){
if(val === hash){
self.scrollToPosition(hash);
return false;
}
});
},
readyElement: function(el,callback){
var interval = setInterval(function(){
if(el.length){
callback(el.length);
clearInterval(interval);
}
},60);
},
imageLoaded: function(callback){
var self = this,
elems = self.$element.find('img'),
len = elems.length,
blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
elems.bind('load.imgloaded',function(){
if (--len <= 0 && this.src !== blank || $(this).not(':visible')){
elems.unbind('load.imgloaded');
callback.call(elems,this);
}
}).each(function(){
if (this.complete || this.complete === undefined){
var src = this.src;
this.src = blank;
this.src = src;
}
});
}
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
}
});
};
})( jQuery, window, document );
</script>
First you would have to tell us how you are trying to select text (mouse, keyboard, touchscreen, etc.)
I bet my bitcoins on keyboard (but I don't have any).
Must be one of those
self.$document.on('keydown', function(e){
...
e.preventDefault();
which don't even document which keys these numbers stand for.
It's e.preventDefault() which prevents the default browser action from being performed.
If you're in Chrome devtools, you can use
monitorEvents(window, 'key')
to make sense of these.
Of course this bit may help a bit:
keyCode: 38
keyIdentifier: "Up"
So the code could be written readably by use of keyIdentifier instead of keyCode.
I don't know how compatible that would be across browsers.
Be warned that keydown keyCode values are different from keypress values (which actually insert real characters). keydown key codes will vary between keyboard layouts and locales.
See http://unixpapa.com/js/key.html for disgust and enlightenment, but mostly disgust.
I'm using an S3Slider on WordPress. I'd like it to stop after one rotation, but can't seem to figure out the setting.
The following code is used in the slider.js file. Right now it's live at http://beaconwc.com on the frontpage, would like it to show the two slides and then stop until the user refreshes the page.
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var capOpacity = vars.captionOpacity || .7;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image div");
itemsSpan.css({
'opacity': capOpacity,
'display': 'none'
});
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
Thanks!
Source
http://www.serie3.info/s3slider/