Develop Reference

How to avoid collapse menubar and cover carousel in website?

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

jQuery Taggd plugin (Edit mode) get back value in input fields

Im using the jQuery taggd plugin, so far so good.
I modified a small bit, im using it in edit mode. So when a user types in a value in the textbox it checks if it is a URL or or string, if its a URL it runs a ajax call to a php file which scrapes some data from the url. Url title, description and image. I have created 3 hidden input fields which get populated once the ajax call is finished. Once you click on the SAVE icon it saves the data to the DOM. But i want it to display again once a user clicks on the tag again. At the moment its only displaying the value of the standard input field.
This is the taggd plugin with some small modifications:
/*!
* jQuery Taggd
* A helpful plugin that helps you adding 'tags' on images.
*
* License: MIT
*/
(function($) {
'use strict';
var defaults = {
edit: false,
align: {
x: 'center',
y: 'center'
},
handlers: {},
offset: {
left: 0,
top: 0
},
strings: {
save: '✓',
delete: '×'
}
};
var methods = {
show: function() {
var $this = $(this),
$label = $this.next();
$this.addClass('active');
$label.addClass('show').find('input').focus();
},
hide: function() {
var $this = $(this);
$this.removeClass('active');
$this.next().removeClass('show');
},
toggle: function() {
var $hover = $(this).next();
if($hover.hasClass('show')) {
methods.hide.call(this);
} else {
methods.show.call(this);
}
}
};
/****************************************************************
* TAGGD
****************************************************************/
var Taggd = function(element, options, data) {
var _this = this;
if(options.edit) {
options.handlers = {
click: function() {
_this.hide();
methods.show.call(this);
}
};
}
this.element = $(element);
this.options = $.extend(true, {}, defaults, options);
this.data = data;
this.initialized = false;
if(!this.element.height() || !this.element.width()) {
this.element.on('load', _this.initialize.bind(this));
} else this.initialize();
};
/****************************************************************
* INITIALISATION
****************************************************************/
Taggd.prototype.initialize = function() {
var _this = this;
this.initialized = true;
this.initWrapper();
this.addDOM();
if(this.options.edit) {
this.element.on('click', function(e) {
var poffset = $(this).parent().offset(),
x = (e.pageX - poffset.left) / _this.element.width(),
y = (e.pageY - poffset.top) / _this.element.height();
_this.addData({
x: x,
y: y,
text: '',
url: '',
url_title: '',
url_description: '',
url_image: ''
});
_this.show(_this.data.length - 1);
});
}
$(window).resize(function() {
_this.updateDOM();
});
};
Taggd.prototype.initWrapper = function() {
var wrapper = $('<div class="taggd-wrapper" />');
this.element.wrap(wrapper);
this.wrapper = this.element.parent('.taggd-wrapper');
};
Taggd.prototype.alterDOM = function() {
var _this = this;
this.wrapper.find('.taggd-item-hover').each(function() {
var $e = $(this),
$input = $('<input id="url" type="text" size="16" />')
.val($e.text()),
$url_title = $('<input type="text" id="url_title" class="url_title" />'),
$button_ok = $('<button />')
.html(_this.options.strings.save),
$url_description = $('<input type="text" class="url_description" id="url_description" />'),
$url_image = $('<input type="text" class="url_img" id="url_img" />'),
$url_preview = $('<div id="content"></div>'),
$button_delete = $('<button />')
.html(_this.options.strings.delete);
$button_delete.on('click', function() {
var x = $e.attr('data-x'),
y = $e.attr('data-y');
_this.data = $.grep(_this.data, function(v) {
return v.x != x || v.y != y;
});
_this.addDOM();
_this.element.triggerHandler('change');
});
// Typing URL timer
var typingTimer;
var doneTypingInterval = 2000;
$input.keyup(function() {
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
$input.keydown(function() {
clearTimeout(typingTimer);
$url_preview.empty();
});
// Process URL scrape request
function doneTyping() {
var getUrl = $input.val();
if(isURL(getUrl)) {
console.log('Typed text is a URL');
$url_preview.append('<img src="images/loader.gif" style="width:24px; padding-top:10px; height:24px; margin:0 auto;">');
// Get url data by ajax
$.post('ajax/Crawl.php', {
'url' : getUrl
},function(data) {
$url_preview.empty();
var content = '<h3 class="url_title">' + data.title + '</h3><p class="url_description" style="font-size:11px;">' + data.description + '</p><img class="url_image" src="' + data.images + '" style="width:100%; height:auto;">';
$url_preview.append(content);
$url_title.val(data.title);
$url_description.val(data.description);
$url_image.val(data.images);
console.log(content);
}, 'json');
} else {
console.log('Typed text is a string');
}
};
function isURL(url) {
var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
if(!pattern.test(url)) {
return false;
} else {
if(!/^(https?|ftp):\/\//i.test(url)) {
url = 'http://'+url;
$input.val(url);
}
return true;
}
};
$button_ok.on('click', function() {
var x = $e.attr('data-x'),
y = $e.attr('data-y'),
item = $.grep(_this.data, function(v) {
return v.x == x && v.y == y;
}).pop();
if(item) item.text = $input.val();
if(isURL(item.text)) {
if(item) item.url = item.text;
} else {
if(item) item.url = null;
}
if(item) item.url_title = $url_title.val();
if(item) item.url_description = $url_description.val();
if(item) item.url_image = $url_image.val();
_this.addDOM();
_this.element.triggerHandler('change');
//_this.hide();
});
/*$input.on('change', function() {
var x = $e.attr('data-x'),
y = $e.attr('data-y'),
item = $.grep(_this.data, function(v) {
return v.x == x && v.y == y;
}).pop();
if(item) item.text = $input.val();
_this.addDOM();
_this.element.triggerHandler('change');
});
*/
$e.empty().append($input, $button_ok, $button_delete, $url_preview, $url_title, $url_description, $url_image);
});
_this.updateDOM();
};
/****************************************************************
* DATA MANAGEMENT
****************************************************************/
Taggd.prototype.addData = function(data) {
if($.isArray(data)) {
this.data = $.merge(this.data, data);
} else {
this.data.push(data);
}
if(this.initialized) {
this.addDOM();
this.element.triggerHandler('change');
}
};
Taggd.prototype.setData = function(data) {
this.data = data;
if(this.initialized) {
this.addDOM();
}
};
Taggd.prototype.clear = function() {
if(!this.initialized) return;
this.wrapper.find('.taggd-item, .taggd-item-hover').remove();
};
/****************************************************************
* EVENTS
****************************************************************/
Taggd.prototype.on = function(event, handler) {
if(
typeof event !== 'string' ||
typeof handler !== 'function'
) return;
this.element.on(event, handler);
};
/****************************************************************
* TAGS MANAGEMENT
****************************************************************/
Taggd.prototype.iterateTags = function(a, yep) {
var func;
if($.isNumeric(a)) {
func = function(i, e) { return a === i; };
} else if(typeof a === 'string') {
func = function(i, e) { return $(e).is(a); }
} else if($.isArray(a)) {
func = function(i, e) {
var $e = $(e);
var result = false;
$.each(a, function(ai, ae) {
if(
i === ai ||
e === ae ||
$e.is(ae)
) {
result = true;
return false;
}
});
return result;
}
} else if(typeof a === 'object') {
func = function(i, e) {
var $e = $(e);
return $e.is(a);
};
} else if($.isFunction(a)) {
func = a;
} else if(!a) {
func = function() { return true; }
} else return this;
this.wrapper.find('.taggd-item').each(function(i, e) {
if(typeof yep === 'function' && func.call(this, i, e)) {
yep.call(this, i, e);
}
});
return this;
};
Taggd.prototype.show = function(a) {
return this.iterateTags(a, methods.show);
};
Taggd.prototype.hide = function(a) {
return this.iterateTags(a, methods.hide);
};
Taggd.prototype.toggle = function(a) {
return this.iterateTags(a, methods.toggle);
};
/****************************************************************
* CLEANING UP
****************************************************************/
Taggd.prototype.dispose = function() {
this.clear();
this.element.unwrap(this.wrapper);
};
/****************************************************************
* SEMI-PRIVATE
****************************************************************/
Taggd.prototype.addDOM = function() {
var _this = this;
this.clear();
this.element.css({ height: 'auto', width: 'auto' });
var height = this.element.height();
var width = this.element.width();
$.each(this.data, function(i, v) {
var $item = $('<span />');
var $hover;
if(
v.x > 1 && v.x % 1 === 0 &&
v.y > 1 && v.y % 1 === 0
) {
v.x = v.x / width;
v.y = v.y / height;
}
if(typeof v.attributes === 'object') {
$item.attr(v.attributes);
}
$item.attr({
'data-x': v.x,
'data-y': v.y
});
$item.css('position', 'absolute');
$item.addClass('taggd-item');
_this.wrapper.append($item);
if(typeof v.text === 'string' && (v.text.length > 0 || _this.options.edit)) {
$hover = $('<span class="taggd-item-hover" style="position: absolute;" />').html(v.text);
$hover.attr({
'data-x': v.x,
'data-y': v.y
});
_this.wrapper.append($hover);
}
if(typeof _this.options.handlers === 'object') {
$.each(_this.options.handlers, function(event, func) {
var handler;
if(typeof func === 'string' && methods[func]) {
handler = methods[func];
} else if(typeof func === 'function') {
handler = func;
}
$item.on(event, function(e) {
if(!handler) return;
handler.call($item, e, _this.data[i]);
});
});
}
});
this.element.removeAttr('style');
if(this.options.edit) {
this.alterDOM();
}
this.updateDOM();
};
Taggd.prototype.updateDOM = function() {
var _this = this;
this.wrapper.removeAttr('style').css({
height: this.element.height(),
width: this.element.width()
});
this.wrapper.find('span').each(function(i, e) {
var $el = $(e);
var left = $el.attr('data-x') * _this.element.width();
var top = $el.attr('data-y') * _this.element.height();
if($el.hasClass('taggd-item')) {
$el.css({
left: left - $el.outerWidth(true) / 2,
top: top - $el.outerHeight(true) / 2
});
} else if($el.hasClass('taggd-item-hover')) {
if(_this.options.align.x === 'center') {
left -= $el.outerWidth(true) / 2;
} else if(_this.options.align.x === 'right') {
left -= $el.outerWidth(true);
}
if(_this.options.align.y === 'center') {
top -= $el.outerHeight(true) / 2;
} else if(_this.options.align.y === 'bottom') {
top -= $el.outerHeight(true);
}
$el.attr('data-align', $el.outerWidth(true));
$el.css({
left: left + _this.options.offset.left,
top: top + _this.options.offset.top
});
}
});
};
/****************************************************************
* JQUERY LINK
****************************************************************/
$.fn.taggd = function(options, data) {
return new Taggd(this, options, data);
};
})(jQuery);
I thought this would do what i want, since it works with the standard text input box, using .val($e.text()), works fine but as soon as i do the same to the url_title box, for example .val($e.url_title()), i get the error below.
$input = $('<input id="url" type="text" size="16" />')
.val($e.text()),
$url_title = $('<input type="text" id="url_title" class="url_title" />'),
$button_ok = $('<button />')
.html(_this.options.strings.save),
$url_description = $('<input type="text" class="url_description" id="url_description" />'),
$url_image = $('<input type="text" class="url_img" id="url_img" />'),
$url_preview = $('<div id="content"></div>'),
$button_delete = $('<button />')
.html(_this.options.strings.delete);
But if for example i change the $url_title to
$url_title = $('<input type="text" id="url_title" class="url_title" />').val($e.url_title()),
I get a error back in the console:
Uncaught TypeError: undefined is not a function
This is the init code on the main page:
$(document).ready(function() {
var options = {
edit: true,
align: {
y: 'top'
},
offset: {
top: 15
},
handlers: {
//mouseenter: 'show',
click: 'toggle'
}
};
/*var data = [
{ x: 0.22870478413068845, y: 0.41821946169772256, text: 'Eye' },
{ x: 0.51, y: 0.5, text: 'Bird' },
{ x: 0.40, y: 0.3, text: 'Water, obviously' }
];*/
var data = [];
var taggd = $('.taggd').taggd( options, data );
taggd.on('change', function() {
console.log(taggd.data);
});
});
In the console log it logs the values fine:
[Object]0: Objecttext: "http://stackoverflow.com"url: "http://stackoverflow.com"url_description: "Q&A for professional and enthusiast programmers"url_image: "http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png?v=ea71a5211a91&a"url_title: "Stack Overflow"x: 0.41141586360266863y: 0.19444444444444445
I hope someone can shine a light on it and point me in the right direction of what i'm doing wrong.
To simplify it, i want to be able to have a title input and a description input for my tags, how would i achieve this?
Thank you.

I suspect $e.url_title() is causing the error, as far as I know, url_title() isn't a method you can call on jQuery instances.
Presumably you meant to access a variable instead.
I couldn’t find an issue in your scripts, other than the undefined function call, so I basically rewrote the whole thing myself, which seems to work: http://jsbin.com/nexujuhefo/2/edit?js,console,output
I think the problem is Taggd weird logic ;)
Fields now remember data: http://jsbin.com/hosipiyuqa/1/edit?js,console,output

Cannot fix Syntax error: Unexpected token '<'

I have been trying to fix a piece of javascript code but am not having any luck. The syntax looks correct but I keep getting an unexpected token '<' syntax error.
Please do not mark this question as a duplicate since I could not find the answer to my problem on this site.
Javascript:
// Function to get elements by class name for DOM fragment and tag name
function getElementsByClassName(objElement, strTagName, strClassName)
{
var objCollection = objElement.getElementsByTagName(strTagName);
var arReturn = [];
var strClass, arClass, iClass, iCounter;
for(iCounter=0; iCounter<objCollection.length; iCounter++)
{
strClass = objCollection[iCounter].className;
if (strClass)
{
arClass = strClass.split(' ');
for (iClass=0; iClass<arClass.length; iClass++)
{
if (arClass[iClass] == strClassName)
{
arReturn.push(objCollection[iCounter]);
break;
}
}
}
}
objCollection = null;
return (arReturn);
}
var drag = {
objCurrent : null,
arTargets : ['Fav', 'Tol', 'Rej'],
initialise : function(objNode)
{
// Add event handlers
objNode.onmousedown = drag.start;
objNode.onclick = function() {this.focus();};
objNode.onkeydown = drag.keyboardDragDrop;
document.body.onclick = drag.removePopup;
},
keyboardDragDrop : function(objEvent)
{
objEvent = objEvent || window.event;
drag.objCurrent = this;
var arChoices = ['Favourite artists', 'Tolerable artists', 'Rejected artists'];
var iKey = objEvent.keyCode;
var objItem = drag.objCurrent;
var strExisting = objItem.parentNode.getAttribute('id');
var objMenu, objChoice, iCounter;
if (iKey == 32)
{
document.onkeydown = function(){return objEvent.keyCode==38 || objEvent.keyCode==40 ? false : true;};
// Set ARIA properties
drag.objCurrent.setAttribute('aria-grabbed', 'true');
drag.objCurrent.setAttribute('aria-owns', 'popup');
// Build context menu
objMenu = document.createElement('ul');
objMenu.setAttribute('id', 'popup');
objMenu.setAttribute('role', 'menu');
for (iCounter=0; iCounter<arChoices.length; iCounter++)
{
if (drag.arTargets[iCounter] != strExisting)
{
objChoice = document.createElement('li');
objChoice.appendChild(document.createTextNode(arChoices[iCounter]));
objChoice.tabIndex = -1;
objChoice.setAttribute('role', 'menuitem');
objChoice.onmousedown = function() {drag.dropObject(this.firstChild.data.substr(0, 3));};
objChoice.onkeydown = drag.handleContext;
objChoice.onmouseover = function() {if (this.className.indexOf('hover') < 0) {this.className += ' hover';} };
objChoice.onmouseout = function() {this.className = this.className.replace(/\s*hover/, ''); };
objMenu.appendChild(objChoice);
}
}
objItem.appendChild(objMenu);
objMenu.firstChild.focus();
objMenu.firstChild.className = 'focus';
drag.identifyTargets(true);
}
},
removePopup : function()
{
document.onkeydown = null;
var objContext = document.getElementById('popup');
if (objContext)
{
objContext.parentNode.removeChild(objContext);
}
},
handleContext : function(objEvent)
{
objEvent = objEvent || window.event;
var objItem = objEvent.target || objEvent.srcElement;
var iKey = objEvent.keyCode;
var objFocus, objList, strTarget, iCounter;
// Cancel default behaviour
if (objEvent.stopPropagation)
{
objEvent.stopPropagation();
}
else if (objEvent.cancelBubble)
{
objEvent.cancelBubble = true;
}
if (objEvent.preventDefault)
{
objEvent.preventDefault();
}
else if (objEvent.returnValue)
{
objEvent.returnValue = false;
}
switch (iKey)
{
case 38 : // Down arrow
objFocus = objItem.nextSibling;
if (!objFocus)
{
objFocus = objItem.previousSibling;
}
objItem.className = '';
objFocus.focus();
objFocus.className = 'focus';
break;
case 40 : // Up arrow
objFocus = objItem.previousSibling;
if (!objFocus)
{
objFocus = objItem.nextSibling;
}
objItem.className = '';
objFocus.focus();
objFocus.className = 'focus';
break;
case 13 : // Enter
strTarget = objItem.firstChild.data.substr(0, 3);
drag.dropObject(strTarget);
break;
case 27 : // Escape
case 9 : // Tab
drag.objCurrent.removeAttribute('aria-owns');
drag.objCurrent.removeChild(objItem.parentNode);
drag.objCurrent.focus();
for (iCounter=0; iCounter<drag.arTargets.length; iCounter++)
{
objList = document.getElementById(drag.arTargets[iCounter]);
drag.objCurrent.setAttribute('aria-grabbed', 'false');
objList.removeAttribute('aria-dropeffect');
objList.className = '';
}
break;
}
},
start : function(objEvent)
{
objEvent = objEvent || window.event;
drag.removePopup();
// Initialise properties
drag.objCurrent = this;
drag.objCurrent.lastX = objEvent.clientX;
drag.objCurrent.lastY = objEvent.clientY;
drag.objCurrent.style.zIndex = '2';
drag.objCurrent.setAttribute('aria-grabbed', 'true');
document.onmousemove = drag.drag;
document.onmouseup = drag.end;
drag.identifyTargets(true);
return false;
},
drag : function(objEvent)
{
objEvent = objEvent || window.event;
// Calculate new position
var iCurrentY = objEvent.clientY;
var iCurrentX = objEvent.clientX;
var iYPos = parseInt(drag.objCurrent.style.top, 10);
var iXPos = parseInt(drag.objCurrent.style.left, 10);
var iNewX, iNewY;
iNewX = iXPos + iCurrentX - drag.objCurrent.lastX;
iNewY = iYPos + iCurrentY - drag.objCurrent.lastY;
drag.objCurrent.style.left = iNewX + 'px';
drag.objCurrent.style.top = iNewY + 'px';
drag.objCurrent.lastX = iCurrentX;
drag.objCurrent.lastY = iCurrentY;
return false;
},
calculatePosition : function (objElement, strOffset)
{
var iOffset = 0;
// Get offset position in relation to parent nodes
if (objElement.offsetParent)
{
do
{
iOffset += objElement[strOffset];
objElement = objElement.offsetParent;
} while (objElement);
}
return iOffset;
},
identifyTargets : function (bHighlight)
{
var strExisting = drag.objCurrent.parentNode.getAttribute('id');
var objList, iCounter;
// Highlight the targets for the current drag item
for (iCounter=0; iCounter<drag.arTargets.length; iCounter++)
{
objList = document.getElementById(drag.arTargets[iCounter]);
if (bHighlight && drag.arTargets[iCounter] != strExisting)
{
objList.className = 'highlight';
objList.setAttribute('aria-dropeffect', 'move');
}
else
{
objList.className = '';
objList.removeAttribute('aria-dropeffect');
}
}
},
getTarget : function()
{
var strExisting = drag.objCurrent.parentNode.getAttribute('id');
var iCurrentLeft = drag.calculatePosition(drag.objCurrent, 'offsetLeft');
var iCurrentTop = drag.calculatePosition(drag.objCurrent, 'offsetTop');
var iTolerance = 40;
var objList, iLeft, iRight, iTop, iBottom, iCounter;
for (iCounter=0; iCounter<drag.arTargets.length; iCounter++)
{
if (drag.arTargets[iCounter] != strExisting)
{
// Get position of the list
objList = document.getElementById(drag.arTargets[iCounter]);
iLeft = drag.calculatePosition(objList, 'offsetLeft') - iTolerance;
iRight = iLeft + objList.offsetWidth + iTolerance;
iTop = drag.calculatePosition(objList, 'offsetTop') - iTolerance;
iBottom = iTop + objList.offsetHeight + iTolerance;
// Determine if current object is over the target
if (iCurrentLeft > iLeft && iCurrentLeft < iRight && iCurrentTop > iTop && iCurrentTop < iBottom)
{
return drag.arTargets[iCounter];
}
}
}
// Current object is not over a target
return '';
},
dropObject : function(strTarget)
{
var objClone, objOriginal, objTarget, objEmpty, objBands, objItem;
drag.removePopup();
if (strTarget.length > 0)
{
// Copy node to new target
objOriginal = drag.objCurrent.parentNode;
objClone = drag.objCurrent.cloneNode(true);
// Remove previous attributes
objClone.removeAttribute('style');
objClone.className = objClone.className.replace(/\s*focused/, '');
objClone.className = objClone.className.replace(/\s*hover/, '');
// Add focus indicators
objClone.onfocus = function() {this.className += ' focused'; };
objClone.onblur = function() {this.className = this.className.replace(/\s*focused/, '');};
objClone.onmouseover = function() {if (this.className.indexOf('hover') < 0) {this.className += ' hover';} };
objClone.onmouseout = function() {this.className = this.className.replace(/\s*hover/, ''); };
objTarget = document.getElementById(strTarget);
objOriginal.removeChild(drag.objCurrent);
objTarget.appendChild(objClone);
drag.objCurrent = objClone;
drag.initialise(objClone);
// Remove empty node if there are artists in list
objEmpty = getElementsByClassName(objTarget, 'li', 'empty');
if (objEmpty[0])
{
objTarget.removeChild(objEmpty[0]);
}
// Add an empty node if there are no artists in list
objBands = objOriginal.getElementsByTagName('li');
if (objBands.length === 0)
{
objItem = document.createElement('li');
objItem.appendChild(document.createTextNode('None'));
objItem.className = 'empty';
objOriginal.appendChild(objItem);
}
}
// Reset properties
drag.objCurrent.style.left = '0px';
drag.objCurrent.style.top = '0px';
drag.objCurrent.style.zIndex = 'auto';
drag.objCurrent.setAttribute('aria-grabbed', 'false');
drag.objCurrent.removeAttribute('aria-owns');
drag.identifyTargets(false);
},
end : function()
{
var strTarget = drag.getTarget();
drag.dropObject(strTarget);
document.onmousemove = null;
document.onmouseup = null;
drag.objCurrent = null;
}
};
function init ()
{
var objItems = getElementsByClassName(document, 'li', 'draggable');
var objItem, iCounter;
for (iCounter=0; iCounter<objItems.length; iCounter++)
{
// Set initial values so can be moved
objItems[iCounter].style.top = '0px';
objItems[iCounter].style.left = '0px';
// Put the list items into the keyboard tab order
objItems[iCounter].tabIndex = 0;
// Set ARIA attributes for artists
objItems[iCounter].setAttribute('aria-grabbed', 'false');
objItems[iCounter].setAttribute('aria-haspopup', 'true');
objItems[iCounter].setAttribute('role', 'listitem');
// Provide a focus indicator
objItems[iCounter].onfocus = function() {this.className += ' focused'; };
objItems[iCounter].onblur = function() {this.className = this.className.replace(/\s*focused/, '');};
objItems[iCounter].onmouseover = function() {if (this.className.indexOf('hover') < 0) {this.className += ' hover';} };
objItems[iCounter].onmouseout = function() {this.className = this.className.replace(/\s*hover/, ''); };
drag.initialise(objItems[iCounter]);
}
// Set ARIA properties on the drag and drop list, and set role of this region to application
for (iCounter=0; iCounter<drag.arTargets.length; iCounter++)
{
objItem = document.getElementById(drag.arTargets[iCounter]);
objItem.setAttribute('aria-labelledby', drag.arTargets[iCounter] + 'h');
objItem.setAttribute('role', 'list');
}
objItem = document.getElementById('dragdrop');
objItem.setAttribute('role', 'application');
objItems = null;
}
window.onload = init;

This type of problem usually occurs when issuing an AJAX request which expects JSON or JavaScript as a response but it receives HTML in stead.
When expecting JSON or JavaScript the text of the response must be "eval"-uated by a JavaScript parser. If HTML code is received and evaluated as JSON or JavaScript, the presence of a lower than < or a greater than > symbol will cause errors.

S3Slider jQuery Stop After One Rotation

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/

Hide go to top button when page is fully scrolled to the top

I have a button on my wordpress theme homepage that is used for going to the top of the page. I want to hide it when page is fully scrolled to the top. Here is my code:
(function($) {
var version = '#VERSION',
defaults = {
exclude: [],
excludeWithin:[],
offset: 0,
direction: 'top', // one of 'top' or 'left'
scrollElement: null, // jQuery set of elements you wish to scroll (for $.smoothScroll).
// if null (default), $('html, body').firstScrollable() is used.
scrollTarget: null, // only use if you want to override default behavior
beforeScroll: function() {}, // fn(opts) function to be called before scrolling occurs. "this" is the element(s) being scrolled
afterScroll: function() {}, // fn(opts) function to be called after scrolling occurs. "this" is the triggering element
easing: 'swing',
speed: 600,
autoCoefficent: 2 // coefficient for "auto" speed
},
getScrollable = function(opts) {
var scrollable = [],
scrolled = false,
dir = opts.dir && opts.dir == 'left' ? 'scrollLeft' : 'scrollTop';
this.each(function() {
if (this == document || this == window) { return; }
var el = $(this);
if ( el[dir]() > 0 ) {
scrollable.push(this);
} else {
// if scroll(Top|Left) === 0, nudge the element 1px and see if it moves
el[dir](1);
scrolled = el[dir]() > 0;
if ( scrolled ) {
scrollable.push(this);
}
// then put it back, of course
el[dir](0);
}
});
// If no scrollable elements, fall back to <body>,
// if it's in the jQuery collection
// (doing this because Safari sets scrollTop async,
// so can't set it to 1 and immediately get the value.)
if (!scrollable.length) {
this.each(function(index) {
if (this.nodeName === 'BODY') {
scrollable = [this];
}
});
}
// Use the first scrollable element if we're calling firstScrollable()
if ( opts.el === 'first' && scrollable.length > 1 ) {
scrollable = [ scrollable[0] ];
}
return scrollable;
},
isTouch = 'ontouchend' in document;
$.fn.extend({
scrollable: function(dir) {
var scrl = getScrollable.call(this, {dir: dir});
return this.pushStack(scrl);
},
firstScrollable: function(dir) {
var scrl = getScrollable.call(this, {el: 'first', dir: dir});
return this.pushStack(scrl);
},
smoothScroll: function(options) {
options = options || {};
var opts = $.extend({}, $.fn.smoothScroll.defaults, options),
locationPath = $.smoothScroll.filterPath(location.pathname);
this
.unbind('click.smoothscroll')
.bind('click.smoothscroll', function(event) {
var link = this,
$link = $(this),
exclude = opts.exclude,
excludeWithin = opts.excludeWithin,
elCounter = 0, ewlCounter = 0,
include = true,
clickOpts = {},
hostMatch = ((location.hostname === link.hostname) || !link.hostname),
pathMatch = opts.scrollTarget || ( $.smoothScroll.filterPath(link.pathname) || locationPath ) === locationPath,
thisHash = escapeSelector(link.hash);
if ( !opts.scrollTarget && (!hostMatch || !pathMatch || !thisHash) ) {
include = false;
} else {
while (include && elCounter < exclude.length) {
if ($link.is(escapeSelector(exclude[elCounter++]))) {
include = false;
}
}
while ( include && ewlCounter < excludeWithin.length ) {
if ($link.closest(excludeWithin[ewlCounter++]).length) {
include = false;
}
}
}
if ( include ) {
event.preventDefault();
$.extend( clickOpts, opts, {
scrollTarget: opts.scrollTarget || thisHash,
link: link
});
$.smoothScroll( clickOpts );
}
});
return this;
}
});
$.smoothScroll = function(options, px) {
var opts, $scroller, scrollTargetOffset, speed,
scrollerOffset = 0,
offPos = 'offset',
scrollDir = 'scrollTop',
aniProps = {},
aniOpts = {},
scrollprops = [];
if ( typeof options === 'number') {
opts = $.fn.smoothScroll.defaults;
scrollTargetOffset = options;
} else {
opts = $.extend({}, $.fn.smoothScroll.defaults, options || {});
if (opts.scrollElement) {
offPos = 'position';
if (opts.scrollElement.css('position') == 'static') {
opts.scrollElement.css('position', 'relative');
}
}
scrollTargetOffset = px ||
( $(opts.scrollTarget)[offPos]() &&
$(opts.scrollTarget)[offPos]()[opts.direction] ) ||
0;
}
opts = $.extend({link: null}, opts);
scrollDir = opts.direction == 'left' ? 'scrollLeft' : scrollDir;
if ( opts.scrollElement ) {
$scroller = opts.scrollElement;
scrollerOffset = $scroller[scrollDir]();
} else {
$scroller = $('html, body').firstScrollable();
}
aniProps[scrollDir] = scrollTargetOffset + scrollerOffset + opts.offset;
opts.beforeScroll.call($scroller, opts);
speed = opts.speed;
// automatically calculate the speed of the scroll based on distance / coefficient
if (speed === 'auto') {
// if aniProps[scrollDir] == 0 then we'll use scrollTop() value instead
speed = aniProps[scrollDir] || $scroller.scrollTop();
// divide the speed by the coefficient
speed = speed / opts.autoCoefficent;
}
aniOpts = {
duration: speed,
easing: opts.easing,
complete: function() {
opts.afterScroll.call(opts.link, opts);
}
};
if (opts.step) {
aniOpts.step = opts.step;
}
if ($scroller.length) {
$scroller.stop().animate(aniProps, aniOpts);
} else {
opts.afterScroll.call(opts.link, opts);
}
};
$.smoothScroll.version = version;
$.smoothScroll.filterPath = function(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
};
// default options
$.fn.smoothScroll.defaults = defaults;
function escapeSelector (str) {
return str.replace(/(:|\.)/g,'\\$1');
}
})(jQuery);
your help will be highly appreciated.

I'm guessing this is based on user events so something like this to cover mousescroll and scroll
$(window).bind( "mousewheel DOMMouseScroll scroll", function(e){
if (document.body.scrollTop == 0) {
// do this
}
})