We Keep Coding

jquery.seat-charts.js Uncaught TypeError: Cannot read property 'status' of undefined

I am using Jquery Seat chart for a ticket reservation system. Everything is working fine but when i am calling a function which returns already booked seats, the status of seats is not changing to 'already booked'.
I am getting 'jquery.seat-charts.js Uncaught TypeError: Cannot read property 'status' of undefined' error.
here is my code:
function getBookedSeats() {
jQuery(document).ready(function ($) {
$.ajax({
type : 'get',
url : 'bookings/getSelectedSeats',
data : 'show_id=<?php echo $show_id ?>',
success : function(response) {
response1 = JSON.parse(response);
$.each(response1.bookings, function (index, booking) {
sc.status(booking.seat_id, 'unavailable');
});
}
});
});
}
and the error iam getting is in jquery.seat-chart.js on line 486.
jquery.seat-chart.js
(function($) {
//'use strict';
$.fn.seatCharts = function (setup) {
//if there's seatCharts object associated with the current element, return it
if (this.data('seatCharts')) {
return this.data('seatCharts');
}
var fn = this,
seats = {},
seatIds = [],
legend,
settings = {
animate : false, //requires jQuery UI
naming : {
top : true,
left : true,
getId : function(character, row, column) {
return row + '_' + column;
},
getLabel : function (character, row, column) {
return column;
}
},
legend : {
node : null,
items : []
},
click : function() {
if (this.status() == 'available') {
return 'selected';
} else if (this.status() == 'selected') {
return 'available';
} else {
return this.style();
}
},
focus : function() {
if (this.status() == 'available') {
return 'focused';
} else {
return this.style();
}
},
blur : function() {
return this.status();
},
seats : {}
},
//seat will be basically a seat object which we'll when generating the map
seat = (function(seatCharts, seatChartsSettings) {
return function (setup) {
var fn = this;
fn.settings = $.extend({
status : 'available', //available, unavailable, selected
style : 'available',
//make sure there's an empty hash if user doesn't pass anything
data : seatChartsSettings.seats[setup.character] || {}
//anything goes here?
}, setup);
fn.settings.$node = $('<div></div>');
fn.settings.$node
.attr({
id : fn.settings.id,
role : 'checkbox',
'aria-checked' : false,
focusable : true,
tabIndex : -1 //manual focus
})
.text(fn.settings.label)
.addClass(['seatCharts-seat', 'seatCharts-cell', 'available'].concat(
//let's merge custom user defined classes with standard JSC ones
fn.settings.classes,
typeof seatChartsSettings.seats[fn.settings.character] == "undefined" ?
[] : seatChartsSettings.seats[fn.settings.character].classes
).join(' '));
//basically a wrapper function
fn.data = function() {
return fn.settings.data;
};
fn.char = function() {
return fn.settings.character;
};
fn.node = function() {
return fn.settings.$node;
};
/*
* Can either set or return status depending on arguments.
*
* If there's no argument, it will return the current style.
*
* If you pass an argument, it will update seat's style
*/
fn.style = function() {
return arguments.length == 1 ?
(function(newStyle) {
var oldStyle = fn.settings.style;
//if nothing changes, do nothing
if (newStyle == oldStyle) {
return oldStyle;
}
//focused is a special style which is not associated with status
fn.settings.status = newStyle != 'focused' ? newStyle : fn.settings.status;
fn.settings.$node
.attr('aria-checked', newStyle == 'selected');
//if user wants to animate status changes, let him do this
seatChartsSettings.animate ?
fn.settings.$node.switchClass(oldStyle, newStyle, 200) :
fn.settings.$node.removeClass(oldStyle).addClass(newStyle);
return fn.settings.style = newStyle;
})(arguments[0]) : fn.settings.style;
};
//either set or retrieve
fn.status = function() {
return fn.settings.status = arguments.length == 1 ?
fn.style(arguments[0]) : fn.settings.status;
};
//using immediate function to convienietly get shortcut variables
(function(seatSettings, character, seat) {
//attach event handlers
$.each(['click', 'focus', 'blur'], function(index, callback) {
//we want to be able to call the functions for each seat object
fn[callback] = function() {
if (callback == 'focus') {
//if there's already a focused element, we have to remove focus from it first
if (seatCharts.attr('aria-activedescendant') !== undefined) {
seats[seatCharts.attr('aria-activedescendant')].blur();
}
seatCharts.attr('aria-activedescendant', seat.settings.id);
seat.node().focus();
}
/*
* User can pass his own callback function, so we have to first check if it exists
* and if not, use our default callback.
*
* Each callback function is executed in the current seat context.
*/
return fn.style(typeof seatSettings[character][callback] === 'function' ?
seatSettings[character][callback].apply(seat) : seatChartsSettings[callback].apply(seat));
};
});
//the below will become seatSettings, character, seat thanks to the immediate function
})(seatChartsSettings.seats, fn.settings.character, fn);
fn.node()
//the first three mouse events are simple
.on('click', fn.click)
.on('mouseenter', fn.focus)
.on('mouseleave', fn.blur)
//keydown requires quite a lot of logic, because we have to know where to move the focus
.on('keydown', (function(seat, $seat) {
return function (e) {
var $newSeat;
//everything depends on the pressed key
switch (e.which) {
//spacebar will just trigger the same event mouse click does
case 32:
e.preventDefault();
seat.click();
break;
//UP & DOWN
case 40:
case 38:
e.preventDefault();
/*
* This is a recursive, immediate function which searches for the first "focusable" row.
*
* We're using immediate function because we want a convenient access to some DOM elements
* We're using recursion because sometimes we may hit an empty space rather than a seat.
*
*/
$newSeat = (function findAvailable($rows, $seats, $currentRow) {
var $newRow;
//let's determine which row should we move to
if (!$rows.index($currentRow) && e.which == 38) {
//if this is the first row and user has pressed up arrow, move to the last row
$newRow = $rows.last();
} else if ($rows.index($currentRow) == $rows.length-1 && e.which == 40) {
//if this is the last row and user has pressed down arrow, move to the first row
$newRow = $rows.first();
} else {
//using eq to get an element at the desired index position
$newRow = $rows.eq(
//if up arrow, then decrement the index, if down increment it
$rows.index($currentRow) + (e.which == 38 ? (-1) : (+1))
);
}
//now that we know the row, let's get the seat using the current column position
$newSeat = $newRow.find('.seatCharts-seat,.seatCharts-space').eq($seats.index($seat));
//if the seat we found is a space, keep looking further
return $newSeat.hasClass('seatCharts-space') ?
findAvailable($rows, $seats, $newRow) : $newSeat;
})($seat
//get a reference to the parent container and then select all rows but the header
.parents('.seatCharts-container')
.find('.seatCharts-row:not(.seatCharts-header)'),
$seat
//get a reference to the parent row and then find all seat cells (both seats & spaces)
.parents('.seatCharts-row:first')
.find('.seatCharts-seat,.seatCharts-space'),
//get a reference to the current row
$seat.parents('.seatCharts-row:not(.seatCharts-header)')
);
//we couldn't determine the new seat, so we better give up
if (!$newSeat.length) {
return;
}
//remove focus from the old seat and put it on the new one
seat.blur();
seats[$newSeat.attr('id')].focus();
$newSeat.focus();
//update our "aria" reference with the new seat id
seatCharts.attr('aria-activedescendant', $newSeat.attr('id'));
break;
//LEFT & RIGHT
case 37:
case 39:
e.preventDefault();
/*
* The logic here is slightly different from the one for up/down arrows.
* User will be able to browse the whole map using just left/right arrow, because
* it will move to the next row when we reach the right/left-most seat.
*/
$newSeat = (function($seats) {
if (!$seats.index($seat) && e.which == 37) {
//user has pressed left arrow and we're currently on the left-most seat
return $seats.last();
} else if ($seats.index($seat) == $seats.length -1 && e.which == 39) {
//user has pressed right arrow and we're currently on the right-most seat
return $seats.first();
} else {
//simply move one seat left or right depending on the key
return $seats.eq($seats.index($seat) + (e.which == 37 ? (-1) : (+1)));
}
})($seat
.parents('.seatCharts-container:first')
.find('.seatCharts-seat:not(.seatCharts-space)'));
if (!$newSeat.length) {
return;
}
//handle focus
seat.blur();
seats[$newSeat.attr('id')].focus();
$newSeat.focus();
//update our "aria" reference with the new seat id
seatCharts.attr('aria-activedescendant', $newSeat.attr('id'));
break;
default:
break;
}
};
})(fn, fn.node()));
//.appendTo(seatCharts.find('.' + row));
}
})(fn, settings);
fn.addClass('seatCharts-container');
//true -> deep copy!
$.extend(true, settings, setup);
//Generate default row ids unless user passed his own
settings.naming.rows = settings.naming.rows || (function(length) {
var rows = [];
for (var i = 1; i <= length; i++) {
rows.push(i);
}
return rows;
})(settings.map.length);
//Generate default column ids unless user passed his own
settings.naming.columns = settings.naming.columns || (function(length) {
var columns = [];
for (var i = 1; i <= length; i++) {
columns.push(i);
}
return columns;
})(settings.map[0].split('').length);
if (settings.naming.top) {
var $headerRow = $('<div></div>')
.addClass('seatCharts-row seatCharts-header');
if (settings.naming.left) {
$headerRow.append($('<div></div>').addClass('seatCharts-cell'));
}
$.each(settings.naming.columns, function(index, value) {
$headerRow.append(
$('<div></div>')
.addClass('seatCharts-cell')
.text(value)
);
});
}
fn.append($headerRow);
//do this for each map row
$.each(settings.map, function(row, characters) {
var $row = $('<div></div>').addClass('seatCharts-row');
if (settings.naming.left) {
$row.append(
$('<div></div>')
.addClass('seatCharts-cell seatCharts-space')
.text(settings.naming.rows[row])
);
}
/*
* Do this for each seat (letter)
*
* Now users will be able to pass custom ID and label which overwrite the one that seat would be assigned by getId and
* getLabel
*
* New format is like this:
* a[ID,label]a[ID]aaaaa
*
* So you can overwrite the ID or label (or both) even for just one seat.
* Basically ID should be first, so if you want to overwrite just label write it as follows:
* a[,LABEL]
*
* Allowed characters in IDs areL 0-9, a-z, A-Z, _
* Allowed characters in labels are: 0-9, a-z, A-Z, _, ' ' (space)
*
*/
$.each(characters.match(/[a-z_]{1}(\[[0-9a-z_]{0,}(,[0-9a-z_ ]+)?\])?/gi), function (column, characterParams) {
var matches = characterParams.match(/([a-z_]{1})(\[([0-9a-z_ ,]+)\])?/i),
//no matter if user specifies [] params, the character should be in the second element
character = matches[1],
//check if user has passed some additional params to override id or label
params = typeof matches[3] !== 'undefined' ? matches[3].split(',') : [],
//id param should be first
overrideId = params.length ? params[0] : null,
//label param should be second
overrideLabel = params.length === 2 ? params[1] : null;
$row.append(character != '_' ?
//if the character is not an underscore (empty space)
(function(naming) {
//so users don't have to specify empty objects
settings.seats[character] = character in settings.seats ? settings.seats[character] : {};
var id = overrideId ? overrideId : naming.getId(character, naming.rows[row], naming.columns[column]);
seats[id] = new seat({
id : id,
label : overrideLabel ?
overrideLabel : naming.getLabel(character, naming.rows[row], naming.columns[column]),
row : row,
column : column,
character : character
});
seatIds.push(id);
return seats[id].node();
})(settings.naming) :
//this is just an empty space (_)
$('<div></div>').addClass('seatCharts-cell seatCharts-space')
);
});
fn.append($row);
});
//if there're any legend items to be rendered
settings.legend.items.length ? (function(legend) {
//either use user-defined container or create our own and insert it right after the seat chart div
var $container = (legend.node || $('<div></div>').insertAfter(fn))
.addClass('seatCharts-legend');
var $ul = $('<div class="row"></div>')
.addClass('seatCharts-legendList')
.appendTo($container);
$.each(legend.items, function(index, item) {
$ul.append(
$('<div class="col-md-2 col-xs-2"></div>')
.addClass('seatCharts-legendItem')
.append(
$('<div></div>')
//merge user defined classes with our standard ones
.addClass(['seatCharts-seat', 'seatCharts-cell', item[1]].concat(
settings.classes,
typeof settings.seats[item[0]] == "undefined" ? [] : settings.seats[item[0]].classes).join(' ')
)
)
.append(
$('<span></span>')
.addClass('seatCharts-legendDescription')
.text(item[2])
)
);
});
return $container;
})(settings.legend) : null;
fn.attr({
tabIndex : 0
});
//when container's focused, move focus to the first seat
fn.focus(function() {
if (fn.attr('aria-activedescendant')) {
seats[fn.attr('aria-activedescendant')].blur();
}
fn.find('.seatCharts-seat:not(.seatCharts-space):first').focus();
seats[seatIds[0]].focus();
});
//public methods of seatCharts
fn.data('seatCharts', {
seats : seats,
seatIds : seatIds,
//set for one, set for many, get for one
status: function() {
var fn = this;
return arguments.length == 1 ? fn.seats[arguments[0]].status() : (function(seatsIds, newStatus) {
return typeof seatsIds == 'string' ? fn.seats[seatsIds].status(newStatus) : (function() {
$.each(seatsIds, function(index, seatId) {
fn.seats[seatId].status(newStatus);
});
})();
})(arguments[0], arguments[1]);
},
each : function(callback) {
var fn = this;
for (var seatId in fn.seats) {
if (false === callback.call(fn.seats[seatId], seatId)) {
return seatId;//return last checked
}
}
return true;
},
node : function() {
var fn = this;
//basically create a CSS query to get all seats by their DOM ids
return $('#' + fn.seatIds.join(',#'));
},
find : function(query) {//D, a.available, unavailable
var fn = this;
var seatSet = fn.set();
//is RegExp
return query instanceof RegExp ?
(function () {
fn.each(function (id) {
if (id.match(query)) {
seatSet.push(id, this);
}
});
return seatSet;
})() :
(query.length == 1 ?
(function (character) {
//user searches just for a particual character
fn.each(function () {
if (this.char() == character) {
seatSet.push(this.settings.id, this);
}
});
return seatSet;
})(query) :
(function () {
//user runs a more sophisticated query, so let's see if there's a dot
return query.indexOf('.') > -1 ?
(function () {
//there's a dot which separates character and the status
var parts = query.split('.');
fn.each(function (seatId) {
if (this.char() == parts[0] && this.status() == parts[1]) {
seatSet.push(this.settings.id, this);
}
});
return seatSet;
})() :
(function () {
fn.each(function () {
if (this.status() == query) {
seatSet.push(this.settings.id, this);
}
});
return seatSet;
})();
})()
);
},
set : function set() {//inherits some methods
var fn = this;
return {
seats : [],
seatIds : [],
length : 0,
status : function() {
var args = arguments,
that = this;
//if there's just one seat in the set and user didn't pass any params, return current status
return this.length == 1 && args.length == 0 ? this.seats[0].status() : (function() {
//otherwise call status function for each of the seats in the set
$.each(that.seats, function() {
this.status.apply(this, args);
});
})();
},
node : function() {
return fn.node.call(this);
},
each : function() {
return fn.each.call(this, arguments[0]);
},
get : function() {
return fn.get.call(this, arguments[0]);
},
find : function() {
return fn.find.call(this, arguments[0]);
},
set : function() {
return set.call(fn);
},
push : function(id, seat) {
this.seats.push(seat);
this.seatIds.push(id);
++this.length;
}
};
},
//get one object or a set of objects
get : function(seatsIds) {
var fn = this;
return typeof seatsIds == 'string' ?
fn.seats[seatsIds] : (function() {
var seatSet = fn.set();
$.each(seatsIds, function(index, seatId) {
if (typeof fn.seats[seatId] === 'object') {
seatSet.push(seatId, fn.seats[seatId]);
}
});
return seatSet;
})();
}
});
return fn.data('seatCharts');
}
})(jQuery);

since the sc.status(par1,par2) expects first par1 in format of 'Row_Col' and second par2 as unavailable. i had to convert the seat number in par1 format by:
$.each(response1.bookings, function (index, booking) {
var seat_n = convertSeat(booking.seat_id);
sc.get(seat_n).status('unavailable');
});
convertSeat()
function convertSeat(seat_number) {
if(seat_number <= 29){
var seat_node = 'A_'+seat_number;
return seat_node;
}
else if(seat_number <= 58){
var seat = seat_number - 29;
var seat_node = 'B_'+seat;
return seat_node;
}
else if(seat_number <= 87){
var seat = seat_number - 58;
var seat_node = 'C_'+seat;
return seat_node;
}
else if(seat_number <= 116){
var seat = seat_number - 87;
var seat_node = 'D_'+seat;
return seat_node;
}
else if(seat_number <= 145){
var seat = seat_number - 116;
var seat_node = 'E_'+seat;
return seat_node;
}
else if(seat_number <= 174){
var seat = seat_number - 145;
var seat_node = 'F_'+seat;
return seat_node;
}
else if(seat_number <= 203){
var seat = seat_number - 174;
var seat_node = 'G_'+seat;
return seat_node;
}
else if(seat_number <= 232){
var seat = seat_number - 203;
var seat_node = 'H_'+seat;
return seat_node;
}
else if(seat_number <= 261){
var seat = seat_number - 232;
var seat_node = 'I_'+seat;
return seat_node;
}
else if(seat_number <= 290){
var seat = seat_number - 261;
var seat_node = 'J_'+seat;
return seat_node;
}
else if(seat_number <= 319){
var seat = seat_number - 290;
var seat_node = 'K_'+seat;
return seat_node;
}
else if(seat_number <= 348){
var seat = seat_number - 319;
var seat_node = 'L_'+seat;
return seat_node;
}
else if(seat_number <= 377){
var seat = seat_number - 348;
var seat_node = 'M_'+seat;
return seat_node;
}
else if(seat_number <= 406){
var seat = seat_number - 377;
var seat_node = 'N_'+seat;
return seat_node;
}
else if(seat_number <= 435){
var seat = seat_number - 406;
var seat_node = 'O_'+seat;
return seat_node;
}
else if(seat_number <= 464){
var seat = seat_number - 435;
var seat_node = 'P_'+seat;
return seat_node;
}
else if(seat_number <= 493){
var seat = seat_number - 464;
var seat_node = 'Q_'+seat;
return seat_node;
}
else if(seat_number <= 522){
var seat = seat_number - 493;
var seat_node = 'R_'+seat;
return seat_node;
}
else if(seat_number <= 551){
var seat = seat_number - 522;
var seat_node = 'S_'+seat;
return seat_node;
}
}

Error while adding a custom html to Google Tag Manager

I'm not really into JS, could you tell me what's wrong with this code? I tried to add this but an error occurs "Error at line 74, character 3: Parse error. ')' expected". I don't really know what to repair.
<script id="gtm-scroll-tracking" type="text/javascript">
; (function (document, window, config) {
// Browser dependencies, script fails silently
if (!document.querySelector || !document.body.getBoundingClientRect) {
return false;
}
// Get our dataLayer ready, in case we're not in GTM or we've got a special name
var dataLayerName = config.dataLayerName || 'dataLayer';
var dataLayer = window[dataLayerName] || (window[dataLayerName] = []);
var cache = {};
// Initialize our distances, for later
config.distances = config.distances || {};
checkDepth();
addEvent(window, 'scroll', throttle(checkDepth, 500));
function getMarks(_docHeight, _offset) {
var marks = {};
var percents = [];
var pixels = []
if (config.distances.percentages) {
if (config.distances.percentages.each) {
percents = percents.concat(config.distances.percentages.each);
}
if (config.distances.percentages.every) {
var _every = every_(config.distances.percentages.every, 100);
percents = percents.concat(_every);
}
}
if (config.distances.pixels) {
if (config.distances.pixels.each) {
pixels = pixels.concat(config.distances.pixels.each);
}
if (config.distances.pixels.every) {
var _every = every_(config.distances.pixels.every, _docHeight);
pixels = pixels.concat(_every);
}
}
marks = addMarks_(marks, percents, '%', _docHeight, _offset);
marks = addMarks_(marks, pixels, 'px', _docHeight, _offset);
return marks;
}
function addMarks_(marks, points, symbol, _docHeight, _offset) {
var i;
for (i = 0; i < points.length; i++) {
var _point = parseInt(points[i], 10);
var height = symbol !== '%' ? _point + _offset : _docHeight *
(_point / 100) + _offset;
var mark = _point + symbol;
if (height <= _docHeight + _offset) { marks[mark] = height; }
}
return marks;
}
function every_(n, total) {
var n = parseInt(n, 10);
var _num = total / n;
var arr = [];
for (i = 1; i < _num + 1; i++) { arr.push(i * n); }
return arr;
}
function checkDepth() {
var _bottom = parseBorder_(config.bottom);
var _top = parseBorder_(config.top);
var height = docHeight(_bottom, _top);
var marks = getMarks(height, (_top || 0));
var _curr = currentPosition();
for (key in marks) {
if (_curr > marks[key] && !cache[key]) {
cache[key] = true;
fireAnalyticsEvent(key);
}
}
}
function fireAnalyticsEvent(distance) {
dataLayer.push({
'event': 'scrollTracking',
'attributes': { 'distance': distance }
});
}
}
function parseBorder_(border) {
if (typeof border === 'Number' || parseInt(border, 10)) {
return parseInt(border, 10);
}
try {
// If we have an element or a query selector, poll getBoundingClientRect
var el = border.nodeType && border.nodeType === 1 ? border :
document.querySelector(border);
var docTop = document.body.getBoundingClientRect().top;
var _elTop = Math.floor(el.getBoundingClientRect().top - docTop);
return _elTop;
} catch (e) { return void (0); }
}
// Adapted from
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
function currentPosition() {
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var currScrollTop = supportPageOffset ?
window.pageYOffset :
isCSS1Compat ?
document.documentElement.scrollTop :
document.body.scrollTop;
return parseInt(currScrollTop, 10) + parseInt(viewportHeight(), 10);
}
function viewportHeight() {
var elem = (document.compatMode === "CSS1Compat") ?
document.documentElement :
document.body;
return elem.clientHeight;
}
function docHeight(_bottom, _top) {
var body = document.body;
var html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
if (_top) { height = height - _top; }
if (_bottom) { height = _bottom - _top; }
return height - 5;
}
/*
* Throttle function borrowed from:
* Underscore.js 1.5.2
* http://underscorejs.org
*
(c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative
Reporters & Editors
* Underscore may be freely distributed under the MIT license.
*/
function throttle(func, wait) {
var context, args, result;
var timeout = null;
var previous = 0;
var later = function () {
previous = new Date;
timeout = null;
result = func.apply(context, args);
};
return function () {
var now = new Date;
if (!previous) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(later, remaining);
}
return result;
};
}
// Cross-browser compliant event listener
function addEvent(el, evt, fn) {
if (el.addEventListener) { return el.addEventListener(evt, fn); }
if (el.attachEvent) {
return el.attachEvent('on' + evt, function (evt) {
// Call the event to ensure uniform 'this' handling, pass it event
fn.call(el, evt);
});
}
if (typeof el['on' + evt] === 'undefined' || el['on' + evt] === null) {
return el['on' + evt] = function (evt) {
// Call the event to ensure uniform 'this' handling, pass it event
fn.call(el, evt); \
}
}
}
})(document, window,
{
// False if you just use the default dataLayer variable, otherwise enter it here
'dataLayerName': false,
'distances': {
// Configure percentages of page you'd like to see if users scroll past
'percentages': {
'each': [10, 90],
'every': 25
},
// Configure for pixel measurements of page you'd like to see if users scroll past
'pixels': {
'each': [],
'every': null
}
},
// Accepts a number, DOM element, or query selector to determine the top of the scrolling area
'top': null,
// Accepts a number, DOM element, or query selector to determine the bottom of the scrolling area
'bottom': null,
});
</script>
While trying to preview (debug), the tool tells me:
Error at line 74, character 3: Parse error. ')' expected

i cant find where is javascript code

I have some problem! On my website at the bottom of page after footer tag is shown this code is there. I try load this link into my browser and it cannot be loaded!
<script
type="text/javascript"
src="http://example.com/adserver/static/p/10048/inimage_s.js">
</script>
i try find in my files but I couldn't find! Problem is that this file cannot be loaded because this file doesn't exist on this server and my other files load very slow!I try load website in Firefox and this code is not shown!
How can I find this code(this js file) or disable it?

I have the exact same problem. There should be some kind of extension/adware/whatever causing that.
I've reported it here: http://code.google.com/p/chromium/issues/detail?id=139634

Do you have some extension called Fast save 1.1 or Domain Error Assistant 1.0 in your chrome extensions? When I disable these extensions, error didn't happen again.
EDIT:
I have never installed these extension - there's also no information on it in the Chrome web store.

Looking at the link it has something to do with advertisements. This would imply you are loading a script somewhere else in your files which has to do with that.
If you don't add this script yourself, it should not be blocking the load of your website, only the load of the file and that should not cause any issues for you.
Try looking in your code to find for advertisements (you probably know if you did this anywhere or not).
No advertisements? Then look at all the other scripts you include that might cause this, and target the one who did and see if you really need this script or not.
Can't find that either? Perhaps it is your browser including the script. Or you might have some sort of virus lying around anywhere on your machine.

Put this link in your browser :
http://overlay.mediads.info:8080/adserver/static/p/10048/inimage_s.js
And download the JS file( Save the File). If you want to disable it simple remove the link from your page.

Well, you can disable the load simply by removing this line of code form your file.
I can load this js file without a problem, this is the code:
/** Bind for this object Function **/
if( typeof Function.prototype.bind != 'function' ){
Function.prototype.bind = function (bind) {
var self = this;
return function () {
var args = Array.prototype.slice.call(arguments);
return self.apply(bind || null, args);
};
};
}
/******************************** ver. 0.1F8.731 Cortica Default Object ********************************************************/
var CorticaDO = {
version : 073,
height : 210,
width : 190,
bannerType : 15,
publisherId : 10048,
dataUrl : "http://srv.overlay-ad.com:8080/adserver/Server",
dotClickUrl : "http://srv.overlay-ad.com:8080/adserver/inimageclick",
requestId : '',
fontfamily : "arial,helvetica,sans-serif",
textsize : 10,
opacity : 9,// from 1 to 10
floaters : [],
scanedImages : [],
fzindex : 999998, // 999998
rescanParamExt : "",
rescan : 0,
REC : 0,
debugMode : true,
doRescan : false,
onReload : false,
/** Object Common Functions *********************************************************/
/** Detect Parameters **/
getParameterByName : function(identifier,name) {
var scripts = document.getElementsByTagName('script') ,i , curScript;
for (i = 0; i < scripts.length; ++i)
{
curScript = scripts[i];
if (curScript.src.match(identifier))
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec((curScript.src.match(/\?.*/) || [undefined])[0]);
if(results == null)
{return "";}
else{return decodeURIComponent(results[1].replace(/\+/g, " "));}
}
}
return ;
},
/** Decode URL ***/
urlDecode : function(psEncodeString){
var lsRegExp = /\+/g; /* Create a regular expression to search all +s in the string */
return unescape(String(psEncodeString).replace(lsRegExp, " ")); /* Return the decoded string */
},
/** Count Object Properties **///////
countProperties : function(obj){
var count = 0;
for(var prop in obj){if(obj.hasOwnProperty(prop)){++count;}}
return count;
},
/** Debug Mode ***/
consoleOut : function(msg){if(this.debugMode && typeof console != 'undefined' && typeof console.log === 'function'){console.log(msg);}},
/******************************** Images Detection ************************************************************************************/
/** Check Image ***/
checkImageParam : function(obj){
if(obj.height > this.height && obj.width > this.width)
{return true;}
else{return false;}
},
/** Get Visible Images ***/
getAllVisibleImages : function(){
var images = document.getElementsByTagName('img'),
i,
tmpFloater = null,
newImages = [];
/* Preset Floaters */
for(i=0; i < CorticaDO.floaters.length; i++)
{CorticaDO.floaters[i].visible = false;}
/* Over Images */
if(typeof images != 'undefined')
{
for( var s in images)
{
if(CorticaDO.checkImageParam(images[s]) && CorticaDO.isVisible( images[s]))
{
var found = false;
/* Detect Object exist */
if( CorticaDO.floaters.length > 0)
{
for(i = 0; i < CorticaDO.floaters.length; i++){
if( CorticaDO.floaters[i].isObj(images[s]))
{
CorticaDO.floaters[i].visible = true; /* Object detected and must be visible */
found = true;
break;
}
}
}
/* New Object Add */
if( !found)
{
tmpFloater = new corticaFDOC();
tmpFloater.src = images[s].src;
tmpFloater.obj = images[s];
tmpFloater.visible = true;
tmpFloater.index = CorticaDO.floaters.length;
CorticaDO.floaters.push( tmpFloater );
/* New Images Array for Request to AdServer */
this.scanedImages.push({src:images[s].src,obj:images[s],index:tmpFloater.index});
newImages.push( tmpFloater );
}
}
}
if(newImages.length > 0)
{
this.getImageList(newImages);
this.sendScanedData();
}
/* Show/Hide Floaters */
if( CorticaDO.floaters.length > 0)
{
for(i=0;i< CorticaDO.floaters.length;i++)
{CorticaDO.floaters[i].setVisibility();}
}
}
},
/** Check Image Visibility ***/
isVisible : function(element){
if( element.offsetWidth === 0 || element.offsetHeight === 0)
{return false;}
// Resolution for IE 9/8 quirk/compatible mode
var rects = element.getClientRects(),height,r,in_viewport;
if('innerWidth' in window)
{height = document.documentElement.clientHeight}
else{height = document.body.clientHeight;}
for( var i = 0, l = rects.length; i < l; i++)
{
r = rects[i];
in_viewport = parseInt( r.top) > 0 ? parseInt( r.top) <= height : ( parseInt( r.bottom) > 0 && parseInt( r.bottom) <= height );
if( in_viewport && CorticaDO.isElementOnTop( r, element))
{return true;}
}
return false;
},
/** Is view Point on Element **/
isElementOnTop : function( r, element){
var x = parseInt(( r.left + r.right)/2),
y = parseInt(( r.bottom + r.top)/2);
var el = document.elementFromPoint( x, y);
if( typeof el == 'undefined' || el == null)
{return false}
return (el === element);
},
/** Preset Image and Data Image Functions **/ /** tu - tag url,ts - tag size, ta - tag alt, tt - tag title **/
getImageList : function(list){
var lsRegExp = /\+/g,
tu = "",ts = "&sizes=",ta = "&alts=",tt = "&titles=";
for(var img=0;img<list.length;img++)
{
var tiUrl = escape(list[img].src);
tiUrl = tiUrl.replace(lsRegExp, encodeURIComponent('+'));
tu += tiUrl + "|";
ts += list[img].obj.width + "x" + list[img].obj.height + "|";
var alt = list[img].obj.getAttribute('alt');
var title = list[img].obj.getAttribute('title');
if(typeof alt == 'string')
{ta += escape(alt.replace (/\|/g, " ")) + "|";}
else{ta += "|";}
if(typeof title == 'string')
{tt += escape(title.replace (/\|/g, " ")) + "|";}
else{tt += "|";}
}
this.rescanParamExt = tu+ts+ta+tt+"&rescan="+this.rescan+"&requesId="+this.requestId;
},
/******************************************************************************************************************************/
/** Start Main Flow **/
corticaScan : function(){
if(CorticaDO.onRescan || CorticaDO.onReload){return;}
CorticaDO.onRescan = true;
CorticaDO.getAllVisibleImages();
CorticaDO.onRescan = false;
},
/** Common Start Flows Function **/
applyCortica : function(data,reqID){
CorticaDO.onReload = true;
this.requestId = reqID;
var dataCount = this.countProperties(data),found,i;
if(dataCount > 0)
{
for(var img = 0;img < dataCount;img++)
{
var src = unescape(data[img].imageUrl);
for( var p in this.scanedImages)
{
found = false;
for(i=0;i < CorticaDO.floaters.length;i++)
{
if( CorticaDO.floaters[i].src == src && CorticaDO.floaters[i].floater == null && this.scanedImages[p].index == CorticaDO.floaters[i].index)
{
CorticaDO.floaters[i].parseData(data[img]);
CorticaDO.floaters[i].createOFloater();
CorticaDO.floaters[i].viewFloater();
found = true;
break;
}
}
if(found){break;}
}
}
}
CorticaDO.onReload = false;
},
/** Send Images to AdServer **/
sendScanedData : function(){
try{
this.consoleOut('\nReload');// Debug Only
this.requestId = '';
if(typeof this.REC.removeScriptTag == 'function')
{
this.REC.removeScriptTag(); // Delete from Header corticaData
this.REC = 0;
}
//
CorticaDO.REC = new CorticaJSONscriptRequest(CorticaDO.dataUrl,'btype='+CorticaDO.bannerType+'&rid='+CorticaDO.publisherId+'&ref='+escape(document.location.href)+'&imgs='+CorticaDO.rescanParamExt);
CorticaDO.REC.buildScriptTag();
CorticaDO.REC.addScriptTag();
CorticaDO.onReload = false;
CorticaDO.refUrl = "";
CorticaDO.rescanParamExt = '';
CorticaDO.rescan++;
}
catch(err)
{
this.REC = 0;
this.consoleOut(err); // Debug Only
}
},
/** Event Close Floater ***/
closeFloater : function(p){
if(document.getElementById('corticaOF'+ p))
{
document.getElementById('corticaOF'+ p).style.display = 'none';
CorticaDO.floaters[p].disable = true;
}
else{this.consoleOut('Can\'t find floater for close action with ID: corticaOF'+p);}
},
};
/** Floater Default Object Clone *********************************************************************************************************************/
function corticaFDOC(){
this.obj = null;
this.src = '';
this.visible = true;
this.index = null;
this.data = {styleID:1,behaviour:2,advertiserId:10,campaignId:0,siteId:1,html:null,banW:null,banH:null,nonloc:1,isFullWidth:0,content:3};
this.floater = null;
this.onOFView = false;
this.disable = false;
};
corticaFDOC.prototype = {
/** Create Overlay Floater ***/
createOFloater : function (){
var self = this;
var f = document.createElement('DIV');
if(this.data.isFullWidth == 0)
{f.style.width = this.data.banW + "px";}
else{f.style.width = this.obj.width + "px";}
f.style.height = this.data.banH + "px";
f.invoker = this.obj;
f.style.position = 'absolute';
f.style.display = 'none';
f.style.cursor = 'pointer';
f.style.overflow = 'hidden';
f.style.fontFamily = CorticaDO.fontfamily;
f.style.padding = f.style.margin = 0;
f.innerHTML = this.data.html;
f.setAttribute('id','corticaOF'+this.index);
document.body.appendChild(f);
/** Set Close Button **/
if(document.getElementById('corticaFcl'))
{
var fclb = document.getElementById('corticaFcl');
fclb.id = "corticaFcl"+this.index;
fclb.onclick = function()
{CorticaDO.closeFloater(self.index);};//this.closeFloater(self.index).bind(this);
}
this.floater = f;
},
/** Parse Data from AdServer ***/
parseData : function (data){
if(typeof data['behaviorId'] != 'undefined') {this.data.behaviour = data['behaviorId'];}
if(typeof data['loc'] != 'undefined') {this.data.nonloc = data['loc'];} // Non Locationable
if(typeof data['siteId'] != 'undefined') {this.data.siteId = data['siteId'];}
if(typeof data['isFullWidth'] != 'undefined') {this.data.isFullWidth= data['isFullWidth'];} // isFullWidth
if(typeof data['content'] != 'undefined') {this.data.content = data['content'];} // content
// Set data to object
if(typeof data['ads'][0].html != 'undefined'){
this.data.html = CorticaDO.urlDecode(data['ads'][0].html);
if(typeof data['ads'][0].bannerWidth != 'undefined') // banW
{this.data.banW = data['ads'][0].bannerWidth;}
if(typeof data['ads'][0].bannerHeight != 'undefined') // banH
{this.data.banH = data['ads'][0].bannerHeight;}
if(typeof data['ads'][0].styleId != 'undefined' && data['ads'][0].styleId)
{this.data.styleID = data['ads'][0].styleId;}
if(data['ads'][0].advertiserId)
{this.data.advertiserId = data['ads'][0].advertiserId;}
if(data['ads'][0].campaignId)
{this.data.campaignId = data['ads'][0].campaignId;}
}
},
/** Show Floater ***/
viewFloater: function (){
try{
if(typeof this.data != 'undefined')
{
var allOffset = this.getOffsetElement(this.obj);
var strH = this.floater.style.height;
var strW = this.floater.style.width;
if(this.floater.style.display != "block" && !this.disable){
if(this.data.nonloc == 3)
{this.floater.style.top = (allOffset.top + this.obj.height) + 'px';}
else{this.floater.style.top = (allOffset.top + this.obj.height - parseInt(strH.replace(/px/i, ""),10)) + 'px';}
var left = 0;
if(this.data.isFullWidth == 0)
{left = parseInt((this.obj.width - parseInt(strW.replace(/px/i, ""),10))/2);}
this.floater.style.left = allOffset.left + left + 'px';
this.floater.style.zIndex = CorticaDO.fzindex;
this.floater.style.display = 'block';
if(!this.onOFView)
{
this.onOFView = true;
this.doclick(0);
}
}
}
}
catch(err){CorticaDO.consoleOut(err);}
},
/** Position Correction ***/
correctPos : function (){
if(this.floater != null)
{
var allOffset = this.getOffsetElement(this.obj);
var strH = this.floater.style.height;
var strW = this.floater.style.width;
if(this.data.nonloc == 3)
{this.floater.style.top = (allOffset.top + this.obj.height) + 'px';}
else{this.floater.style.top = (allOffset.top + this.obj.height - parseInt(strH.replace(/px/i, ""),10)) + 'px';}
var left = 0;
if(this.data.isFullWidth == 0)
{left = parseInt((this.obj.width - parseInt(strW.replace(/px/i, ""),10))/2);}
this.floater.style.left = allOffset.left + left + 'px';
}
},
/** Close Floater ***/
closeFloater : function(){
if(document.getElementById('corticaOF'+ this.index))
{
document.getElementById('corticaOF'+ this.index).style.display = 'none';
this.disable = true;
}
else{CorticaDO.consoleOut('Can\'t find floater for close action with ID: corticaOF'+this.index);}
},
/** Get Visibility Status ***/
isVisible : function(){return this.visible;},
/** Hide Floater **/
hide : function(){this.toggle(false);},
/** Show Floater **/
display : function(){this.toggle(true);},
/** Show/Hide Floaters [action: true/false] ***/
toggle : function(action){
var status = action ? "block" : "none";
if(!this.disable)
{
if(document.getElementById('corticaOF'+this.index))
{document.getElementById('corticaOF'+this.index).style.display = status;}
if(action)
{this.correctPos();}
}
},
setVisibility : function(){
if(this.floater != null)
{this.visible ? this.display() : this.hide();}
},
/** Check if obj Same **/
isObj : function (obj){return this.src == obj.src && this.obj === obj;},
/** Report ver 0.9 **/
doclick : function(dotIndex){
var requester = new Image();
requester.src = CorticaDO.dotClickUrl + '?picUrl=' + escape(this.src) + '&pageUrl =' + escape(document.location.href) +
'&reqid=' + CorticaDO.requestId + '&pid=' + CorticaDO.publisherId + '&btype=' + CorticaDO.bannerType +
'&campid=' + this.data.campaignId +
'&advid=' + this.data.advertiserId +
"&styleId=" + this.data.styleID +
"&behaviorId=" + this.data.behaviour +
'&siteId=' + this.data.siteId;
},
/******* ______ ************************************************************************************/
/** Get Element Position flow 2***/
getOffsetSum: function(elem) {
var top=0, left=0;
while(elem) {
top = top + parseInt(elem.offsetTop);
left = left + parseInt(elem.offsetLeft);
elem = elem.offsetParent;
}
return {top: top, left: left};
},
/** Get Element Position flow 1***/
getOffsetRect: function(elem) {
var box = elem.getBoundingClientRect(); // (1)
var body = document.body; // (2)
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop; // (3)
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0; // (4)
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop; // (5)
var left = box.left + scrollLeft - clientLeft;
return {top: Math.round(top), left: Math.round(left)};
},
/** Get Element Position Main ***/
getOffsetElement: function(el){
if (el.getBoundingClientRect)
{return this.getOffsetRect(el);}
else{return this.getOffsetSum(el);}
},
/** Get Element Style ***/
getElStyle : function(el,styleProp){
var value, defaultView = el.ownerDocument.defaultView;
if (defaultView && defaultView.getComputedStyle){// W3C standard way:
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
}
else{
if (el.currentStyle) { // IE
styleProp = styleProp.replace(/\-(\w)/g,function(str,letter){return letter.toUpperCase();});
value = el.currentStyle[styleProp];
if (/^\d+(em|pt|%|ex)?$/i.test(value)){// convert other units to pixels on IE
return (
function(value){
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
return value;
}
)(value);
}
return value;
}
}
return null;
}
};
/***** OLD ****************************************************************************************/
function CorticaJSONscriptRequest(fullUrl,data){
this.data = data;
this.fullUrl = fullUrl;
this.noCacheIE = '&noCacheIE=' + (new Date()).getTime();
this.headLoc = document.getElementsByTagName("head").item(0);
this.scriptId = 'JscriptId' + CorticaJSONscriptRequest.scriptCounter++;
};
CorticaJSONscriptRequest.scriptCounter = 1;
CorticaJSONscriptRequest.prototype.buildScriptTag = function(){
this.scriptObj = document.createElement("script");
this.scriptObj.setAttribute("type", "text/javascript");
this.scriptObj.setAttribute("charset", "utf-8");
this.scriptObj.setAttribute("src", this.fullUrl + '?' + this.data + this.noCacheIE);
this.scriptObj.setAttribute("id", this.scriptId);
};
CorticaJSONscriptRequest.prototype.removeScriptTag = function(){this.headLoc.removeChild(this.scriptObj);};
CorticaJSONscriptRequest.prototype.addScriptTag = function(){this.headLoc.appendChild(this.scriptObj);};
/****************************************************************************************************/
/** Load / Calculate request string & Create script tag **/
function corticaInit(){
if(arguments.callee.done){return;} /* Preventing DC */
// Make css
corticaMakeCSS('.corticaBS{background-color:transparent;}.corticaAbs{position:absolute;}.corticaIS{image-rendering:optimizeQuality; -ms-interpolation-mode: bicubic;}.corticaRB{width:100%;text-align:center;position:absolute;border:0;background-color:black;opacity:'+CorticaDO.opacity / 10 +';alpha(opacity='+CorticaDO.opacity+'0);}');
// Get Publisher ID identifier:(script name with extention),name(parameter name)
var pubID = CorticaDO.getParameterByName('searchBox.js','pid');
if(typeof pubID != 'undefined' && pubID != '')
{CorticaDO.publisherId = pubID;}
// Start Auto Scanning for Visible Images
setInterval("CorticaDO.corticaScan()", 200);
// Set DC Flags
arguments.callee.done = true;
alreadyrunflag = 1;
};
/** Common Functions *************************************************************************************/
function corticaMakeCSS(css){
var head = document.getElementsByTagName('head')[0],style = document.createElement('style'),rules = document.createTextNode(css);
style.type = 'text/css';
if(style.styleSheet)
{style.styleSheet.cssText = rules.nodeValue;}
else{style.appendChild(rules);}
head.appendChild(style);
};
/** Start Script *****************************************************************************************/
corticaInit();

Object reference passing in raphael drag function

I am creating a module to graphically visualize workflows using raphael,which take data from a data base. For this i have created a class called "FlowEdit", and created move, up and dragger function according to raphael.
But in move function when i am trying to access connections list using object reference, than i am unable to reference it, it gives undefined error.
Code for the class is this:-
//class definition
function FlowView(list) {
this.list = list;
this.connections = [];
this.r = Raphael("holder", 1400, 500);
this.shapes = [];
this.texts = [];
this.y_center = 500 / 2;
//box size
this.r_width = 60;
this.r_height = 40;
// To define virtual regions
this.x_offset = 50;
this.y_offset = 40;
this.x_start = 40;
//this.color, this.tempS, this.tempT;
//Define position in y direction
this.top_count = [0];
this.bottom_count = [0];
//Initialize Top_count & Bottom_Count Arrays
for (var i = 0; i < this.list.length; i++) {
this.top_count.push(0);
this.bottom_count.push(0);
}
}
;
// Give starting points from list
FlowView.prototype.start_point = function () {
var start_list = [];
for (var i in this.list) {
if (this.list[i][1] == this.list[i][2][0]) {
start_list.push(this.list[i][1]);
}
}
return start_list;
};
//For Finding index of an element in list
FlowView.prototype.index_of = function (curr_point) {
for (var i in this.list) {
if (this.list[i][1] == curr_point) {
return i;
}
}
};
//add next function
FlowView.prototype.add_next = function () {
for (var i in this.list) {
if (this.list[i][3][0] == "NULL") {
//For all last nodes add same to their next
this.list[i][3][0] = this.list[i][1];
}
if (this.list[i][3].length == 0) {
//For all last nodes add same to their next
this.list[i][3].push(this.list[i][1]);
}
}
};
//For given next of all nodes add previous to those nodes
FlowView.prototype.add_previous = function () {
for (var i in this.list) {
for (var j in this.list[i][3]) {
//For all next add current node to their previous list
var curr_index = this.index_of(this.list[i][3][j]);
if (this.list[curr_index][2].indexOf(this.list[i][1]) == -1 && (curr_index != i)) {
this.list[curr_index][2].push(this.list[i][1]);
}
}
}
//Add previous of all start node
for (var i in this.list) {
if (this.list[i][2].length == 0) {
this.list[i][2].push(this.list[i][1]);
}
}
};
//Region update recursively
FlowView.prototype.region_update = function (curr_index) {
if (this.list[curr_index][1] != this.list[curr_index][3][0]) {
for (var i in this.list[curr_index][3]) {
var next_index = this.index_of(this.list[curr_index][3][i]);
if (this.list[next_index][0] < this.list[curr_index][0] + 1) {
this.list[next_index][0] = this.list[curr_index][0] + 1;
this.region_update(next_index);
}
}
}
};
//Draw the workflow for given data structure
FlowView.prototype.construct = function () {
var open = this.start_point();
var close = [];
while (open.length != 0) {
var curr_point = open.shift();
var curr_index = this.index_of(curr_point);
//document.write(curr_index);
//draw box
var curr_region = this.list[curr_index][0];
//document.write(curr_region);
var x_cord = parseInt(curr_region) * (this.x_offset + this.r_width) + this.x_start;
//document.write(x_start);
var y_cord = 0;
if (this.top_count[curr_region] == 0 && this.bottom_count[curr_region] == 0) {
y_cord = this.y_center - this.r_height / 2;
this.top_count[curr_region] = 1;
this.bottom_count[curr_region] = 1;
}
else if (this.top_count[curr_region] <= this.bottom_count[curr_region]) {
y_cord = this.y_center - this.r_height / 2 - this.top_count[curr_region] * (this.y_offset + this.r_height);
this.top_count[curr_region] = this.top_count[curr_region] + 1;
}
else {
y_cord = this.y_center + this.r_height / 2 + this.bottom_count[curr_region] * (this.y_offset + this.r_height) - this.r_height;
this.bottom_count[curr_region] = this.bottom_count[curr_region] + 1;
}
//drawing the box
this.shapes[this.list[curr_index][1]] = this.r.rect(x_cord, y_cord, this.r_width, this.r_height, 10);
this.texts[this.list[curr_index][1]] = this.r.text(x_cord + this.r_width / 2, y_cord + this.r_height / 2, this.list[curr_index][1]);
// Adding next nodes to open list
for (var i in this.list[curr_index][3]) {
//If not in open than add to open
if (this.list[curr_index][3][0] != this.list[curr_index][1]) {
if (open.indexOf(this.list[curr_index][3][i]) == -1 && close.indexOf(this.list[curr_index][3][i]) == -1) {
open.push(this.list[curr_index][3][i]);
}
}
}
//Increasing region index for each next node
this.region_update(curr_index);
close.push(curr_point);
//document.write(open.toString()+"</br>");
//document.write(close.toString()+"</br>");
}
for (var j in this.list) {
if (this.list[j][1] != this.list[j][3][0]) {
for (var i in this.list[j][3]) {
//make link for each previous
if (close.indexOf(this.list[j][3][i]) != -1) {
this.connections.push(this.r.connection(this.shapes[this.list[j][1]], this.shapes[this.list[j][3][i]], "bcd"));
}
}
}
}
};
FlowView.prototype.dragger = function () {
// Original cords for main element
this.ox = this.type == "ellipse" ? this.attr("cx") : this.attr("x");
this.oy = this.type == "ellipse" ? this.attr("cy") : this.attr("y");
if (this.type != "text") this.animate({"fill-opacity":.2}, 500);
// Original co-ords for pair element
this.pair.ox = this.pair.type == "ellipse" ? this.pair.attr("cx") : this.pair.attr("x");
this.pair.oy = this.pair.type == "ellipse" ? this.pair.attr("cy") : this.pair.attr("y");
if (this.pair.type != "text") this.pair.animate({"fill-opacity":.2}, 500);
};
FlowView.prototype.move = function (dx, dy) {
// Move main element
var att = this.type == "ellipse" ? {cx:this.ox + dx, cy:this.oy + dy} :
{x:this.ox + dx, y:this.oy + dy};
this.attr(att);
// Move paired element
att = this.pair.type == "ellipse" ? {cx:this.pair.ox + dx, cy:this.pair.oy + dy} :
{x:this.pair.ox + dx, y:this.pair.oy + dy};
this.pair.attr(att);
//document.write("adass");
//document.write(x_offset);
// Move connections
for (var i = this.connections.length; i--;) {
this.r.connection(this.connections[i]);
}
this.r.safari();
};
FlowView.prototype.up = function () {
// Fade original element on mouse up
if (this.type != "text") this.animate({"fill-opacity":0}, 500);
// Fade paired element on mouse up
if (this.pair.type != "text") this.pair.animate({"fill-opacity":0}, 500);
// Move connections
};
FlowView.prototype.drag_initialize = function () {
for (var i in this.shapes) {
var color = Raphael.getColor();
var tempS = this.shapes[i].attr({fill:color, stroke:color, "fill-opacity":0, "stroke-width":2, cursor:"move"});
var tempT = this.texts[i].attr({fill:color, stroke:"none", "font-size":15, cursor:"move"});
this.shapes[i].drag(this.move, this.dragger, this.up);
this.texts[i].drag(this.move, this.dragger, this.up);
// Associate the elements
tempS.pair = tempT;
tempT.pair = tempS;
}
};
Using above code i am able to draw graph & drag items,but when i drag items the connected path are not dragged along it.So where i am doing wrong. For making connection i used the same code given in raphael demos..

This is a common annoyance and there is, fortunately, a very simple solution!
Problem: Raphael is using the functions you specify (this.move, this.dragger, and this.up) but it is NOT calling them in the context of your object. So instead of referring to your object, the this variable is actually referring to window. Decidedly not helpful.
Solution: use a function closure to bind in a reference to your object instance. Update your drag_initialize function with this:
var self = this;
this.shapes[i].drag(function(){ self.move(); }, function() { self.dragger(); }, function() { self.up(); } );
this.texts[i].drag(function() { self.move(); }, function() { self.dragger(); }, function() { self.up(); } );

Hi I found the answer to the problem.
In the move function i return another function and while calling drag i give the object argument in move function hence the context of current object is passed. Now changed move function is:-
FlowView.prototype.move = function (obj) {
// Move main element
return function(dx, dy){
var att = this.type == "ellipse" ? {cx:this.ox + dx, cy:this.oy + dy} :
{x:this.ox + dx, y:this.oy + dy};
this.attr(att);
// Move paired element
att = this.pair.type == "ellipse" ? {cx:this.pair.ox + dx, cy:this.pair.oy + dy} :
{x:this.pair.ox + dx, y:this.pair.oy + dy};
this.pair.attr(att);
// Move connections
for (var i = obj.connections.length; i--;) {
obj.r.connection(obj.connections[i]);
}
obj.r.safari();
}
};
And calling the drag with
this.shapes[i].drag(this.move(this), this.dragger, this.up);
this.texts[i].drag(this.move(this), this.dragger, this.up);

modifying webkitdragdrop.js use classes instead of ID

I've found a script that seems perfect for my needs, but it uses IDs, rather than classes to create ipad-friendly drag & drop elements.
I really need it to use classes, as the draggable elements could potentially be in the thousands.
[edit] I'm not that great at javascript and am having difficulties in understanding how I could alter the script to use classes instead of IDs.
I have also contacted the script author, but have had no reply from him.
I'm offering this bounty as I've not had any response to my original query.
Please could someone change the script below so that it uses classes? [/edit]
Below is the script in its entirety, and here is the script page (API was not helpful to me in being able to use classes vs id).
// webkitdragdrop.js v1.0, Mon May 15 2010
//
// Copyright (c) 2010 Tommaso Buvoli (http://www.tommasobuvoli.com)
// No Extra Libraries are required, simply download this file, add it to your pages!
//
// To See this library in action, grab an ipad and head over to http://www.gotproject.com
// webkitdragdrop is freely distributable under the terms of an MIT-style license.
//Description
// Because this library was designed to run without requiring any other libraries, several basic helper functions were implemented
// 6 helper functons in this webkit_tools class have been taked directly from Prototype 1.6.1 (http://prototypejs.org/) (c) 2005-2009 Sam Stephenson
var webkit_tools =
{
//$ function - simply a more robust getElementById
$:function(e)
{
if(typeof(e) == 'string')
{
return document.getElementById(e);
}
return e;
},
//extend function - copies the values of b into a (Shallow copy)
extend:function(a,b)
{
for (var key in b)
{
a[key] = b[key];
}
return a;
},
//empty function - used as defaut for events
empty:function()
{
},
//remove null values from an array
compact:function(a)
{
var b = []
var l = a.length;
for(var i = 0; i < l; i ++)
{
if(a[i] !== null)
{
b.push(a[i]);
}
}
return b;
},
//DESCRIPTION
// This function was taken from the internet (http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/) and returns
// the computed style of an element independantly from the browser
//INPUT
// oELM (DOM ELEMENT) element whose style should be extracted
// strCssRule element
getCalculatedStyle:function(oElm, strCssRule)
{
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
},
//bindAsEventListener function - used to bind events
bindAsEventListener:function(f,object)
{
var __method = f;
return function(event) {
__method.call(object, event || window.event);
};
},
//cumulative offset - courtesy of Prototype (http://www.prototypejs.org)
cumulativeOffset:function(element)
{
var valueT = 0, valueL = 0;
do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
if (element.offsetParent == document.body)
if (element.style.position == 'absolute') break;
element = element.offsetParent;
} while (element);
return {left : valueL, top : valueT};
},
//getDimensions - courtesy of Prototype (http://www.prototypejs.org)
getDimensions: function(element)
{
var display = element.style.display;
if (display != 'none' && display != null) // Safari bug
return {width: element.offsetWidth, height: element.offsetHeight};
var els = element.style;
var originalVisibility = els.visibility;
var originalPosition = els.position;
var originalDisplay = els.display;
els.visibility = 'hidden';
if (originalPosition != 'fixed') // Switching fixed to absolute causes issues in Safari
els.position = 'absolute';
els.display = 'block';
var originalWidth = element.clientWidth;
var originalHeight = element.clientHeight;
els.display = originalDisplay;
els.position = originalPosition;
els.visibility = originalVisibility;
return {width: originalWidth, height: originalHeight};
},
//hasClassName - courtesy of Prototype (http://www.prototypejs.org)
hasClassName: function(element, className)
{
var elementClassName = element.className;
return (elementClassName.length > 0 && (elementClassName == className ||
new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
},
//addClassName - courtesy of Prototype (http://www.prototypejs.org)
addClassName: function(element, className)
{
if (!this.hasClassName(element, className))
element.className += (element.className ? ' ' : '') + className;
return element;
},
//removeClassName - courtesy of Prototype (http://www.prototypejs.org)
removeClassName: function(element, className)
{
element.className = this.strip(element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' '));
return element;
},
//strip - courtesy of Prototype (http://www.prototypejs.org)
strip:function(s)
{
return s.replace(/^\s+/, '').replace(/\s+$/, '');
}
}
//Description
// Droppable fire events when a draggable is dropped on them
var webkit_droppables = function()
{
this.initialize = function()
{
this.droppables = [];
this.droppableRegions = [];
}
this.add = function(root, instance_props)
{
root = webkit_tools.$(root);
var default_props = {accept : [], hoverClass : null, onDrop : webkit_tools.empty, onOver : webkit_tools.empty, onOut : webkit_tools.empty};
default_props = webkit_tools.extend(default_props, instance_props || {});
this.droppables.push({r : root, p : default_props});
}
this.remove = function(root)
{
root = webkit_tools.$(root);
var d = this.droppables;
var i = d.length;
while(i--)
{
if(d[i].r == root)
{
d[i] = null;
this.droppables = webkit_tools.compact(d);
return true;
}
}
return false;
}
//calculate position and size of all droppables
this.prepare = function()
{
var d = this.droppables;
var i = d.length;
var dR = [];
var r = null;
while(i--)
{
r = d[i].r;
if(r.style.display != 'none')
{
dR.push({i : i, size : webkit_tools.getDimensions(r), offset : webkit_tools.cumulativeOffset(r)})
}
}
this.droppableRegions = dR;
}
this.finalize = function(x,y,r,e)
{
var indices = this.isOver(x,y);
var index = this.maxZIndex(indices);
var over = this.process(index,r);
if(over)
{
this.drop(index, r,e);
}
this.process(-1,r);
return over;
}
this.check = function(x,y,r)
{
var indices = this.isOver(x,y);
var index = this.maxZIndex(indices);
return this.process(index,r);
}
this.isOver = function(x, y)
{
var dR = this.droppableRegions;
var i = dR.length;
var active = [];
var r = 0;
var maxX = 0;
var minX = 0;
var maxY = 0;
var minY = 0;
while(i--)
{
r = dR[i];
minY = r.offset.top;
maxY = minY + r.size.height;
if((y > minY) && (y < maxY))
{
minX = r.offset.left;
maxX = minX + r.size.width;
if((x > minX) && (x < maxX))
{
active.push(r.i);
}
}
}
return active;
}
this.maxZIndex = function(indices)
{
var d = this.droppables;
var l = indices.length;
var index = -1;
var maxZ = -100000000;
var curZ = 0;
while(l--)
{
curZ = parseInt(d[indices[l]].r.style.zIndex || 0);
if(curZ > maxZ)
{
maxZ = curZ;
index = indices[l];
}
}
return index;
}
this.process = function(index, draggableRoot)
{
//only perform update if a change has occured
if(this.lastIndex != index)
{
//remove previous
if(this.lastIndex != null)
{
var d = this.droppables[this.lastIndex]
var p = d.p;
var r = d.r;
if(p.hoverClass)
{
webkit_tools.removeClassName(r,p.hoverClass);
}
p.onOut();
this.lastIndex = null;
this.lastOutput = false;
}
//add new
if(index != -1)
{
var d = this.droppables[index]
var p = d.p;
var r = d.r;
if(this.hasClassNames(draggableRoot, p.accept))
{
if(p.hoverClass)
{
webkit_tools.addClassName(r,p.hoverClass);
}
p.onOver();
this.lastIndex = index;
this.lastOutput = true;
}
}
}
return this.lastOutput;
}
this.drop = function(index, r, e)
{
if(index != -1)
{
this.droppables[index].p.onDrop(r,e);
}
}
this.hasClassNames = function(r, names)
{
var l = names.length;
if(l == 0){return true}
while(l--)
{
if(webkit_tools.hasClassName(r,names[l]))
{
return true;
}
}
return false;
}
this.initialize();
}
webkit_drop = new webkit_droppables();
//Description
//webkit draggable - allows users to drag elements with their hands
var webkit_draggable = function(r, ip)
{
this.initialize = function(root, instance_props)
{
this.root = webkit_tools.$(root);
var default_props = {scroll : false, revert : false, handle : this.root, zIndex : 1000, onStart : webkit_tools.empty, onEnd : webkit_tools.empty};
this.p = webkit_tools.extend(default_props, instance_props || {});
default_props.handle = webkit_tools.$(default_props.handle);
this.prepare();
this.bindEvents();
}
this.prepare = function()
{
var rs = this.root.style;
//set position
if(webkit_tools.getCalculatedStyle(this.root,'position') != 'absolute')
{
rs.position = 'relative';
}
//set top, right, bottom, left
rs.top = rs.top || '0px';
rs.left = rs.left || '0px';
rs.right = "";
rs.bottom = "";
//set zindex;
rs.zIndex = rs.zIndex || '0';
}
this.bindEvents = function()
{
var handle = this.p.handle;
this.ts = webkit_tools.bindAsEventListener(this.touchStart, this);
this.tm = webkit_tools.bindAsEventListener(this.touchMove, this);
this.te = webkit_tools.bindAsEventListener(this.touchEnd, this);
handle.addEventListener("touchstart", this.ts, false);
handle.addEventListener("touchmove", this.tm, false);
handle.addEventListener("touchend", this.te, false);
}
this.destroy = function()
{
var handle = this.p.handle;
handle.removeEventListener("touchstart", this.ts);
handle.removeEventListener("touchmove", this.tm);
handle.removeEventListener("touchend", this.te);
}
this.set = function(key, value)
{
this.p[key] = value;
}
this.touchStart = function(event)
{
//prepare needed variables
var p = this.p;
var r = this.root;
var rs = r.style;
var t = event.targetTouches[0];
//get position of touch
touchX = t.pageX;
touchY = t.pageY;
//set base values for position of root
rs.top = this.root.style.top || '0px';
rs.left = this.root.style.left || '0px';
rs.bottom = null;
rs.right = null;
var rootP = webkit_tools.cumulativeOffset(r);
var cp = this.getPosition();
//save event properties
p.rx = cp.x;
p.ry = cp.y;
p.tx = touchX;
p.ty = touchY;
p.z = parseInt(this.root.style.zIndex);
//boost zIndex
rs.zIndex = p.zIndex;
webkit_drop.prepare();
p.onStart();
}
this.touchMove = function(event)
{
event.preventDefault();
event.stopPropagation();
//prepare needed variables
var p = this.p;
var r = this.root;
var rs = r.style;
var t = event.targetTouches[0];
if(t == null){return}
var curX = t.pageX;
var curY = t.pageY;
var delX = curX - p.tx;
var delY = curY - p.ty;
rs.left = p.rx + delX + 'px';
rs.top = p.ry + delY + 'px';
//scroll window
if(p.scroll)
{
s = this.getScroll(curX, curY);
if((s[0] != 0) || (s[1] != 0))
{
window.scrollTo(window.scrollX + s[0], window.scrollY + s[1]);
}
}
//check droppables
webkit_drop.check(curX, curY, r);
//save position for touchEnd
this.lastCurX = curX;
this.lastCurY = curY;
}
this.touchEnd = function(event)
{
var r = this.root;
var p = this.p;
var dropped = webkit_drop.finalize(this.lastCurX, this.lastCurY, r, event);
if(((p.revert) && (!dropped)) || (p.revert === 'always'))
{
//revert root
var rs = r.style;
rs.top = (p.ry + 'px');
rs.left = (p.rx + 'px');
}
r.style.zIndex = this.p.z;
this.p.onEnd();
}
this.getPosition = function()
{
var rs = this.root.style;
return {x : parseInt(rs.left || 0), y : parseInt(rs.top || 0)}
}
this.getScroll = function(pX, pY)
{
//read window variables
var sX = window.scrollX;
var sY = window.scrollY;
var wX = window.innerWidth;
var wY = window.innerHeight;
//set contants
var scroll_amount = 10; //how many pixels to scroll
var scroll_sensitivity = 100; //how many pixels from border to start scrolling from.
var delX = 0;
var delY = 0;
//process vertical y scroll
if(pY - sY < scroll_sensitivity)
{
delY = -scroll_amount;
}
else
if((sY + wY) - pY < scroll_sensitivity)
{
delY = scroll_amount;
}
//process horizontal x scroll
if(pX - sX < scroll_sensitivity)
{
delX = -scroll_amount;
}
else
if((sX + wX) - pX < scroll_sensitivity)
{
delX = scroll_amount;
}
return [delX, delY]
}
//contructor
this.initialize(r, ip);
}
//Description
//webkit_click class. manages click events for draggables
var webkit_click = function(r, ip)
{
this.initialize = function(root, instance_props)
{
var default_props = {onClick : webkit_tools.empty};
this.root = webkit_tools.$(root);
this.p = webkit_tools.extend(default_props, instance_props || {});
this.bindEvents();
}
this.bindEvents = function()
{
var root = this.root;
//bind events to local scope
this.ts = webkit_tools.bindAsEventListener(this.touchStart,this);
this.tm = webkit_tools.bindAsEventListener(this.touchMove,this);
this.te = webkit_tools.bindAsEventListener(this.touchEnd,this);
//add Listeners
root.addEventListener("touchstart", this.ts, false);
root.addEventListener("touchmove", this.tm, false);
root.addEventListener("touchend", this.te, false);
this.bound = true;
}
this.touchStart = function()
{
this.moved = false;
if(this.bound == false)
{
this.root.addEventListener("touchmove", this.tm, false);
this.bound = true;
}
}
this.touchMove = function()
{
this.moved = true;
this.root.removeEventListener("touchmove", this.tm);
this.bound = false;
}
this.touchEnd = function()
{
if(this.moved == false)
{
this.p.onClick();
}
}
this.setEvent = function(f)
{
if(typeof(f) == 'function')
{
this.p.onClick = f;
}
}
this.unbind = function()
{
var root = this.root;
root.removeEventListener("touchstart", this.ts);
root.removeEventListener("touchmove", this.tm);
root.removeEventListener("touchend", this.te);
}
//call constructor
this.initialize(r, ip);
}

If your classnames are unique, the solution is rather simple. You can change the $ function to get by class name instead of by id:
var webkit_tools =
{
//$ function - simply a more robust getElementById
$:function(e)
{
if(typeof(e) == 'string')
{
return document.getElementsByClassName(e)[0];
// return document.getElementById(e);
}
return e;
},
... snipped ...
I've verified the above solution works (dragging and dropping) on my iPhone, but again, if the classnames are not unique, some added work will be in order based on the script's current implementation.
~~~EDIT~~~
In re-reading your request, you state that there will in fact NOT be unique classnames, hence the need for some sort of "bulk" drag/drop functionality. I've modified/extended the framework to support this. You can find the source for the modified version here:
https://gist.github.com/2474416
I had to change the API slightly. The dropabble API is unchanged, so passing a classname will simply add/remove the whole list of elements matching the classname passed. The clickable/draggable API was not so easy. To avoid a harsh rewrite, I updated the initialize methods for draggable/clickable to take an element ref rather than id or classname.
Correspondingly, I added a bulk_draggable(clazzname, options) and bulk_clickable(clazzname, options) function that basically iterates over the matched elements and calls the corresponding initializers. These functions return an array of draggables/clickables (one for each matched element).
Let me know if the "new" API is unclear. I did this rather quickly and lightly tested the happy paths, but can't invest and substantial amount of time rewriting the entire script.