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()
}
}
}
}
Related
This question already has answers here:
Get the size of the screen, current web page and browser window
(20 answers)
Closed 6 days ago.
I see following error for my website (via google Inspect). I need your help to understand the problem and how to fix it?
script.js:137 Uncaught TypeError: window.getWidth is not a function
at Object.check (script.js:137:23)
at Object.initialize (script.js:58:14)
at HTMLDocument.<anonymous> (script.js:442:14)
at n (jquery-1.7.1.min.js:2:14784)
at Object.fireWith (jquery-1.7.1.min.js:2:15553)
at Function.ready (jquery-1.7.1.min.js:2:9773)
at HTMLDocument.B (jquery-1.7.1.min.js:2:14348)
and following is script.js file content:
var TouchMask = {
handlers: [],
isbind: 0,
ontouch: function(){
var result = 1;
TouchMask.handlers.each(function(fn){
result = fn() && result;
});
if(result){
document.removeEvent('touchstart', TouchMask.ontouch);
TouchMask.isbind = 0;
}
},
show: function(){
if(this.isbind){
return false;
}
document.addEvent('touchstart', TouchMask.ontouch);
this.isbind = 1;
},
register: function(handler){
if(typeOf (handler) == 'function' && this.handlers.indexOf(handler) == -1){
this.handlers.push(handler);
}
},
unregister: function(handler){
this.handlers.erase(handler);
}
};
var JawallMenu = {
initialize: function(){
JawallMenu.isAndroidTable = navigator.userAgent.toLowerCase().indexOf('android') > -1 && navigator.userAgent.toLowerCase().indexOf('mobile') == -1;
JawallMenu.isTouch = 'ontouchstart' in window && !(/hp-tablet/gi).test(navigator.appVersion);
JawallMenu.isTablet = JawallMenu.isTouch && (window.innerWidth >= 720);
JawallMenu.enableTouch();
JawallMenu.check();
window.addEvent('resize', JawallMenu.check);
},
enableTouch: function(){
if (JawallMenu.isTouch){
var jmainnav = $('mainnav');
if(!jmainnav){
return false;
}
var jmenu = jmainnav.getElement('.menu');
if(!jmenu){
return false;
}
var jitems = jmenu.getElements('li.deeper'),
onTouch = function(e){
var i, len, noclick = !this.retrieve('noclick');
e.stopPropagation();
// reset all
for (i = 0, len = jitems.length; i < len; ++i) {
jitems[i].store('noclick', 0);
}
if(noclick){
var jshow = this.addClass('hover').getParents('li.parent').addClass('hover');
jshow = jshow.append([this]);
jitems.each(function (jitem) {
if(!jshow.contains(jitem)){
jitem.removeClass('hover');
}
});
}
this.store('noclick', noclick);
this.focus();
},
onClick = function(e){
e.stopPropagation();
if(this.retrieve('noclick')){
e.preventDefault();
jitems.removeClass('hover');
this.addClass('hover').getParents('li.parent').addClass('hover');
TouchMask.hidetoggle();
TouchMask.show();
} else {
var href = this.getElement('a').get('href');
if(href){
window.location.href = href;
}
}
};
jitems.each(function(jitem){
jitem.addEvent('touchstart', onTouch)
.addEvent('click', onClick)
.store('noclick', 0);
});
JawallMenu.resetmenu = function(){
jitems.store('noclick', 0).removeClass('hover');
return true;
};
TouchMask.register(JawallMenu.resetmenu);
}
},
oldWidth: 0,
check: function(){
var wwidth = window.getWidth();
if(wwidth == JawallMenu.oldWidth){
return;
}
JawallMenu.oldWidth = wwidth;
var jmainnav = $('mainnav');
if(!jmainnav){
return;
}
var jmenuinner = jmainnav.getElement('.menu-inner'),
jmenu = jmainnav.getElement('.menu');
if(!jmenuinner || !jmenu){
return;
}
//check if we have to implement scroll
if (jmenu.offsetWidth > jmenuinner.offsetWidth) {
jmenu.setStyle('float', 'left');
if(!window.menuIScroll){
var jprev = jmainnav.getChildren('.navprev')[0] || new Element('a', {
'href': 'javascript:;',
'class': 'navprev'
}).inject(jmainnav).addEvent('click', function(){
if(window.menuIScroll){
window.menuIScroll.scrollToPage('prev');
}
if(JawallMenu.jcitem){
JawallMenu.jcitem.fireEvent('shide');
JawallMenu.jcitem = null;
}
}),
jnext = jmainnav.getChildren('.navnext')[0] || new Element('a', {
'href': 'javascript:;',
'class': 'navnext'
}).inject(jmainnav).addEvent('click', function(){
if(window.menuIScroll){
window.menuIScroll.scrollToPage('next');
}
if(JawallMenu.jcitem){
JawallMenu.jcitem.fireEvent('shide');
JawallMenu.jcitem = null;
}
}),
checkNav = function (){
if(window.menuIScroll){
jprev.setStyle('display', window.menuIScroll.x >= 0 ? 'none' : 'block');
jnext.setStyle('display', (window.menuIScroll.x <= window.menuIScroll.maxScrollX) ? 'none' : 'block');
}
};
window.menuIScroll = new iScroll(jmenuinner, {
snap: '.menu > li',
hScrollbar: false,
vScrollbar: false,
onRefresh: checkNav,
onScrollEnd: checkNav,
useTransform: false,
onScrollStart: function(){
if(JawallMenu.jcitem){
JawallMenu.jcitem.fireEvent('shide');
JawallMenu.jcitem = null;
}
},
overflow: ''
});
checkNav();
var jactive = jmenu.getChildren('.active')[0];
if(jactive){
window.menuIScroll.scrollToElement(jactive);
}
}
if (window.menuIScroll) {
window.menuIScroll.refresh();
}
} else {
if (window.menuIScroll) {
window.menuIScroll.scrollTo(0, 0, 0);
}
jmenu.setStyle('float', '');
}
//check if the mobile layout, we change html structure
if(wwidth < 720){
if(JawallMenu.jcitem){
JawallMenu.jcitem.fireEvent('shide');
JawallMenu.jcitem = null;
}
jmenuinner.setStyle('overflow', 'hidden');
jmenu.getChildren('.deeper > ul').each(function(jsub){
var jitem = jsub.getParent(),
sid = null;
jsub.store('parent', jitem).addClass('jsub').inject(jmainnav).setStyle('position', 'absolute');
if(!JawallMenu.isTouch){
//add mouse event to show/hide sub on desktop
jitem.addEvent('mouseenter', function(e){
clearTimeout(sid);
if(jsub.getStyle('display') != 'none'){
return false;
} else {
if(JawallMenu.jcitem && JawallMenu.jcitem != jitem){
JawallMenu.jcitem.fireEvent('shide');
}
jsub.setStyles({
display: 'block',
top: jmenuinner.getHeight()
});
jitem.addClass('over');
JawallMenu.jcitem = jitem;
}
}).addEvent('mouseleave', function(){
clearTimeout(sid);
sid = setTimeout(function(){
jitem.fireEvent('shide');
}, 100);
});
jsub.addEvent('mouseenter', function(){
clearTimeout(sid);
}).addEvent('mouseleave', function(){
clearTimeout(sid);
sid = setTimeout(function(){
jitem.fireEvent('shide');
}, 100);
});
} else {
//add touch event for touch device
jitem.addEvent('touchstart', function(e){
if(jsub.getStyle('display') == 'none'){
e.stop();
if(JawallMenu.jcitem && JawallMenu.jcitem != jitem){
JawallMenu.jcitem.fireEvent('shide');
}
jsub.setStyles({
display: 'block',
top: jmenuinner.getHeight()
});
jitem.addClass('over');
JawallMenu.jcitem = jitem;
TouchMask.hidetoggle();
TouchMask.show();
}
});
}
jitem.addEvent('shide', function(){
clearTimeout(sid);
jsub.setStyle('display', 'none');
jitem.removeClass('over');
JawallMenu.jcitem = null;
}).fireEvent('shide');
});
//only init once
if(!JawallMenu.initTouch && JawallMenu.isTouch){
jmainnav.addEvent('touchstart', function(){
if(JawallMenu.jcitem){
this.store('touchInside', 1);
}
});
TouchMask.hidesub = function(){
if(jmainnav.retrieve('touchInside')){
jmainnav.store('touchInside', 0);
return false;
} else {
if(JawallMenu.jcitem){
JawallMenu.jcitem.fireEvent('shide');
return false;
}
}
return true;
};
TouchMask.register(TouchMask.hidesub);
TouchMask.hidesub();
JawallMenu.initTouch = 1;
}
} else {
JawallMenu.jcitem = null;
jmainnav.getChildren('.jsub').each(function(jsub){
var jitem = jsub.retrieve('parent');
jitem.removeEvents('mouseenter').removeEvents('mouseleave').removeEvents('touchstart').removeEvents('shide');
jsub.removeProperty('style').removeEvents('mouseenter').removeEvents('mouseleave').removeClass('jsub').inject(jitem);
});
jmenuinner.setStyle('overflow', '');
}
}
};
window.addEventListener('load', function(event) {
if(window.menuIScroll){
window.menuIScroll.refresh();
}
if(window.sidebarIScroll){
window.sidebarIScroll.refresh();
}
});
(function($){
var groups = {
},
handler = function (group, value) {
// ignore user setting for page with fixed option
if ($(document.body).hasClass ('fixed-' + group)){
return;
}
if (value) {
if (groups[group]['type'] == 'toggle') {
var cvalue = $.cookie ('ja-'+group);
if (new RegExp ('(^|\\s)' + value+'(?:\\s|$)').test(cvalue)) {
$(document.body).removeClass (group + '-' + value);
cvalue = cvalue.replace (new RegExp ('(^|\\s)' + value+'(?:\\s|$)', 'g'), '$1');
} else {
$(document.body).addClass (group + '-' + value);
cvalue += ' ' + value;
}
groups[group]['val'] = cvalue;
// update cookie
$.cookie ('ja-'+group, cvalue, {duration: 365, path: '/'});
} else {
// update value & cookie
groups[group]['val'] = value;
$.cookie ('ja-'+group, value, {duration: 365, path: '/'});
// remove current
document.body.className = document.body.className.replace (new RegExp ('(^|\\s)' + group+'-[^\\s]*', 'g'), '$1');
$(document.body).addClass (group + '-' + value);
}
}
// Make the UI reload by trigger resize event for window
$(window).trigger('resize');
};
$.fn.toolbar = function(options){
var defaults = {
group: 'basegrid',
type: 'single',
val: 'm'
},
opt = $.extend(defaults, options);
groups[opt.group] = groups[opt.group] || {};
$.extend(groups[opt.group], {type: opt.type, val: opt.val});
if (!$(document.body).hasClass ('fixed-' + opt.group)){
var value = $.cookie('ja-'+opt.group);
if (value) {
groups[opt.group]['val'] = value; // setting exists, replace the default
// add active class
$(document.body).addClass (groups[opt.group]['val'].replace (/(^|\s)([^\s]+)/g, '$1' + opt.group + '-$2'));
} else if(opt.val) {
handler (opt.group, opt.val);
}
}
// bind event for toolbar
return this.bind('click', function () { handler (opt.group, this.id.replace ('toolbar-' + opt.group + '-', '')); return false; });
};
})(window.$wall || window.jQuery);
(window.$wall || window.jQuery)(document).ready(function ($) {
// enable menu responsive check
if(!($.browser.msie && parseFloat($.browser.version) < 9)){
JawallMenu.initialize();
}
var bindevent = 'ontouchstart' in window && !(/hp-tablet/gi).test(navigator.appVersion) ? 'touchstart' : 'click',
jtoggles = $('.btn-toggle'),
jsidebar = $('#sidebar'),
jtoggleactive = null;
// toggle handle
jtoggles.bind(bindevent, function (event) {
var jactive = $(this),
jparent = jactive.parent();
if (jparent.hasClass('active')) {
jparent.removeClass ('active');
// remove btn-toggle-active
jtoggleactive = null
} else {
// remove other active
jtoggles.parent().removeClass ('active');
// add active for this toggle
jparent.addClass ('active');
// store
jtoggleactive = jactive;
}
if(typeOf (TouchMask.hidesub) == 'function'){
TouchMask.hidesub();
}
TouchMask.show();
return false;
});
jtoggles.parent().bind(bindevent, function(){
if(jtoggleactive){
$('body').data('touchInside', 1);
}
});
TouchMask.hidetoggle = function(){
if (jtoggleactive) {
if($('body').data('touchInside')){
$('body').data('touchInside', 0);
return false;
} else {
// remove active
jtoggleactive.parent().removeClass ('active');
jtoggleactive = null;
return false;
}
}
return true;
};
TouchMask.register(TouchMask.hidetoggle);
var rfpage = $('#josForm').hasClass('wform') && $('#k2Container').hasClass('k2AccountPage'),
wmobile = false, //normal by default
wmeditor = function(){
if(!wmobile){
var jmce = $('.mceLayout:first');
if(jmce.width() > jmce.closest('.wcontrols').width()){
wmobile = true;
$('table.mceToolbar').each(function(){
$(this).find('> tbody > tr').css('white-space', 'normal').find('td').css({
position: '',
float: 'left',
display: 'inline-block'
});
});
$('.toggle-editor a').trigger('click').delay(300).trigger('click');
}
}
},
sidrfp = setTimeout(wmeditor, 350);
// tracking status of btn-toggle
$(window).resize (function() {
JawallMenu.isTablet = JawallMenu.isTouch && (window.innerWidth >= 720);
if (jtoggleactive) {
if (jtoggleactive.css('display') == 'none') {
// remove active
jtoggleactive.parent().removeClass ('active');
jtoggleactive = null;
}
}
if (jsidebar.length) {
if(JawallMenu.isTablet){
jsidebar.css({
position: 'fixed',
top: ''
});
}
jsidebar
.add(jsidebar.find('.sidebar-inner'))
.css('height', Math.max(80,
(window.innerHeight || $(window).height())
- parseInt(jsidebar.css('top'))
- parseInt(jsidebar.css('margin-bottom'))
- parseInt(jsidebar.css('padding-bottom'))));
if(window.sidebarIScroll){
window.sidebarIScroll.refresh();
}
}
if(rfpage){
clearTimeout(sidrfp);
sidrfp = setTimeout(wmeditor, 350);
}
});
// scrollbar for sidebar if exist
if (jsidebar.length) {
jsidebar
.add(jsidebar.find('.sidebar-inner'))
.css('height', Math.max(80,
(window.innerHeight || $(window).height())
- parseInt(jsidebar.css('top'))
- parseInt(jsidebar.css('margin-bottom'))
- parseInt(jsidebar.css('padding-bottom'))));
window.sidebarIScroll = new iScroll(jsidebar.find('.sidebar-inner')[0], {vScrollbar: true, scrollbarClass: 'sidebarTracker', useTransform: false});
if(JawallMenu.isTouch){
var jsbtoggle = jsidebar.find('.btn-toggle:first');
$('<div id="dummy-toggle"></div>').css({
position: 'absolute',
top: 0,
left: 0,
width: jsbtoggle.width(),
height: jsbtoggle.height(),
}).appendTo(document.body).bind(bindevent, function(e){
e.preventDefault();
e.stopPropagation();
jsbtoggle.trigger(bindevent);
});
var lastScroll = 0,
scrollid = null;
$(window).scroll(function(){
lastScroll = $(window).scrollTop();
$('#dummy-toggle').css('top', lastScroll);
if(JawallMenu.isTablet){
clearTimeout(scrollid);
scrollid = setTimeout(function(){
lastScroll = $(window).scrollTop();
scrollid = setTimeout(function(){
if(lastScroll == $(window).scrollTop()){
jsidebar
.css('top', lastScroll + parseFloat(jsidebar.css('top', '').css('top')))
.css('position', 'absolute');
$(document).one('touchmove', function(){
jsidebar.css({position: 'fixed', top: ''});
});
}
}, 100);
}, 100);
}
});
}
if(JawallMenu.isTablet && !JawallMenu.isBindTablet){
$(document).on('touchmove', function(){
jsidebar.css({position: 'fixed', top: ''});
});
JawallMenu.isBindTablet = 1;
}
}
// check and load typography assert files if nessesary
window.jtypo = jQuery('.item-pagetypography .item-content');
if(!window.jtypo.length){
window.jtypo = jQuery('.typography .itemBody');
}
if(window.jtypo.length){
var css = document.createElement('link');
css.type = 'text/css';
css.rel= 'stylesheet';
css.href= JADef.tplurl + 'css/jtypo.css';
document.getElementsByTagName('head')[0].appendChild(css);
$.getScript(JADef.tplurl + 'js/jtypo.js');
}
});
to understand it better please see the error directly via google inspect at following page:
http://test6.harfrooz.com/117-more/18376-top-20-ufo-sightings
This error made my menus disabled and more issues. I would appreciate for any help to solve this error.
I am fairly certain this has been answered before here.
For normal javascript you can use:
window.innerHeight - the inner height of the browser window (in
pixels)
window.innerWidth - the inner width of the browser window (in
pixels)
I am creating my website, it is working completely fine on desktop version but when I am trying to open it on android mobile the problems occurring are:
The menu does not appear to the user.(the black section below header section)
In categories section the drop-down list is not opening (I have used JQuery in this section).
here is my (demo) website url: Link.
JQuery
/*
* EASYDROPDOWN - A Drop-down Builder for Styleable Inputs and Menus
* Version: 2.1.4
* License: Creative Commons Attribution 3.0 Unported - CC BY 3.0
* http://creativecommons.org/licenses/by/3.0/
* This software may be used freely on commercial and non-commercial projects with attribution to the author/copyright holder.
* Author: Patrick Kunka
* Copyright 2013 Patrick Kunka, All Rights Reserved
*/
(function($){
function EasyDropDown(){
this.isField = true,
this.down = false,
this.inFocus = false,
this.disabled = false,
this.cutOff = false,
this.hasLabel = false,
this.keyboardMode = false,
this.nativeTouch = true,
this.wrapperClass = 'dropdown',
this.onChange = null;
};
EasyDropDown.prototype = {
constructor: EasyDropDown,
instances: {},
init: function(domNode, settings){
var self = this;
$.extend(self, settings);
self.$select = $(domNode);
self.id = domNode.id;
self.options = [];
self.$options = self.$select.find('option');
self.isTouch = 'ontouchend' in document;
self.$select.removeClass(self.wrapperClass+' dropdown');
if(self.$select.is(':disabled')){
self.disabled = true;
};
if(self.$options.length){
self.$options.each(function(i){
var $option = $(this);
if($option.is(':selected')){
self.selected = {
index: i,
title: $option.text()
}
self.focusIndex = i;
};
if($option.hasClass('label') && i == 0){
self.hasLabel = true;
self.label = $option.text();
$option.attr('value','');
} else {
self.options.push({
domNode: $option[0],
title: $option.text(),
value: $option.val(),
selected: $option.is(':selected')
});
};
});
if(!self.selected){
self.selected = {
index: 0,
title: self.$options.eq(0).text()
}
self.focusIndex = 0;
};
self.render();
};
},
render: function(){
var self = this,
touchClass = self.isTouch && self.nativeTouch ? ' touch' : '',
disabledClass = self.disabled ? ' disabled' : '';
self.$container = self.$select.wrap('<div class="'+self.wrapperClass+touchClass+disabledClass+'"><span class="old"/></div>').parent().parent();
self.$active = $('<span class="selected">'+self.selected.title+'</span>').appendTo(self.$container);
self.$carat = $('<span class="carat"/>').appendTo(self.$container);
self.$scrollWrapper = $('<div><ul/></div>').appendTo(self.$container);
self.$dropDown = self.$scrollWrapper.find('ul');
self.$form = self.$container.closest('form');
$.each(self.options, function(){
var option = this,
active = option.selected ? ' class="active"':'';
self.$dropDown.append('<li'+active+'>'+option.title+'</li>');
});
self.$items = self.$dropDown.find('li');
if(self.cutOff && self.$items.length > self.cutOff)self.$container.addClass('scrollable');
self.getMaxHeight();
if(self.isTouch && self.nativeTouch){
self.bindTouchHandlers();
} else {
self.bindHandlers();
};
},
getMaxHeight: function(){
var self = this;
self.maxHeight = 0;
for(i = 0; i < self.$items.length; i++){
var $item = self.$items.eq(i);
self.maxHeight += $item.outerHeight();
if(self.cutOff == i+1){
break;
};
};
},
bindTouchHandlers: function(){
var self = this;
self.$container.on('click.easyDropDown',function(){
self.$select.focus();
});
self.$select.on({
change: function(){
var $selected = $(this).find('option:selected'),
title = $selected.text(),
value = $selected.val();
self.$active.text(title);
if(typeof self.onChange === 'function'){
self.onChange.call(self.$select[0],{
title: title,
value: value
});
};
},
focus: function(){
self.$container.addClass('focus');
},
blur: function(){
self.$container.removeClass('focus');
}
});
},
bindHandlers: function(){
var self = this;
self.query = '';
self.$container.on({
'click.easyDropDown': function(){
if(!self.down && !self.disabled){
self.open();
} else {
self.close();
};
},
'mousemove.easyDropDown': function(){
if(self.keyboardMode){
self.keyboardMode = false;
};
}
});
$('body').on('click.easyDropDown.'+self.id,function(e){
var $target = $(e.target),
classNames = self.wrapperClass.split(' ').join('.');
if(!$target.closest('.'+classNames).length && self.down){
self.close();
};
});
self.$items.on({
'click.easyDropDown': function(){
var index = $(this).index();
self.select(index);
self.$select.focus();
},
'mouseover.easyDropDown': function(){
if(!self.keyboardMode){
var $t = $(this);
$t.addClass('focus').siblings().removeClass('focus');
self.focusIndex = $t.index();
};
},
'mouseout.easyDropDown': function(){
if(!self.keyboardMode){
$(this).removeClass('focus');
};
}
});
self.$select.on({
'focus.easyDropDown': function(){
self.$container.addClass('focus');
self.inFocus = true;
},
'blur.easyDropDown': function(){
self.$container.removeClass('focus');
self.inFocus = false;
},
'keydown.easyDropDown': function(e){
if(self.inFocus){
self.keyboardMode = true;
var key = e.keyCode;
if(key == 38 || key == 40 || key == 32){
e.preventDefault();
if(key == 38){
self.focusIndex--
self.focusIndex = self.focusIndex < 0 ? self.$items.length - 1 : self.focusIndex;
} else if(key == 40){
self.focusIndex++
self.focusIndex = self.focusIndex > self.$items.length - 1 ? 0 : self.focusIndex;
};
if(!self.down){
self.open();
};
self.$items.removeClass('focus').eq(self.focusIndex).addClass('focus');
if(self.cutOff){
self.scrollToView();
};
self.query = '';
};
if(self.down){
if(key == 9 || key == 27){
self.close();
} else if(key == 13){
e.preventDefault();
self.select(self.focusIndex);
self.close();
return false;
} else if(key == 8){
e.preventDefault();
self.query = self.query.slice(0,-1);
self.search();
clearTimeout(self.resetQuery);
return false;
} else if(key != 38 && key != 40){
var letter = String.fromCharCode(key);
self.query += letter;
self.search();
clearTimeout(self.resetQuery);
};
};
};
},
'keyup.easyDropDown': function(){
self.resetQuery = setTimeout(function(){
self.query = '';
},1200);
}
});
self.$dropDown.on('scroll.easyDropDown',function(e){
if(self.$dropDown[0].scrollTop >= self.$dropDown[0].scrollHeight - self.maxHeight){
self.$container.addClass('bottom');
} else {
self.$container.removeClass('bottom');
};
});
if(self.$form.length){
self.$form.on('reset.easyDropDown', function(){
var active = self.hasLabel ? self.label : self.options[0].title;
self.$active.text(active);
});
};
},
unbindHandlers: function(){
var self = this;
self.$container
.add(self.$select)
.add(self.$items)
.add(self.$form)
.add(self.$dropDown)
.off('.easyDropDown');
$('body').off('.'+self.id);
},
open: function(){
var self = this,
scrollTop = window.scrollY || document.documentElement.scrollTop,
scrollLeft = window.scrollX || document.documentElement.scrollLeft,
scrollOffset = self.notInViewport(scrollTop);
self.closeAll();
self.getMaxHeight();
self.$select.focus();
window.scrollTo(scrollLeft, scrollTop+scrollOffset);
self.$container.addClass('open');
self.$scrollWrapper.css('height',self.maxHeight+'px');
self.down = true;
},
close: function(){
var self = this;
self.$container.removeClass('open');
self.$scrollWrapper.css('height','0px');
self.focusIndex = self.selected.index;
self.query = '';
self.down = false;
},
closeAll: function(){
var self = this,
instances = Object.getPrototypeOf(self).instances;
for(var key in instances){
var instance = instances[key];
instance.close();
};
},
select: function(index){
var self = this;
if(typeof index === 'string'){
index = self.$select.find('option[value='+index+']').index() - 1;
};
var option = self.options[index],
selectIndex = self.hasLabel ? index + 1 : index;
self.$items.removeClass('active').eq(index).addClass('active');
self.$active.text(option.title);
self.$select
.find('option')
.removeAttr('selected')
.eq(selectIndex)
.prop('selected',true)
.parent()
.trigger('change');
self.selected = {
index: index,
title: option.title
};
self.focusIndex = i;
if(typeof self.onChange === 'function'){
self.onChange.call(self.$select[0],{
title: option.title,
value: option.value
});
};
},
search: function(){
var self = this,
lock = function(i){
self.focusIndex = i;
self.$items.removeClass('focus').eq(self.focusIndex).addClass('focus');
self.scrollToView();
},
getTitle = function(i){
return self.options[i].title.toUpperCase();
};
for(i = 0; i < self.options.length; i++){
var title = getTitle(i);
if(title.indexOf(self.query) == 0){
lock(i);
return;
};
};
for(i = 0; i < self.options.length; i++){
var title = getTitle(i);
if(title.indexOf(self.query) > -1){
lock(i);
break;
};
};
},
scrollToView: function(){
var self = this;
if(self.focusIndex >= self.cutOff){
var $focusItem = self.$items.eq(self.focusIndex),
scroll = ($focusItem.outerHeight() * (self.focusIndex + 1)) - self.maxHeight;
self.$dropDown.scrollTop(scroll);
};
},
notInViewport: function(scrollTop){
var self = this,
range = {
min: scrollTop,
max: scrollTop + (window.innerHeight || document.documentElement.clientHeight)
},
menuBottom = self.$dropDown.offset().top + self.maxHeight;
if(menuBottom >= range.min && menuBottom <= range.max){
return 0;
} else {
return (menuBottom - range.max) + 5;
};
},
destroy: function(){
var self = this;
self.unbindHandlers();
self.$select.unwrap().siblings().remove();
self.$select.unwrap();
delete Object.getPrototypeOf(self).instances[self.$select[0].id];
},
disable: function(){
var self = this;
self.disabled = true;
self.$container.addClass('disabled');
self.$select.attr('disabled',true);
if(!self.down)self.close();
},
enable: function(){
var self = this;
self.disabled = false;
self.$container.removeClass('disabled');
self.$select.attr('disabled',false);
}
};
var instantiate = function(domNode, settings){
domNode.id = !domNode.id ? 'EasyDropDown'+rand() : domNode.id;
var instance = new EasyDropDown();
if(!instance.instances[domNode.id]){
instance.instances[domNode.id] = instance;
instance.init(domNode, settings);
};
},
rand = function(){
return ('00000'+(Math.random()*16777216<<0).toString(16)).substr(-6).toUpperCase();
};
$.fn.easyDropDown = function(){
var args = arguments,
dataReturn = [],
eachReturn;
eachReturn = this.each(function(){
if(args && typeof args[0] === 'string'){
var data = EasyDropDown.prototype.instances[this.id][args[0]](args[1], args[2]);
if(data)dataReturn.push(data);
} else {
instantiate(this, args[0]);
};
});
if(dataReturn.length){
return dataReturn.length > 1 ? dataReturn : dataReturn[0];
} else {
return eachReturn;
};
};
$(function(){
if(typeof Object.getPrototypeOf !== 'function'){
if(typeof 'test'.__proto__ === 'object'){
Object.getPrototypeOf = function(object){
return object.__proto__;
};
} else {
Object.getPrototypeOf = function(object){
return object.constructor.prototype;
};
};
};
$('select.dropdown').each(function(){
var json = $(this).attr('data-settings');
settings = json ? $.parseJSON(json) : {};
instantiate(this, settings);
});
});
})(jQuery);
Use #media rule.
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
//add your rest of the css code for mobile
}
If your question is to set different home pages for mobile and PC version use this
<script type="text/javascript">
<!--
if (screen.width <= 800) {
window.location = "http://m.domain.com";
}
//-->
</script>
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
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");
}
);
Currently having a problem where I have wanted to do a simple jQuery append to move a div into another div. In this case, when I type in the search box suggested results should appear underneath. However due to myself changing some of the code it no longer appears too the left so I did a simple jQuery append to make my life easier.
The problem is that when I make a simple search and the results box appears under the search box I use the console to excute the following line of code:
$('#QuickSearch').appendTo($('#searchheader'));
All works fine in the console. However when I put it in the search's javascript file, it does not execute that line of code. Below is the jQuery associated with the search:
var QuickSearch = {
minimum_length: 3,
search_delay: 125,
cache: new Object(),
init: function()
{
$('#search_query').bind("keydown", QuickSearch.on_keydown);
$('#search_query').bind("keyup", QuickSearch.on_keyup);
$('#search_query').bind("change", QuickSearch.on_change);
$('#search_query').blur(QuickSearch.on_blur);
$('#search_query').attr('autocomplete', 'off');
var scripts = document.getElementsByTagName('SCRIPT');
for(var i = 0; i < scripts.length; i++)
{
s = scripts[i];
if(s.src && s.src.indexOf('quicksearch.js') > -1)
{
QuickSearch.path = s.src.replace(/quicksearch\.js$/, '../');
break;
}
}
},
on_blur: function(event)
{
if(!QuickSearch.item_selected && !QuickSearch.over_all)
{
QuickSearch.hide_popup();
}
},
on_keydown: function(event)
{
if(event.keyCode == 13 && !event.altKey)
{
if(QuickSearch.selected)
{
try {
event.preventDefault();
event.stopPropagation();
} catch(e) { }
window.location = QuickSearch.selected.url;
return false;
}
else
{
QuickSearch.hide_popup();
}
}
else if(event.keyCode == 27)
{
if(document.getElementById('QuickSearch'))
{
try {
event.preventDefault();
event.stopPropagation();
} catch(e) { }
}
QuickSearch.hide_popup();
}
},
on_keyup: function(event)
{
if(QuickSearch.timeout)
{
clearTimeout(QuickSearch.timeout);
}
// Down key was pressed
if(event.keyCode == 40 && QuickSearch.results)
{
if(QuickSearch.selected && QuickSearch.results.length >= QuickSearch.selected.index+1)
{
QuickSearch.highlight_item(QuickSearch.selected.index+1, true);
}
if(!QuickSearch.selected && QuickSearch.results.length > 0)
{
QuickSearch.highlight_item(0, true);
}
try {
event.preventDefault();
event.stopPropagation();
} catch(e) { }
return false;
}
else if(event.keyCode == 38 && QuickSearch.results)
{
if(QuickSearch.selected && QuickSearch.selected.index > 0)
{
QuickSearch.highlight_item(QuickSearch.selected.index-1, true);
}
try {
event.preventDefault();
event.stopPropagation();
} catch(e) { }
}
else if(event.keyCode == 27)
{
QuickSearch.hide_popup();
}
else
{
if($('#search_query').val() == QuickSearch.last_query)
{
return false;
}
QuickSearch.selected = false;
if($('#search_query').val().replace(/^\s+|\s+$/g, '').length >= QuickSearch.minimum_length)
{
QuickSearch.last_query = $('#search_query').val().replace(/^\s+|\s+$/g, '');
if(QuickSearch.timeout)
{
window.clearTimeout(QuickSearch.timeout);
}
QuickSearch.timeout = window.setTimeout(QuickSearch.do_search, QuickSearch.search_delay);
}
else {
if(document.getElementById('QuickSearch'))
{
$('#QuickSearch').remove();
}
}
}
},
on_change: function(event)
{
return (QuickSearch.on_keydown(event) && QuickSearch.on_keyup(event));
},
do_search: function()
{
var cache_name = $('#search_query').val().length+$('#search_query').val();
if(QuickSearch.cache[cache_name])
{
QuickSearch.search_done(QuickSearch.cache[cache_name]);
}
else
{
$.ajax({
type: 'GET',
dataType: 'xml',
url: QuickSearch.path+'search.php?action=AjaxSearch&search_query='+encodeURIComponent($('#search_query').val()),
success: function(response) { QuickSearch.search_done(response); }
});
}
},
search_done: function(response)
{
// Cache results
var cache_name = $('#search_query').val().length+$('#search_query').val();
QuickSearch.cache[cache_name] = response;
if(document.getElementById('QuickSearch')) {
$('#QuickSearch').remove();
}
if ($('result', response).length > 0) {
var popup_container = document.createElement('TABLE');
popup_container.className = 'QuickSearch';
popup_container.id = 'QuickSearch';
popup_container.cellPadding = "0";
popup_container.cellSpacing = "0";
popup_container.border = "0";
var popup = document.createElement('TBODY');
popup_container.appendChild(popup);
var counter = 0;
$('result', response).each(
function()
{
var tr = $($(this).text());
var url = $('.QuickSearchResultName a', tr).attr('href');
var tmpCounter = counter;
$(tr).attr('id', 'QuickSearchResult' + tmpCounter);
$(tr).bind('mouseover', function() { QuickSearch.item_selected = true; QuickSearch.highlight_item(tmpCounter, false); });
$(tr).bind('mouseup', function() { window.location = url; });
$(tr).bind('mouseout', function() { QuickSearch.item_selected = false; QuickSearch.unhighlight_item(tmpCounter) });
$(popup).append(tr);
counter++;
}
);
// More results than we're showing?
var all_results_count = $('viewmoreurl', response).size();
if(all_results_count)
{
var tr = document.createElement('TR');
var td = document.createElement('TD');
tr.className = "QuickSearchAllResults";
tr.onmouseover = function() { QuickSearch.over_all = true; };
tr.onmouseout = function() { QuickSearch.over_all = false; };
td.colSpan = 2;
td.innerHTML = $('viewmoreurl', response).text();
tr.appendChild(td);
popup.appendChild(tr);
}
var clone = popup.cloneNode(true);
document.body.appendChild(clone);
clone.style.pp = "10px";
clone.style.left = "10px";
offset_height = clone.offsetHeight;
offset_width = clone.offsetWidth;
clone.parentNode.removeChild(clone);
var offset_top = offset_left = 0;
var element = document.getElementById('search_query');
if(typeof(QuickSearchAlignment) != 'undefined' && QuickSearchAlignment == 'left') {
offset_left = 0;
}
else {
offset_left += element.offsetWidth - $('#SearchForm').width();
}
offset_top = 87;
do
{
offset_top += element.offsetTop || 0;
offset_left += element.offsetLeft || 0;
element = element.offsetParent;
} while(element);
popup_container.style.position = "fixed";
popup_container.style.top = offset_top + "px";
if(typeof(QuickSearchWidth) != 'undefined') {
popup_container.style.width = QuickSearchWidth;
}
else {
popup_container.style.width = document.getElementById('SearchForm').offsetWidth - 2 + "px";
}
if($('#QuickSearch'))
{
$('#QuickSearch').remove();
}
document.body.appendChild(popup_container);
popup_container.style.display = '';
}
else
{
if(document.getElementById('QuickSearch'))
{
$('#QuickSearch').remove();
}
}
},
hide_popup: function()
{
$('#QuickSearch').remove();
QuickSearch.selected = null;
},
highlight_item: function(index, keystroke)
{
element = $('#QuickSearchResult'+index);
if(keystroke == true)
{
if(QuickSearch.selected) QuickSearch.selected.className = 'QuickSearchResult';
QuickSearch.selected = document.getElementById('QuickSearchResult'+index);
}
element.addClass("QuickSearchHover");
},
unhighlight_item: function(index)
{
element = $('#QuickSearchResult'+index);
element.removeClass('QuickSearchHover');
}
};
$(document).ready(function()
{
QuickSearch.init();
});