Image slider transition time - javascript

I just created an image slider based off of a tutorial I found. I just stuck some quick pics I found online to test it out, but the reason I am asking a question is because the amount of time it takes to change the image varies so much. It will take forever and then it will start changing the images every second or two. How can I make my slider have a consistent slide transition.
It will probably be best to post my site so you can see what it is doing.
realtorcatch.com
I am using a plugin javascript, so the code is a bunched up. Is there a way to add in my own code so that the same basic features work, but it is of better quality?
The Jquery:
(function (e) {
var t = function (t, n) {
var r = e.extend({}, e.fn.nivoSlider.defaults, n);
var i = {
currentSlide: 0,
currentImage: "",
totalSlides: 0,
running: false,
paused: false,
stop: false,
controlNavEl: false
};
var s = e(t);
s.data("nivo:vars", i).addClass("nivoSlider");
var o = s.children();
o.each(function () {
var t = e(this);
var n = "";
if (!t.is("img")) {
if (t.is("a")) {
t.addClass("nivo-imageLink");
n = t
}
t = t.find("img:first")
}
var r = r === 0 ? t.attr("width") : t.width(),
s = s === 0 ? t.attr("height") : t.height();
if (n !== "") {
n.css("display", "none")
}
t.css("display", "none");
i.totalSlides++
});
if (r.randomStart) {
r.startSlide = Math.floor(Math.random() * i.totalSlides)
}
if (r.startSlide > 0) {
if (r.startSlide >= i.totalSlides) {
r.startSlide = i.totalSlides - 1
}
i.currentSlide = r.startSlide
}
if (e(o[i.currentSlide]).is("img")) {
i.currentImage = e(o[i.currentSlide])
} else {
i.currentImage = e(o[i.currentSlide]).find("img:first")
}
if (e(o[i.currentSlide]).is("a")) {
e(o[i.currentSlide]).css("display", "block")
}
var u = e("<img/>").addClass("nivo-main-image");
u.attr("src", i.currentImage.attr("src")).show();
s.append(u);
e(window).resize(function () {
s.children("img").width(s.width());
u.attr("src", i.currentImage.attr("src"));
u.stop().height("auto");
e(".nivo-slice").remove();
e(".nivo-box").remove()
});
s.append(e('<div class="nivo-caption"></div>'));
var a = function (t) {
var n = e(".nivo-caption", s);
if (i.currentImage.attr("title") != "" && i.currentImage.attr("title") != undefined) {
var r = i.currentImage.attr("title");
if (r.substr(0, 1) == "#") r = e(r).html();
if (n.css("display") == "block") {
setTimeout(function () {
n.html(r)
}, t.animSpeed)
} else {
n.html(r);
n.stop().fadeIn(t.animSpeed)
}
} else {
n.stop().fadeOut(t.animSpeed)
}
};
a(r);
var f = 0;
if (!r.manualAdvance && o.length > 1) {
f = setInterval(function () {
d(s, o, r, false)
}, r.pauseTime)
}
if (r.directionNav) {
s.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + r.prevText + '</a><a class="nivo-nextNav">' + r.nextText + "</a></div>");
e(s).on("click", "a.nivo-prevNav", function () {
if (i.running) {
return false
}
clearInterval(f);
f = "";
i.currentSlide -= 2;
d(s, o, r, "prev")
});
e(s).on("click", "a.nivo-nextNav", function () {
if (i.running) {
return false
}
clearInterval(f);
f = "";
d(s, o, r, "next")
})
}
if (r.controlNav) {
i.controlNavEl = e('<div class="nivo-controlNav"></div>');
s.after(i.controlNavEl);
for (var l = 0; l < o.length; l++) {
if (r.controlNavThumbs) {
i.controlNavEl.addClass("nivo-thumbs-enabled");
var c = o.eq(l);
if (!c.is("img")) {
c = c.find("img:first")
}
if (c.attr("data-thumb")) i.controlNavEl.append('<a class="nivo-control" rel="' + l + '"><img src="' + c.attr("data-thumb") + '" alt="" /></a>')
} else {
i.controlNavEl.append('<a class="nivo-control" rel="' + l + '">' + (l + 1) + "</a>")
}
}
e("a:eq(" + i.currentSlide + ")", i.controlNavEl).addClass("active");
e("a", i.controlNavEl).bind("click", function () {
if (i.running) return false;
if (e(this).hasClass("active")) return false;
clearInterval(f);
f = "";
u.attr("src", i.currentImage.attr("src"));
i.currentSlide = e(this).attr("rel") - 1;
d(s, o, r, "control")
})
}
if (r.pauseOnHover) {
s.hover(function () {
i.paused = true;
clearInterval(f);
f = ""
}, function () {
i.paused = false;
if (f === "" && !r.manualAdvance) {
f = setInterval(function () {
d(s, o, r, false)
}, r.pauseTime)
}
})
}
s.bind("nivo:animFinished", function () {
u.attr("src", i.currentImage.attr("src"));
i.running = false;
e(o).each(function () {
if (e(this).is("a")) {
e(this).css("display", "none")
}
});
if (e(o[i.currentSlide]).is("a")) {
e(o[i.currentSlide]).css("display", "block")
}
if (f === "" && !i.paused && !r.manualAdvance) {
f = setInterval(function () {
d(s, o, r, false)
}, r.pauseTime)
}
r.afterChange.call(this)
});
var h = function (t, n, r) {
if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
var i = e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().is("a") ? e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().height() : e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height();
for (var s = 0; s < n.slices; s++) {
var o = Math.round(t.width() / n.slices);
if (s === n.slices - 1) {
t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
left: o * s + "px",
width: t.width() - o * s + "px",
height: i + "px",
opacity: "0",
overflow: "hidden"
}))
} else {
t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
left: o * s + "px",
width: o + "px",
height: i + "px",
opacity: "0",
overflow: "hidden"
}))
}
}
e(".nivo-slice", t).height(i);
u.stop().animate({
height: e(r.currentImage).height()
}, n.animSpeed)
};
var p = function (t, n, r) {
if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
var i = Math.round(t.width() / n.boxCols),
s = Math.round(e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height() / n.boxRows);
for (var o = 0; o < n.boxRows; o++) {
for (var a = 0; a < n.boxCols; a++) {
if (a === n.boxCols - 1) {
t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
opacity: 0,
left: i * a + "px",
top: s * o + "px",
width: t.width() - i * a + "px"
}));
e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
} else {
t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
opacity: 0,
left: i * a + "px",
top: s * o + "px",
width: i + "px"
}));
e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
}
}
}
u.stop().animate({
height: e(r.currentImage).height()
}, n.animSpeed)
};
var d = function (t, n, r, i) {
var s = t.data("nivo:vars");
if (s && s.currentSlide === s.totalSlides - 1) {
r.lastSlide.call(this)
}
if ((!s || s.stop) && !i) {
return false
}
r.beforeChange.call(this);
if (!i) {
u.attr("src", s.currentImage.attr("src"))
} else {
if (i === "prev") {
u.attr("src", s.currentImage.attr("src"))
}
if (i === "next") {
u.attr("src", s.currentImage.attr("src"))
}
}
s.currentSlide++;
if (s.currentSlide === s.totalSlides) {
s.currentSlide = 0;
r.slideshowEnd.call(this)
}
if (s.currentSlide < 0) {
s.currentSlide = s.totalSlides - 1
}
if (e(n[s.currentSlide]).is("img")) {
s.currentImage = e(n[s.currentSlide])
} else {
s.currentImage = e(n[s.currentSlide]).find("img:first")
}
if (r.controlNav) {
e("a", s.controlNavEl).removeClass("active");
e("a:eq(" + s.currentSlide + ")", s.controlNavEl).addClass("active")
}
a(r);
e(".nivo-slice", t).remove();
e(".nivo-box", t).remove();
var o = r.effect,
f = "";
if (r.effect === "random") {
f = new Array("sliceDownRight", "sliceDownLeft", "sliceUpRight", "sliceUpLeft", "sliceUpDown", "sliceUpDownLeft", "fold", "fade", "boxRandom", "boxRain", "boxRainReverse", "boxRainGrow", "boxRainGrowReverse");
o = f[Math.floor(Math.random() * (f.length + 1))];
if (o === undefined) {
o = "fade"
}
}
if (r.effect.indexOf(",") !== -1) {
f = r.effect.split(",");
o = f[Math.floor(Math.random() * f.length)];
if (o === undefined) {
o = "fade"
}
}
if (s.currentImage.attr("data-transition")) {
o = s.currentImage.attr("data-transition")
}
s.running = true;
var l = 0,
c = 0,
d = "",
m = "",
g = "",
y = "";
if (o === "sliceDown" || o === "sliceDownRight" || o === "sliceDownLeft") {
h(t, r, s);
l = 0;
c = 0;
d = e(".nivo-slice", t);
if (o === "sliceDownLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function () {
var n = e(this);
n.css({
top: "0px"
});
if (c === r.slices - 1) {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "sliceUp" || o === "sliceUpRight" || o === "sliceUpLeft") {
h(t, r, s);
l = 0;
c = 0;
d = e(".nivo-slice", t);
if (o === "sliceUpLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function () {
var n = e(this);
n.css({
bottom: "0px"
});
if (c === r.slices - 1) {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "sliceUpDown" || o === "sliceUpDownRight" || o === "sliceUpDownLeft") {
h(t, r, s);
l = 0;
c = 0;
var b = 0;
d = e(".nivo-slice", t);
if (o === "sliceUpDownLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function () {
var n = e(this);
if (c === 0) {
n.css("top", "0px");
c++
} else {
n.css("bottom", "0px");
c = 0
}
if (b === r.slices - 1) {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
b++
})
} else if (o === "fold") {
h(t, r, s);
l = 0;
c = 0;
e(".nivo-slice", t).each(function () {
var n = e(this);
var i = n.width();
n.css({
top: "0px",
width: "0px"
});
if (c === r.slices - 1) {
setTimeout(function () {
n.animate({
width: i,
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
width: i,
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "fade") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: t.width() + "px"
});
m.animate({
opacity: "1.0"
}, r.animSpeed * 2, "", function () {
t.trigger("nivo:animFinished")
})
} else if (o === "slideInRight") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: "0px",
opacity: "1"
});
m.animate({
width: t.width() + "px"
}, r.animSpeed * 2, "", function () {
t.trigger("nivo:animFinished")
})
} else if (o === "slideInLeft") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: "0px",
opacity: "1",
left: "",
right: "0px"
});
m.animate({
width: t.width() + "px"
}, r.animSpeed * 2, "", function () {
m.css({
left: "0px",
right: ""
});
t.trigger("nivo:animFinished")
})
} else if (o === "boxRandom") {
p(t, r, s);
g = r.boxCols * r.boxRows;
c = 0;
l = 0;
y = v(e(".nivo-box", t));
y.each(function () {
var n = e(this);
if (c === g - 1) {
setTimeout(function () {
n.animate({
opacity: "1"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1"
}, r.animSpeed)
}, 100 + l)
}
l += 20;
c++
})
} else if (o === "boxRain" || o === "boxRainReverse" || o === "boxRainGrow" || o === "boxRainGrowReverse") {
p(t, r, s);
g = r.boxCols * r.boxRows;
c = 0;
l = 0;
var w = 0;
var E = 0;
var S = [];
S[w] = [];
y = e(".nivo-box", t);
if (o === "boxRainReverse" || o === "boxRainGrowReverse") {
y = e(".nivo-box", t)._reverse()
}
y.each(function () {
S[w][E] = e(this);
E++;
if (E === r.boxCols) {
w++;
E = 0;
S[w] = []
}
});
for (var x = 0; x < r.boxCols * 2; x++) {
var T = x;
for (var N = 0; N < r.boxRows; N++) {
if (T >= 0 && T < r.boxCols) {
(function (n, i, s, u, a) {
var f = e(S[n][i]);
var l = f.width();
var c = f.height();
if (o === "boxRainGrow" || o === "boxRainGrowReverse") {
f.width(0).height(0)
}
if (u === a - 1) {
setTimeout(function () {
f.animate({
opacity: "1",
width: l,
height: c
}, r.animSpeed / 1.3, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + s)
} else {
setTimeout(function () {
f.animate({
opacity: "1",
width: l,
height: c
}, r.animSpeed / 1.3)
}, 100 + s)
}
})(N, T, l, c, g);
c++
}
T--
}
l += 100
}
}
};
var v = function (e) {
for (var t, n, r = e.length; r; t = parseInt(Math.random() * r, 10), n = e[--r], e[r] = e[t], e[t] = n);
return e
};
var m = function (e) {
if (this.console && typeof console.log !== "undefined") {
console.log(e)
}
};
this.stop = function () {
if (!e(t).data("nivo:vars").stop) {
e(t).data("nivo:vars").stop = true;
m("Stop Slider")
}
};
this.start = function () {
if (e(t).data("nivo:vars").stop) {
e(t).data("nivo:vars").stop = false;
m("Start Slider")
}
};
r.afterLoad.call(this);
return this
};
e.fn.nivoSlider = function (n) {
return this.each(function (r, i) {
var s = e(this);
if (s.data("nivoslider")) {
return s.data("nivoslider")
}
var o = new t(this, n);
s.data("nivoslider", o)
})
};
e.fn.nivoSlider.defaults = {
effect: "random",
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3e3,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: "Prev",
nextText: "Next",
randomStart: false,
beforeChange: function () {},
afterChange: function () {},
slideshowEnd: function () {},
lastSlide: function () {},
afterLoad: function () {}
};
e.fn._reverse = [].reverse
})(jQuery)

Things like this :
r.startSlide = Math.floor(Math.random() * i.totalSlides)
are the issue here, it has been programmed deliberately as it is.
There are much simpler sliders, even with css only.
I have one that is fully responsive, let me know if you want that.

#Becky
Ok here goes, i will explain the most important things.
Use the img tag for this in the HTML, this way it's very easy to defer load or lazy load the pics later on.
In the CSS, the first thing is the keyframes, if you would like the images to slide differently, let me know, i can change this.
This example will work on all devices and is fully responsive, some very old phones will just slide th epics from left to right, i.e. the phones which do not support transforms, but it will still work, you would need some extra prefixes for this, i can add them if you like.
Line 23 i wrap the whole thing to be displayed as flexbox.
Line 41 we just declare the width of the figure element(you can use a div here too, it does not really matter), the width is 800%, because we have 8 pics in this slider.if it were 5 pics, we would say width is 500% etc.
We take out margin, padding etc, the img float left is just to avoid some inconsistencies in IE.
What this slider will do is, it pushes the pics to the left when we change the margin, see in the keyframes, we push it left 100% for the next pic, 200% for the one after that etc.
We declare the img width in the figure element to be 12.5%(100% / 8pics=12.5%), if we had 5 pics, the img width would be 20% etc.
And finally, the slider div is defined, you can change the border here, or the box shadow, and the background color, so when the pics do not fill out the frame, you can have the background color of choice, i have set it to transparent here.
Overflow hidden is mandatory for this slider, the width is set to 80% OR a maximum of 500pix, whichever occurs first.
<div class="superslide"><div id="slider">
<figure>
<img src="http://generalunion.org/Joomla/images/holidays.jpg"
width=350 height=350>
http://codepen.io/damianocel/pen/OyzaZB
That is it, no JS, very light weight, responsive and works on all devices.
You can use it as full backkground slider etc, just make sure the pics are all the same size.
to change the speed of the animations, just go to the lines 49 and 50 to change the time parameter(28s here).

Related

Infinitely rolling text with CSS

On my HTML page, I need to have a line with text that rolls "infinitely" on the page, e.g.
"Hello World ... Hello World ... Hello World ... Hello World ..."
Sort of like a ticker tape, but with the same text's beginning rolling into its end w/o a gap.
I've tried using animation: marquee CSS style, I can get the text roll, then jump back, then roll again, but that's not what I need.
Is this possible with CSS? JS would be OK, if there is a working solution.
Try here "text rolling" working with text & images and mouse effects(js+css)
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
Are you open to using a lib that does this?
This one here: http://www.cssscript.com/marquee-like-horizontal-scroller-with-pure-javascript-marquee-js/ does a good job.
$(document).ready(function() {
new Marquee('example', {
// once or continuous
continuous: true,
// 'rtl' or 'ltr'
direction: 'rtl',
// pause between loops
delayAfter: 1000,
// when to start
delayBefore: 0,
// scroll speed
speed: 0.5,
// loops
loops: -1
});
});
////////////////////////////// LIBRARY BELOW ///////
// See: http://www.cssscript.com/marquee-like-horizontal-scroller-with-pure-javascript-marquee-js/
/*
Vanilla Javascript Marquee
Version: 0.1.0
Author: Robert Bossaert <https://github.com/robertbossaert>
Example call:
new Marquee('element');
new Marquee('element', {
direction: 'rtl',
});
*/
var Marquee = function(element, defaults) {
"use strict";
var elem = document.getElementById(element),
options = (defaults === undefined) ? {} : defaults,
continuous = options.continuous || true, // once or continuous
delayAfter = options.delayAfter || 1000, // pause between loops
delayBefore = options.delayBefore || 0, // when to start
direction = options.direction || 'ltr', // ltr or rtl
loops = options.loops || -1,
speed = options.speed || 0.5,
timer = null,
milestone = 0,
marqueeElem = null,
elemWidth = null,
self = this,
ltrCond = 0,
loopCnt = 0,
start = 0,
process = null,
constructor = function(elem) {
// Build html
var elemHTML = elem.innerHTML,
elemNode = elem.childNodes[1] || elem;
elemWidth = elemNode.offsetWidth;
marqueeElem = '<div>' + elemHTML + '</div>';
elem.innerHTML = marqueeElem;
marqueeElem = elem.getElementsByTagName('div')[0];
elem.style.overflow = 'hidden';
marqueeElem.style.whiteSpace = 'nowrap';
marqueeElem.style.position = 'relative';
if (continuous === true) {
marqueeElem.innerHTML += elemHTML;
marqueeElem.style.width = '200%';
if (direction === 'ltr') {
start = -elemWidth;
}
} else {
ltrCond = elem.offsetWidth;
if (direction === 'rtl') {
milestone = ltrCond;
}
}
if (direction === 'ltr') {
milestone = -elemWidth;
} else if (direction === 'rtl') {
speed = -speed;
}
self.start();
return marqueeElem;
}
this.start = function() {
process = window.setInterval(function() {
self.play();
});
};
this.play = function() {
// beginning
marqueeElem.style.left = start + 'px';
start = start + speed;
if (start > ltrCond || start < -elemWidth) {
start = milestone;
loopCnt++;
if (loops !== -1 && loopCnt >= loops) {
marqueeElem.style.left = 0;
}
}
}
this.end = function() {
window.clearInterval(process);
}
// Init plugin
marqueeElem = constructor(elem);
}
body {
background: #edf3f9;
color: #3f4f5f;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
width: 800px;
}
header {
border-bottom: 2px solid #3f4f5f;
padding: 6.25em 0 3.95em;
text-align: center;
width: 100%;
}
header h1 {
margin: 0 0 10px;
}
.example {
padding: 3em 0;
}
h2 {
text-align: center;
}
pre {
background: #f5f2f0;
color: #000;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
line-height: 26px;
padding: 1em;
text-shadow: 0 1px white;
white-space: pre-wrap;
}
pre span.string {
color: #690;
}
pre span.number {
color: #905;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
The quick brown fox ran over to the bar to drink some water. He walked up to the bar tender and said: blah blah blah.
</div>
Here is a demo based upon the lib that Dreamer posted.
I didn't like how it set inline styles on the element or how it used cookies to store past settings so I removed that in the crawler.js code.
This is a pretty old library (ie5 is mentioned (!)) but it seems to do the trick.
$(function() {
marqueeInit({
uniqueid: 'mycrawler',
style: {
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
persist: true,
savedirection: true
});
});
//////////////// CRAWLER.JS FOLLOWS ///////////
/* Text and/or Image Crawler Script v1.53 (c)2009-2012 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
/* Update 4/2011 to v1.5 - Adds optional random property. Set it to true to use.
Fixes browser crash from empty crawlers, ad and image blocking software/routines.
Fixes behavior in some IE of breaking script if an image is missing.
Adds alt attributes to images without them to aid in diagnosis of missing/corrupt
images. This may be disabled with the new optional noAddedAlt property set to true.
Internal workings enhanced for greater speed of execution, less memory usage.
*/
/* Update 11/2011 - Detect and randomize td elements within a single table with a single tr */
// updated 7/2012 to 1.51 for optional integration with 3rd party initializing scripts -
// ref: http://www.dynamicdrive.com/forums/showthread.php?p=278161#post278161
// updated 8/2012 to 1.52 for greater compatibility with IE in Quirks Mode
/* Update 10/2012 to v1.53 - Adds optional persist property to have the crawler remember its
position and direction page to page and on page reload. To enable it in the marqueeInit set
persist: true,
*/
///////////////// No Need to Edit - Configuration is Done in the On Page marqueeInit call(s) /////////////////
function marqueeInit(config) {
if (!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}
(function() {
if (!document.createElement) return;
if (typeof opera === 'undefined') {
window.opera = false;
}
marqueeInit.ar = [];
document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
var c = 0,
tTRE = [/^\s*$/, /^\s*/, /\s*$/, /[^\/]+$/],
req1 = {
'position': 'relative',
'overflow': 'hidden'
},
defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
},
dash, ie = false,
oldie = 0,
ie5 = false,
iever = 0;
/*#cc_on #*/
/*#if(#_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = /(-(.))/;
String.prototype.encamel = function(s, m){
s = this;
while((m = dash.exec(s)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
#end #*/
if (!ie5) {
dash = /-(.)/g;
function toHump(a, b) {
return b.toUpperCase();
};
String.prototype.encamel = function() {
return this.replace(dash, toHump);
};
}
if (ie && iever < 8) {
marqueeInit.table = [];
window.attachEvent('onload', function() {
marqueeInit.OK = true;
var i = -1,
limit = marqueeInit.table.length;
while (++i < limit)
marqueeInit.run(marqueeInit.table[i]);
});
}
function intable(el) {
while ((el = el.parentNode))
if (el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};
marqueeInit.run = function(id) {
if (ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))) {
marqueeInit.table.push(id);
return;
}
if (!document.getElementById(id))
setTimeout(function() {
marqueeInit.run(id);
}, 300);
else
new Marq(c++, document.getElementById(id));
}
function trimTags(tag) {
var r = [],
i = 0,
e;
while ((e = tag.firstChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while ((e = tag.lastChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if ((e = tag.firstChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if ((e = tag.lastChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while ((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}
function randthem(tag) {
var els = oldie ? tag.all : tag.getElementsByTagName('*'),
i = els.length,
childels = [];
while (--i > -1) {
if (els[i].parentNode === tag) {
childels.push(els[i]);
}
}
childels.sort(function() {
return 0.5 - Math.random();
});
i = childels.length;
while (--i > -1) {
tag.appendChild(childels[i]);
}
}
function Marq(c, tag) {
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
if (this.mq.random) {
if (tag.getElementsByTagName && tag.getElementsByTagName('tr').length === 1 && tag.childNodes.length === 1) {
randthem(tag.getElementsByTagName('tr')[0]);
} else {
randthem(tag);
}
}
for (p in defaultconfig)
if ((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width)) ? '100%' : this.mq.style.width;
if (!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height)) ? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height)) ? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width ? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if (ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [
[req1, this.c.style],
[this.mq.style, this.c.style]
];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if ((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if (this.mq.mouse === 'pause') {
this.c.onmouseover = function() {
cObj.mq.stopped = true;
};
this.c.onmouseout = function() {
cObj.mq.stopped = false;
};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if (ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if (!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for (i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if (ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if (ims.length) {
for (ic = 0, i = 0; i < ims.length; ++i) {
ims[i].style.display = 'inline';
if (!ims[i].alt && !this.mq.noAddedAlt) {
ims[i].alt = (tTRE[3].exec(ims[i].src)) || ('Image #' + [i + 1]);
if (!ims[i].title) {
ims[i].title = '';
}
}
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if (typeof ims[i].complete === 'boolean' && ims[i].complete)
ic++;
else {
ims[i].onload = ims[i].onerror = function() {
if (++ic === ims.length)
cObj.setup(c);
};
}
if (ic === ims.length)
this.setup(c);
}
} else this.setup(c)
}
Marq.prototype.setup = function(c) {
if (this.mq.setup) return;
this.mq.setup = this;
var s, w, cObj = this,
exit = 10000;
if (this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if (typeof this.mq.initcontent === 'function') {
this.mq.initcontent.apply(this.mq, [this.m]);
}
if (this.mq.mouse === 'cursor driven') {
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e) {
cObj.mq.stopped = false;
cObj.directspeed(e)
};
if (this.mq.moveatleast) {
this.mq.inc = this.mq.moveatleast;
if (this.mq.savedirection) {
if (this.mq.savedirection === 'reverse') {
this.c.onmouseout = function(e) {
if (cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction === 'right' ? 'left' : 'right';
};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e) {
if (cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;
};
}
} else
this.c.onmouseout = function(e) {
if (!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;
};
} else
this.c.onmouseout = function(e) {
if (!cObj.contains(e)) cObj.slowdeath();
};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast ? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while (this.c.offsetWidth > this.w - s && --exit) {
w = isNaN(this.cw[0]) ? this.w - s : --this.cw[0];
if (w < 1 || this.w < Math.max(1, s)) {
break;
}
this.c.style.width = isNaN(this.cw[0]) ? this.w - s + 'px' : --this.cw[0] + this.cw[1];
}
this.c.style.visibility = 'visible';
this.runit();
}
Marq.prototype.slowdeath = function() {
var cObj = this;
if (this.mq.inc) {
this.mq.inc -= 1;
this.timer = setTimeout(function() {
cObj.slowdeath();
}, 100);
}
}
Marq.prototype.runit = function() {
var cObj = this,
d = this.mq.direction === 'right' ? 1 : -1;
if (this.mq.stopped || this.mq.stopMarquee) {
setTimeout(function() {
cObj.runit();
}, 300);
return;
}
if (this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if (d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if (d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function() {
cObj.runit();
}, 30 + (this.mq.addDelay || 0));
}
Marq.prototype.directspeed = function(e) {
e = e || window.event;
if (this.timer) clearTimeout(this.timer);
var c = this.c,
w = c.offsetWidth,
l = c.offsetLeft,
mp = (typeof e.pageX === 'number' ?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2,
rb = (w + this.r) / 2;
while ((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb ? 'left' : 'right';
this.mq.inc = Math.round((mp > rb ? (mp - rb) : mp < lb ? (lb - mp) : 0) / lb * this.sinc);
}
Marq.prototype.contains = function(e) {
if (e && e.relatedTarget) {
var c = e.relatedTarget;
if (c === this.c) return true;
while ((c = c.parentNode))
if (c === this.c) return true;
}
return false;
}
function resize() {
for (var s, w, m, i = 0; i < marqueeInit.ar.length; ++i) {
if (marqueeInit.ar[i] && marqueeInit.ar[i].setup) {
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast ? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1 ? parseInt(m.mq.style.width) : 'a';
while (m.c.offsetWidth > m.w - s) {
w = isNaN(m.cw[0]) ? m.w - s : --m.cw[0];
if (w < 1) {
break;
}
m.c.style.width = isNaN(m.cw[0]) ? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}
}
function unload() {
for (var m, i = 0; i < marqueeInit.ar.length; ++i) {
if (marqueeInit.ar[i] && marqueeInit.ar[i].persist && marqueeInit.ar[i].setup) {
m = marqueeInit.ar[i].setup;
m.cookie.set(m.mq.uniqueid, m.m[0].style.left + ':' + m.m[1].style.left + ':' + m.mq.direction);
}
}
}
if (window.addEventListener) {
window.addEventListener('resize', resize, false);
window.addEventListener('unload', unload, false);
} else if (window.attachEvent) {
window.attachEvent('onresize', resize);
window.attachEvent('onunload', unload);
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee" id="mycrawler">
Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles.
</div>

How to read the blockadblock script?

I'm wondering how to decode the script, I'm trying to customize the design but its so hard to read the code
there script is here:
https://blockadblock.com/blockadblock_basic_script.php
It's just encrypted inline with a function, no "obfuscation with a key"
Run the function without the initial "eval" here: http://www.webtoolkitonline.com/javascript-tester.html
and you'll get the code:
Result = ;
var xcJQCflAmpis = '',
KkUCuxqIgh = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < 12; i++) xcJQCflAmpis += KkUCuxqIgh.charAt(Math.floor(Math.random() * KkUCuxqIgh.length));
var VABjXzYzJp = 8,
WSpSwDLzQd = 91,
nsJjjBITZC = 178,
neMuFFBFgq = 19,
rMwHazIJjv = function(t) {
var o = !1,
i = function() {
if (document.addEventListener) {
document.removeEventListener('DOMContentLoaded', e);
window.removeEventListener('load', e)
} else {
document.detachEvent('onreadystatechange', e);
window.detachEvent('onload', e)
}
},
e = function() {
if (!o && (document.addEventListener || event.type === 'load' || document.readyState === 'complete')) {
o = !0;
i();
t()
}
};
if (document.readyState === 'complete') {
t()
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', e);
window.addEventListener('load', e)
} else {
document.attachEvent('onreadystatechange', e);
window.attachEvent('onload', e);
var n = !1;
try {
n = window.frameElement == null && document.documentElement
} catch (r) {};
if (n && n.doScroll) {
(function a() {
if (o) return;
try {
n.doScroll('left')
} catch (e) {
return setTimeout(a, 50)
};
o = !0;
i();
t()
})()
}
}
};
window['' + xcJQCflAmpis + ''] = (function() {
var t = {
t$: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
encode: function(e) {
var d = '',
l, r, i, s, c, a, n, o = 0;
e = t.n$(e);
while (o < e.length) {
l = e.charCodeAt(o++);
r = e.charCodeAt(o++);
i = e.charCodeAt(o++);
s = l >> 2;
c = (l & 3) << 4 | r >> 4;
a = (r & 15) << 2 | i >> 6;
n = i & 63;
if (isNaN(r)) {
a = n = 64
} else if (isNaN(i)) {
n = 64
};
d = d + this.t$.charAt(s) + this.t$.charAt(c) + this.t$.charAt(a) + this.t$.charAt(n)
};
return d
},
decode: function(e) {
var n = '',
l, c, d, s, r, i, a, o = 0;
e = e.replace(/[^A-Za-z0-9\+\/\=]/g, '');
while (o < e.length) {
s = this.t$.indexOf(e.charAt(o++));
r = this.t$.indexOf(e.charAt(o++));
i = this.t$.indexOf(e.charAt(o++));
a = this.t$.indexOf(e.charAt(o++));
l = s << 2 | r >> 4;
c = (r & 15) << 4 | i >> 2;
d = (i & 3) << 6 | a;
n = n + String.fromCharCode(l);
if (i != 64) {
n = n + String.fromCharCode(c)
};
if (a != 64) {
n = n + String.fromCharCode(d)
}
};
n = t.e$(n);
return n
},
n$: function(t) {
t = t.replace(/;/g, ';');
var n = '';
for (var o = 0; o < t.length; o++) {
var e = t.charCodeAt(o);
if (e < 128) {
n += String.fromCharCode(e)
} else if (e > 127 && e < 2048) {
n += String.fromCharCode(e >> 6 | 192);
n += String.fromCharCode(e & 63 | 128)
} else {
n += String.fromCharCode(e >> 12 | 224);
n += String.fromCharCode(e >> 6 & 63 | 128);
n += String.fromCharCode(e & 63 | 128)
}
};
return n
},
e$: function(t) {
var o = '',
e = 0,
n = c1 = c2 = 0;
while (e < t.length) {
n = t.charCodeAt(e);
if (n < 128) {
o += String.fromCharCode(n);
e++
} else if (n > 191 && n < 224) {
c2 = t.charCodeAt(e + 1);
o += String.fromCharCode((n & 31) << 6 | c2 & 63);
e += 2
} else {
c2 = t.charCodeAt(e + 1);
c3 = t.charCodeAt(e + 2);
o += String.fromCharCode((n & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
e += 3
}
};
return o
}
};
var a = ['YWQtbGVmdA==', 'YWRCYW5uZXJXcmFw', 'YWQtZnJhbWU=', 'YWQtaGVhZGVy', 'YWQtaW1n', 'YWQtaW5uZXI=', 'YWQtbGFiZWw=', 'YWQtbGI=', 'YWQtZm9vdGVy', 'YWQtY29udGFpbmVy', 'YWQtY29udGFpbmVyLTE=', 'YWQtY29udGFpbmVyLTI=', 'QWQzMDB4MTQ1', 'QWQzMDB4MjUw', 'QWQ3Mjh4OTA=', 'QWRBcmVh', 'QWRGcmFtZTE=', 'QWRGcmFtZTI=', 'QWRGcmFtZTM=', 'QWRGcmFtZTQ=', 'QWRMYXllcjE=', 'QWRMYXllcjI=', 'QWRzX2dvb2dsZV8wMQ==', 'QWRzX2dvb2dsZV8wMg==', 'QWRzX2dvb2dsZV8wMw==', 'QWRzX2dvb2dsZV8wNA==', 'RGl2QWQ=', 'RGl2QWQx', 'RGl2QWQy', 'RGl2QWQz', 'RGl2QWRB', 'RGl2QWRC', 'RGl2QWRD', 'QWRJbWFnZQ==', 'QWREaXY=', 'QWRCb3gxNjA=', 'QWRDb250YWluZXI=', 'Z2xpbmtzd3JhcHBlcg==', 'YWRUZWFzZXI=', 'YmFubmVyX2Fk', 'YWRCYW5uZXI=', 'YWRiYW5uZXI=', 'YWRBZA==', 'YmFubmVyYWQ=', 'IGFkX2JveA==', 'YWRfY2hhbm5lbA==', 'YWRzZXJ2ZXI=', 'YmFubmVyaWQ=', 'YWRzbG90', 'cG9wdXBhZA==', 'YWRzZW5zZQ==', 'Z29vZ2xlX2Fk', 'b3V0YnJhaW4tcGFpZA==', 'c3BvbnNvcmVkX2xpbms='],
y = Math.floor(Math.random() * a.length),
Y = t.decode(a[y]),
b = Y,
C = 1,
f = '#EEEEEE',
r = '#777777',
g = '#adb8ff',
w = '#FFFFFF',
Q = '',
W = 'Welcome!',
v = 'It looks like you\'re using an ad blocker. That\'s okay. Who doesn\'t?',
p = 'But without advertising-income, we can\'t keep making this site awesome.',
s = 'I understand, I have disabled my ad blocker. Let me in!',
o = 0,
u = 0,
n = 'moc.kcolbdakcolb',
l = 0,
M = e() + '.jpg';
function h(t) {
if (t) t = t.substr(t.length - 15);
var n = document.getElementsByTagName('script');
for (var o = n.length; o--;) {
var e = String(n[o].src);
if (e) e = e.substr(e.length - 15);
if (e === t) return !0
};
return !1
};
function m(t) {
if (t) t = t.substr(t.length - 15);
var e = document.styleSheets;
x = 0;
while (x < e.length) {
thisurl = e[x].href;
if (thisurl) thisurl = thisurl.substr(thisurl.length - 15);
if (thisurl === t) return !0;
x++
};
return !1
};
function e(t) {
var o = '',
e = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
t = t || 30;
for (var n = 0; n < t; n++) o += e.charAt(Math.floor(Math.random() * e.length));
return o
};
function i(o) {
var i = ['YWRuLmViYXkuY29t', 'YWQubWFpbC5ydQ==', 'anVpY3lhZHMuY29t', 'YWQuZm94bmV0d29ya3MuY29t', 'cGFydG5lcmFkcy55c20ueWFob28uY29t', 'YS5saXZlc3BvcnRtZWRpYS5ldQ==', 'YWdvZGEubmV0L2Jhbm5lcnM=', 'YWR2ZXJ0aXNpbmcuYW9sLmNvbQ==', 'Y2FzLmNsaWNrYWJpbGl0eS5jb20=', 'cHJvbW90ZS5wYWlyLmNvbQ==', 'YWRzLnlhaG9vLmNvbQ==', 'YWRzLnp5bmdhLmNvbQ==', 'YWRzYXR0LmFiY25ld3Muc3RhcndhdmUuY29t', 'YWRzYXR0LmVzcG4uc3RhcndhdmUuY29t', 'YXMuaW5ib3guY29t', 'cGFydG5lcmFkcy55c20ueWFob28uY29t'],
r = ['ZmF2aWNvbi5pY28=', 'YmFubmVyLmpwZw==', 'NDY4eDYwLmpwZw==', 'NzIweDkwLmpwZw==', 'c2t5c2NyYXBlci5qcGc=', 'MTM2N19hZC1jbGllbnRJRDI0NjQuanBn', 'YWRjbGllbnQtMDAyMTQ3LWhvc3QxLWJhbm5lci1hZC5qcGc=', 'Q0ROLTMzNC0xMDktMTM3eC1hZC1iYW5uZXI=', 'ZmF2aWNvbi5pY28=', 'YWQtbGFyZ2UucG5n', 'c3F1YXJlLWFkLnBuZw==', 'ZmF2aWNvbjEuaWNv', 'YmFubmVyX2FkLmdpZg==', 'bGFyZ2VfYmFubmVyLmdpZg==', 'd2lkZV9za3lzY3JhcGVyLmpwZw==', 'YWR2ZXJ0aXNlbWVudC0zNDMyMy5qcGc='];
x = 0;
spimg = [];
while (x < o) {
c = i[Math.floor(Math.random() * i.length)];
d = r[Math.floor(Math.random() * r.length)];
c = t.decode(c);
d = t.decode(d);
var a = Math.floor(Math.random() * 2) + 1;
if (a == 1) {
n = '//' + c + '/' + d
} else {
n = '//' + c + '/' + e(Math.floor(Math.random() * 20) + 4) + '.jpg'
};
spimg[x] = new Image();
spimg[x].onerror = function() {
var t = 1;
while (t < 7) {
t++
}
};
spimg[x].src = n;
x++
}
};
function A(t) {};
return {
ekgBSgaBPk: function(t, r) {
if (typeof document.body == 'undefined') {
return
};
var o = '0.1',
r = b,
e = document.createElement('DIV');
e.id = r;
e.style.position = 'absolute';
e.style.left = '-5000px';
e.style.top = '-5000px';
e.style.height = '60px';
e.style.width = '468px';
var d = document.body.childNodes,
a = Math.floor(d.length / 2);
if (a > 15) {
var n = document.createElement('div');
n.style.position = 'absolute';
n.style.height = '0px';
n.style.width = '0px';
n.style.top = '-5000px';
n.style.left = '-5000px';
document.body.insertBefore(n, document.body.childNodes[a]);
n.appendChild(e);
var i = document.createElement('DIV');
i.id = 'banner_ad';
i.style.position = 'absolute';
i.style.left = '-5000px';
i.style.top = '-5000px';
document.body.appendChild(i)
} else {
e.id = 'banner_ad';
document.body.appendChild(e)
};
l = setInterval(function() {
if (e) {
t((e.clientHeight == 0), o);
t((e.clientWidth == 0), o);
t((e.display == 'hidden'), o);
t((e.visibility == 'none'), o);
t((e.opacity == 0), o)
} else {
t(!0, o)
}
}, 1000)
},
bPqodbIKMt: function(e, m) {
if ((e) && (o == 0)) {
o = 1;
window['' + xcJQCflAmpis + ''].NhnwYPCjqO();
window['' + xcJQCflAmpis + ''].bPqodbIKMt = function() {
return
}
} else {
var p = t.decode('aW5zLmFkc2J5Z29vZ2xl'),
c = document.querySelector(p);
if ((c) && (o == 0)) {
if ((WSpSwDLzQd % 3) == 0) {
var d = 'Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbS9wYWdlYWQvanMvYWRzYnlnb29nbGUuanM=';
d = t.decode(d);
if (h(d)) {
if (c.innerHTML.replace(/\s/g, '').length == 0) {
o = 1;
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
}
}
}
};
var f = !1;
if (o == 0) {
if ((nsJjjBITZC % 3) == 0) {
if (!window['' + xcJQCflAmpis + ''].ranAlready) {
var l = ['Ly93d3cuZ29vZ2xlLmNvbS9hZHNlbnNlL3N0YXJ0L2ltYWdlcy9mYXZpY29uLmljbw==', 'Ly93d3cuZ3N0YXRpYy5jb20vYWR4L2RvdWJsZWNsaWNrLmljbw==', 'Ly9hZHZlcnRpc2luZy55YWhvby5jb20vZmF2aWNvbi5pY28=', 'Ly9hZHMudHdpdHRlci5jb20vZmF2aWNvbi5pY28=', 'Ly93d3cuZG91YmxlY2xpY2tieWdvb2dsZS5jb20vZmF2aWNvbi5pY28='],
s = l.length,
r = l[Math.floor(Math.random() * s)],
n = r;
while (r == n) {
n = l[Math.floor(Math.random() * s)]
};
r = t.decode(r);
n = t.decode(n);
i(Math.floor(Math.random() * 2) + 1);
var a = new Image(),
u = new Image();
a.onerror = function() {
i(Math.floor(Math.random() * 2) + 1);
u.src = n;
i(Math.floor(Math.random() * 2) + 1)
};
u.onerror = function() {
o = 1;
i(Math.floor(Math.random() * 3) + 1);
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
};
a.src = r;
if ((neMuFFBFgq % 3) == 0) {
a.onload = function() {
if ((a.width < 8) && (a.width > 0)) {
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
}
}
};
i(Math.floor(Math.random() * 3) + 1);
window['' + xcJQCflAmpis + ''].ranAlready = !0
};
window['' + xcJQCflAmpis + ''].bPqodbIKMt = function() {
return
}
}
}
}
},
NhnwYPCjqO: function() {
if (u == 1) {
var C = sessionStorage.getItem('babn');
if (C > 0) {
return !0
} else {
sessionStorage.setItem('babn', (Math.random() + 1) * 1000)
}
};
var c = 'Ly95dWkueWFob29hcGlzLmNvbS8zLjE4LjEvYnVpbGQvY3NzcmVzZXQvY3NzcmVzZXQtbWluLmNzcw==';
c = t.decode(c);
if (!m(c)) {
var h = document.createElement('link');
h.setAttribute('rel', 'stylesheet');
h.setAttribute('type', 'text/css');
h.setAttribute('href', c);
document.getElementsByTagName('head')[0].appendChild(h)
};
clearInterval(l);
document.body.innerHTML = '';
document.body.style.cssText += 'margin:0px !important';
document.body.style.cssText += 'padding:0px !important';
var Q = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth,
y = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
a = document.createElement('DIV'),
b = e();
a.id = b;
a.style.position = 'fixed';
a.style.left = '0';
a.style.top = '0';
a.style.width = Q + 'px';
a.style.height = y + 'px';
a.style.backgroundColor = f;
a.style.zIndex = '9999';
document.body.appendChild(a);
var d = '<a href="http://blockadblock.com"><svg id="FILLVECTID1" width="160" height="40"><image id="FILLVECTID2" width="160" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAoCAMAAABO8gGqAAAB+1BMVEXr6+sAAADr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+sAAADMAAAsKysKCgokJCRycnIEBATq6uoUFBTMzMzr6urjqqoSEhIGBgaxsbHcd3dYWFg0NDTmw8PZY2M5OTkfHx+enp7TNTUoJyfm5ualpaV5eXkODg7k5OTaamoqKSnc3NzZ2dmHh4dra2tHR0fVQUFAQEDPExPNBQXo6Ohvb28ICAjp19fS0tLnzc29vb25ubm1tbWWlpaNjY3dfX1oaGhUVFRMTEwaGhoXFxfq5ubh4eHe3t7Hx8fgk5PfjY3eg4OBgYF+fn5EREQ9PT3SKSnV1dXks7OsrKypqambmpqRkZFdXV1RUVHRISHQHR309PTq4eHp3NzPz8/Ly8vKysrDw8O4uLjkt7fhnJzgl5d7e3tkZGTYVlZPT08vLi7OCwu/v792dnbbdHTZYWHZXl7YWlpZWVnVRkYnJib8/PzNzc3myMjlurrjsLDhoaHdf3/aa2thYWHXUFDUPDzUOTno0dHipqbceHjaZ2dCQkLSLy/v7+/b29vlvb2xn5/ejIzabW26SkqgMDA7HByRAADoM7kjAAAAInRSTlM6ACT4xhkPtY5iNiAI9PLv6drSpqGYclpM5bengkQ8NDAnsGiGMwAABetJREFUWMPN2GdTE1EYhmFQ7L339
You can partially deobfuscate it simply by removing the eval() that the code is wrapped inside. The entirety of the code that's inside the eval() will return the stringified code so you just need to run it to get that string.
Sidenote: I usually use the JsFormat plugin for Sublime Text for that. It evaluates the content of the eval() and also nicely formats the code afterwards.
Here is a full blockadblock standard script that you ask, just copy it and paste anywehere after open "body" and before closed "body" tag. Also you can change everything in this code, like: bgcolor, font, text, logo, button, delay time... everything.. in the end of the script. You'll see.
Your page code must be like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
// Place this code snippet near the footer of your page before the close of the /body tag
// LEGAL NOTICE: The content of this website and all associated program code are protected under the Digital Millennium Copyright Act. Intentionally circumventing this code may constitute a violation of the DMCA.
eval(function(p,a,c,k,e,d){
e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){
while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}
return p});
var xcJQCflAmpis = '',
KkUCuxqIgh = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < 12; i++) xcJQCflAmpis += KkUCuxqIgh.charAt(Math.floor(Math.random() * KkUCuxqIgh.length));
var VABjXzYzJp = 8, //-- delay time in seconds
WSpSwDLzQd = 91,
nsJjjBITZC = 178,
neMuFFBFgq = 19,
rMwHazIJjv = function (t) {
var o = !1,
i = function () {
if (document.addEventListener) {
document.removeEventListener('DOMContentLoaded', e);
window.removeEventListener('load', e)
} else {
document.detachEvent('onreadystatechange', e);
window.detachEvent('onload', e)
}
},
e = function () {
if (!o && (document.addEventListener || event.type === 'load' || document.readyState === 'complete')) {
o = !0;
i();
t()
}
};
if (document.readyState === 'complete') {
t()
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', e);
window.addEventListener('load', e)
} else {
document.attachEvent('onreadystatechange', e);
window.attachEvent('onload', e);
var n = !1;
try {
n = window.frameElement == null && document.documentElement
} catch (r) {};
if (n && n.doScroll) {
(function a() {
if (o) return;
try {
n.doScroll('left')
} catch (e) {
return setTimeout(a, 50)
};
o = !0;
i();
t()
})()
}
}
};
window['' + xcJQCflAmpis + ''] = (function () {
var t = {
t$: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
encode: function (e) {
var d = '',
l, r, i, s, c, a, n, o = 0;
e = t.n$(e);
while (o < e.length) {
l = e.charCodeAt(o++);
r = e.charCodeAt(o++);
i = e.charCodeAt(o++);
s = l >> 2;
c = (l & 3) << 4 | r >> 4;
a = (r & 15) << 2 | i >> 6;
n = i & 63;
if (isNaN(r)) {
a = n = 64
} else if (isNaN(i)) {
n = 64
};
d = d + this.t$.charAt(s) + this.t$.charAt(c) + this.t$.charAt(a) + this.t$.charAt(n)
};
return d
},
decode: function (e) {
var n = '',
l, c, d, s, r, i, a, o = 0;
e = e.replace(/[^A-Za-z0-9\+\/\=]/g, '');
while (o < e.length) {
s = this.t$.indexOf(e.charAt(o++));
r = this.t$.indexOf(e.charAt(o++));
i = this.t$.indexOf(e.charAt(o++));
a = this.t$.indexOf(e.charAt(o++));
l = s << 2 | r >> 4;
c = (r & 15) << 4 | i >> 2;
d = (i & 3) << 6 | a;
n = n + String.fromCharCode(l);
if (i != 64) {
n = n + String.fromCharCode(c)
};
if (a != 64) {
n = n + String.fromCharCode(d)
}
};
n = t.e$(n);
return n
},
n$: function (t) {
t = t.replace(/;/g, ';');
var n = '';
for (var o = 0; o < t.length; o++) {
var e = t.charCodeAt(o);
if (e < 128) {
n += String.fromCharCode(e)
} else if (e > 127 && e < 2048) {
n += String.fromCharCode(e >> 6 | 192);
n += String.fromCharCode(e & 63 | 128)
} else {
n += String.fromCharCode(e >> 12 | 224);
n += String.fromCharCode(e >> 6 & 63 | 128);
n += String.fromCharCode(e & 63 | 128)
}
};
return n
},
e$: function (t) {
var o = '',
e = 0,
n = c1 = c2 = 0;
while (e < t.length) {
n = t.charCodeAt(e);
if (n < 128) {
o += String.fromCharCode(n);
e++
} else if (n > 191 && n < 224) {
c2 = t.charCodeAt(e + 1);
o += String.fromCharCode((n & 31) << 6 | c2 & 63);
e += 2
} else {
c2 = t.charCodeAt(e + 1);
c3 = t.charCodeAt(e + 2);
o += String.fromCharCode((n & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
e += 3
}
};
return o
}
};
var a = ['YWQtbGVmdA==', 'YWRCYW5uZXJXcmFw', 'YWQtZnJhbWU=', 'YWQtaGVhZGVy', 'YWQtaW1n', 'YWQtaW5uZXI=', 'YWQtbGFiZWw=', 'YWQtbGI=', 'YWQtZm9vdGVy', 'YWQtY29udGFpbmVy', 'YWQtY29udGFpbmVyLTE=', 'YWQtY29udGFpbmVyLTI=', 'QWQzMDB4MTQ1', 'QWQzMDB4MjUw', 'QWQ3Mjh4OTA=', 'QWRBcmVh', 'QWRGcmFtZTE=', 'QWRGcmFtZTI=', 'QWRGcmFtZTM=', 'QWRGcmFtZTQ=', 'QWRMYXllcjE=', 'QWRMYXllcjI=', 'QWRzX2dvb2dsZV8wMQ==', 'QWRzX2dvb2dsZV8wMg==', 'QWRzX2dvb2dsZV8wMw==', 'QWRzX2dvb2dsZV8wNA==', 'RGl2QWQ=', 'RGl2QWQx', 'RGl2QWQy', 'RGl2QWQz', 'RGl2QWRB', 'RGl2QWRC', 'RGl2QWRD', 'QWRJbWFnZQ==', 'QWREaXY=', 'QWRCb3gxNjA=', 'QWRDb250YWluZXI=', 'Z2xpbmtzd3JhcHBlcg==', 'YWRUZWFzZXI=', 'YmFubmVyX2Fk', 'YWRCYW5uZXI=', 'YWRiYW5uZXI=', 'YWRBZA==', 'YmFubmVyYWQ=', 'IGFkX2JveA==', 'YWRfY2hhbm5lbA==', 'YWRzZXJ2ZXI=', 'YmFubmVyaWQ=', 'YWRzbG90', 'cG9wdXBhZA==', 'YWRzZW5zZQ==', 'Z29vZ2xlX2Fk', 'b3V0YnJhaW4tcGFpZA==', 'c3BvbnNvcmVkX2xpbms='],
y = Math.floor(Math.random() * a.length),
Y = t.decode(a[y]),
b = Y,
C = 1,
f = '#EEEEEE', //-- colors
r = '#777777',
g = '#adb8ff',
w = '#FFFFFF',
Q = '',
W = 'Welcome!', //-- text
v = 'It looks like you\'re using an ad blocker. That\'s okay. Who doesn\'t?',
p = 'But without advertising-income, we can\'t keep making this site awesome.',
s = 'I understand, I have disabled my ad blocker. Let me in!',
o = 0,
u = 0,
n = 'moc.kcolbdakcolb', //-- blockaddblock.com link in left bottom
l = 0,
M = e() + '.jpg';
function h(t) {
if (t) t = t.substr(t.length - 15);
var n = document.getElementsByTagName('script');
for (var o = n.length; o--;) {
var e = String(n[o].src);
if (e) e = e.substr(e.length - 15);
if (e === t) return !0
};
return !1
};
function m(t) {
if (t) t = t.substr(t.length - 15);
var e = document.styleSheets;
x = 0;
while (x < e.length) {
thisurl = e[x].href;
if (thisurl) thisurl = thisurl.substr(thisurl.length - 15);
if (thisurl === t) return !0;
x++
};
return !1
};
function e(t) {
var o = '',
e = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
t = t || 30;
for (var n = 0; n < t; n++) o += e.charAt(Math.floor(Math.random() * e.length));
return o
};
function i(o) {
var i = ['YWRuLmViYXkuY29t', 'YWQubWFpbC5ydQ==', 'anVpY3lhZHMuY29t', 'YWQuZm94bmV0d29ya3MuY29t', 'cGFydG5lcmFkcy55c20ueWFob28uY29t', 'YS5saXZlc3BvcnRtZWRpYS5ldQ==', 'YWdvZGEubmV0L2Jhbm5lcnM=', 'YWR2ZXJ0aXNpbmcuYW9sLmNvbQ==', 'Y2FzLmNsaWNrYWJpbGl0eS5jb20=', 'cHJvbW90ZS5wYWlyLmNvbQ==', 'YWRzLnlhaG9vLmNvbQ==', 'YWRzLnp5bmdhLmNvbQ==', 'YWRzYXR0LmFiY25ld3Muc3RhcndhdmUuY29t', 'YWRzYXR0LmVzcG4uc3RhcndhdmUuY29t', 'YXMuaW5ib3guY29t', 'cGFydG5lcmFkcy55c20ueWFob28uY29t'],
r = ['ZmF2aWNvbi5pY28=', 'YmFubmVyLmpwZw==', 'NDY4eDYwLmpwZw==', 'NzIweDkwLmpwZw==', 'c2t5c2NyYXBlci5qcGc=', 'MTM2N19hZC1jbGllbnRJRDI0NjQuanBn', 'YWRjbGllbnQtMDAyMTQ3LWhvc3QxLWJhbm5lci1hZC5qcGc=', 'Q0ROLTMzNC0xMDktMTM3eC1hZC1iYW5uZXI=', 'ZmF2aWNvbi5pY28=', 'YWQtbGFyZ2UucG5n', 'c3F1YXJlLWFkLnBuZw==', 'ZmF2aWNvbjEuaWNv', 'YmFubmVyX2FkLmdpZg==', 'bGFyZ2VfYmFubmVyLmdpZg==', 'd2lkZV9za3lzY3JhcGVyLmpwZw==', 'YWR2ZXJ0aXNlbWVudC0zNDMyMy5qcGc='];
x = 0;
spimg = [];
while (x < o) {
c = i[Math.floor(Math.random() * i.length)];
d = r[Math.floor(Math.random() * r.length)];
c = t.decode(c);
d = t.decode(d);
var a = Math.floor(Math.random() * 2) + 1;
if (a == 1) {
n = '//' + c + '/' + d
} else {
n = '//' + c + '/' + e(Math.floor(Math.random() * 20) + 4) + '.jpg'
};
spimg[x] = new Image();
spimg[x].onerror = function () {
var t = 1;
while (t < 7) {
t++
}
};
spimg[x].src = n;
x++
}
};
function A(t) {};
return {
ekgBSgaBPk: function (t, r) {
if (typeof document.body == 'undefined') {
return
};
var o = '0.1',
r = b,
e = document.createElement('DIV');
e.id = r;
e.style.position = 'absolute';
e.style.left = '-5000px';
e.style.top = '-5000px';
e.style.height = '60px';
e.style.width = '468px';
var d = document.body.childNodes,
a = Math.floor(d.length / 2);
if (a > 15) {
var n = document.createElement('div');
n.style.position = 'absolute';
n.style.height = '0px';
n.style.width = '0px';
n.style.top = '-5000px';
n.style.left = '-5000px';
document.body.insertBefore(n, document.body.childNodes[a]);
n.appendChild(e);
var i = document.createElement('DIV');
i.id = 'banner_ad';
i.style.position = 'absolute';
i.style.left = '-5000px';
i.style.top = '-5000px';
document.body.appendChild(i)
} else {
e.id = 'banner_ad';
document.body.appendChild(e)
};
l = setInterval(function () {
if (e) {
t((e.clientHeight == 0), o);
t((e.clientWidth == 0), o);
t((e.display == 'hidden'), o);
t((e.visibility == 'none'), o);
t((e.opacity == 0), o)
} else {
t(!0, o)
}
}, 1000)
},
bPqodbIKMt: function (e, m) {
if ((e) && (o == 0)) {
o = 1;
window['' + xcJQCflAmpis + ''].NhnwYPCjqO();
window['' + xcJQCflAmpis + ''].bPqodbIKMt = function () {
return
}
} else {
var p = t.decode('aW5zLmFkc2J5Z29vZ2xl'),
c = document.querySelector(p);
if ((c) && (o == 0)) {
if ((WSpSwDLzQd % 3) == 0) {
var d = 'Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbS9wYWdlYWQvanMvYWRzYnlnb29nbGUuanM=';
d = t.decode(d);
if (h(d)) {
if (c.innerHTML.replace(/\s/g, '').length == 0) {
o = 1;
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
}
}
}
};
var f = !1;
if (o == 0) {
if ((nsJjjBITZC % 3) == 0) {
if (!window['' + xcJQCflAmpis + ''].ranAlready) {
var l = ['Ly93d3cuZ29vZ2xlLmNvbS9hZHNlbnNlL3N0YXJ0L2ltYWdlcy9mYXZpY29uLmljbw==', 'Ly93d3cuZ3N0YXRpYy5jb20vYWR4L2RvdWJsZWNsaWNrLmljbw==', 'Ly9hZHZlcnRpc2luZy55YWhvby5jb20vZmF2aWNvbi5pY28=', 'Ly9hZHMudHdpdHRlci5jb20vZmF2aWNvbi5pY28=', 'Ly93d3cuZG91YmxlY2xpY2tieWdvb2dsZS5jb20vZmF2aWNvbi5pY28='],
s = l.length,
r = l[Math.floor(Math.random() * s)],
n = r;
while (r == n) {
n = l[Math.floor(Math.random() * s)]
};
r = t.decode(r);
n = t.decode(n);
i(Math.floor(Math.random() * 2) + 1);
var a = new Image(),
u = new Image();
a.onerror = function () {
i(Math.floor(Math.random() * 2) + 1);
u.src = n;
i(Math.floor(Math.random() * 2) + 1)
};
u.onerror = function () {
o = 1;
i(Math.floor(Math.random() * 3) + 1);
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
};
a.src = r;
if ((neMuFFBFgq % 3) == 0) {
a.onload = function () {
if ((a.width < 8) && (a.width > 0)) {
window['' + xcJQCflAmpis + ''].NhnwYPCjqO()
}
}
};
i(Math.floor(Math.random() * 3) + 1);
window['' + xcJQCflAmpis + ''].ranAlready = !0
};
window['' + xcJQCflAmpis + ''].bPqodbIKMt = function () {
return
}
}
}
}
},
NhnwYPCjqO: function () {
if (u == 1) {
var C = sessionStorage.getItem('babn');
if (C > 0) {
return !0
} else {
sessionStorage.setItem('babn', (Math.random() + 1) * 1000)
}
};
var c = 'Ly95dWkueWFob29hcGlzLmNvbS8zLjE4LjEvYnVpbGQvY3NzcmVzZXQvY3NzcmVzZXQtbWluLmNzcw==';
c = t.decode(c);
if (!m(c)) {
var h = document.createElement('link');
h.setAttribute('rel', 'stylesheet');
h.setAttribute('type', 'text/css');
h.setAttribute('href', c);
document.getElementsByTagName('head')[0].appendChild(h)
};
clearInterval(l);
document.body.innerHTML = '';
document.body.style.cssText += 'margin:0px !important';
document.body.style.cssText += 'padding:0px !important';
var Q = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth,
y = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
a = document.createElement('DIV'),
b = e();
a.id = b;
a.style.position = 'fixed';
a.style.left = '0';
a.style.top = '0';
a.style.width = Q + 'px';
a.style.height = y + 'px';
a.style.backgroundColor = f;
a.style.zIndex = '9999';
document.body.appendChild(a); //-- original link, you can delete or change
var d = '<svg id="FILLVECTID1" width="160" height="40"><image id="FILLVECTID2" width="160" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAoCAMAAABO8gGqAAAB+1BMVEXr6+sAAADr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+sAAADMAAAsKysKCgokJCRycnIEBATq6uoUFBTMzMzr6urjqqoSEhIGBgaxsbHcd3dYWFg0NDTmw8PZY2M5OTkfHx+enp7TNTUoJyfm5ualpaV5eXkODg7k5OTaamoqKSnc3NzZ2dmHh4dra2tHR0fVQUFAQEDPExPNBQXo6Ohvb28ICAjp19fS0tLnzc29vb25ubm1tbWWlpaNjY3dfX1oaGhUVFRMTEwaGhoXFxfq5ubh4eHe3t7Hx8fgk5PfjY3eg4OBgYF+fn5EREQ9PT3SKSnV1dXks7OsrKypqambmpqRkZFdXV1RUVHRISHQHR309PTq4eHp3NzPz8/Ly8vKysrDw8O4uLjkt7fhnJzgl5d7e3tkZGTYVlZPT08vLi7OCwu/v792dnbbdHTZYWHZXl7YWlpZWVnVRkYnJib8/PzNzc3myMjlurrjsLDhoaHdf3/aa2thYWHXUFDUPDzUOTno0dHipqbceHjaZ2dCQkLSLy/v7+/b29vlvb2xn5/ejIzabW26SkqgMDA7HByRAADoM7kjAAAAInRSTlM6ACT4xhkPtY5iNiAI9PLv6drSpqGYclpM5bengkQ8NDAnsGiGMwAABetJREFUWMPN2GdTE1EYhmFQ7L339rwngV2IiRJNIGAg1SQkFAHpgnQpKnZBAXvvvXf9mb5nsxuTqDN+cIa9Z8IkGYa9OGXPJDm5RnMX5pim7YtTLB24btUKmKnZeWsWpgHnzIP5UucvNoDrl8GUrVyUBM4xqQ/ISwIz5vfQyDF3X+MgzNFaCVyHVIONbx1EDrtCzt6zMEGzFzFwFZJ19jpJy2qx5BcmyBM/oGKmW8DAFeDOxfOJM4DcnTYrtT7dhZltTW7OXHB1ClEWkPO0JmgEM1pebs5CcA2UCTS6QyHMaEtyc3LAlWcDjZReyLpKZS9uT02086vu0tJa/Lnx0tILMKp3uvxI61iYH33Qq3M24k/VOPel7RIdeIBkdo/HY9WAzpZLSSCNQrZbGO1n4V4h9uDP7RTiIIyaFQoirfxCftiht4sK8KeKqPh34D2S7TsROHRiyMrAxrtNms9H5Qaw9ObU1H4Wdv8z0J8obvOo/wd4KAnkmbaePspA/0idvgbrDeBhcK+EuJ0GtLUjVftvwEYqmaR66JX9Apap6cCyKhiV/RUIrwGk+qdWy60K14k+CXRTTQawVogbKeDEs2hs4MtJcNVTY2KgclwH2vYODFTa4FQ+1FMzZIGQR3HWJ4F1TqWtOaADq0Z9itVZrg1S6JLi7B1MAtUCX1xNB0Y0oL9hpK4+YbUMNVjqGySwrRUGsLu6+uWD20LsNIDdQut4LXA/KmSx+0nga14QJ3GOWqDmOwJgRoSme8OOhAQqiUhPMbUGksCj5Lta4CbeFhX9NN0Tpny/BKpxaqlAOvCqBjzTFAp2NFudJ5paelS5TbwtBlAvNgEdeEGI6O6JUt42NhuvzZvjXTHxwiaBXUIMnAKa5Pq9SL3gn1KAOEkgHVWBIMU14DBF2OH3KOfQpG2oSQpKYAEdK0MGcDg1xbdOWy+iqKjoRAEDlZ4soLhxSgcy6ghgOy7EeC2PI4DHb7pO7mRwTByv5hGxF/I1TpO7CnBZO+QcWrURHJSLrbBNAxZTHbgSCsHXJkmBxisMvErFVcgE+h0GsOCs9UwP2xo6+UimAyng9UePurpvM8WmAdsvi6gNwBMhPrPqemoXywZs8qL9JZybhqF6LZBZJNANmYsOSaBTkSqcpnCFEkntYjtREFlATEtgxdDQlffhS3ddDAzfbbHYPUDGJpGT+UADVgvxHBzP9LUufqQDtV/uI70wOsgFWUQCfZC1UI0Ettoh66D+szSdAtKtwkRRNnCIiDzNzc0RO/kmLbKmsE/pyQLiBu8WDYgxEZMbeEqIiSM8r/x0z6tauQYvPxwT0VM1lH9Adt5Lp+F2Q+bTplhb/E5HlQS6SHvVSU0V+j9xJVBEEbWEXFVZQNX9+1HX6ghkAR9E5crTgM+0t6qjIlZbzSpemi+E+MjA3XJUKy/SRWhNsmOazvKzQYcE0hV5nDkuQQKfUgm4HmqA2yuPxfMU1m4zLRTMAqLhN6BHCeEXMDo2NsY8MdCeBB6JydMlps3uGxZefy7EO1vyPvhOxL7TPWjVUVvZkNJ/CGf7SAP2V6AjTOUa8IzD3ckqe2ENGulWGfx9VKIBB72JM1lAuLKB3taONCBn3PY0II5cFrLr7cCp/UIWrdVPEp7zHy7oWXiUgmR3kdujbZI73kghTaoaEKMOh8up2M8BVceotd/BNyENiFGe5CxgZyIT6KVyGO2s5J5ce/14XO7cR5WV1QBedt3c/+QhZLYLN54/e8xr8n5lpXyn++u3T9AbDjXwIMXfxmsarwK9wUBB5Kj8y2dCw/Kq8b7m0RpwasnR/uJylU+dEflqX6gzC4hd1jSgz0ujmPkygDjvNYDsU0ZggjKBqLPrQLfDUQIzxMBtSOucRwLzrdQ2DFO0NDdnsYq0yoJyEB0FHTBHefyxcyUy8jflH7sHszSfgath4hYwcD3M29I5DMzdBNO2IFcC5y6HSduof4G5dQNMWd4cDcjNNeNGmb02/Uv0LfPzlsBELZ+3eUeuATRaNMs0zfml+gkJocgFtzfMzwAAAABJRU5ErkJggg==">;</svg>';
d = d.replace('FILLVECTID1', e());
d = d.replace('FILLVECTID2', e());
var i = document.createElement('DIV');
i.innerHTML = d;
i.style.position = 'absolute';
i.style.bottom = '30px';
i.style.left = '30px';
i.style.width = '160px';
i.style.height = '40px';
i.style.zIndex = '10000';
i.style.opacity = '.6';
i.style.cursor = 'pointer';
i.addEventListener('click', function () {
n = n.split('').reverse().join('');
window.location.href = '//' + n
});
document.getElementById(b).appendChild(i);
var o = document.createElement('DIV'),
Z = e();
o.id = Z;
o.style.position = 'fixed';
o.style.top = y / 7 + 'px';
o.style.minWidth = Q - 120 + 'px';
o.style.minHeight = y / 3.5 + 'px';
o.style.backgroundColor = '#fff';
o.style.zIndex = '10000';
o.style.cssText += 'font-family: "Arial Black", Helvetica, geneva, sans-serif !important';
o.style.cssText += 'line-height: normal !important';
o.style.cssText += 'font-size: 16pt !important';
o.style.cssText += 'text-align: center !important';
o.style.cssText += 'padding: 12px !important';
o.style.display += 'block';
o.style.marginLeft = '30px';
o.style.marginRight = '30px';
o.style.borderRadius = '15px';
document.body.appendChild(o);
o.style.boxShadow = '0px 14px 24px -8px rgba(0,0,0,0.3)';
o.style.visibility = 'visible';
var Y = 30,
A = 22,
x = 18,
M = 18;
if ((window.innerWidth < 640) || (screen.width < 640)) {
o.style.zoom = '50%';
o.style.cssText += 'font-size: 18pt !important';
o.style.marginLeft = '45px;';
i.style.zoom = '65%';
var Y = 22,
A = 18,
x = 12,
M = 12
}; //-- here is your adblock warning page
o.innerHTML = '<h3 style="color:#999;font-size:' + Y + 'pt;color:' + r + ';font-family:Helvetica, geneva, sans-serif;font-weight:200;margin-top:10px;margin-bottom:10px;text-align:center;">' + W + '</h3><h1 style="font-size:' + A + 'pt;font-weight:500;font-family:Helvetica, geneva, sans-serif;color:' + r + ';margin-top:10px;margin-bottom:10px;text-align:center;">' + v + '</h1><hr style=" display: block;margin-top: 0.5em;margin-bottom: 0.5em;margin-left: auto;margin-right: auto; border:1px solid #CCC; width: 25%;text-align:center;"><p style="font-family:Helvetica, geneva, sans-serif;font-weight:300;font-size:' + x + 'pt;color:' + r + ';text-align:center;">' + p + '</p><p style="margin-top:35px;"><div onmouseover="this.style.opacity=.9;" onmouseout="this.style.opacity=1;" id="' + e() + '" style="cursor:pointer;font-size:' + M + 'pt;font-family:Helvetica, geneva, sans-serif; font-weight:300;border-radius:15px;padding:10px;background-color:' + g + ';color:' + w + ';padding-left:60px;padding-right:60px;width:60%;margin:auto;margin-top:10px;margin-bottom:10px;" onclick="window.location.reload();">' + s + '</div></p>'
}
}
})();
window.cfVDoTdmsN = function (t, e) {
var r = Date.now,
i = window.requestAnimationFrame,
a = r(),
n, o = function () {
r() - a < e ? n || i(o) : t()
};
i(o);
return {
clear: function () {
n = 1
}
}
};
var BGWRSzJxTu;
if (document.body) {
document.body.style.visibility = 'visible'
};
rMwHazIJjv(function () {
if (document.getElementById('babasbmsgx')) {
document.getElementById('babasbmsgx').style.visibility = 'hidden';
document.getElementById('babasbmsgx').style.display = 'none'
};
BGWRSzJxTu = window.cfVDoTdmsN(function () {
window['' + xcJQCflAmpis + ''].ekgBSgaBPk(window['' + xcJQCflAmpis + ''].bPqodbIKMt, window['' + xcJQCflAmpis + ''].nipmDSFuLH)
}, VABjXzYzJp * 1000)
});
</script>
</body>
Example (switch addblock on): http://besedka.ho.ua/adblock.html
Have fun ;)
My guess is script is Obfuscate using some tool.
Javascript Obfuscator converts the JavaScript source code into obfuscated and completely unreadable form, preventing it from analysing and theft. It's a 100% safe JavaScript minifier and the best JavaScript compressor
so to deobfuscate script you need secret key, which was used to Obfuscate.

How do I get rid of this JS error: TypeError: $(...).validate is not a function

I am using the following JS code from the fiddle provided in the answer here:
How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?
Here's the fiddle: http://jsfiddle.net/kyK4G/
The error shows up on line 36, which is: submitHandler: function (form) { // for demo
And this is the error:
TypeError: $(...).validate is not a function
submitHandler: function (form) { // for demo
Code:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
$(document).ready(function () {
// initialize tooltipster on text input elements
$('#myform input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
// initialize validate plugin on the form
$('#myform').validate({
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
success: function (label, element) {
$(element).tooltipster('hide');
},
rules: {
field1: {
required: true,
email: true
},
field2: {
required: true,
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
});
// no CDN - including plugin below
(function (d, f, g, b) {
var e = "tooltipster",
c = {
animation: "fade",
arrow: true,
arrowColor: "",
content: "",
delay: 200,
fixedWidth: 0,
maxWidth: 0,
functionBefore: function (l, m) {
m()
},
functionReady: function (l, m) {},
functionAfter: function (l) {},
icon: "(?)",
iconDesktop: false,
iconTouch: false,
iconTheme: ".tooltipster-icon",
interactive: false,
interactiveTolerance: 350,
offsetX: 0,
offsetY: 0,
onlyOne: true,
position: "top",
speed: 350,
timer: 0,
theme: ".tooltipster-default",
touchDevices: true,
trigger: "hover"
};
function h(m, l) {
this.element = m;
this.options = d.extend({}, c, l);
this._defaults = c;
this._name = e;
this.init()
}
function j() {
return !!("ontouchstart" in f)
}
function a() {
var l = g.body || g.documentElement;
var n = l.style;
var o = "transition";
if (typeof n[o] == "string") {
return true
}
v = ["Moz", "Webkit", "Khtml", "O", "ms"], o = o.charAt(0).toUpperCase() + o.substr(1);
for (var m = 0; m < v.length; m++) {
if (typeof n[v[m] + o] == "string") {
return true
}
}
return false
}
var k = true;
if (!a()) {
k = false
}
h.prototype = {
init: function () {
var r = d(this.element);
var n = this;
var q = true;
if ((n.options.touchDevices == false) && (j())) {
q = false
}
if (g.all && !g.querySelector) {
q = false
}
if (q == true) {
if ((this.options.iconDesktop == true) && (!j()) || ((this.options.iconTouch == true) && (j()))) {
var m = r.attr("title");
r.removeAttr("title");
var p = n.options.iconTheme;
var o = d('<span class="' + p.replace(".", "") + '" title="' + m + '">' + this.options.icon + "</span>");
o.insertAfter(r);
r.data("tooltipsterIcon", o);
r = o
}
var l = d.trim(n.options.content).length > 0 ? n.options.content : r.attr("title");
r.data("tooltipsterContent", l);
r.removeAttr("title");
if ((this.options.touchDevices == true) && (j())) {
r.bind("touchstart", function (t, s) {
n.showTooltip()
})
} else {
if (this.options.trigger == "hover") {
r.on("mouseenter.tooltipster", function () {
n.showTooltip()
});
if (this.options.interactive == true) {
r.on("mouseleave.tooltipster", function () {
var t = r.data("tooltipster");
var u = false;
if ((t !== b) && (t !== "")) {
t.mouseenter(function () {
u = true
});
t.mouseleave(function () {
u = false
});
var s = setTimeout(function () {
if (u == true) {
t.mouseleave(function () {
n.hideTooltip()
})
} else {
n.hideTooltip()
}
}, n.options.interactiveTolerance)
} else {
n.hideTooltip()
}
})
} else {
r.on("mouseleave.tooltipster", function () {
n.hideTooltip()
})
}
}
if (this.options.trigger == "click") {
r.on("click.tooltipster", function () {
if ((r.data("tooltipster") == "") || (r.data("tooltipster") == b)) {
n.showTooltip()
} else {
n.hideTooltip()
}
})
}
}
}
},
showTooltip: function (m) {
var n = d(this.element);
var l = this;
if (n.data("tooltipsterIcon") !== b) {
n = n.data("tooltipsterIcon")
}
if ((d(".tooltipster-base").not(".tooltipster-dying").length > 0) && (l.options.onlyOne == true)) {
d(".tooltipster-base").not(".tooltipster-dying").not(n.data("tooltipster")).each(function () {
d(this).addClass("tooltipster-kill");
var o = d(this).data("origin");
o.data("plugin_tooltipster").hideTooltip()
})
}
n.clearQueue().delay(l.options.delay).queue(function () {
l.options.functionBefore(n, function () {
if ((n.data("tooltipster") !== b) && (n.data("tooltipster") !== "")) {
var w = n.data("tooltipster");
if (!w.hasClass("tooltipster-kill")) {
var s = "tooltipster-" + l.options.animation;
w.removeClass("tooltipster-dying");
if (k == true) {
w.clearQueue().addClass(s + "-show")
}
if (l.options.timer > 0) {
var q = w.data("tooltipsterTimer");
clearTimeout(q);
q = setTimeout(function () {
w.data("tooltipsterTimer", b);
l.hideTooltip()
}, l.options.timer);
w.data("tooltipsterTimer", q)
}
if ((l.options.touchDevices == true) && (j())) {
d("body").bind("touchstart", function (B) {
if (l.options.interactive == true) {
var D = d(B.target);
var C = true;
D.parents().each(function () {
if (d(this).hasClass("tooltipster-base")) {
C = false
}
});
if (C == true) {
l.hideTooltip();
d("body").unbind("touchstart")
}
} else {
l.hideTooltip();
d("body").unbind("touchstart")
}
})
}
}
} else {
d("body").css("overflow-x", "hidden");
var x = n.data("tooltipsterContent");
var u = l.options.theme;
var y = u.replace(".", "");
var s = "tooltipster-" + l.options.animation;
var r = "-webkit-transition-duration: " + l.options.speed + "ms; -webkit-animation-duration: " + l.options.speed + "ms; -moz-transition-duration: " + l.options.speed + "ms; -moz-animation-duration: " + l.options.speed + "ms; -o-transition-duration: " + l.options.speed + "ms; -o-animation-duration: " + l.options.speed + "ms; -ms-transition-duration: " + l.options.speed + "ms; -ms-animation-duration: " + l.options.speed + "ms; transition-duration: " + l.options.speed + "ms; animation-duration: " + l.options.speed + "ms;";
var o = l.options.fixedWidth > 0 ? "width:" + l.options.fixedWidth + "px;" : "";
var z = l.options.maxWidth > 0 ? "max-width:" + l.options.maxWidth + "px;" : "";
var t = l.options.interactive == true ? "pointer-events: auto;" : "";
var w = d('<div class="tooltipster-base ' + y + " " + s + '" style="' + o + " " + z + " " + t + " " + r + '"><div class="tooltipster-content">' + x + "</div></div>");
w.appendTo("body");
n.data("tooltipster", w);
w.data("origin", n);
l.positionTooltip();
l.options.functionReady(n, w);
if (k == true) {
w.addClass(s + "-show")
} else {
w.css("display", "none").removeClass(s).fadeIn(l.options.speed)
}
var A = x;
var p = setInterval(function () {
var B = n.data("tooltipsterContent");
if (d("body").find(n).length == 0) {
w.addClass("tooltipster-dying");
l.hideTooltip()
} else {
if ((A !== B) && (B !== "")) {
A = B;
w.find(".tooltipster-content").html(B);
w.css({
width: "",
"-webkit-transition-duration": l.options.speed + "ms",
"-moz-transition-duration": l.options.speed + "ms",
"-o-transition-duration": l.options.speed + "ms",
"-ms-transition-duration": l.options.speed + "ms",
"transition-duration": l.options.speed + "ms",
"-webkit-transition-property": "-webkit-transform",
"-moz-transition-property": "-moz-transform",
"-o-transition-property": "-o-transform",
"-ms-transition-property": "-ms-transform",
"transition-property": "transform"
}).addClass("tooltipster-content-changing");
setTimeout(function () {
w.removeClass("tooltipster-content-changing");
setTimeout(function () {
w.css({
"-webkit-transition-property": "",
"-moz-transition-property": "",
"-o-transition-property": "",
"-ms-transition-property": "",
"transition-property": ""
})
}, l.options.speed)
}, l.options.speed);
tooltipWidth = w.outerWidth(false);
tooltipInnerWidth = w.innerWidth();
tooltipHeight = w.outerHeight(false);
l.positionTooltip()
}
}
if ((d("body").find(w).length == 0) || (d("body").find(n).length == 0)) {
clearInterval(p)
}
}, 200);
if (l.options.timer > 0) {
var q = setTimeout(function () {
w.data("tooltipsterTimer", b);
l.hideTooltip()
}, l.options.timer + l.options.speed);
w.data("tooltipsterTimer", q)
}
if ((l.options.touchDevices == true) && (j())) {
d("body").bind("touchstart", function (B) {
if (l.options.interactive == true) {
var D = d(B.target);
var C = true;
D.parents().each(function () {
if (d(this).hasClass("tooltipster-base")) {
C = false
}
});
if (C == true) {
l.hideTooltip();
d("body").unbind("touchstart")
}
} else {
l.hideTooltip();
d("body").unbind("touchstart")
}
})
}
w.mouseleave(function () {
l.hideTooltip()
})
}
});
n.dequeue()
})
},
hideTooltip: function (m) {
var p = d(this.element);
var l = this;
if (p.data("tooltipsterIcon") !== b) {
p = p.data("tooltipsterIcon")
}
var o = p.data("tooltipster");
if (o == b) {
o = d(".tooltipster-dying")
}
p.clearQueue();
if ((o !== b) && (o !== "")) {
var q = o.data("tooltipsterTimer");
if (q !== b) {
clearTimeout(q)
}
var n = "tooltipster-" + l.options.animation;
if (k == true) {
o.clearQueue().removeClass(n + "-show").addClass("tooltipster-dying").delay(l.options.speed).queue(function () {
o.remove();
p.data("tooltipster", "");
d("body").css("verflow-x", "");
l.options.functionAfter(p)
})
} else {
o.clearQueue().addClass("tooltipster-dying").fadeOut(l.options.speed, function () {
o.remove();
p.data("tooltipster", "");
d("body").css("verflow-x", "");
l.options.functionAfter(p)
})
}
}
},
positionTooltip: function (O) {
var A = d(this.element);
var ab = this;
if (A.data("tooltipsterIcon") !== b) {
A = A.data("tooltipsterIcon")
}
if ((A.data("tooltipster") !== b) && (A.data("tooltipster") !== "")) {
var ah = A.data("tooltipster");
ah.css("width", "");
var ai = d(f).width();
var B = A.outerWidth(false);
var ag = A.outerHeight(false);
var al = ah.outerWidth(false);
var m = ah.innerWidth() + 1;
var M = ah.outerHeight(false);
var aa = A.offset();
var Z = aa.top;
var u = aa.left;
var y = b;
if (A.is("area")) {
var T = A.attr("shape");
var af = A.parent().attr("name");
var P = d('img[usemap="#' + af + '"]');
var n = P.offset().left;
var L = P.offset().top;
var W = A.attr("coords") !== b ? A.attr("coords").split(",") : b;
if (T == "circle") {
var N = parseInt(W[0]);
var r = parseInt(W[1]);
var D = parseInt(W[2]);
ag = D * 2;
B = D * 2;
Z = L + r - D;
u = n + N - D
} else {
if (T == "rect") {
var N = parseInt(W[0]);
var r = parseInt(W[1]);
var q = parseInt(W[2]);
var J = parseInt(W[3]);
ag = J - r;
B = q - N;
Z = L + r;
u = n + N
} else {
if (T == "poly") {
var x = [];
var ae = [];
var H = 0,
G = 0,
ad = 0,
ac = 0;
var aj = "even";
for (i = 0; i < W.length; i++) {
var F = parseInt(W[i]);
if (aj == "even") {
if (F > ad) {
ad = F;
if (i == 0) {
H = ad
}
}
if (F < H) {
H = F
}
aj = "odd"
} else {
if (F > ac) {
ac = F;
if (i == 1) {
G = ac
}
}
if (F < G) {
G = F
}
aj = "even"
}
}
ag = ac - G;
B = ad - H;
Z = L + G;
u = n + H
} else {
ag = P.outerHeight(false);
B = P.outerWidth(false);
Z = L;
u = n
}
}
}
}
if (ab.options.fixedWidth == 0) {
ah.css({
width: m + "px",
"padding-left": "0px",
"padding-right": "0px"
})
}
var s = 0,
V = 0;
var X = parseInt(ab.options.offsetY);
var Y = parseInt(ab.options.offsetX);
var p = "";
function w() {
var an = d(f).scrollLeft();
if ((s - an) < 0) {
var am = s - an;
s = an;
ah.data("arrow-reposition", am)
}
if (((s + al) - an) > ai) {
var am = s - ((ai + an) - al);
s = (ai + an) - al;
ah.data("arrow-reposition", am)
}
}
function t(an, am) {
if (((Z - d(f).scrollTop() - M - X - 12) < 0) && (am.indexOf("top") > -1)) {
ab.options.position = an;
y = am
}
if (((Z + ag + M + 12 + X) > (d(f).scrollTop() + d(f).height())) && (am.indexOf("bottom") > -1)) {
ab.options.position = an;
y = am;
V = (Z - M) - X - 12
}
}
if (ab.options.position == "top") {
var Q = (u + al) - (u + B);
s = (u + Y) - (Q / 2);
V = (Z - M) - X - 12;
w();
t("bottom", "top")
}
if (ab.options.position == "top-left") {
s = u + Y;
V = (Z - M) - X - 12;
w();
t("bottom-left", "top-left")
}
if (ab.options.position == "top-right") {
s = (u + B + Y) - al;
V = (Z - M) - X - 12;
w();
t("bottom-right", "top-right")
}
if (ab.options.position == "bottom") {
var Q = (u + al) - (u + B);
s = u - (Q / 2) + Y;
V = (Z + ag) + X + 12;
w();
t("top", "bottom")
}
if (ab.options.position == "bottom-left") {
s = u + Y;
V = (Z + ag) + X + 12;
w();
t("top-left", "bottom-left")
}
if (ab.options.position == "bottom-right") {
s = (u + B + Y) - al;
V = (Z + ag) + X + 12;
w();
t("top-right", "bottom-right")
}
if (ab.options.position == "left") {
s = u - Y - al - 12;
myLeftMirror = u + Y + B + 12;
var K = (Z + M) - (Z + A.outerHeight(false));
V = Z - (K / 2) - X;
if ((s < 0) && ((myLeftMirror + al) > ai)) {
var o = parseFloat(ah.css("border-width")) * 2;
var l = (al + s) - o;
ah.css("width", l + "px");
M = ah.outerHeight(false);
s = u - Y - l - 12 - o;
K = (Z + M) - (Z + A.outerHeight(false));
V = Z - (K / 2) - X
} else {
if (s < 0) {
s = u + Y + B + 12;
ah.data("arrow-reposition", "left")
}
}
}
if (ab.options.position == "right") {
s = u + Y + B + 12;
myLeftMirror = u - Y - al - 12;
var K = (Z + M) - (Z + A.outerHeight(false));
V = Z - (K / 2) - X;
if (((s + al) > ai) && (myLeftMirror < 0)) {
var o = parseFloat(ah.css("border-width")) * 2;
var l = (ai - s) - o;
ah.css("width", l + "px");
M = ah.outerHeight(false);
K = (Z + M) - (Z + A.outerHeight(false));
V = Z - (K / 2) - X
} else {
if ((s + al) > ai) {
s = u - Y - al - 12;
ah.data("arrow-reposition", "right")
}
}
}
if (ab.options.arrow == true) {
var I = "tooltipster-arrow-" + ab.options.position;
if (ab.options.arrowColor.length < 1) {
var R = ah.css("background-color")
} else {
var R = ab.options.arrowColor
}
It sounds like you don't have the validate plugin script on the page:
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js
It looks like you are not including the jQuery plugin that provides the .validate() method. You should include it after jQuery:
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"><script>
Generally, if you have an object, you can try and access different attributes using dot notation as follows:
var myAwesomeObject = {
coolProperty: "whooooa!"
, coolMethod: function() {return this;}
};
myAwesomeObject.coolProperty; // "whooooa!"
myAwesomeObject.coolMethod; // function(){return this;}
If the property happens to be a method, you can call it like:
myAwesomeObject.coolMethod(); // Object {coolProperty: ...
If the property you are trying to access doesn't exist on the object, you will get back undefined
myAwesomeObject.missingProperty; // undefined
Since undefined is not a function, trying to call a missing property as a method will result in the error you saw:
myAwesomeObject.missingMethod(); // TypeError: you messed up.
I also got this problem. I have fixed this problem other way. That I got in the documentation
To fix the problem you have to declared a specific class.
Using the
mfp-TYPE CSS class (where TYPE is the desired content type). For example: <a class="mfp-image image-link">Open image</a>, $('.image-link').magnificPopup().
Another Example: <a class="mfp-iframe video-link">Open Video</a>, $('.video-link').magnificPopup().

Where to place Mouse Enter and Mouse Leave in Javascript

I have the following script and am trying to add mouse enter and leave events on a slideshow such that when the mouse is over the image it won't switch to the next one, and once removed it continues.
I can get the slide to stop when the mouse is over but once the mouse is out the slideshow won't proceed.
I am unsure if these 2 lines are in the right place:
---> jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
---> jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
jQuery(function () {
jQuery('a').focus(function () {
this.blur();
});
SI.Files.stylizeAll();
slider.init();
});
---> var MOUSE_IN = false;
var slider = {
num: -1,
cur: 0,
cr: [],
al: null,
at: 10 * 1000, /* change 1000 to control speed*/
ar: true,
anim:'slide',
fade_speed:600,
init: function () {
if (!slider.data || !slider.data.length) return false;
var d = slider.data;
slider.num = d.length;
var pos = Math.floor(Math.random() * 1);
for (var i = 0; i < slider.num; i++) {
if(slider.anim == 'fade')
{
jQuery('#' + d[i].id).hide();
}
else{
jQuery('#' + d[i].id).css({
left: ((i - pos) * 1000)
});
}
jQuery('#slide-nav').append('<a id="slide-link-' + i + '" href="#" onclick="slider.slide(' + i + ');return false;" onfocus="this.blur();">' + (i + 1) + '</a>');
}
jQuery('img,div#slide-controls', jQuery('div#slide-holder')).fadeIn();
---> jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
---> jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
slider.text(d[pos]);
slider.on(pos);
if(slider.anim == 'fade')
{
slider.cur = -1;
slider.slide(0);
}
else{
slider.cur = pos;
window.setTimeout('slider.auto();', slider.at);
}
},
auto: function () {
if (!slider.ar) return false;
if(MOUSE_IN) return false;
var next = slider.cur + 1;
if (next >= slider.num) next = 0;
slider.slide(next);
},
slide: function (pos) {
if (pos < 0 || pos >= slider.num || pos == slider.cur) return;
window.clearTimeout(slider.al);
slider.al = window.setTimeout('slider.auto();', slider.at);
var d = slider.data;
if(slider.anim == 'fade')
{
for (var i = 0; i < slider.num; i++) {
if(i == slider.cur || i == pos) continue;
jQuery('#' + d[i].id).hide();
}
if(slider.cur != -1){
jQuery('#' + d[slider.cur].id).stop(false,true);
jQuery('#' + d[slider.cur].id).fadeOut(slider.fade_speed);
jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
}
else
{
jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
}
}
else
{
for (var i = 0; i < slider.num; i++)
jQuery('#' + d[i].id).stop().animate({
left: ((i - pos) * 1000)
},
1000, 'swing');
}
slider.on(pos);
slider.text(d[pos]);
slider.cur = pos;
},
on: function (pos) {
jQuery('#slide-nav a').removeClass('on');
jQuery('#slide-nav a#slide-link-' + pos).addClass('on');
},
text: function (di) {
slider.cr['a'] = di.client;
slider.cr['b'] = di.desc;
slider.ticker('#slide-client span', di.client, 0, 'a');
slider.ticker('#slide-desc', di.desc, 0, 'b');
},
ticker: function (el, text, pos, unique) {
if (slider.cr[unique] != text) return false;
ctext = text.substring(0, pos) + (pos % 2 ? '-' : '_');
jQuery(el).html(ctext);
if (pos == text.length) jQuery(el).html(text);
else window.setTimeout('slider.ticker("' + el + '","' + text + '",' + (pos + 1) + ',"' + unique + '");', 30);
}
};
if (!window.SI) {
var SI = {};
};
SI.Files = {
htmlClass: 'SI-FILES-STYLIZED',
fileClass: 'file',
wrapClass: 'cabinet',
fini: false,
able: false,
init: function () {
this.fini = true;
var ie = 0
if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) {
return;
}
this.able = true;
var html = document.getElementsByTagName('html')[0];
html.className += (html.className != '' ? ' ' : '') + this.htmlClass;
},
stylize: function (elem) {
if (!this.fini) {
this.init();
};
if (!this.able) {
return;
};
elem.parentNode.file = elem;
elem.parentNode.onmousemove = function (e) {
if (typeof e == 'undefined') e = window.event;
if (typeof e.pageY == 'undefined' && typeof e.clientX == 'number' && document.documentElement) {
e.pageX = e.clientX + document.documentElement.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
};
var ox = oy = 0;
var elem = this;
if (elem.offsetParent) {
ox = elem.offsetLeft;
oy = elem.offsetTop;
while (elem = elem.offsetParent) {
ox += elem.offsetLeft;
oy += elem.offsetTop;
};
};
var x = e.pageX - ox;
var y = e.pageY - oy;
var w = this.file.offsetWidth;
var h = this.file.offsetHeight;
this.file.style.top = y - (h / 2) + 'px';
this.file.style.left = x - (w - 30) + 'px';
};
},
stylizeById: function (id) {
this.stylize(document.getElementById(id));
},
stylizeAll: function () {
if (!this.fini) {
this.init();
};
if (!this.able) {
return;
};
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1) this.stylize(input);
};
}
};
(function (jQuery) {
jQuery.fn.pngFix = function (settings) {
settings = jQuery.extend({
blankgif: 'blank.gif'
},
settings);
var ie55 = (navigator.appName == 'Microsoft Internet Explorer' && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf('MSIE 5.5') != -1);
var ie6 = (navigator.appName == 'Microsoft Internet Explorer' && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf('MSIE 6.0') != -1);
if (jQuery.browser.msie && (ie55 || ie6)) {
jQuery(this).each(function () {
var bgIMG = jQuery(this).css('background-image');
if (bgIMG.indexOf(".png") != -1) {
var iebg = bgIMG.split('url("')[1].split('")')[0];
jQuery(this).css('background-image', 'none');
jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='" + settings.sizingMethod + "')";
}
});
}
return jQuery;
};
})(jQuery);
jQuery(function () {
if (jQuery.browser.msie && jQuery.browser.version < 7) {
}
});
The position of both lines is fine, they just add an event handler to the mouse in/out event. The problem you experience is actually in tha auto function, if you note, at the end of the init function you have:
window.setTimeout('slider.auto();', slider.at)
This line makes a call to the auto function after a slider.at time (which is 10 seconds in your example), the auto function checks if MOUSE_IN is set to true, if it's not, then calls the slide function, then in the slide function you have another call to the auto function:
slider.al = window.setTimeout('slider.auto();', slider.at);
But once you set the MOUSE_IN variable to true the auto function simply returns and it stop the execution of further slide functions, to solve this, you may want to either handle the MOUSE_IN logic in the slide function, or before returning false in the auto function, call with a time out the auto function again.
Thought this would work but it doesnt, the mouseleave eventdoesnt seem to fire.
jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
while(MOUSE_IN==true)
{
jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
}

Issue with my drag and drop plugin

I'm currently developing a Drag n' Drop plugin. I have just finished a feature so people could drop the draggable item on a target. Now it works perfect on the jsfiddle:
http://jsfiddle.net/XvZLn/18/
But once I implement that code into my plugin the following wont work:
var target = {
on: function() {
return $('.drag:first').each(function() {
$(this).addClass('i');
});
},
off: function() {
$('.drag:first').removeClass('i');
}
};
Which in my plugin it looks like this:
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
Both of the codes have there purposes. The the on part is the function that is suppose to be launched when you enter all the way in the target. The off part is the function that gets launched when leaving the target.
onTarget and offTarget are all options in the defaults.
The reason we this var is because we needed a way to use function(){}.
The only way I thought I could do this is in an var.
Now Im trying to launch targ.on() inside the if that checks if the element is all the way inside the target. This is not working. I know the targ.on() is not working because I added an alert in the if and and I got the alert once the element got in the target.
This the the full code I use in my plugin:
var locker = o.target.lock;
var lock = false;
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
$(oj).bind('drag', function (event) {
var $t = $(this);
var $con = $(o.target.init);
if (lock === false) {
$(this).css({
top: event.offsetY,
left: event.offsetX
});
}
}).bind('mouseup', function () {
var $t = $(this);
var $con = $(o.target.init);
var sen = 100;
var otop = $t.offset().top;
var oleft = $t.offset().left;
var conw = $con.width();
var conh = $con.height();
var cono = $con.offset().top;
var conl = $con.offset().left;
var oo = $t.height();
sen = sen * 2;
var other = oleft <= conw - (sen / 1.25) && oleft > conl && oleft < conw + conl - (sen / 4);
if (locker === false) {
if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
targ.on();
lock = false;
} else {
targ.off();
lock = false;
}
} else {
if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
targ.on();
$(this).css('cursor', 'default');
lock = true;
}
}
});
Full Plugin Code:
$.setCookie = function(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
};
$.getCookie = function(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
};
$.fn.jDrag = function(options) {
var getVersion = {
version: '1.0.0',
version2: '1.0.0',
version3: '1.0.1'
};
var defaults = {
revert: false,
revertDuration: 500,
ghostDrop: false,
ghostRevert: false,
ghostOpacity: '0.50',
instantGhost: false,
activeClass: false,
handle: false,
grid: false,
cookies: false,
cookieExdate: 365,
radialDrag: false,
radius: 100,
circularOutline: false,
strictMovement: false,
distance: 0,
not: false,
containment: false,
target: {
init: false,
lock: false,
onTarget: function() {},
offTarget: function() {}
},
onPickUp: function() {},
onDrop: function() {}
};
var o = $.extend(defaults, options);
$('body').append('<span class="version_usage_neededToReCievever_srion-now" style="display:none;">' + getVersion.version2 + '</span>');
return this.each(function() {
//Some Variables
var oj = this,
position = $(oj).position(),
revertLeft = position.left,
revertTop = position.top,
yea = 'body',
onceInawhile = '<b class="getDistanceAsofPosition" style="display:none;">' + o.distance + '</b>';
if (o.not === oj) {
o.not = false;
}
o.distance = squared(o.distance);
//alert(o.distance);
var m;
var t;
$(oj).bind('mousedown', function() {
m = event.pageX;
t = event.pageY;
//$('#hi').text(m+' '+t);
});
var firstofdrag = '<b class="getnotNoCondition" style="display:none;">"' + o.not + '"</b>';
if (o.ghostDrop === true) {
var random = Math.floor(Math.random() * 9999999);
if (o.ghostRevert === false) {
o.revert = false;
}
if (o.ghostRevert === true) {
o.revert = true;
}
$(document).ready(function() {
$(oj).clone().attr('id', '').addClass('ghosts').addClass('ghost_starter' + random).css({
position: 'absolute',
top: revertTop,
left: revertLeft,
opacity: o.ghostOpacity
}).appendTo('body');
$('.ghost_starter' + random).mousedown(function() {
if (o.activeClass !== false) {
$(this).addClass(o.activeClass);
}
}).bind('mousedown', o.onPickUp).bind('drag', function(event) {
if (o.grid !== false) {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
$(this).css('left', Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
$(this).css('top', Math.round(event.offsetX / defaults.grid[1]) * defaults.grid[1]);
} else {
$(this).css({
top: Math.round(event.offsetY / defaults.grid[1]) * defaults.grid[1],
left: Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]
});
}
}
}
else if (o.containment !== false) {
var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));
var j, b, r;
$('.ghost_starter' + random).bind("dragstart", function(event) {
j = $div.offset();
b = j.top + $div.outerHeight() - $(this).outerHeight();
r = j.left + $div.outerWidth() - $(this).outerWidth();
}).bind('drag', function(event) {
$(this).css({
top: Math.min(b, Math.max(j.top, event.offsetY)),
left: Math.min(r, Math.max(j.left, event.offsetX))
});
});
}
else {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
$(this).css('left', event.offsetX);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
$(this).css('top', event.offsetY);
} else {
$(this).css({
top: event.offsetY,
left: event.offsetX
});
}
}
}
}).bind('mouseup', o.onDrop);
$(window).mouseup(function() {
if (o.activeClass !== false) {
$('.ghost_starter' + random).removeClass(o.activeClass);
}
var gpos = $('.ghost_starter' + random).position(),
lft = gpos.left,
tp = gpos.top;
$(oj).animate({
top: tp,
left: lft
}, 300);
if (o.cookies !== false) {
var cookies = $('.ghost_starter' + random).position();
if (o.cookieExdate === 'browserClose') {
$.setCookie('jDrag-Position-Top-Ghost' + $('.ghost_starter' + random).index(), cookies.top);
$.setCookie('jDrag-Position-Left-Ghost' + $('.ghost_starter' + random).index(), cookies.left);
} else {
$.setCookie('jDrag-Position-Top-Ghost' + $('.ghost_starter' + random).index(), cookies.top, o.cookieExdate);
$.setCookie('jDrag-Position-Left-Ghost' + $('.ghost_starter' + random).index(), cookies.left, o.cookieExdate);
}
}
});
});
}
if (o.distance !== false) {
$(yea).append(onceInawhile);
}
$('body').append('<span class="version_usage_neededToReCievever_srion-future" style="display:none;">' + getVersion.version3 + '</span>');
if (o.radialDrag === true) {
$(document).ready(function() {
if (o.circularOutline === true) {
$('head').append('<span class="hi"><div class="circularStyle"></div></span>');
$('.circularStyle').html('<style type="text/css">.pointlikeamaster{' + 'position: absolute;height: 4px;width: 4px;' + 'margin: -2px 0 0 -2px;background: #A00;' + '}</style>');
}
});
$(oj).bind('dragstart', function(event) {
var data = $(this).data('dragcircle');
if (data) {
data.$circle.show();
}
else {
data = {
radius: o.radius,
$circle: $([]),
halfHeight: $(this).outerHeight() / 2,
halfWidth: $(this).outerWidth() / 2
};
data.centerX = event.offsetX + data.radius + data.halfWidth;
data.centerY = event.offsetY + data.halfHeight;
// create divs to highlight the path...
$.each(new Array(72), function(i, a) {
angle = Math.PI * ((i - 36) / 36);
data.$circle = data.$circle.add(
$('<div class="pointlikeamaster" />').css({
top: data.centerY + Math.cos(angle) * data.radius,
left: data.centerX + Math.sin(angle) * data.radius
}));
});
$(this).after(data.$circle).data('dragcircle', data);
}
}).bind('drag', function(event) {
var data = $(this).data('dragcircle'),
angle = Math.atan2(event.pageX - data.centerX, event.pageY - data.centerY);
$(this).css({
top: data.centerY + Math.cos(angle) * data.radius - data.halfHeight,
left: data.centerX + Math.sin(angle) * data.radius - data.halfWidth
});
}).bind('dragend', function() {
$(this).data('dragcircle').$circle.hide();
});
} else {
$(oj).mousedown(function() {
if (o.activeClass !== false) {
$(this).addClass(o.activeClass);
}
}).bind('mousedown', o.onPickUp);
if (o.handle !== false) {
$(o.handle).mouseover(function() {
$(this).css({
cursor: 'crosshair'
});
});
$(oj).bind('dragstart', function(event) {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
return $(event.target).is(o.handle);
}
}).bind('drag', function(event) {
if (o.grid !== false) {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
$(this).css('left', Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
$(this).css('top', Math.round(event.offsetX / defaults.grid[1]) * defaults.grid[1]);
} else {
$(this).css({
top: Math.round(event.offsetY / defaults.grid[1]) * defaults.grid[1],
left: Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]
});
}
}
}
else if (o.containment !== false) {
var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));
var j, b, r;
$(oj).bind("dragstart", function(event) {
j = $div.offset();
b = j.top + $div.outerHeight() - $(this).outerHeight();
r = j.left + $div.outerWidth() - $(this).outerWidth();
}).bind('drag', function(event) {
$(this).css({
top: Math.min(b, Math.max(j.top, event.offsetY)),
left: Math.min(r, Math.max(j.left, event.offsetX))
});
});
}
else {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
$(this).css('left', event.offsetX);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
$(this).css('top', event.offsetY);
} else {
$(this).css({
top: event.offsetY,
left: event.offsetX
});
}
}
}
});
} else {
$(oj).bind('drag', function(event) {
if (o.grid !== false) {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal') {
$(this).css('left', Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical') {
$(this).css('top', Math.round(event.offsetX / defaults.grid[1]) * defaults.grid[1]);
} else {
$(this).css({
top: Math.round(event.offsetY / defaults.grid[1]) * defaults.grid[1],
left: Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]
});
}
}
}
else if (o.containment !== false) {
var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));
var j, b, r;
$(oj).bind("dragstart", function(event) {
j = $div.offset();
b = j.top + $div.outerHeight() - $(this).outerHeight();
r = j.left + $div.outerWidth() - $(this).outerWidth();
}).bind('drag', function(event) {
$(this).css({
top: Math.min(b, Math.max(j.top, event.offsetY)),
left: Math.min(r, Math.max(j.left, event.offsetX))
});
});
}
else if (o.target.init !== false) {
/*
Use this to adjust the target settings
$('b').html(otop+' < '+(conw - (sen/4))+' && '+otop+' > '+cono+' && '+otop+' <= '+((conh + cono)-oo)+' && '+oleft+' < '+(conw-(sen/1.25))+' && '+oleft+' > '+conl+' && '+oleft+' < '+(conw + conl-(sen/4)));
var other = oleft <= conw - (sen/1.25) && oleft > conl && oleft < conw + conl - (sen / 4);
*/
var locker = o.target.lock;
var lock = false;
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
$(oj).bind('drag', function(event) {
var $t = $(this);
var $con = $(o.target.init);
if (lock === false) {
$(this).css({
top: event.offsetY,
left: event.offsetX
});
}
}).bind('mouseup', function() {
var $t = $(this);
var $con = $(o.target.init);
var sen = 100;
var otop = $t.offset().top;
var oleft = $t.offset().left;
var conw = $con.width();
var conh = $con.height();
var cono = $con.offset().top;
var conl = $con.offset().left;
var oo = $t.height();
sen = sen * 2;
var other = oleft <= conw - (sen / 1.25) && oleft > conl && oleft < conw + conl - (sen / 4);
if (locker === false) {
if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
targ.on();
lock = false;
} else {
targ.off();
lock = false;
}
} else {
if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
targ.on();
$(this).css('cursor', 'default');
lock = true;
}
}
});
} else {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal') {
$(this).css('left', event.offsetX);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical') {
$(this).css('top', event.offsetY);
} else {
$(this).css({
top: event.offsetY,
left: event.offsetX
});
}
}
}
});
}
$(oj).bind('mouseup', o.onDrop);
$(window).mouseup(function() {
if (o.activeClass !== false) {
$(oj).removeClass(o.activeClass);
}
if (o.revert === true) {
$(oj).animate({
top: revertTop,
left: revertLeft
}, o.revertDuration);
}
if (o.cookies !== false) {
var cookies = $(oj).position();
if (o.cookieExdate === 'browserClose') {
$.setCookie('jDrag-Position-Top' + $(oj).index(), cookies.top);
$.setCookie('jDrag-Position-Left' + $(oj).index(), cookies.left);
} else {
$.setCookie('jDrag-Position-Top' + $(oj).index(), cookies.top, o.cookieExdate);
$.setCookie('jDrag-Position-Left' + $(oj).index(), cookies.left, o.cookieExdate);
}
}
});
}
if (o.not !== false) {
$(yea).append(firstofdrag);
}
$('body').append('<span class="version_usage_neededToReCievever_srion-past" style="display:none;">' + getVersion.version + '</span>');
if (o.instantGhost === true) {
window.setInterval(function() {
var gpos = $('.ghost_starter' + random).position(),
lft = gpos.left,
tp = gpos.top;
$(oj).stop(true, false).animate({
top: tp,
left: lft
}, 200);
}, 200);
}
//End normal Dragging
//End Tags
if (o.cookies === false) {
$(function() {
var oj = this;
if (o.ghostDrop === true) {
var savedLeftPosition = $.getCookie('jDrag-Position-Left-Ghost' + $(oj).index()),
savedTopPosition = $.getCookie('jDrag-Position-Top-Ghost' + $(oj).index());
$(oj).css({
left: savedLeftPosition + 'px',
top: savedTopPosition + 'px'
});
$('.ghost_starter' + random).css({
left: savedLeftPosition + 'px',
top: savedTopPosition + 'px'
});
}
});
} else {
var savedLeftPosition1 = $.getCookie('jDrag-Position-Left' + $(oj).index()),
savedTopPosition1 = $.getCookie('jDrag-Position-Top' + $(oj).index());
$(oj).css({
left: savedLeftPosition1 + 'px',
top: savedTopPosition1 + 'px'
});
}
});
};
I had to leave out the top part of the plugin because it told me there is a 30000 character limit.
Example: http://jsfiddle.net/ZDUZL/84/
Im not sure what the problem is, and im not sure if this is too much information or not. Thanks for any help.
This works in your first jsFiddle because you're relying on the offset directly from the drag event object:
$('.drag').bind('drag', function(event) {
var $t = $(this);
var $con = $('#container');
if (lock === false) {
$(this).css({
top: event.offsetY, // coordinates directly from event object
left: event.offsetX
});
}
})...
In the full plugin code, you get an offset in your dragstart event callback and then try to reference it from your drag event callback. The problem is that this dragstart event is not being triggered (or not at the proper time or on the proper element, anyway). When the drag callback looks for the values, they're undefined and your script is halted on the error. See here for reference:
var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));
var j, b, r;
$('.ghost_starter' + random).bind("dragstart", function(event) { // this event isn't being triggered (or at least not at the right time or on the right element)...
j = $div.offset();
b = j.top + $div.outerHeight() - $(this).outerHeight();
r = j.left + $div.outerWidth() - $(this).outerWidth();
}).bind('drag', function(event) {
$(this).css({
top: Math.min(b, Math.max(j.top, event.offsetY)), // ...so b, j, and r aren't defined here
left: Math.min(r, Math.max(j.left, event.offsetX))
});
});
Fix that dragstart trigger or get your offset otherwise and you'll be set.

Categories