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>
Related
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();
I have a nice working image slideshow, but every time when i open a new page from the menu, the slideshow starts from the beginning. I want it to go on where it was while entering a new page. Now could there be a possibility to change it in the code of my slideshow, but maybe a better solution is to open my content in a div with AJAX, so the whole page doesn't refresh.
I found this on the web:
<div id="navigatie">
<div id="buttons">
<a class="menu" id="page1" href="#">Home</a><span>|</span>
<a class="menu" id="page2" href="#">Projects</a><span>|</span>
<a class="menu" id="page3" href="#">About</a><span>|</span>
</div>
</div>
<script>
$(document).ready(function() {
$("#page1").click(function(){
$('#content').load('index.php #content');
});
$("#page2").click(function(){
$('#content').load('projects.php #content');
});
$("#page3").click(function(){
$('#content').load('about.php #content');
});
});
</script>
But this doesn't workout very well because when i start with my index page and go to projects (where lightbox is present), i get full images instead of thumbnails.(This was because the extended files were not in #content) i get index.php# instead of projects.php. Maybe i should use an easier solution, but im getting stuck. Can someone help me out please?
Edit: Let me also share the code of the slideshow with you, perhaps there is a possibility to resume after loading a new page/refresh.
/*!
* crosscover v1.0.2
* Carousel of a simple background image using jquery and animate.css.
* http://git.blivesta.com/crosscover
* License : MIT
* Author : blivesta <enmt#blivesta.com> (http://blivesta.com/)
*/
;(function(factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
}(function($) {
'use strict';
var namespace = 'crosscover';
var __ = {
init: function(options) {
options = $.extend({
inClass: 'fade-in',
outClass: 'fade-out',
interval: 5000,
startIndex: 0,
autoPlay: true,
dotsNav: true,
controller: false,
controllerClass: 'crosscover-controller',
prevClass: 'crosscover-prev',
nextClass: 'crosscover-next',
playerClass: 'crosscover-player',
playerInnerHtml: '<span class="crosscover-icon-player"></span>',
prevInnerHtml: '<span class="crosscover-icon-prev"></span>',
nextInnerHtml: '<span class="crosscover-icon-next"></span>'
}, options);
__.settings = {
currentIndex: options.startIndex,
timer: null,
coverBaseClass:'crosscover-item',
coverWaitClass:'is-wait',
coverActiveClass:'is-active',
playerActiveClass: 'is-playing',
dotsNavClass: 'crosscover-dots'
};
return this.each(function() {
var _this = this;
var $this = $(this);
var data = $this.data(namespace);
var $item = $this.children('.crosscover-list').children('.' + __.settings.coverBaseClass);
if (!data) {
options = $.extend({}, options);
$this.data(namespace, {
options: options
});
if (options.dotsNav) __.createDots.call(_this, $item);
if (options.controller) __.createControler.call(_this, $item);
__.setup.call(_this, $item);
}
});
},
setup: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
$item.each(function(index) {
var $self = $(this);
var image = $self.find('img').attr('src');
$self
.addClass(__.settings.coverBaseClass, __.settings.coverWaitClass)
.css({
'background-image': 'url(' + image + ')'
});
});
return __.slideStart.call(_this, $item);
},
slideStart: function($item) {
var _this = this;
__.autoPlayStart.call(_this, $item);
__.show.call(_this, $item);
},
createDots: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var len = $item.length;
$this
.append(
$('<ul>')
.addClass(__.settings.dotsNavClass)
);
for (var i = 0; i < len; i++) {
$this
.children('.' + __.settings.dotsNavClass)
.append(
$('<li>')
.addClass('crosscover-dots-nav-' + i)
.append(
$('<button>')
)
);
}
__.addDots.call(_this, $item);
},
addDots: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var $dots = $this.children('.' + __.settings.dotsNavClass);
var $dot = $dots.children('li').children('button');
$dot.on('click.' + namespace, function(event) {
return __.toggle.call(_this, $item, 'dots', $(this).parent('li').index());
});
},
createControler: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var isClass = options.autoPlay ? __.settings.playerActiveClass : null;
$this
.append(
$('<div>')
.attr({
'data-crosscover-controller': ''
})
.addClass(options.controllerClass)
.append(
$('<button>')
.attr({
'data-crosscover-prev': ''
})
.addClass(options.prevClass)
.html(options.prevInnerHtml)
)
.append(
$('<button>')
.attr({
'data-crosscover-player': ''
})
.addClass(options.playerClass)
.addClass(isClass)
.html(options.playerInnerHtml)
)
.append(
$('<button>')
.attr({
'data-crosscover-next': ''
})
.addClass(options.nextClass)
.html(options.nextInnerHtml)
)
);
return __.addControler.call(_this, $item);
},
addControler: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var $controller = $this.children('[data-crosscover-controller]');
var $navPrev = $controller.children('[data-crosscover-prev]');
var $navNext = $controller.children('[data-crosscover-next]');
var $navPlayPause = $controller.children('[data-crosscover-player]');
$navPlayPause.on('click.' + namespace, function(event) {
$(this).blur();
return __.playToggle.call(_this, $item, $(this));
});
$navPrev.on('click.' + namespace, function(event) {
$(this).blur();
return __.toggle.call(_this, $item, 'prev');
});
$navNext.on('click.' + namespace, function(event) {
$(this).blur();
return __.toggle.call(_this, $item, 'next');
});
},
playToggle: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var $navPlayPause = $this.find('[data-crosscover-player]');
if (options.autoPlay) {
options.autoPlay = false;
$navPlayPause
.removeClass(__.settings.playerActiveClass)
.addClass(options.playClass);
return __.autoPlayStop.call(_this);
} else {
options.autoPlay = true;
$navPlayPause.addClass(__.settings.playerActiveClass);
return __.autoPlayStart.call(_this, $item);
}
},
toggle: function($item, setting, num) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
__.hide.call(_this, $item);
if (setting === 'next') {
__.settings.currentIndex++;
} else if (setting === 'prev') {
__.settings.currentIndex--;
} else if (setting === 'dots') {
__.settings.currentIndex = num;
}
if (__.settings.currentIndex >= $item.length) {
__.settings.currentIndex = 0;
} else if (__.settings.currentIndex <= -1) {
__.settings.currentIndex = $item.length - 1;
}
__.autoPlayStart.call(_this, $item);
return __.show.call(_this, $item);
},
show: function($item) {
var $this = $(this);
var options = $this.data(namespace).options;
if(options.dotsNav) {
$this
.children('.' + __.settings.dotsNavClass)
.children('li')
.eq(__.settings.currentIndex)
.addClass('is-active')
.children('button')
.prop('disabled', true);
}
return $item
.eq(__.settings.currentIndex)
.addClass(__.settings.coverActiveClass)
.removeClass(__.settings.coverWaitClass)
.addClass(options.inClass)
.csscallbacks('animationEnd',function() {
$(this)
.removeClass(options.inClass + ' ' + __.settings.coverWaitClass)
.addClass(__.settings.coverActiveClass);
});
},
hide: function($item) {
var $this = $(this);
var options = $this.data(namespace).options;
if(options.dotsNav) {
$this
.children('.' + __.settings.dotsNavClass)
.children('li')
.eq(__.settings.currentIndex)
.removeClass('is-active')
.children('button')
.prop('disabled', false);
}
return $item
.eq(__.settings.currentIndex)
.removeClass(__.settings.coverActiveClass)
.addClass(options.outClass)
.csscallbacks('animationEnd', function() {
$(this)
.removeClass(options.outClass + ' ' + __.settings.coverActiveClass)
.addClass(__.settings.coverWaitClass);
});
},
autoPlayStart: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
if (options.autoPlay) {
__.autoPlayStop.call(_this);
__.settings.timer = setTimeout(function() {
__.toggle.call(_this, $item, 'next');
__.autoPlayStart.call(_this, $item);
}, options.interval);
}
return _this;
},
autoPlayStop: function() {
return clearTimeout(__.settings.timer);
},
currentIndex: function() {
return __.settings.currentIndex;
}
};
$.fn.crosscover = function(method) {
if (__[method]) {
return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return __.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.' + namespace);
}
};
$.fn.csscallbacks = function(type, callback){
var _animationStart = 'animationstart webkitAnimationStart oAnimationStart';
var _animationEnd = 'animationend webkitAnimationEnd oAnimationEnd';
var _transitionEnd = "transitionend webkitTransitionEnd oTransitionEnd";
if(type === 'animationStart'){
type = _animationStart;
} else if(type === 'animationEnd'){
type = _animationEnd;
} else if(type === 'transitionEnd'){
type = _transitionEnd;
}
return this.each(function(index) {
var $this = $(this);
$this.on(type, function(){
$this.off(type);
return callback.call(this);
});
});
};
}));
Its fixed, i just load my content in the #content div and i changed every 'href' to #Home (or name i like) in combination with Benalman's hashchange script
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>
I'm using the jpanelmenu plugin, but this goes for the first four of the jquery side menus on this list. www.jqueryscript.net/tags.php?/side%20menu/
The scripts work fine in the body of the page. When I move the markup
<div class="ui-widget">
<input id="tags" placeholder="Search"></input>
</div>
of this autocomplete search
<script type="text/javascript">
jQuery(function() {
var availableTags = [
"Comedy",
"Music",
"Radio"
];
jQuery( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
to the side menu like this
<div class="menu-trigger-selector"><img src="https://lh3.googleusercontent.com/-G1THV0EXgLY/VQgWdKfzIvI/AAAAAAAAAJg/_AtOhuTN9JI/s28-no/hamburger-menu-icon.png" alt="Menu Button" title="Menu Button"></div>
<div id="menu-selector" style="display:none;">
<ul class="info">
<li id="about" class="noselect">Home</li>
<li id="faq" class="noselect">About</li>
<li id="contribute" class="noselect">Contact</li>
</ul>
<ul class="login-register">
<li id="login" class="noselect">Login</li>
<li id="register" class="noselect">Register</li>
</ul>
<div class="ui-widget">
<input id="tags" placeholder="Search"></input>
</div>
<ul class="podcast-list">
<li>Main1
<ul class="podcasts">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
</ul>
</div>
<div class="container">
...
</div>
it stops functioning. The input box shows up, but the autocomplete results don't. I'm using drupal, with a bootstrap subtheme, and I think this may be playing a role. I have to replace $( with jQuery( in every script because of some conflict that I don't understand. I'm loading the scripts in this order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../drup/misc/jquery.once.js?v=1.2"></script>
<script src="../drup/misc/drupal.js?nmk3bg"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<!-- <?php print $scripts; ?> -->
<!-- Navigation -->
<script type="text/javascript">
/**
*
* jPanelMenu 1.4.1 (http://jpanelmenu.com)
* By Anthony Colangelo (http://acolangelo.com)
*
* */
(function($){
$.jPanelMenu = function(options) {
if ( typeof(options) == "undefined" || options == null ) { options = {}; };
var jP = {
options: $.extend({
menu: '#menu',
panel: 'body',
trigger: '.menu-trigger',
excludedPanelContent: 'style, script',
clone: true,
keepEventHandlers: false,
direction: 'left',
openPosition: '250px',
animated: true,
closeOnContentClick: true,
keyboardShortcuts: [
{
code: 27,
open: false,
close: true
},
{
code: 37,
open: false,
close: true
},
{
code: 39,
open: true,
close: true
},
{
code: 77,
open: true,
close: true
}
],
duration: 150,
openDuration: options.duration || 150,
closeDuration: options.duration || 150,
easing: 'ease-in-out',
openEasing: options.easing || 'ease-in-out',
closeEasing: options.easing || 'ease-in-out',
before: function(){ },
beforeOpen: function(){ },
beforeClose: function(){ },
after: function(){ },
afterOpen: function(){ },
afterClose: function(){ },
beforeOn: function(){ },
afterOn: function(){ },
beforeOff: function(){ },
afterOff: function(){ }
},options),
settings: {
transitionsSupported: 'WebkitTransition' in document.body.style ||
'MozTransition' in document.body.style ||
'msTransition' in document.body.style ||
'OTransition' in document.body.style ||
'Transition' in document.body.style
,
transformsSupported: 'WebkitTransform' in document.body.style ||
'MozTransform' in document.body.style ||
'msTransform' in document.body.style ||
'OTransform' in document.body.style ||
'Transform' in document.body.style
,
cssPrefix: '',
panelPosition: 'static',
positionUnits: 'px'
},
menu: '#jPanelMenu-menu',
panel: '.jPanelMenu-panel',
timeouts: {},
clearTimeouts: function() {
clearTimeout(jP.timeouts.open);
clearTimeout(jP.timeouts.afterOpen);
clearTimeout(jP.timeouts.afterClose);
},
setPositionUnits: function() {
var foundUnit = false,
allowedUnits = ['%','px','em']
;
for (var unitID = 0; unitID < allowedUnits.length; unitID++) {
var unit = allowedUnits[unitID];
if ( jP.options.openPosition.toString().substr(-unit.length) == unit )
{
foundUnit = true;
jP.settings.positionUnits = unit;
}
}
if ( !foundUnit ) { jP.options.openPosition = parseInt(jP.options.openPosition) + jP.settings.positionUnits }
},
computePositionStyle: function(open, string) {
var position = (open)?jP.options.openPosition:'0' + jP.settings.positionUnits;
var property = {};
if ( jP.settings.transformsSupported ) {
var direction = (open && jP.options.direction == 'right')?'-':'';
var translate = 'translate3d(' + direction + position + ',0,0)';
var transform = 'transform';
if ( string ) {
property = '';
if ( jP.settings.cssPrefix != '' ) { property = jP.settings.cssPrefix + transform + ':' + translate + ';' }
property += transform + ':' + translate + ';';
} else {
if ( jP.settings.cssPrefix != '' ) { property[jP.settings.cssPrefix + transform] = translate; }
property[transform] = translate;
}
} else {
if ( string ) {
property = '';
property = jP.options.direction + ': ' + position + ';';
} else {
property[jP.options.direction] = position;
}
}
return property;
},
setCSSPrefix: function() {
jP.settings.cssPrefix = jP.getCSSPrefix();
},
setjPanelMenuStyles: function() {
var bg = 'background:#fff',
htmlBG = $('html').css('background-color'),
bodyBG = $('body').css('background-color');
var backgroundGenerator = function(element){
var bgs = [];
$.each(['background-color','background-image','background-position','background-repeat','background-attachment','background-size','background-clip'], function(i,value){
if( element.css(value) !== '' ) {
bgs.push(value+':'+element.css(value));
}
});
return bgs.join(';');
};
if ( bodyBG !== 'transparent' && bodyBG !== "rgba(0, 0, 0, 0)") {
bg = backgroundGenerator($('body'));
} else if ( htmlBG !== 'transparent' && htmlBG !== "rgba(0, 0, 0, 0)") {
bg = backgroundGenerator($('html'));
}
if ( $('#jPanelMenu-style-master').length == 0 ) {
$('body').append('<style id="jPanelMenu-style-master">body{width:100%}.jPanelMenu,body{overflow-x:hidden}#jPanelMenu-menu{display:block;position:fixed;top:0;'+jP.options.direction+':0;height:100%;z-index:-1;overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch}.jPanelMenu-panel{position:static;'+jP.options.direction+':0;top:0;z-index:2;width:100%;min-height:100%;' + bg + ';}</style>');
}
},
setMenuState: function(open) {
var position = (open)?'open':'closed';
$(jP.options.panel).attr('data-menu-position', position);
},
getMenuState: function() {
return $(jP.options.panel).attr('data-menu-position');
},
menuIsOpen: function() {
if ( jP.getMenuState() == 'open' ) return true;
else return false;
},
setMenuStyle: function(styles) {
$(jP.menu).css(styles);
},
setPanelStyle: function(styles) {
$(jP.panel).css(styles);
},
showMenu: function() {
jP.setMenuStyle({
display: 'block'
});
jP.setMenuStyle({
'z-index': '1'
});
},
hideMenu: function() {
jP.setMenuStyle({
'z-index': '-1'
});
jP.setMenuStyle({
display: 'none'
});
},
enableTransitions: function(duration, easing) {
var formattedDuration = duration/1000;
var formattedEasing = jP.getCSSEasingFunction(easing);
jP.disableTransitions();
$('body').append('<style id="jPanelMenu-style-transitions">.jPanelMenu-panel{' + jP.settings.cssPrefix + 'transition: all ' + formattedDuration + 's ' + formattedEasing + '; transition: all ' + formattedDuration + 's ' + formattedEasing + ';}</style>');
},
disableTransitions: function() {
$('#jPanelMenu-style-transitions').remove();
},
getCSSEasingFunction: function(name) {
switch ( name )
{
case 'linear':
return name;
break;
case 'ease':
return name;
break;
case 'ease-in':
return name;
break;
case 'ease-out':
return name;
break;
case 'ease-in-out':
return name;
break;
default:
return 'ease-in-out';
break;
}
},
getJSEasingFunction: function(name) {
switch ( name )
{
case 'linear':
return name;
break;
default:
return 'swing';
break;
}
},
getVendorPrefix: function() {
// Thanks to Lea Verou for this beautiful function. (http://lea.verou.me/2009/02/find-the-vendor-prefix-of-the-current-browser)
if('result' in arguments.callee) return arguments.callee.result;
var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;
var someScript = document.getElementsByTagName('script')[0];
for(var prop in someScript.style)
{
if(regex.test(prop))
{
// test is faster than match, so it's better to perform
// that on the lot and match only when necessary
return arguments.callee.result = prop.match(regex)[0];
}
}
// Nothing found so far? Webkit does not enumerate over the CSS properties of the style object.
// However (prop in style) returns the correct value, so we'll have to test for
// the precence of a specific property
if('WebkitOpacity' in someScript.style) return arguments.callee.result = 'Webkit';
if('KhtmlOpacity' in someScript.style) return arguments.callee.result = 'Khtml';
return arguments.callee.result = '';
},
getCSSPrefix: function() {
var prefix = jP.getVendorPrefix();
if ( prefix != '' ) { return '-' + prefix.toLowerCase() + '-'; }
return '';
},
openMenu: function(animated) {
if ( typeof(animated) == "undefined" || animated == null ) { animated = jP.options.animated };
jP.clearTimeouts();
jP.options.before();
jP.options.beforeOpen();
jP.setMenuState(true);
jP.showMenu();
var animationChecks = {
none: (!animated)?true:false,
transitions: (animated && jP.settings.transitionsSupported)?true:false
};
if ( animationChecks.transitions || animationChecks.none ) {
if ( animationChecks.none ) jP.disableTransitions();
if ( animationChecks.transitions ) jP.enableTransitions(jP.options.openDuration, jP.options.openEasing);
var newPanelStyle = jP.computePositionStyle(true);
jP.setPanelStyle(newPanelStyle);
jP.timeouts.afterOpen = setTimeout(function(){
jP.options.after();
jP.options.afterOpen();
jP.initiateContentClickListeners();
}, jP.options.openDuration);
}
else {
var formattedEasing = jP.getJSEasingFunction(jP.options.openEasing);
var animationOptions = {};
animationOptions[jP.options.direction] = jP.options.openPosition;
$(jP.panel).stop().animate(animationOptions, jP.options.openDuration, formattedEasing, function(){
jP.options.after();
jP.options.afterOpen();
jP.initiateContentClickListeners();
});
}
},
closeMenu: function(animated) {
if ( typeof(animated) == "undefined" || animated == null ) { animated = jP.options.animated };
jP.clearTimeouts();
jP.options.before();
jP.options.beforeClose();
jP.setMenuState(false);
var animationChecks = {
none: (!animated)?true:false,
transitions: (animated && jP.settings.transitionsSupported)?true:false
};
if ( animationChecks.transitions || animationChecks.none ) {
if ( animationChecks.none ) jP.disableTransitions();
if ( animationChecks.transitions ) jP.enableTransitions(jP.options.closeDuration, jP.options.closeEasing);
var newPanelStyle = jP.computePositionStyle();
jP.setPanelStyle(newPanelStyle);
jP.timeouts.afterClose = setTimeout(function(){
jP.disableTransitions();
jP.hideMenu();
jP.options.after();
jP.options.afterClose();
jP.destroyContentClickListeners();
}, jP.options.closeDuration);
}
else {
var formattedEasing = jP.getJSEasingFunction(jP.options.closeEasing);
var animationOptions = {};
animationOptions[jP.options.direction] = 0 + jP.settings.positionUnits;
$(jP.panel).stop().animate(animationOptions, jP.options.closeDuration, formattedEasing, function(){
jP.hideMenu();
jP.options.after();
jP.options.afterClose();
jP.destroyContentClickListeners();
});
}
},
triggerMenu: function(animated) {
if ( jP.menuIsOpen() ) jP.closeMenu(animated);
else jP.openMenu(animated);
},
initiateClickListeners: function() {
$(document).on('click touchend',jP.options.trigger,function(e){
jP.triggerMenu(jP.options.animated); e.preventDefault();
});
},
destroyClickListeners: function() {
$(document).off('click touchend',jP.options.trigger,null);
},
initiateContentClickListeners: function() {
if ( !jP.options.closeOnContentClick ) return false;
$(document).on('click touchend',jP.panel,function(e){
if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);
e.preventDefault();
});
},
destroyContentClickListeners: function() {
if ( !jP.options.closeOnContentClick ) return false;
$(document).off('click touchend',jP.panel,null);
},
initiateKeyboardListeners: function() {
var preventKeyListeners = ['input', 'textarea', 'select'];
$(document).on('keydown',function(e){
var target = $(e.target),
prevent = false;
$.each(preventKeyListeners, function(){
if (target.is(this.toString())) {
prevent = true;
}
});
if ( prevent ) return true;
for ( mapping in jP.options.keyboardShortcuts ) {
if ( e.which == jP.options.keyboardShortcuts[mapping].code ) {
var key = jP.options.keyboardShortcuts[mapping];
if ( key.open && key.close ) { jP.triggerMenu(jP.options.animated); }
else if ( (key.open && !key.close) && !jP.menuIsOpen() ) { jP.openMenu(jP.options.animated); }
else if ( (!key.open && key.close) && jP.menuIsOpen() ) { jP.closeMenu(jP.options.animated); }
e.preventDefault();
}
}
});
},
destroyKeyboardListeners: function() {
$(document).off('keydown',null);
},
setupMarkup: function() {
$('html').addClass('jPanelMenu');
$(jP.options.panel + ' > *').not(jP.menu + ', ' + jP.options.excludedPanelContent).wrapAll('<div class="' + jP.panel.replace('.','') + '"/>');
var menu = ( jP.options.clone )?$(jP.options.menu).clone(jP.options.keepEventHandlers):$(jP.options.menu);
menu.attr('id', jP.menu.replace('#','')).insertAfter(jP.options.panel + ' > ' + jP.panel);
},
resetMarkup: function() {
$('html').removeClass('jPanelMenu');
$(jP.options.panel + ' > ' + jP.panel + ' > *').unwrap();
$(jP.menu).remove();
},
init: function() {
jP.options.beforeOn();
jP.setPositionUnits();
jP.setCSSPrefix();
jP.initiateClickListeners();
if ( Object.prototype.toString.call(jP.options.keyboardShortcuts) === '[object Array]' ) { jP.initiateKeyboardListeners(); }
jP.setjPanelMenuStyles();
jP.setMenuState(false);
jP.setupMarkup();
jP.setPanelStyle({ position: (( jP.options.animated && jP.settings.panelPosition === 'static' )?'relative':jP.settings.panelPosition) });
jP.setMenuStyle({ width: jP.options.openPosition });
jP.closeMenu(false);
jP.options.afterOn();
},
destroy: function() {
jP.options.beforeOff();
jP.closeMenu();
jP.destroyClickListeners();
if ( Object.prototype.toString.call(jP.options.keyboardShortcuts) === '[object Array]' ) { jP.destroyKeyboardListeners(); }
jP.resetMarkup();
var childrenStyles = {};
childrenStyles[jP.options.direction] = 'auto';
jP.options.afterOff();
}
};
return {
on: jP.init,
off: jP.destroy,
trigger: jP.triggerMenu,
open: jP.openMenu,
close: jP.closeMenu,
isOpen: jP.menuIsOpen,
menu: jP.menu,
getMenu: function() { return $(jP.menu); },
panel: jP.panel,
getPanel: function() { return $(jP.panel); },
setPosition: function(position) {
if ( typeof(position) == "undefined" || position == null ) {
position = jP.options.openPosition
}
jP.options.openPosition = position;
jP.setMenuStyle({ width: jP.options.openPosition });
}
};
};
})(jQuery);
</script>
<script type="text/javascript">
jQuery(function() {
var jPM = jQuery.jPanelMenu();
var jPM = jQuery.jPanelMenu({
menu: '#menu-selector',
trigger: '.menu-trigger-selector',
duration: 300
});
jPM.on();
})
</script>
<!-- Search autocomplete -->
<script type="text/javascript">
jQuery(function() {
var availableTags = [
"Comedy",
"Music",
"Radio"
];
jQuery( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
I'm trying to use this autocomplete search:
<script type="text/javascript">
jQuery(function() {
var availableTags = [
"Comedy",
"Music",
"Radio"
];
jQuery( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
Inside this script:
/**
*
* jPanelMenu 1.4.1 (http://jpanelmenu.com)
* By Anthony Colangelo (http://acolangelo.com)
*
* */
(function($){
$.jPanelMenu = function(options) {
if ( typeof(options) == "undefined" || options == null ) { options = {}; };
var jP = {
options: $.extend({
menu: '#menu',
panel: 'body',
trigger: '.menu-trigger',
excludedPanelContent: 'style, script',
clone: true,
keepEventHandlers: false,
direction: 'left',
openPosition: '250px',
animated: true,
closeOnContentClick: true,
keyboardShortcuts: [
{
code: 27,
open: false,
close: true
},
{
code: 37,
open: false,
close: true
},
{
code: 39,
open: true,
close: true
},
{
code: 77,
open: true,
close: true
}
],
duration: 150,
openDuration: options.duration || 150,
closeDuration: options.duration || 150,
easing: 'ease-in-out',
openEasing: options.easing || 'ease-in-out',
closeEasing: options.easing || 'ease-in-out',
before: function(){ },
beforeOpen: function(){ },
beforeClose: function(){ },
after: function(){ },
afterOpen: function(){ },
afterClose: function(){ },
beforeOn: function(){ },
afterOn: function(){ },
beforeOff: function(){ },
afterOff: function(){ }
},options),
settings: {
transitionsSupported: 'WebkitTransition' in document.body.style ||
'MozTransition' in document.body.style ||
'msTransition' in document.body.style ||
'OTransition' in document.body.style ||
'Transition' in document.body.style
,
transformsSupported: 'WebkitTransform' in document.body.style ||
'MozTransform' in document.body.style ||
'msTransform' in document.body.style ||
'OTransform' in document.body.style ||
'Transform' in document.body.style
,
cssPrefix: '',
panelPosition: 'static',
positionUnits: 'px'
},
menu: '#jPanelMenu-menu',
panel: '.jPanelMenu-panel',
timeouts: {},
clearTimeouts: function() {
clearTimeout(jP.timeouts.open);
clearTimeout(jP.timeouts.afterOpen);
clearTimeout(jP.timeouts.afterClose);
},
setPositionUnits: function() {
var foundUnit = false,
allowedUnits = ['%','px','em']
;
for (var unitID = 0; unitID < allowedUnits.length; unitID++) {
var unit = allowedUnits[unitID];
if ( jP.options.openPosition.toString().substr(-unit.length) == unit )
{
foundUnit = true;
jP.settings.positionUnits = unit;
}
}
if ( !foundUnit ) { jP.options.openPosition = parseInt(jP.options.openPosition) + jP.settings.positionUnits }
},
computePositionStyle: function(open, string) {
var position = (open)?jP.options.openPosition:'0' + jP.settings.positionUnits;
var property = {};
if ( jP.settings.transformsSupported ) {
var direction = (open && jP.options.direction == 'right')?'-':'';
var translate = 'translate3d(' + direction + position + ',0,0)';
var transform = 'transform';
if ( string ) {
property = '';
if ( jP.settings.cssPrefix != '' ) { property = jP.settings.cssPrefix + transform + ':' + translate + ';' }
property += transform + ':' + translate + ';';
} else {
if ( jP.settings.cssPrefix != '' ) { property[jP.settings.cssPrefix + transform] = translate; }
property[transform] = translate;
}
} else {
if ( string ) {
property = '';
property = jP.options.direction + ': ' + position + ';';
} else {
property[jP.options.direction] = position;
}
}
return property;
},
setCSSPrefix: function() {
jP.settings.cssPrefix = jP.getCSSPrefix();
},
setjPanelMenuStyles: function() {
var bg = 'background:#fff',
htmlBG = $('html').css('background-color'),
bodyBG = $('body').css('background-color');
var backgroundGenerator = function(element){
var bgs = [];
$.each(['background-color','background-image','background-position','background-repeat','background-attachment','background-size','background-clip'], function(i,value){
if( element.css(value) !== '' ) {
bgs.push(value+':'+element.css(value));
}
});
return bgs.join(';');
};
if ( bodyBG !== 'transparent' && bodyBG !== "rgba(0, 0, 0, 0)") {
bg = backgroundGenerator($('body'));
} else if ( htmlBG !== 'transparent' && htmlBG !== "rgba(0, 0, 0, 0)") {
bg = backgroundGenerator($('html'));
}
if ( $('#jPanelMenu-style-master').length == 0 ) {
$('body').append('<style id="jPanelMenu-style-master">body{width:100%}.jPanelMenu,body{overflow-x:hidden}#jPanelMenu-menu{display:block;position:fixed;top:0;'+jP.options.direction+':0;height:100%;z-index:-1;overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch}.jPanelMenu-panel{position:static;'+jP.options.direction+':0;top:0;z-index:2;width:100%;min-height:100%;' + bg + ';}</style>');
}
},
setMenuState: function(open) {
var position = (open)?'open':'closed';
$(jP.options.panel).attr('data-menu-position', position);
},
getMenuState: function() {
return $(jP.options.panel).attr('data-menu-position');
},
menuIsOpen: function() {
if ( jP.getMenuState() == 'open' ) return true;
else return false;
},
setMenuStyle: function(styles) {
$(jP.menu).css(styles);
},
setPanelStyle: function(styles) {
$(jP.panel).css(styles);
},
showMenu: function() {
jP.setMenuStyle({
display: 'block'
});
jP.setMenuStyle({
'z-index': '1'
});
},
hideMenu: function() {
jP.setMenuStyle({
'z-index': '-1'
});
jP.setMenuStyle({
display: 'none'
});
},
enableTransitions: function(duration, easing) {
var formattedDuration = duration/1000;
var formattedEasing = jP.getCSSEasingFunction(easing);
jP.disableTransitions();
$('body').append('<style id="jPanelMenu-style-transitions">.jPanelMenu-panel{' + jP.settings.cssPrefix + 'transition: all ' + formattedDuration + 's ' + formattedEasing + '; transition: all ' + formattedDuration + 's ' + formattedEasing + ';}</style>');
},
disableTransitions: function() {
$('#jPanelMenu-style-transitions').remove();
},
getCSSEasingFunction: function(name) {
switch ( name )
{
case 'linear':
return name;
break;
case 'ease':
return name;
break;
case 'ease-in':
return name;
break;
case 'ease-out':
return name;
break;
case 'ease-in-out':
return name;
break;
default:
return 'ease-in-out';
break;
}
},
getJSEasingFunction: function(name) {
switch ( name )
{
case 'linear':
return name;
break;
default:
return 'swing';
break;
}
},
getVendorPrefix: function() {
// Thanks to Lea Verou for this beautiful function. (http://lea.verou.me/2009/02/find-the-vendor-prefix-of-the-current-browser)
if('result' in arguments.callee) return arguments.callee.result;
var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;
var someScript = document.getElementsByTagName('script')[0];
for(var prop in someScript.style)
{
if(regex.test(prop))
{
// test is faster than match, so it's better to perform
// that on the lot and match only when necessary
return arguments.callee.result = prop.match(regex)[0];
}
}
// Nothing found so far? Webkit does not enumerate over the CSS properties of the style object.
// However (prop in style) returns the correct value, so we'll have to test for
// the precence of a specific property
if('WebkitOpacity' in someScript.style) return arguments.callee.result = 'Webkit';
if('KhtmlOpacity' in someScript.style) return arguments.callee.result = 'Khtml';
return arguments.callee.result = '';
},
getCSSPrefix: function() {
var prefix = jP.getVendorPrefix();
if ( prefix != '' ) { return '-' + prefix.toLowerCase() + '-'; }
return '';
},
openMenu: function(animated) {
if ( typeof(animated) == "undefined" || animated == null ) { animated = jP.options.animated };
jP.clearTimeouts();
jP.options.before();
jP.options.beforeOpen();
jP.setMenuState(true);
jP.showMenu();
var animationChecks = {
none: (!animated)?true:false,
transitions: (animated && jP.settings.transitionsSupported)?true:false
};
if ( animationChecks.transitions || animationChecks.none ) {
if ( animationChecks.none ) jP.disableTransitions();
if ( animationChecks.transitions ) jP.enableTransitions(jP.options.openDuration, jP.options.openEasing);
var newPanelStyle = jP.computePositionStyle(true);
jP.setPanelStyle(newPanelStyle);
jP.timeouts.afterOpen = setTimeout(function(){
jP.options.after();
jP.options.afterOpen();
jP.initiateContentClickListeners();
}, jP.options.openDuration);
}
else {
var formattedEasing = jP.getJSEasingFunction(jP.options.openEasing);
var animationOptions = {};
animationOptions[jP.options.direction] = jP.options.openPosition;
$(jP.panel).stop().animate(animationOptions, jP.options.openDuration, formattedEasing, function(){
jP.options.after();
jP.options.afterOpen();
jP.initiateContentClickListeners();
});
}
},
closeMenu: function(animated) {
if ( typeof(animated) == "undefined" || animated == null ) { animated = jP.options.animated };
jP.clearTimeouts();
jP.options.before();
jP.options.beforeClose();
jP.setMenuState(false);
var animationChecks = {
none: (!animated)?true:false,
transitions: (animated && jP.settings.transitionsSupported)?true:false
};
if ( animationChecks.transitions || animationChecks.none ) {
if ( animationChecks.none ) jP.disableTransitions();
if ( animationChecks.transitions ) jP.enableTransitions(jP.options.closeDuration, jP.options.closeEasing);
var newPanelStyle = jP.computePositionStyle();
jP.setPanelStyle(newPanelStyle);
jP.timeouts.afterClose = setTimeout(function(){
jP.disableTransitions();
jP.hideMenu();
jP.options.after();
jP.options.afterClose();
jP.destroyContentClickListeners();
}, jP.options.closeDuration);
}
else {
var formattedEasing = jP.getJSEasingFunction(jP.options.closeEasing);
var animationOptions = {};
animationOptions[jP.options.direction] = 0 + jP.settings.positionUnits;
$(jP.panel).stop().animate(animationOptions, jP.options.closeDuration, formattedEasing, function(){
jP.hideMenu();
jP.options.after();
jP.options.afterClose();
jP.destroyContentClickListeners();
});
}
},
triggerMenu: function(animated) {
if ( jP.menuIsOpen() ) jP.closeMenu(animated);
else jP.openMenu(animated);
},
initiateClickListeners: function() {
$(document).on('click touchend',jP.options.trigger,function(e){
jP.triggerMenu(jP.options.animated); e.preventDefault();
});
},
destroyClickListeners: function() {
$(document).off('click touchend',jP.options.trigger,null);
},
initiateContentClickListeners: function() {
if ( !jP.options.closeOnContentClick ) return false;
$(document).on('click touchend',jP.panel,function(e){
if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);
e.preventDefault();
});
},
destroyContentClickListeners: function() {
if ( !jP.options.closeOnContentClick ) return false;
$(document).off('click touchend',jP.panel,null);
},
initiateKeyboardListeners: function() {
var preventKeyListeners = ['input', 'textarea', 'select'];
$(document).on('keydown',function(e){
var target = $(e.target),
prevent = false;
$.each(preventKeyListeners, function(){
if (target.is(this.toString())) {
prevent = true;
}
});
if ( prevent ) return true;
for ( mapping in jP.options.keyboardShortcuts ) {
if ( e.which == jP.options.keyboardShortcuts[mapping].code ) {
var key = jP.options.keyboardShortcuts[mapping];
if ( key.open && key.close ) { jP.triggerMenu(jP.options.animated); }
else if ( (key.open && !key.close) && !jP.menuIsOpen() ) { jP.openMenu(jP.options.animated); }
else if ( (!key.open && key.close) && jP.menuIsOpen() ) { jP.closeMenu(jP.options.animated); }
e.preventDefault();
}
}
});
},
destroyKeyboardListeners: function() {
$(document).off('keydown',null);
},
setupMarkup: function() {
$('html').addClass('jPanelMenu');
$(jP.options.panel + ' > *').not(jP.menu + ', ' + jP.options.excludedPanelContent).wrapAll('<div class="' + jP.panel.replace('.','') + '"/>');
var menu = ( jP.options.clone )?$(jP.options.menu).clone(jP.options.keepEventHandlers):$(jP.options.menu);
menu.attr('id', jP.menu.replace('#','')).insertAfter(jP.options.panel + ' > ' + jP.panel);
},
resetMarkup: function() {
$('html').removeClass('jPanelMenu');
$(jP.options.panel + ' > ' + jP.panel + ' > *').unwrap();
$(jP.menu).remove();
},
init: function() {
jP.options.beforeOn();
jP.setPositionUnits();
jP.setCSSPrefix();
jP.initiateClickListeners();
if ( Object.prototype.toString.call(jP.options.keyboardShortcuts) === '[object Array]' ) { jP.initiateKeyboardListeners(); }
jP.setjPanelMenuStyles();
jP.setMenuState(false);
jP.setupMarkup();
jP.setPanelStyle({ position: (( jP.options.animated && jP.settings.panelPosition === 'static' )?'relative':jP.settings.panelPosition) });
jP.setMenuStyle({ width: jP.options.openPosition });
jP.closeMenu(false);
jP.options.afterOn();
},
destroy: function() {
jP.options.beforeOff();
jP.closeMenu();
jP.destroyClickListeners();
if ( Object.prototype.toString.call(jP.options.keyboardShortcuts) === '[object Array]' ) { jP.destroyKeyboardListeners(); }
jP.resetMarkup();
var childrenStyles = {};
childrenStyles[jP.options.direction] = 'auto';
jP.options.afterOff();
}
};
return {
on: jP.init,
off: jP.destroy,
trigger: jP.triggerMenu,
open: jP.openMenu,
close: jP.closeMenu,
isOpen: jP.menuIsOpen,
menu: jP.menu,
getMenu: function() { return $(jP.menu); },
panel: jP.panel,
getPanel: function() { return $(jP.panel); },
setPosition: function(position) {
if ( typeof(position) == "undefined" || position == null ) {
position = jP.options.openPosition
}
jP.options.openPosition = position;
jP.setMenuStyle({ width: jP.options.openPosition });
}
};
};
})(jQuery);
</script>
<script type="text/javascript">
jQuery(function() {
var jPM = jQuery.jPanelMenu();
var jPM = jQuery.jPanelMenu({
menu: '#menu-selector',
trigger: '.menu-trigger-selector',
duration: 300
});
jPM.on();
})
</script>
The HTML looks like
<div class="menu-trigger-selector"><img src="https://lh3.googleusercontent.com/-G1THV0EXgLY/VQgWdKfzIvI/AAAAAAAAAJg/_AtOhuTN9JI/s28-no/hamburger-menu-icon.png" alt="Menu Button" title="Menu Button"></div>
<div id="menu-selector" style="display:none;">
<ul class="info">
<li id="about" class="noselect">Home</li>
<li id="faq" class="noselect">About</li>
<li id="contribute" class="noselect">Contact</li>
</ul>
<ul class="login-register">
<li id="login" class="noselect">Login</li>
<li id="register" class="noselect">Register</li>
</ul>
<div class="ui-widget">
<input id="tags" placeholder="Search"></input>
</div>
<ul class="podcast-list">
<li>Main1
<ul class="podcasts">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
</ul>
</div>
<div class="container">
...
</div>
Loading resources in this order
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../jquery.once.js?v=1.2"></script>
<script src="../drupal.js?nmk3bg"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
No jquery works at all though. Scripts work fine anywhere in the body, but not inside the side menu. There are no console errors. I've tried 2 other side menus but javascript doesn't work within them either. I need help either fixing this one or finding another one that supports javascript.
I see you use $ to call jQuery. Try this, it may turn out to be helpful.
jQuery( document ).ready(function( $ ){
// Do stuff here
// For example, initialize jPanel in here
});
Let me know how this turns out.