Sidebar doesn't works when click [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i made a sidebar for my webapplication, it works well when i slide it, but it doesn't work when i click on the button on the left, can you help me?
with this, in my "eventi.php" file, the bar should opens.
this is the stile.css
#open-left {
background: url(open.png) center center no-repeat;
display: block;
width: 44px;
height: 44px;
}
this is the snap.js
(function(win, doc) {
'use strict';
var Snap = Snap || function(userOpts) {
var settings = {
element: null,
dragger: null,
disable: 'right',
addBodyClasses: true,
hyperextensible: true,
resistance: 0.5,
flickThreshold: 50,
transitionSpeed: 0.3,
easing: 'ease',
maxPosition: 266,
minPosition: -266,
tapToClose: true,
touchToDrag: true,
slideIntent: 40, // degrees
minDragDistance: 5
},
cache = {
simpleStates: {
opening: null,
towards: null,
hyperExtending: null,
halfway: null,
flick: null,
translation: {
absolute: 0,
relative: 0,
sinceDirectionChange: 0,
percentage: 0
}
}
},
eventList = {},
utils = {
hasTouch: ('ontouchstart' in doc.documentElement || win.navigator.msPointerEnabled),
eventType: function(action) {
var eventTypes = {
down: (utils.hasTouch ? 'touchstart' : 'mousedown'),
move: (utils.hasTouch ? 'touchmove' : 'mousemove'),
up: (utils.hasTouch ? 'touchend' : 'mouseup'),
out: (utils.hasTouch ? 'touchcancel' : 'mouseout')
};
return eventTypes[action];
},
page: function(t, e){
return (utils.hasTouch && e.touches.length && e.touches[0]) ? e.touches[0]['page'+t] : e['page'+t];
},
klass: {
has: function(el, name){
return (el.className).indexOf(name) !== -1;
},
add: function(el, name){
if(!utils.klass.has(el, name) && settings.addBodyClasses){
el.className += " "+name;
}
},
remove: function(el, name){
if(settings.addBodyClasses){
el.className = (el.className).replace(name, "").replace(/^\s+|\s+$/g, '');
}
}
},
dispatchEvent: function(type) {
if (typeof eventList[type] === 'function') {
return eventList[type].call();
}
},
vendor: function(){
var tmp = doc.createElement("div"),
prefixes = 'webkit Moz O ms'.split(' '),
i;
for (i in prefixes) {
if (typeof tmp.style[prefixes[i] + 'Transition'] !== 'undefined') {
return prefixes[i];
}
}
},
transitionCallback: function(){
return (cache.vendor==='Moz' || cache.vendor==='ms') ? 'transitionend' : cache.vendor+'TransitionEnd';
},
canTransform: function(){
return typeof settings.element.style[cache.vendor+'Transform'] !== 'undefined';
},
deepExtend: function(destination, source) {
var property;
for (property in source) {
if (source[property] && source[property].constructor && source[property].constructor === Object) {
destination[property] = destination[property] || {};
utils.deepExtend(destination[property], source[property]);
} else {
destination[property] = source[property];
}
}
return destination;
},
angleOfDrag: function(x, y) {
var degrees, theta;
// Calc Theta
theta = Math.atan2(-(cache.startDragY - y), (cache.startDragX - x));
if (theta < 0) {
theta += 2 * Math.PI;
}
// Calc Degrees
degrees = Math.floor(theta * (180 / Math.PI) - 180);
if (degrees < 0 && degrees > -180) {
degrees = 360 - Math.abs(degrees);
}
return Math.abs(degrees);
},
events: {
addEvent: function addEvent(element, eventName, func) {
if (element.addEventListener) {
return element.addEventListener(eventName, func, false);
} else if (element.attachEvent) {
return element.attachEvent("on" + eventName, func);
}
},
removeEvent: function addEvent(element, eventName, func) {
if (element.addEventListener) {
return element.removeEventListener(eventName, func, false);
} else if (element.attachEvent) {
return element.detachEvent("on" + eventName, func);
}
},
prevent: function(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
},
parentUntil: function(el, attr) {
var isStr = typeof attr === 'string';
while (el.parentNode) {
if (isStr && el.getAttribute && el.getAttribute(attr)){
return el;
} else if(!isStr && el === attr){
return el;
}
el = el.parentNode;
}
return null;
}
},
action = {
translate: {
get: {
matrix: function(index) {
if( !utils.canTransform() ){
return parseInt(settings.element.style.left, 10);
} else {
var matrix = win.getComputedStyle(settings.element)[cache.vendor+'Transform'].match(/\((.*)\)/),
ieOffset = 8;
if (matrix) {
matrix = matrix[1].split(',');
if(matrix.length===16){
index+=ieOffset;
}
return parseInt(matrix[index], 10);
}
return 0;
}
}
},
easeCallback: function(){
settings.element.style[cache.vendor+'Transition'] = '';
cache.translation = action.translate.get.matrix(4);
cache.easing = false;
clearInterval(cache.animatingInterval);
if(cache.easingTo===0){
utils.klass.remove(doc.body, 'snapjs-right');
utils.klass.remove(doc.body, 'snapjs-left');
}
utils.dispatchEvent('animated');
utils.events.removeEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback);
},
easeTo: function(n) {
if( !utils.canTransform() ){
cache.translation = n;
action.translate.x(n);
} else {
cache.easing = true;
cache.easingTo = n;
settings.element.style[cache.vendor+'Transition'] = 'all ' + settings.transitionSpeed + 's ' + settings.easing;
cache.animatingInterval = setInterval(function() {
utils.dispatchEvent('animating');
}, 1);
utils.events.addEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback);
action.translate.x(n);
}
if(n===0){
settings.element.style[cache.vendor+'Transform'] = '';
}
},
x: function(n) {
if( (settings.disable==='left' && n>0) ||
(settings.disable==='right' && n<0)
){ return; }
if( !settings.hyperextensible ){
if( n===settings.maxPosition || n>settings.maxPosition ){
n=settings.maxPosition;
} else if( n===settings.minPosition || n<settings.minPosition ){
n=settings.minPosition;
}
}
n = parseInt(n, 10);
if(isNaN(n)){
n = 0;
}
if( utils.canTransform() ){
var theTranslate = 'translate3d(' + n + 'px, 0,0)';
settings.element.style[cache.vendor+'Transform'] = theTranslate;
} else {
settings.element.style.width = (win.innerWidth || doc.documentElement.clientWidth)+'px';
settings.element.style.left = n+'px';
settings.element.style.right = '';
}
}
},
drag: {
listen: function() {
cache.translation = 0;
cache.easing = false;
utils.events.addEvent(settings.element, utils.eventType('down'), action.drag.startDrag);
utils.events.addEvent(settings.element, utils.eventType('move'), action.drag.dragging);
utils.events.addEvent(settings.element, utils.eventType('up'), action.drag.endDrag);
},
stopListening: function() {
utils.events.removeEvent(settings.element, utils.eventType('down'), action.drag.startDrag);
utils.events.removeEvent(settings.element, utils.eventType('move'), action.drag.dragging);
utils.events.removeEvent(settings.element, utils.eventType('up'), action.drag.endDrag);
},
startDrag: function(e) {
// No drag on ignored elements
var target = e.target ? e.target : e.srcElement,
ignoreParent = utils.parentUntil(target, 'data-snap-ignore');
if (ignoreParent) {
utils.dispatchEvent('ignore');
return;
}
if(settings.dragger){
var dragParent = utils.parentUntil(target, settings.dragger);
// Only use dragger if we're in a closed state
if( !dragParent &&
(cache.translation !== settings.minPosition &&
cache.translation !== settings.maxPosition
)){
return;
}
}
utils.dispatchEvent('start');
settings.element.style[cache.vendor+'Transition'] = '';
cache.isDragging = true;
cache.hasIntent = null;
cache.intentChecked = false;
cache.startDragX = utils.page('X', e);
cache.startDragY = utils.page('Y', e);
cache.dragWatchers = {
current: 0,
last: 0,
hold: 0,
state: ''
};
cache.simpleStates = {
opening: null,
towards: null,
hyperExtending: null,
halfway: null,
flick: null,
translation: {
absolute: 0,
relative: 0,
sinceDirectionChange: 0,
percentage: 0
}
};
},
dragging: function(e) {
if (cache.isDragging && settings.touchToDrag) {
var thePageX = utils.page('X', e),
thePageY = utils.page('Y', e),
translated = cache.translation,
absoluteTranslation = action.translate.get.matrix(4),
whileDragX = thePageX - cache.startDragX,
openingLeft = absoluteTranslation > 0,
translateTo = whileDragX,
diff;
// Shown no intent already
if((cache.intentChecked && !cache.hasIntent)){
return;
}
if(settings.addBodyClasses){
if((absoluteTranslation)>0){
utils.klass.add(doc.body, 'snapjs-left');
utils.klass.remove(doc.body, 'snapjs-right');
} else if((absoluteTranslation)<0){
utils.klass.add(doc.body, 'snapjs-right');
utils.klass.remove(doc.body, 'snapjs-left');
}
}
if (cache.hasIntent === false || cache.hasIntent === null) {
var deg = utils.angleOfDrag(thePageX, thePageY),
inRightRange = (deg >= 0 && deg <= settings.slideIntent) || (deg <= 360 && deg > (360 - settings.slideIntent)),
inLeftRange = (deg >= 180 && deg <= (180 + settings.slideIntent)) || (deg <= 180 && deg >= (180 - settings.slideIntent));
if (!inLeftRange && !inRightRange) {
cache.hasIntent = false;
} else {
cache.hasIntent = true;
}
cache.intentChecked = true;
}
if (
(settings.minDragDistance>=Math.abs(thePageX-cache.startDragX)) || // Has user met minimum drag distance?
(cache.hasIntent === false)
) {
return;
}
utils.events.prevent(e);
utils.dispatchEvent('drag');
cache.dragWatchers.current = thePageX;
// Determine which direction we are going
if (cache.dragWatchers.last > thePageX) {
if (cache.dragWatchers.state !== 'left') {
cache.dragWatchers.state = 'left';
cache.dragWatchers.hold = thePageX;
}
cache.dragWatchers.last = thePageX;
} else if (cache.dragWatchers.last < thePageX) {
if (cache.dragWatchers.state !== 'right') {
cache.dragWatchers.state = 'right';
cache.dragWatchers.hold = thePageX;
}
cache.dragWatchers.last = thePageX;
}
if (openingLeft) {
// Pulling too far to the right
if (settings.maxPosition < absoluteTranslation) {
diff = (absoluteTranslation - settings.maxPosition) * settings.resistance;
translateTo = whileDragX - diff;
}
cache.simpleStates = {
opening: 'left',
towards: cache.dragWatchers.state,
hyperExtending: settings.maxPosition < absoluteTranslation,
halfway: absoluteTranslation > (settings.maxPosition / 2),
flick: Math.abs(cache.dragWatchers.current - cache.dragWatchers.hold) > settings.flickThreshold,
translation: {
absolute: absoluteTranslation,
relative: whileDragX,
sinceDirectionChange: (cache.dragWatchers.current - cache.dragWatchers.hold),
percentage: (absoluteTranslation/settings.maxPosition)*100
}
};
} else {
// Pulling too far to the left
if (settings.minPosition > absoluteTranslation) {
diff = (absoluteTranslation - settings.minPosition) * settings.resistance;
translateTo = whileDragX - diff;
}
cache.simpleStates = {
opening: 'right',
towards: cache.dragWatchers.state,
hyperExtending: settings.minPosition > absoluteTranslation,
halfway: absoluteTranslation < (settings.minPosition / 2),
flick: Math.abs(cache.dragWatchers.current - cache.dragWatchers.hold) > settings.flickThreshold,
translation: {
absolute: absoluteTranslation,
relative: whileDragX,
sinceDirectionChange: (cache.dragWatchers.current - cache.dragWatchers.hold),
percentage: (absoluteTranslation/settings.minPosition)*100
}
};
}
action.translate.x(translateTo + translated);
}
},
endDrag: function(e) {
if (cache.isDragging) {
utils.dispatchEvent('end');
var translated = action.translate.get.matrix(4);
// Tap Close
if (cache.dragWatchers.current === 0 && translated !== 0 && settings.tapToClose) {
utils.dispatchEvent('close');
utils.events.prevent(e);
action.translate.easeTo(0);
cache.isDragging = false;
cache.startDragX = 0;
return;
}
// Revealing Left
if (cache.simpleStates.opening === 'left') {
// Halfway, Flicking, or Too Far Out
if ((cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick)) {
if (cache.simpleStates.flick && cache.simpleStates.towards === 'left') { // Flicking Closed
action.translate.easeTo(0);
} else if (
(cache.simpleStates.flick && cache.simpleStates.towards === 'right') || // Flicking Open OR
(cache.simpleStates.halfway || cache.simpleStates.hyperExtending) // At least halfway open OR hyperextending
) {
action.translate.easeTo(settings.maxPosition); // Open Left
}
} else {
action.translate.easeTo(0); // Close Left
}
// Revealing Right
} else if (cache.simpleStates.opening === 'right') {
// Halfway, Flicking, or Too Far Out
if ((cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick)) {
if (cache.simpleStates.flick && cache.simpleStates.towards === 'right') { // Flicking Closed
action.translate.easeTo(0);
} else if (
(cache.simpleStates.flick && cache.simpleStates.towards === 'left') || // Flicking Open OR
(cache.simpleStates.halfway || cache.simpleStates.hyperExtending) // At least halfway open OR hyperextending
) {
action.translate.easeTo(settings.minPosition); // Open Right
}
} else {
action.translate.easeTo(0); // Close Right
}
}
cache.isDragging = false;
cache.startDragX = utils.page('X', e);
}
}
}
},
init = function(opts) {
if (opts.element) {
utils.deepExtend(settings, opts);
cache.vendor = utils.vendor();
action.drag.listen();
}
};
/*
* Public
*/
this.open = function(side) {
utils.dispatchEvent('open');
utils.klass.remove(doc.body, 'snapjs-expand-left');
utils.klass.remove(doc.body, 'snapjs-expand-right');
if (side === 'left') {
cache.simpleStates.opening = 'left';
cache.simpleStates.towards = 'right';
utils.klass.add(doc.body, 'snapjs-left');
utils.klass.remove(doc.body, 'snapjs-right');
action.translate.easeTo(settings.maxPosition);
} else if (side === 'right') {
cache.simpleStates.opening = 'right';
cache.simpleStates.towards = 'left';
utils.klass.remove(doc.body, 'snapjs-left');
utils.klass.add(doc.body, 'snapjs-right');
action.translate.easeTo(settings.minPosition);
}
};
this.close = function() {
utils.dispatchEvent('close');
action.translate.easeTo(0);
};
this.expand = function(side){
var to = win.innerWidth || doc.documentElement.clientWidth;
if(side==='left'){
utils.dispatchEvent('expandLeft');
utils.klass.add(doc.body, 'snapjs-expand-left');
utils.klass.remove(doc.body, 'snapjs-expand-right');
} else {
utils.dispatchEvent('expandRight');
utils.klass.add(doc.body, 'snapjs-expand-right');
utils.klass.remove(doc.body, 'snapjs-expand-left');
to *= -1;
}
action.translate.easeTo(to);
};
this.on = function(evt, fn) {
eventList[evt] = fn;
return this;
};
this.off = function(evt) {
if (eventList[evt]) {
eventList[evt] = false;
}
};
this.enable = function() {
utils.dispatchEvent('enable');
action.drag.listen();
};
this.disable = function() {
utils.dispatchEvent('disable');
action.drag.stopListening();
};
this.settings = function(opts){
utils.deepExtend(settings, opts);
};
this.state = function() {
var state,
fromLeft = action.translate.get.matrix(4);
if (fromLeft === settings.maxPosition) {
state = 'left';
} else if (fromLeft === settings.minPosition) {
state = 'right';
} else {
state = 'closed';
}
return {
state: state,
info: cache.simpleStates
};
};
init(userOpts);
};
if ((typeof module !== 'undefined') && module.exports) {
module.exports = Snap;
}
if (typeof ender === 'undefined') {
this.Snap = Snap;
}
if ((typeof define === "function") && define.amd) {
define("snap", [], function() {
return Snap;
});
}
}).call(this, window, document);
i found that project on http://github.com/jakiestfu/Snap.js/

Write a toggle function with a click event for open-left: https://github.com/jakiestfu/Snap.js/#faq

Related

Uncaught TypeError: Cannot read property 'show' of undefined on the float box

I am getting the following error on all browsers while opening the float box and then it cannot be closed. You need to refresh the page. There was no problem before. It was working fine. Now, I've been getting this error ever since I adapted the new design to the site. How can fix this problem? Thank you.
Uncaught TypeError: Cannot read property 'show' of undefined
// disabling/enabling
jQuery.fn.extend({
disable: function() {
this.each(function()
{
this.disabled = true;
if ( this.tagName != 'INPUT' && this.tagName != 'TEXTAREA' && this.tagName != 'SELECT' )
{
this.jQuery_disabled_clone =
jQuery(this)
.addClass('disabled')
.clone()
.removeAttr('id')
.get(0);
jQuery(this)
.hide()
.bind('unload', function(){
jQuery(this).enable();
})
.after(this.jQuery_disabled_clone);
}
});
return this;
},
enable: function()
{
this.each(function()
{
this.disabled = false;
if ( this.jQuery_disabled_clone )
{
jQuery(this.jQuery_disabled_clone).remove();
this.jQuery_disabled_clone = null;
jQuery(this)
.unbind('unload', function(){
jQuery(this).enable();
})
.removeClass('disabled')
.show();
}
});
return this;
}
});
function SK_Exception(message, code)
{
this.toString = function() {
return message;
}
this.getCode = function() {
return code;
}
}
function SK_drawError(err_msg, delay) {
SK_drawMessage(err_msg, 'error', delay);
}
function SK_drawMessage(msg_text, type, delay)
{
if (navigator.appName == 'Microsoft Internet Explorer' && (msg_text == "Virtual gift has been sent" || msg_text == "Hediyeniz başarıyla gönderildi.." || msg_text == "Virtual gift has not been sent" || msg_text == "Hediyeniz gönderilemedi.."))
alert(msg_text);
type = type || 'message';
delay = delay || (1000*10);
if (SK_drawMessage.in_process) {
if (msg_text) {
SK_drawMessage.queue.unshift([msg_text, type, delay]);
}
return;
}
if (!msg_text) {
var item = SK_drawMessage.queue.shift();
if (!item) {
return;
}
msg_text = item[0];
type = item[1];
delay = item[2];
}
SK_drawMessage.in_process = true;
// getting draw position
var $last = jQuery('.macos_msg_node:last');
var top_pos = (!$last.length) ? 0 : $last.position().top + $last.outerHeight() + 2;
var $msg_block =
// creating message block
jQuery('<div class="macos_msg_node macos_'+type+'" style="display: none"></div>')
.appendTo('body')
.html(msg_text)
.prepend('<a class="close_btn" href="#"></a>')
.css('top', top_pos)
.fadeTo(50, 0.1, function() {
jQuery(this).css('display', '');
SK_drawMessage.in_process = false;
SK_drawMessage();
jQuery(this).fadeTo(300, 1, function() {
if (delay > 0) {
window.setTimeout(function() {
try {
$msg_block.fadeOut(2500, function() {
jQuery(this).remove();
});
} catch (e) {alert(e);}
}, delay);
}
});
});
$msg_block.children('.close_btn')
.click(function() {
jQuery(this).parent().fadeOut(100, function() {
jQuery(this).remove();
});
return false;
}
);
}
SK_drawMessage.in_process = false;
SK_drawMessage.queue = [];
/**
* Float box constructor.
*
* #param string|jQuery $title
* #param string|jQuery $contents
* #param jQuery $controls
* #param object position {top, left} = center
* #param integer width = auto
* #param integer height = auto
*/
function SK_FloatBox(options)
{
var fb_class;
if (typeof document.body.style.maxHeight === 'undefined') { //if IE 6
jQuery('body').css({height: '100%', width: '100%'});
jQuery('html').css('overflow', 'hidden');
if (document.getElementById('floatbox_HideSelect') === null) { //iframe to hide select elements in ie6
jQuery('body').append('<iframe id="floatbox_HideSelect"></iframe><div id="floatbox_overlay"></div>');
fb_class = SK_FloatBox.detectMacXFF() ? 'floatbox_overlayMacFFBGHack' : 'floatbox_overlayBG';
jQuery('#floatbox_overlay').addClass(fb_class);
}
}
else { //all others
if (document.getElementById('floatbox_overlay') === null) {
jQuery('body').append('<div id="floatbox_overlay"></div>');
fb_class = SK_FloatBox.detectMacXFF() ? 'floatbox_overlayMacFFBGHack' : 'floatbox_overlayBG';
jQuery('#floatbox_overlay').addClass(fb_class);
}
}
jQuery('body').css('overflow', 'hidden');
this.$container = jQuery('.floatbox_container', '#sk-floatbox-block-prototype').clone().appendTo('body');
this.$header = this.$container.find('.block_cap_title');
if (typeof options.$title == 'string') {
options.$title = jQuery('<span>'+options.$title+'</span>');
}
else {
this.$title_parent = options.$title.parent();
}
this.$header.append(options.$title);
this.$body = this.$container.find('.block_body_c');
if (typeof options.$contents == 'string') {
options.$contents = jQuery('<span>'+options.$contents+'</span>');
}
else {
this.$contents_parent = options.$contents.parent();
}
this.$body.append(options.$contents);
this.$bottom = this.$container.find('.block_bottom_c');
if (options.$controls) {
if (typeof options.$controls == 'string') {
options.$controls = jQuery('<span>'+options.$controls+'</span>');
}
else {
this.$controls_parent = options.$controls.parent();
}
this.$bottom.append(options.$controls);
}
if (options.width)
this.$container.css("width", options.width);
if (options.height)
this.$container.css("height", options.height);
var fl_box = this;
jQuery('.close_btn', this.$container.find('.floatbox_header'))
.one('click', function() {
fl_box.close();
return false;
});
this.esc_listener =
function(event) {
if (event.keyCode == 27) {
fl_box.close();
return false;
}
return true;
}
jQuery(document).bind('keydown', this.esc_listener);
this.$container
.fadeTo(1, 0.1, function()
{
var $this = jQuery(this);
$this.css('display', 'block');
if (options.position) {
$this.css(options.position);
}
else {
var position = {
top:((jQuery(window).height()/2) - ($this.height()/2))/*.ceil()*/,
left:((jQuery(window).width()/2) - ($this.width()/2))/*.ceil()*/
};
$this.css(position);
}
// trigger on show event
fl_box.trigger('show');
$this.fadeTo(100, 1);
});
this.events = {close: [], show: []};
}
SK_FloatBox.detectMacXFF = function()
{
var userAgent = navigator.userAgent.toLowerCase();
return (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox') != -1);
}
SK_FloatBox.prototype = {
close: function()
{
if (this.trigger('close') === false) {
return false;
}
jQuery(document).unbind('keydown', this.esc_listener);
if (this.$title_parent && this.$title_parent.length) {
this.$title_parent.append(
this.$header.children()
);
}
if (this.$contents_parent && this.$contents_parent.length) {
this.$contents_parent.append(this.$body.children());
}
if (this.$controls_parent && this.$controls_parent.length) {
this.$controls_parent.append(this.$bottom.children());
}
this.$container.remove();
if (jQuery('.floatbox_container:not("#sk-floatbox-block-prototype .floatbox_container")').length === 0) {
jQuery('body').css('overflow', '');
jQuery('#floatbox_overlay, #floatbox_HideSelect').remove();
}
return true;
},
bind: function(type, func)
{
if (this.events[type] == undefined) {
throw 'form error: unknown event type "'+type+'"';
}
this.events[type].push(func);
},
trigger: function(type, params)
{
if (this.events[type] == undefined) {
throw 'form error: unknown event type "'+type+'"';
}
params = params || [];
for (var i = 0, func; func = this.events[type][i]; i++) {
if (func.apply(this, params) === false) {
return false;
}
}
return true;
}
}
function SK_alert($title, $contents, callback)
{
if (!callback &&
typeof $contents == 'function' &&
$contents.constructor != Array) {
callback = $contents;
}
if (!$contents || $contents == callback) {
$contents = $title;
$title = SK_Language.text('%interface.alert_title');
}
var $ok_btn =
jQuery('<input type="button" />')
.val(SK_Language.text('%interface.ok'));
var fl_box = new SK_FloatBox({
$title: $title,
$contents: $contents,
$controls: $ok_btn
});
$ok_btn.one('click', function() {
fl_box.close();
if (callback) {
callback.apply(fl_box);
}
});
return fl_box;
}
function SK_confirm($title, $contents, callback)
{
if (!callback &&
typeof $contents == 'function' &&
$contents.constructor != Array) {
callback = $contents;
}
if (!$contents || $contents == callback) {
$contents = $title;
$title = SK_Language.text('%interface.confirmation_title');
}
var $ok_btn =
jQuery('<input type="button" />')
.val(SK_Language.text('%interface.ok'));
var $cancel_btn =
jQuery('<input type="button" />')
.val(SK_Language.text('%interface.cancel'));
var fl_box = new SK_FloatBox({
$title: $title,
$contents: $contents,
$controls: jQuery($ok_btn)
.add('<span> </span>')
.add($cancel_btn)
});
$ok_btn.one('click', function() {
fl_box.close();
if (callback) {
callback.apply(fl_box);
}
});
$cancel_btn.one('click', function() {
fl_box.close();
});
return fl_box;
}
function SK_BlockHandler(block_node)
{
this.$block = jQuery(block_node);
this.$block_cap =
jQuery('.block_cap:eq(0)', this.$block);
this.$title =
jQuery('.block_cap_title:eq(0)', this.$block_cap);
this.$body =
jQuery('.block_body:eq(0)', this.$block);
this.$expand_btn =
jQuery('.block_expand:eq(0), .block_collapse:eq(0)', this.$block_cap);
this.events = {
click: [],
expand: [],
collapse: []
}
var handler = this;
this.$block_cap
.click(function() {
if (handler.$expand_btn.hasClass('block_expand')) {
handler.expand();
}
else if (handler.$expand_btn.hasClass('block_collapse')) {
handler.collapse();
}
return false;
});
}
SK_BlockHandler.prototype = {
expand: function(trigger_events)
{
if (trigger_events === undefined) {
trigger_events = true;
}
if (!trigger_events || (
this.trigger('expand') !== false
&& this.trigger('click') !== false)
) {
this.$expand_btn.attr('class', 'block_collapse');
this.$body.slideDown('fast');
}
return this;
},
collapse: function(trigger_events)
{
if (trigger_events === undefined) {
trigger_events = true;
}
if (!trigger_events || (
this.trigger('collapse') !== false
&& this.trigger('click') !== false)
) {
this.$expand_btn.attr('class', 'block_expand');
this.$body.slideUp('fast');
}
return this;
},
show: function(speed, callback) {
this.$block.show(speed, callback);
},
hide: function(speed, callback) {
this.$block.hide(speed, callback);
},
bind: function(type, arg1, arg2)
{
if (this.events[type] == undefined) {
throw 'block error: unknown event type "'+type+'"';
}
if (!arg2) {
this.events[type].push([arg1]);
}
else {
this.events[type].push([arg1, arg2]);
}
},
trigger: function(type)
{
if (this.events[type] == undefined) {
throw 'block error: unknown event type "'+type+'"';
}
for (var i = 0, item; item = this.events[type][i]; i++)
{
if (item.length == 1) {
if (item[0].apply(this) === false) {
return false;
}
}
else if (item[1].call(this, item[0]) === false) {
return false;
}
}
return true;
},
clone: function(clone_e)
{
var $clone = this.$block.clone();
var node = $clone.get(0);
node.sk_block_handler = new SK_BlockHandler(node);
if (clone_e) {
node.sk_block_handler.events = this.events;
}
return node.sk_block_handler;
},
append: function(content) {
return this.$body.append(content);
return this;
},
appendTo: function(content) {
this.$block.appendTo(content);
return this;
},
empty: function() {
this.$body.empty();
return this;
},
children: function(expr) {
return this.$body.children(expr).not('.block_body_corner');
},
find: function(expr) {
return this.$body.find(expr).not('.block_body_corner');
},
removeAttr: function(name) {
this.$block.removeAttr(name);
return this;
},
addClass: function(cls) {
this.$block.addClass(cls);
return this;
},
removeClass: function(cls) {
this.$block.removeClass(cls);
return this;
}
}
jQuery(function() {
jQuery('.block_expand, .block_collapse')
.each(function() {
var block_node = this.parentNode.parentNode.parentNode.parentNode;
if (jQuery(block_node).hasClass('block')) {
block_node.sk_block_handler = new SK_BlockHandler(block_node);
}
});
});
SK_Language = {
data: {},
text: function(lang_addr, var_list)
{
if ( SK_Language.data[lang_addr] === undefined ) {
throw new SK_Exception('language section ['+lang_addr+'] not found');
}
var text = SK_Language.data[lang_addr];
if (var_list) {
for ( key in var_list ) {
text = text.replace('{$'+key+'}', var_list[key]);
}
}
return text;
}
}
function nl2br(str) {
return (str + '').replace(/([^>]?)\n/g, '$1<br />\n');
}
function SK_SignIn() {
return window.sk_component_sign_in.showBox();
}
function SK_openIM(opponent_id, is_esd)
{
if (is_esd)
is_esd_session = '&is_esd_session='+is_esd;
else
is_esd_session = '';
return window.open(
URL_MEMBER+'im.php?opponent_id='+opponent_id+is_esd_session,
'im_with_'+opponent_id,
'width='+SK_openIM.width+','+
'height='+SK_openIM.height+','+
'resizable=yes, location=no, scrollbars=no, status=no'
);
}
SK_openIM.width = 445;
SK_openIM.height = 460;
function SK_profileNote( event_id, opponent_id)
{
return window.open(
URL_MEMBER+'profile_note.php?event_id='+event_id+'&opponent_id='+opponent_id,
'note_'+opponent_id,
'width='+SK_profileNote.width+','+
'height='+SK_profileNote.height+','+
'resizable=yes, location=no, scrollbars=no, status=no'
);
}
SK_profileNote.width = 325;
SK_profileNote.height = 425;
SK_EventManager = {
events: {},
bind: function(event, callback)
{
if ( typeof this.events[event] == 'undefined' || this.events[event] === null)
{
this.events[event] = [];
}
this.events[event].push(callback);
},
trigger: function(event, eventObject)
{
if (typeof this.events[event] != 'undefined' && this.events[event] !== null)
{
for (var i = 0; i < this.events[event].length; i++)
{
if (typeof this.events[event][i] == 'function')
{
if (this.events[event][i](eventObject) === false)
{
return;
}
}
}
}
}
};
SK_SetFieldInvitation = function(id, label)
{
var $node = $('#' + id);
$node.addClass('input_invitation').val(label);
$node.focus(function() {
var v = $node.val();
$node.removeClass('input_invitation');
if ( v == label )
{
$node.val('');
}
}).blur(function() {
var v = $node.val();
if ( !v )
{
$node.addClass('input_invitation').val(label);
}
});
$($node.get(0).form).submit(function(){
if ( $node.val() != label )
{
$node.removeClass('input_invitation');
}
});
}
<div class="floatbox_container" style="overflow: visible; width: 320px; opacity: 0.1; display: block; top: 274px; left: 736px;">
<div class="block_cap floatbox_header"><div class="block_cap_r"><div class="block_cap_c clearfix"><h3 class="block_cap_title"><b>Şifremi unuttum!</b></h3><a class="close_btn" href="#"></a></div></div></div> <div class="floatbox_body">
<div class="fblock_body block_body">
<div class="fblock_body_r block_body_r">
<div class="fblock_body_c block_body_c">
<div class="block_info">Şifremi yenile</div><form id="form_3" method="post" onsubmit="return false;">
<label>E-posta</label>: <input id="form_3-email" name="email" type="text" maxlength="255">
<div id="form_3-email-container"></div>
<div class="controls center float_left">
<input id="form_3-send-button" type="submit" value="Gönder"> </div>
<div class="clr"></div>
</form></div>
</div>
</div>
</div>
<div class="floatbox_bottom">
<div class="block_bottom">
<div class="block_bottom_r">
<div class="block_bottom_c">
</div>
</div>
</div>
</div>
<div class="fblock_bottom">
<div class="fblock_bottom_r">
<div class="fblock_bottom_c"></div>
</div>
</div>
</div>

Tiled Map Editor using Phaser to make a Maze

I'm trying to create a Maze game using the Tiled map editor and Phaser. I am using this tutorial as a base: http://phaser.io/tutorials/coding-tips-005
But my map is not showing in my browser. I have created a tilemap and exported it as a json file. And there is an error in the code saying Uncaught ReferenceError: Phaser is not defined". What am I missing or doing incorrectly?
This is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Maze Game</title>
<meta charset="utf-8">
<script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
</head>
<body>
<div id="game"></div>
<script type="text/javascript">
var game = new Phaser.Game(640, 480, Phaser.AUTO, 'game');
var PhaserGame = function (game) {
this.map = null;
this.layer = null;
this.car = null;
this.safetile = 1;
this.gridsize = 32;
this.speed = 150;
this.threshold = 3;
this.turnSpeed = 150;
this.marker = new Phaser.Point();
this.turnPoint = new Phaser.Point();
this.directions = [ null, null, null, null, null ];
this.opposites = [ Phaser.NONE, Phaser.RIGHT, Phaser.LEFT, Phaser.DOWN, Phaser.UP ];
this.current = Phaser.UP;
this.turning = Phaser.NONE;
};
PhaserGame.prototype = {
init: function () {
this.physics.startSystem(Phaser.Physics.ARCADE);
},
preload: function () {
// We need this because the assets are on Amazon S3
// Remove the next 2 lines if running locally
this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue005/';
this.load.crossOrigin = 'anonymous';
this.load.tilemap('map', 'assets/samplemaze.json', null, Phaser.Tilemap.TILED_JSON);
this.load.image('tiles', 'assets/tiles.png');
this.load.image('car', 'assets/car.png');
// Note: Graphics are Copyright 2015 Photon Storm Ltd.
},
create: function () {
this.map = this.add.tilemap('map');
this.map.addTilesetImage('tiles', 'tiles');
this.layer = this.map.createLayer('Tile Layer 1');
this.map.setCollision(20, true, this.layer);
this.car = this.add.sprite(48, 48, 'car');
this.car.anchor.set(0.5);
this.physics.arcade.enable(this.car);
this.cursors = this.input.keyboard.createCursorKeys();
this.move(Phaser.DOWN);
},
checkKeys: function () {
if (this.cursors.left.isDown && this.current !== Phaser.LEFT)
{
this.checkDirection(Phaser.LEFT);
}
else if (this.cursors.right.isDown && this.current !== Phaser.RIGHT)
{
this.checkDirection(Phaser.RIGHT);
}
else if (this.cursors.up.isDown && this.current !== Phaser.UP)
{
this.checkDirection(Phaser.UP);
}
else if (this.cursors.down.isDown && this.current !== Phaser.DOWN)
{
this.checkDirection(Phaser.DOWN);
}
else
{
// This forces them to hold the key down to turn the corner
this.turning = Phaser.NONE;
}
},
checkDirection: function (turnTo) {
if (this.turning === turnTo || this.directions[turnTo] === null || this.directions[turnTo].index !== this.safetile)
{
// Invalid direction if they're already set to turn that way
// Or there is no tile there, or the tile isn't index a floor tile
return;
}
// Check if they want to turn around and can
if (this.current === this.opposites[turnTo])
{
this.move(turnTo);
}
else
{
this.turning = turnTo;
this.turnPoint.x = (this.marker.x * this.gridsize) + (this.gridsize / 2);
this.turnPoint.y = (this.marker.y * this.gridsize) + (this.gridsize / 2);
}
},
turn: function () {
var cx = Math.floor(this.car.x);
var cy = Math.floor(this.car.y);
// This needs a threshold, because at high speeds you can't turn because the coordinates skip past
if (!this.math.fuzzyEqual(cx, this.turnPoint.x, this.threshold) || !this.math.fuzzyEqual(cy, this.turnPoint.y, this.threshold))
{
return false;
}
this.car.x = this.turnPoint.x;
this.car.y = this.turnPoint.y;
this.car.body.reset(this.turnPoint.x, this.turnPoint.y);
this.move(this.turning);
this.turning = Phaser.NONE;
return true;
},
move: function (direction) {
var speed = this.speed;
if (direction === Phaser.LEFT || direction === Phaser.UP)
{
speed = -speed;
}
if (direction === Phaser.LEFT || direction === Phaser.RIGHT)
{
this.car.body.velocity.x = speed;
}
else
{
this.car.body.velocity.y = speed;
}
this.add.tween(this.car).to( { angle: this.getAngle(direction) }, this.turnSpeed, "Linear", true);
this.current = direction;
},
getAngle: function (to) {
// About-face?
if (this.current === this.opposites[to])
{
return "180";
}
if ((this.current === Phaser.UP && to === Phaser.LEFT) ||
(this.current === Phaser.DOWN && to === Phaser.RIGHT) ||
(this.current === Phaser.LEFT && to === Phaser.DOWN) ||
(this.current === Phaser.RIGHT && to === Phaser.UP))
{
return "-90";
}
return "90";
},
update: function () {
this.physics.arcade.collide(this.car, this.layer);
this.marker.x = this.math.snapToFloor(Math.floor(this.car.x), this.gridsize) / this.gridsize;
this.marker.y = this.math.snapToFloor(Math.floor(this.car.y), this.gridsize) / this.gridsize;
// Update our grid sensors
this.directions[1] = this.map.getTileLeft(this.layer.index, this.marker.x, this.marker.y);
this.directions[2] = this.map.getTileRight(this.layer.index, this.marker.x, this.marker.y);
this.directions[3] = this.map.getTileAbove(this.layer.index, this.marker.x, this.marker.y);
this.directions[4] = this.map.getTileBelow(this.layer.index, this.marker.x, this.marker.y);
this.checkKeys();
if (this.turning !== Phaser.NONE)
{
this.turn();
}
},
render: function () {
// Un-comment this to see the debug drawing
for (var t = 1; t < 5; t++)
{
if (this.directions[t] === null)
{
continue;
}
var color = 'rgba(0,255,0,0.3)';
if (this.directions[t].index !== this.safetile)
{
color = 'rgba(255,0,0,0.3)';
}
if (t === this.current)
{
color = 'rgba(255,255,255,0.3)';
}
this.game.debug.geom(new Phaser.Rectangle(this.directions[t].worldX, this.directions[t].worldY, 32, 32), color, true);
}
this.game.debug.geom(this.turnPoint, '#ffff00');
}
};
game.state.add('Game', PhaserGame, true);
</script>
<img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue005/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" />
</body>
</html>
Thank you so much! I'm pretty new to programming so any feedback would be very useful!
You might be missing "http:" or "https:" in your script tag's src attribute. If so, then the phaser.min.js file isn't being included in your page and could result in undefined references.

How can this jQuery be decoded? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I want to know how this jQuery file is encoded, and how can I decode this?
var _0xc702 = ["\x66\x6C\x65\x78\x79\x6D\x65\x6E\x75", "\x66\x6E", "\x68\x6F\x72\x69\x7A\x6F\x6E\x74\x61\x6C", "\x6C\x65\x66\x74", "\x65\x78\x74\x65\x6E\x64", "\x69\x6E\x6E\x65\x72\x57\x69\x64\x74\x68", "\x74\x79\x70\x65", "\x76\x65\x72\x74\x69\x63\x61\x6C", "\x61\x64\x64\x43\x6C\x61\x73\x73", "\x61\x6C\x69\x67\x6E", "\x72\x69\x67\x68\x74", "\x69\x6E\x64\x69\x63\x61\x74\x6F\x72", "\x6C\x65\x6E\x67\x74\x68", "\x75\x6C", "\x63\x68\x69\x6C\x64\x72\x65\x6E", "\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x69\x6E\x64\x69\x63\x61\x74\x6F\x72\x27\x3E\x2B\x3C\x2F\x73\x70\x61\x6E\x3E", "\x61\x70\x70\x65\x6E\x64", "\x65\x61\x63\x68", "\x6C\x69", "\x66\x69\x6E\x64", "\x3C\x6C\x69\x20\x63\x6C\x61\x73\x73\x3D\x27\x73\x68\x6F\x77\x68\x69\x64\x65\x27\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x74\x69\x74\x6C\x65\x27\x3E\x4D\x45\x4E\x55\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x69\x63\x6F\x6E\x27\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x6C\x69\x3E", "\x70\x72\x65\x70\x65\x6E\x64", "\x72\x65\x73\x69\x7A\x65", "\x6D\x61\x74\x63\x68", "\x75\x73\x65\x72\x41\x67\x65\x6E\x74", "\x6D\x73\x4D\x61\x78\x54\x6F\x75\x63\x68\x50\x6F\x69\x6E\x74\x73", "\x6E\x61\x76\x69\x67\x61\x74\x6F\x72", "\x63\x6C\x69\x63\x6B\x20\x74\x6F\x75\x63\x68\x73\x74\x61\x72\x74", "\x73\x74\x6F\x70\x50\x72\x6F\x70\x61\x67\x61\x74\x69\x6F\x6E", "\x70\x72\x65\x76\x65\x6E\x74\x44\x65\x66\x61\x75\x6C\x74", "\x68\x72\x65\x66", "\x6C\x6F\x63\x61\x74\x69\x6F\x6E", "\x61\x74\x74\x72", "\x73\x70\x65\x65\x64", "\x66\x61\x64\x65\x4F\x75\x74", "\x73\x74\x6F\x70", "\x73\x69\x62\x6C\x69\x6E\x67\x73", "\x70\x61\x72\x65\x6E\x74", "\x64\x69\x73\x70\x6C\x61\x79", "\x63\x73\x73", "\x6E\x6F\x6E\x65", "\x66\x61\x64\x65\x49\x6E", "\x6F\x6E", "\x61", "\x68\x69\x64\x65\x43\x6C\x69\x63\x6B\x4F\x75\x74", "\x63\x6C\x69\x63\x6B\x2E\x6D\x65\x6E\x75\x20\x74\x6F\x75\x63\x68\x73\x74\x61\x72\x74\x2E\x6D\x65\x6E\x75", "\x63\x6C\x6F\x73\x65\x73\x74", "\x74\x61\x72\x67\x65\x74", "\x62\x69\x6E\x64", "\x6D\x6F\x75\x73\x65\x6C\x65\x61\x76\x65", "\x6D\x6F\x75\x73\x65\x65\x6E\x74\x65\x72", "\x63\x6C\x69\x63\x6B", "\x73\x6C\x69\x64\x65\x44\x6F\x77\x6E", "\x73\x6C\x69\x64\x65\x55\x70", "\x6C\x69\x3A\x6E\x6F\x74\x28\x2E\x73\x68\x6F\x77\x68\x69\x64\x65\x29", "\x68\x69\x64\x65", "\x3A\x68\x69\x64\x64\x65\x6E", "\x69\x73", "\x73\x68\x6F\x77", "\x6C\x69\x2E\x73\x68\x6F\x77\x68\x69\x64\x65", "\x64\x65\x74\x61\x63\x68", "\x75\x6E\x62\x69\x6E\x64", "\x6C\x69\x2C\x20\x61"];
jQuery[_0xc702[1]][_0xc702[0]] = function (_0x99dfx1) {
var _0x99dfx2 = {
speed: 300,
type: _0xc702[2],
align: _0xc702[3],
indicator: false,
hideClickOut: true
};
$[_0xc702[4]](_0x99dfx2, _0x99dfx1);
var _0x99dfx3 = false;
var _0x99dfx4 = $(this);
var _0x99dfx5 = window[_0xc702[5]];
if (_0x99dfx2[_0xc702[6]] == _0xc702[7]) {
$(_0x99dfx4)[_0xc702[8]](_0xc702[7]);
if (_0x99dfx2[_0xc702[9]] == _0xc702[10]) {
$(_0x99dfx4)[_0xc702[8]](_0xc702[10]);
};
};
if (_0x99dfx2[_0xc702[11]] == true) {
$(_0x99dfx4)[_0xc702[19]](_0xc702[18])[_0xc702[17]](function () {
if ($(this)[_0xc702[14]](_0xc702[13])[_0xc702[12]] > 0) {
$(this)[_0xc702[16]](_0xc702[15]);
};
});
};
$(_0x99dfx4)[_0xc702[21]](_0xc702[20]);
_0x99dfx6();
$(window)[_0xc702[22]](function () {
if (_0x99dfx5 <= 768 && window[_0xc702[5]] > 768) {
_0x99dfx10();
_0x99dfxc();
_0x99dfx7();
if (_0x99dfx2[_0xc702[6]] == _0xc702[2] && _0x99dfx2[_0xc702[9]] == _0xc702[10] && _0x99dfx3 == false) {
_0x99dfxd();
_0x99dfx3 = true;
};
};
if (_0x99dfx5 > 768 && window[_0xc702[5]] <= 768) {
_0x99dfx10();
_0x99dfxb();
_0x99dfxa();
if (_0x99dfx3 == true) {
_0x99dfxd();
_0x99dfx3 = false;
};
};
_0x99dfx5 = window[_0xc702[5]];
});
function _0x99dfx6() {
if (window[_0xc702[5]] <= 768) {
_0x99dfxb();
_0x99dfxa();
if (_0x99dfx3 == true) {
_0x99dfxd();
_0x99dfx3 = false;
};
} else {
_0x99dfxc();
_0x99dfx7();
if (_0x99dfx2[_0xc702[6]] == _0xc702[2] && _0x99dfx2[_0xc702[9]] == _0xc702[10] && _0x99dfx3 == false) {
_0x99dfxd();
_0x99dfx3 = true;
};
};
};
function _0x99dfx7() {
if (navigator[_0xc702[24]][_0xc702[23]](/Mobi/i) || window[_0xc702[26]][_0xc702[25]] > 0) {
$(_0x99dfx4)[_0xc702[19]](_0xc702[43])[_0xc702[42]](_0xc702[27], function (_0x99dfx8) {
_0x99dfx8[_0xc702[28]]();
_0x99dfx8[_0xc702[29]]();
window[_0xc702[31]][_0xc702[30]] = $(this)[_0xc702[32]](_0xc702[30]);
$(this)[_0xc702[37]](_0xc702[18])[_0xc702[36]](_0xc702[18])[_0xc702[19]](_0xc702[13])[_0xc702[35]](true, true)[_0xc702[34]](_0x99dfx2[_0xc702[33]]);
if ($(this)[_0xc702[36]](_0xc702[13])[_0xc702[39]](_0xc702[38]) == _0xc702[40]) {
$(this)[_0xc702[36]](_0xc702[13])[_0xc702[35]](true, true)[_0xc702[41]](_0x99dfx2[_0xc702[33]]);
} else {
$(this)[_0xc702[36]](_0xc702[13])[_0xc702[35]](true, true)[_0xc702[34]](_0x99dfx2[_0xc702[33]]);
$(this)[_0xc702[36]](_0xc702[13])[_0xc702[19]](_0xc702[13])[_0xc702[35]](true, true)[_0xc702[34]](_0x99dfx2[_0xc702[33]]);
};
});
if (_0x99dfx2[_0xc702[44]] == true) {
$(document)[_0xc702[48]](_0xc702[45], function (_0x99dfx9) {
if ($(_0x99dfx9[_0xc702[47]])[_0xc702[46]](_0x99dfx4)[_0xc702[12]] == 0) {
$(_0x99dfx4)[_0xc702[19]](_0xc702[13])[_0xc702[34]](_0x99dfx2[_0xc702[33]]);
};
});
};
} else {
$(_0x99dfx4)[_0xc702[19]](_0xc702[18])[_0xc702[48]](_0xc702[50], function () {
$(this)[_0xc702[14]](_0xc702[13])[_0xc702[35]](true, true)[_0xc702[41]](_0x99dfx2[_0xc702[33]]);
})[_0xc702[48]](_0xc702[49], function () {
$(this)[_0xc702[14]](_0xc702[13])[_0xc702[35]](true, true)[_0xc702[34]](_0x99dfx2[_0xc702[33]]);
});
};
};
function _0x99dfxa() {
$(_0x99dfx4)[_0xc702[19]](_0xc702[54])[_0xc702[17]](function () {
if ($(this)[_0xc702[14]](_0xc702[13])[_0xc702[12]] > 0) {
$(this)[_0xc702[14]](_0xc702[43])[_0xc702[42]](_0xc702[51], function () {
if ($(this)[_0xc702[36]](_0xc702[13])[_0xc702[39]](_0xc702[38]) == _0xc702[40]) {
$(this)[_0xc702[36]](_0xc702[13])[_0xc702[52]](_0x99dfx2[_0xc702[33]]);
} else {
$(this)[_0xc702[36]](_0xc702[13])[_0xc702[53]](_0x99dfx2[_0xc702[33]]);
};
});
};
});
};
function _0x99dfxb() {
$(_0x99dfx4)[_0xc702[14]](_0xc702[54])[_0xc702[55]](0);
$(_0x99dfx4)[_0xc702[14]](_0xc702[59])[_0xc702[58]](0)[_0xc702[48]](_0xc702[51], function () {
if ($(_0x99dfx4)[_0xc702[14]](_0xc702[18])[_0xc702[57]](_0xc702[56])) {
$(_0x99dfx4)[_0xc702[14]](_0xc702[18])[_0xc702[52]](_0x99dfx2[_0xc702[33]]);
} else {
$(_0x99dfx4)[_0xc702[14]](_0xc702[54])[_0xc702[53]](_0x99dfx2[_0xc702[33]]);
$(_0x99dfx4)[_0xc702[14]](_0xc702[59])[_0xc702[58]](0);
};
});
};
function _0x99dfxc() {
$(_0x99dfx4)[_0xc702[14]](_0xc702[18])[_0xc702[58]](0);
$(_0x99dfx4)[_0xc702[14]](_0xc702[59])[_0xc702[55]](0);
};
function _0x99dfxd() {
$(_0x99dfx4)[_0xc702[14]](_0xc702[18])[_0xc702[8]](_0xc702[10]);
var _0x99dfxe = $(_0x99dfx4)[_0xc702[14]](_0xc702[18]);
$(_0x99dfx4)[_0xc702[14]](_0xc702[54])[_0xc702[60]]();
for (var _0x99dfxf = _0x99dfxe[_0xc702[12]]; _0x99dfxf >= 1; _0x99dfxf--) {
$(_0x99dfx4)[_0xc702[16]](_0x99dfxe[_0x99dfxf]);
};
};
function _0x99dfx10() {
$(_0x99dfx4)[_0xc702[19]](_0xc702[62])[_0xc702[61]]();
$(document)[_0xc702[61]](_0xc702[45]);
$(_0x99dfx4)[_0xc702[19]](_0xc702[13])[_0xc702[55]](0);
};
};
to clarifying the question: the above code obfuscated with hex, how to unobfuscate a jQuery code like this to make the code readable.
Converting hex -> utf8 then replacing all matches from _0xc702 with the value from the array. Then replace \["([a-zA-Z0-9]+)"\] -> .$1. And then quick scan and give semantic variable names.
jQuery.fn.flexymenu = function(opts) {
var options = {
speed: 300,
type: "horizontal",
align: "left",
indicator: false,
hideClickOut: true
};
$.extend(options, opts);
var someBool = false;
var $this = $(this);
var innerWidth = window.innerWidth;
if (options.type == "vertical") {
$($this).addClass("vertical");
if (options.align == "right") {
$($this).addClass("right");
};
};
if (options.indicator == true) {
$($this).find("li").each(function() {
if ($(this).children("ul").length > 0) {
$(this).append("<span class='indicator'>+</span>");
};
});
};
$($this).prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");
_0x99dfx6();
$(window).resize(function() {
if (innerWidth <= 768 && window.innerWidth > 768) {
cleanup();
_0x99dfxc();
_0x99dfx7();
if (options.type == "horizontal" && options.align == "right" && someBool == false) {
_0x99dfxd();
someBool = true;
};
};
if (innerWidth > 768 && window.innerWidth <= 768) {
cleanup();
_0x99dfxb();
_0x99dfxa();
if (someBool == true) {
_0x99dfxd();
someBool = false;
};
};
innerWidth = window.innerWidth;
});
function _0x99dfx6() {
if (window.innerWidth <= 768) {
_0x99dfxb();
_0x99dfxa();
if (someBool == true) {
_0x99dfxd();
someBool = false;
};
} else {
_0x99dfxc();
_0x99dfx7();
if (options.type == "horizontal" && options.align == "right" && someBool == false) {
_0x99dfxd();
someBool = true;
};
};
};
function _0x99dfx7() {
if (navigator.userAgent.match(/Mobi/i) || window.navigator.msMaxTouchPoints > 0) {
$($this).find("a").on("click touchstart", function(event) {
event.stopPropagation();
event.preventDefault();
window.location.href = $(this).attr("href");
$(this).parent("li").siblings("li").find("ul").stop(true, true).fadeOut(options.speed);
if ($(this).siblings("ul").css("display") == "none") {
$(this).siblings("ul").stop(true, true).fadeIn(options.speed);
} else {
$(this).siblings("ul").stop(true, true).fadeOut(options.speed);
$(this).siblings("ul").find("ul").stop(true, true).fadeOut(options.speed);
};
});
if (options.hideClickOut == true) {
$(document).bind("click.menu touchstart.menu", function(event) {
if ($(event.target).closest($this).length == 0) {
$($this).find("ul").fadeOut(options.speed);
};
});
};
} else {
$($this).find("li").bind("mouseenter", function() {
$(this).children("ul").stop(true, true).fadeIn(options.speed);
}).bind("mouseleave", function() {
$(this).children("ul").stop(true, true).fadeOut(options.speed);
});
};
};
function _0x99dfxa() {
$($this).find("li:not(.showhide)").each(function() {
if ($(this).children("ul").length > 0) {
$(this).children("a").on("click", function() {
if ($(this).siblings("ul").css("display") == "none") {
$(this).siblings("ul").slideDown(options.speed);
} else {
$(this).siblings("ul").slideUp(options.speed);
};
});
};
});
};
function _0x99dfxb() {
$($this).children("li:not(.showhide)").hide(0);
$($this).children("li.showhide").show(0).bind("click", function() {
if ($($this).children("li").is(":hidden")) {
$($this).children("li").slideDown(options.speed);
} else {
$($this).children("li:not(.showhide)").slideUp(options.speed);
$($this).children("li.showhide").show(0);
};
});
};
function _0x99dfxc() {
$($this).children("li").show(0);
$($this).children("li.showhide").hide(0);
};
function _0x99dfxd() {
$($this).children("li").addClass("right");
var $lis = $($this).children("li");
$($this).children("li:not(.showhide)").detach();
for (var length = $lis.length; length >= 1; length--) {
$($this).append($lis[length]);
};
};
function cleanup() {
$($this).find("li, a").unbind();
$(document).unbind("click.menu touchstart.menu");
$($this).find("ul").hide(0);
};
};
Here is some of the code i used to deobfuscate:
main.js
var fs = require('fs');
var name = '_0xc702';
var vars;
// Use eval for quick hex -> utf8 strings
eval('vars=' + fs.readFileSync('vars.json', 'utf8'));
var input = fs.readFileSync('input.js', 'utf8');
vars.forEach(function(value, key) {
input = input.replace(new RegExp(name + '\\['+key+'\\]', 'g'), '"'+ value +'"');
});
input = input.replace(/\["([a-zA-Z0-9]+)"\]/g, '.$1');
console.log(input);
vars.json
["\x66\x6C\x65\x78\x79\x6D\x65\x6E\x75", "\x66\x6E", "\x68\x6F\x72\x69\x7A\x6F\x6E\x74\x61\x6C", "\x6C\x65\x66\x74", "\x65\x78\x74\x65\x6E\x64", "\x69\x6E\x6E\x65\x72\x57\x69\x64\x74\x68", "\x74\x79\x70\x65", "\x76\x65\x72\x74\x69\x63\x61\x6C", "\x61\x64\x64\x43\x6C\x61\x73\x73", "\x61\x6C\x69\x67\x6E", "\x72\x69\x67\x68\x74", "\x69\x6E\x64\x69\x63\x61\x74\x6F\x72", "\x6C\x65\x6E\x67\x74\x68", "\x75\x6C", "\x63\x68\x69\x6C\x64\x72\x65\x6E", "\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x69\x6E\x64\x69\x63\x61\x74\x6F\x72\x27\x3E\x2B\x3C\x2F\x73\x70\x61\x6E\x3E", "\x61\x70\x70\x65\x6E\x64", "\x65\x61\x63\x68", "\x6C\x69", "\x66\x69\x6E\x64", "\x3C\x6C\x69\x20\x63\x6C\x61\x73\x73\x3D\x27\x73\x68\x6F\x77\x68\x69\x64\x65\x27\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x74\x69\x74\x6C\x65\x27\x3E\x4D\x45\x4E\x55\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x69\x63\x6F\x6E\x27\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x6C\x69\x3E", "\x70\x72\x65\x70\x65\x6E\x64", "\x72\x65\x73\x69\x7A\x65", "\x6D\x61\x74\x63\x68", "\x75\x73\x65\x72\x41\x67\x65\x6E\x74", "\x6D\x73\x4D\x61\x78\x54\x6F\x75\x63\x68\x50\x6F\x69\x6E\x74\x73", "\x6E\x61\x76\x69\x67\x61\x74\x6F\x72", "\x63\x6C\x69\x63\x6B\x20\x74\x6F\x75\x63\x68\x73\x74\x61\x72\x74", "\x73\x74\x6F\x70\x50\x72\x6F\x70\x61\x67\x61\x74\x69\x6F\x6E", "\x70\x72\x65\x76\x65\x6E\x74\x44\x65\x66\x61\x75\x6C\x74", "\x68\x72\x65\x66", "\x6C\x6F\x63\x61\x74\x69\x6F\x6E", "\x61\x74\x74\x72", "\x73\x70\x65\x65\x64", "\x66\x61\x64\x65\x4F\x75\x74", "\x73\x74\x6F\x70", "\x73\x69\x62\x6C\x69\x6E\x67\x73", "\x70\x61\x72\x65\x6E\x74", "\x64\x69\x73\x70\x6C\x61\x79", "\x63\x73\x73", "\x6E\x6F\x6E\x65", "\x66\x61\x64\x65\x49\x6E", "\x6F\x6E", "\x61", "\x68\x69\x64\x65\x43\x6C\x69\x63\x6B\x4F\x75\x74", "\x63\x6C\x69\x63\x6B\x2E\x6D\x65\x6E\x75\x20\x74\x6F\x75\x63\x68\x73\x74\x61\x72\x74\x2E\x6D\x65\x6E\x75", "\x63\x6C\x6F\x73\x65\x73\x74", "\x74\x61\x72\x67\x65\x74", "\x62\x69\x6E\x64", "\x6D\x6F\x75\x73\x65\x6C\x65\x61\x76\x65", "\x6D\x6F\x75\x73\x65\x65\x6E\x74\x65\x72", "\x63\x6C\x69\x63\x6B", "\x73\x6C\x69\x64\x65\x44\x6F\x77\x6E", "\x73\x6C\x69\x64\x65\x55\x70", "\x6C\x69\x3A\x6E\x6F\x74\x28\x2E\x73\x68\x6F\x77\x68\x69\x64\x65\x29", "\x68\x69\x64\x65", "\x3A\x68\x69\x64\x64\x65\x6E", "\x69\x73", "\x73\x68\x6F\x77", "\x6C\x69\x2E\x73\x68\x6F\x77\x68\x69\x64\x65", "\x64\x65\x74\x61\x63\x68", "\x75\x6E\x62\x69\x6E\x64", "\x6C\x69\x2C\x20\x61"];
input.js contained what you had posted except for the first line.
And then running node main.js > out.js from the command line

cSlider: stop autoplay on mouseover

How can I stop the autoplay function of cSlider with an onmouseover event?
HTML:
<div id="da-slider" class="da-slider">
<div class="da-slide">
<p>Text</p>
</div>
<div class="da-slide">
<p>More text</p>
</div>
</div>
What I have tried so far with jQuery:
$(function() {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 450
});
});
$('#da-slider').hover(function() {
if($('#daslider').autoplay('true')){
autoplay: false
}
}, function () {
autoplay: true
});
This is the one I'm using:
http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
This feature not implemented by default but this shouldn't stop you from implementing it on your own. Look at modified plugin code below (draw attention on stop and 'start' methods)
(function ($, undefined) {
/*
* Slider object.
*/
$.Slider = function (options, element) {
this.$el = $(element);
this._init(options);
};
$.Slider.defaults = {
current: 0, // index of current slide
bgincrement: 50, // increment the bg position (parallax effect) when sliding
autoplay: false, // slideshow on / off
interval: 4000 // time between transitions
};
$.Slider.prototype = {
_init: function (options) {
this.options = $.extend(true, {}, $.Slider.defaults, options);
this.$slides = this.$el.children('div.da-slide');
this.slidesCount = this.$slides.length;
this.current = this.options.current;
if (this.current < 0 || this.current >= this.slidesCount) {
this.current = 0;
}
this.$slides.eq(this.current).addClass('da-slide-current');
var $navigation = $('<nav class="da-dots"/>');
for (var i = 0; i < this.slidesCount; ++i) {
$navigation.append('<span/>');
}
$navigation.appendTo(this.$el);
this.$pages = this.$el.find('nav.da-dots > span');
this.$navNext = this.$el.find('span.da-arrows-next');
this.$navPrev = this.$el.find('span.da-arrows-prev');
this.isAnimating = false;
this.bgpositer = 0;
this.cssAnimations = Modernizr.cssanimations;
this.cssTransitions = Modernizr.csstransitions;
if (!this.cssAnimations || !this.cssAnimations) {
this.$el.addClass('da-slider-fb');
}
this._updatePage();
// load the events
this._loadEvents();
// slideshow
if (this.options.autoplay) {
this._startSlideshow();
}
},
_navigate: function (page, dir) {
var $current = this.$slides.eq(this.current), $next, _self = this;
if (this.current === page || this.isAnimating) return false;
this.isAnimating = true;
// check dir
var classTo, classFrom, d;
if (!dir) {
(page > this.current) ? d = 'next' : d = 'prev';
}
else {
d = dir;
}
if (this.cssAnimations && this.cssAnimations) {
if (d === 'next') {
classTo = 'da-slide-toleft';
classFrom = 'da-slide-fromright';
++this.bgpositer;
}
else {
classTo = 'da-slide-toright';
classFrom = 'da-slide-fromleft';
--this.bgpositer;
}
this.$el.css('background-position', this.bgpositer * this.options.bgincrement + '% 0%');
}
this.current = page;
$next = this.$slides.eq(this.current);
if (this.cssAnimations && this.cssAnimations) {
var rmClasses = 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
$current.removeClass(rmClasses);
$next.removeClass(rmClasses);
$current.addClass(classTo);
$next.addClass(classFrom);
$current.removeClass('da-slide-current');
$next.addClass('da-slide-current');
}
// fallback
if (!this.cssAnimations || !this.cssAnimations) {
$next.css('left', (d === 'next') ? '100%' : '-100%').stop().animate({
left: '0%'
}, 1000, function () {
_self.isAnimating = false;
});
$current.stop().animate({
left: (d === 'next') ? '-100%' : '100%'
}, 1000, function () {
$current.removeClass('da-slide-current');
});
}
this._updatePage();
},
_updatePage: function () {
this.$pages.removeClass('da-dots-current');
this.$pages.eq(this.current).addClass('da-dots-current');
},
_startSlideshow: function () {
var _self = this;
this.slideshow = setTimeout(function () {
var page = (_self.current < _self.slidesCount - 1) ? page = _self.current + 1 : page = 0;
_self._navigate(page, 'next');
if (_self.options.autoplay) {
_self._startSlideshow();
}
}, this.options.interval);
},
page: function (idx) {
if (idx >= this.slidesCount || idx < 0) {
return false;
}
if (this.options.autoplay) {
clearTimeout(this.slideshow);
this.options.autoplay = false;
}
this._navigate(idx);
},
stop: function () {
if (this.options.autoplay) {
clearTimeout(this.slideshow);
this.options.autoplay = false;
}
},
start: function () {
this.options.autoplay = true;
this._startSlideshow();
},
_loadEvents: function () {
var _self = this;
this.$pages.on('click.cslider', function (event) {
_self.page($(this).index());
return false;
});
this.$navNext.on('click.cslider', function (event) {
if (_self.options.autoplay) {
clearTimeout(_self.slideshow);
_self.options.autoplay = false;
}
var page = (_self.current < _self.slidesCount - 1) ? page = _self.current + 1 : page = 0;
_self._navigate(page, 'next');
return false;
});
this.$navPrev.on('click.cslider', function (event) {
if (_self.options.autoplay) {
clearTimeout(_self.slideshow);
_self.options.autoplay = false;
}
var page = (_self.current > 0) ? page = _self.current - 1 : page = _self.slidesCount - 1;
_self._navigate(page, 'prev');
return false;
});
if (this.cssTransitions) {
if (!this.options.bgincrement) {
this.$el.on('webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider', function (event) {
if (event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4') {
_self.isAnimating = false;
}
});
}
else {
this.$el.on('webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider', function (event) {
if (event.target.id === _self.$el.attr('id'))
_self.isAnimating = false;
});
}
}
}
};
var logError = function (message) {
if (this.console) {
console.error(message);
}
};
$.fn.cslider = function (options) {
if (typeof options === 'string') {
var args = Array.prototype.slice.call(arguments, 1);
this.each(function () {
var instance = $.data(this, 'cslider');
if (!instance) {
logError("cannot call methods on cslider prior to initialization; " +
"attempted to call method '" + options + "'");
return;
}
if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
logError("no such method '" + options + "' for cslider instance");
return;
}
instance[options].apply(instance, args);
});
}
else {
this.each(function () {
var instance = $.data(this, 'cslider');
if (!instance) {
$.data(this, 'cslider', new $.Slider(options, this));
}
});
}
return this;
};
})(jQuery);
With updated plugin you can pause and renew autiplaying with this code:
$('#da-slider').hover(
function () {
$(this).cslider("stop");
},
function () {
$(this).cslider("start");
}
);

jQuery preload only works with ie on refresh

I`m having a problem with ie9 not always loading preloaded images.
Sometimes I haft to refresh the page and then it works.
$jQuery.fn.img_preloader = function(options){
var defaults = {
repeatedCheck: 550,
fadeInSpeed: 1100,
delay: 200,
callback: ''
};
var options = jQuery.extend(defaults, options);
return this.each(function(){
var imageContainer = jQuery(this),
images = imageContainer.find('img').css({opacity:0, visibility:'hidden'}),
imagesToLoad = images.length;
imageContainer.operations = {
preload: function(){
var stopPreloading = true;
images.each(function(i, event){
var image = jQuery(this);
if(event.complete == true){
imageContainer.operations.showImage(image);
}else{
image.bind('error load',{currentImage: image}, imageContainer.operations.showImage);
}
});
return this;
},showImage: function(image){
imagesToLoad --;
if(image.data.currentImage != undefined) { image = image.data.currentImage;}
if (options.delay <= 0) image.css('visibility','visible').animate({opacity:1}, options.fadeInSpeed);
if(imagesToLoad == 0){
if(options.delay > 0){
images.each(function(i, event){
var image = jQuery(this);
setTimeout(function(){
image.css('visibility','visible').animate({opacity:1}, options.fadeInSpeed);
},
options.delay*(i+1));
});
if(options.callback != ''){
setTimeout(options.callback, options.delay*images.length);
}
}else if(options.callback != ''){
(options.callback)();
}
}
}
};
imageContainer.operations.preload();
});
}
Try commenting the event.complete validation and going directly to the showImage event. It's not the best solution, but worked for me.
$jQuery.fn.img_preloader = function(options)
{
var defaults = {
repeatedCheck: 550,
fadeInSpeed: 1100,
delay: 200,
callback: ''
};
var options = jQuery.extend(defaults, options);
return this.each(function()
{
var imageContainer = jQuery(this),
images = imageContainer.find('img').css({opacity:0, visibility:'hidden'}),
imagesToLoad = images.length;
imageContainer.operations = {
preload: function(){
var stopPreloading = true;
images.each(function(i, event){
var image = jQuery(this);
imageContainer.operations.showImage(image);
/*if(event.complete == true){
imageContainer.operations.showImage(image);
}else{
image.bind('error load',{currentImage: image}, imageContainer.operations.showImage);
}*/
});
return this;
},showImage: function(image){
imagesToLoad --;
if(image.data.currentImage != undefined) { image = image.data.currentImage;}
if (options.delay <= 0) image.css('visibility','visible').animate({opacity:1}, options.fadeInSpeed);
if(imagesToLoad == 0){
if(options.delay > 0){
images.each(function(i, event){
var image = jQuery(this);
setTimeout(function(){
image.css('visibility','visible').animate({opacity:1}, options.fadeInSpeed);
},
options.delay*(i+1));
});
if(options.callback != ''){
setTimeout(options.callback, options.delay*images.length);
}
}else if(options.callback != ''){
(options.callback)();
}
}
}
};
imageContainer.operations.preload();
});
}
Replace this showimage function..
showImage: function (g) {
d--;
if (g.data.currentImage != undefined) {
g = g.data.currentImage;
}
if (b.delay <= 0) {
g.css("visibility", "visible").animate({
opacity: 1
}, b.fadeInSpeed);
}
if (d != 0) {
if (b.delay != 0) {
e.each(function (k, j) {
var h = a(this);
setTimeout(function () {
h.css("visibility", "visible").animate({
opacity: 1
}, b.fadeInSpeed)
}, b.delay * (k + 1))
});
if (b.callback != "") {
setTimeout(b.callback, b.delay * e.length)
}
} else {
if (b.callback != "") {
b.callback()
}
}
}
}

Categories