We Keep Coding

How to handle text selection from div in i-Pad using javascript?

Currently I am using "text-highlighter.js" for highlight text and change the colour of text. It works fine in desktop but , It dint work in the i-Pad.
Can anyone suggest which javascript event should be fire to select text in i-pad chrome browser.
/**
* #license jQuery Text Highlighter
* Copyright (C) 2011 - 2013 by mirz
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
(function($, window, document, undefined) {
var nodeTypes = {
ELEMENT_NODE: 1,
TEXT_NODE: 3
};
var plugin = {
name: 'textHighlighter'
};
function TextHighlighter(element, options) {
this.context = element;
this.$context = $(element);
this.options = $.extend({}, $[plugin.name].defaults, options);
this.init();
}
TextHighlighter.prototype = {
init: function() {
this.$context.addClass(this.options.contextClass);
this.bindEvents();
},
destroy: function() {
this.unbindEvents();
this.$context.removeClass(this.options.contextClass);
this.$context.removeData(plugin.name);
},
bindEvents: function() {
this.$context.bind('mouseup', {self: this}, this.highlightHandler);
},
unbindEvents: function() {
this.$context.unbind('mouseup', this.highlightHandler);
//
},
highlightHandler: function(event) {
var self = event.data.self;
self.doHighlight();
},
/**
* Highlights currently selected text.
*/
doHighlight: function() {
var range = this.getCurrentRange();
if (!range || range.collapsed) return;
var rangeText = range.toString();
if (this.options.onBeforeHighlight(range) == true) {
var $wrapper = $.textHighlighter.createWrapper(this.options);
var createdHighlights = this.highlightRange(range, $wrapper);
var normalizedHighlights = this.normalizeHighlights(createdHighlights);
this.options.onAfterHighlight(normalizedHighlights, rangeText);
}
this.removeAllRanges();
},
/**
* Returns first range of current selection object.
*/
getCurrentRange: function() {
var selection = this.getCurrentSelection();
var range;
if (selection.rangeCount > 0) {
range = selection.getRangeAt(0);
}
return range;
},
removeAllRanges: function() {
var selection = this.getCurrentSelection();
selection.removeAllRanges();
},
/**
* Returns current selection object.
*/
getCurrentSelection: function() {
var currentWindow = this.getCurrentWindow();
var selection;
if (currentWindow.getSelection) {
selection = currentWindow.getSelection();
} else if ($('iframe').length) {
$('iframe', top.document).each(function() {
if (this.contentWindow === currentWindow) {
selection = rangy.getIframeSelection(this);
return false;
}
});
} else {
selection = rangy.getSelection();
}
return selection;
},
/**
* Returns owner window of this.context.
*/
getCurrentWindow: function() {
var currentDoc = this.getCurrentDocument();
if (currentDoc.defaultView) {
return currentDoc.defaultView; // Non-IE
} else {
return currentDoc.parentWindow; // IE
}
},
/**
* Returns owner document of this.context.
*/
getCurrentDocument: function() {
// if ownerDocument is null then context is document
return this.context.ownerDocument ? this.context.ownerDocument : this.context;
},
/**
* Wraps given range (highlights it) object in the given wrapper.
*/
highlightRange: function(range, $wrapper) {
if (range.collapsed) return;
// Don't highlight content of these tags
var ignoreTags = ['SCRIPT', 'STYLE', 'SELECT', 'BUTTON', 'OBJECT', 'APPLET'];
var startContainer = range.startContainer;
var endContainer = range.endContainer;
var ancestor = range.commonAncestorContainer;
var goDeeper = true;
if (range.endOffset == 0) {
while (!endContainer.previousSibling && endContainer.parentNode != ancestor) {
endContainer = endContainer.parentNode;
}
endContainer = endContainer.previousSibling;
} else if (endContainer.nodeType == nodeTypes.TEXT_NODE) {
if (range.endOffset < endContainer.nodeValue.length) {
endContainer.splitText(range.endOffset);
}
} else if (range.endOffset > 0) {
endContainer = endContainer.childNodes.item(range.endOffset - 1);
}
if (startContainer.nodeType == nodeTypes.TEXT_NODE) {
if (range.startOffset == startContainer.nodeValue.length) {
goDeeper = false;
} else if (range.startOffset > 0) {
startContainer = startContainer.splitText(range.startOffset);
if (endContainer == startContainer.previousSibling) endContainer = startContainer;
}
} else if (range.startOffset < startContainer.childNodes.length) {
startContainer = startContainer.childNodes.item(range.startOffset);
} else {
startContainer = startContainer.nextSibling;
}
var done = false;
var node = startContainer;
var highlights = [];
do {
if (goDeeper && node.nodeType == nodeTypes.TEXT_NODE) {
if (/\S/.test(node.nodeValue)) {
var wrapper = $wrapper.clone(true).get(0);
var nodeParent = node.parentNode;
// highlight if node is inside the context
if ($.contains(this.context, nodeParent) || nodeParent === this.context) {
var highlight = $(node).wrap(wrapper).parent().get(0);
highlights.push(highlight);
}
}
goDeeper = false;
}
if (node == endContainer && (!endContainer.hasChildNodes() || !goDeeper)) {
done = true;
}
if ($.inArray(node.tagName, ignoreTags) != -1) {
goDeeper = false;
}
if (goDeeper && node.hasChildNodes()) {
node = node.firstChild;
} else if (node.nextSibling != null) {
node = node.nextSibling;
goDeeper = true;
} else {
node = node.parentNode;
goDeeper = false;
}
} while (!done);
return highlights;
},
/**
* Normalizes highlights - nested highlights are flattened and sibling higlights are merged.
*/
normalizeHighlights: function(highlights) {
this.flattenNestedHighlights(highlights);
this.mergeSiblingHighlights(highlights);
// omit removed nodes
var normalizedHighlights = $.map(highlights, function(hl) {
if (typeof hl.parentElement != 'undefined') { // IE
return hl.parentElement != null ? hl : null;
} else {
return hl.parentNode != null ? hl : null;
}
});
return normalizedHighlights;
},
flattenNestedHighlights: function(highlights) {
var self = this;
$.each(highlights, function(i) {
var $highlight = $(this);
var $parent = $highlight.parent();
var $parentPrev = $parent.prev();
var $parentNext = $parent.next();
if (self.isHighlight($parent)) {
if ($parent.css('background-color') != $highlight.css('background-color')) {
if (self.isHighlight($parentPrev) && !$highlight.get(0).previousSibling
&& $parentPrev.css('background-color') != $parent.css('background-color')
&& $parentPrev.css('background-color') == $highlight.css('background-color')) {
$highlight.insertAfter($parentPrev);
}
if (self.isHighlight($parentNext) && !$highlight.get(0).nextSibling
&& $parentNext.css('background-color') != $parent.css('background-color')
&& $parentNext.css('background-color') == $highlight.css('background-color')) {
$highlight.insertBefore($parentNext);
}
if ($parent.is(':empty')) {
$parent.remove();
}
} else {
var newNode = document.createTextNode($parent.text());
$parent.empty();
$parent.append(newNode);
$(highlights[i]).remove();
}
}
});
},
mergeSiblingHighlights: function(highlights) {
var self = this;
function shouldMerge(current, node) {
return node && node.nodeType == nodeTypes.ELEMENT_NODE
&& $(current).css('background-color') == $(node).css('background-color')
&& $(node).hasClass(self.options.highlightedClass)
? true : false;
}
$.each(highlights, function() {
var highlight = this;
var prev = highlight.previousSibling;
var next = highlight.nextSibling;
if (shouldMerge(highlight, prev)) {
var mergedTxt = $(prev).text() + $(highlight).text();
$(highlight).text(mergedTxt);
$(prev).remove();
}
if (shouldMerge(highlight, next)) {
var mergedTxt = $(highlight).text() + $(next).text();
$(highlight).text(mergedTxt);
$(next).remove();
}
});
},
/**
* Sets color of future highlights.
*/
setColor: function(color) {
this.options.color = color;
},
/**
* Returns current highlights color.
*/
getColor: function() {
return this.options.color;
},
/**
* Removes all highlights in given element or in context if no element given.
*/
removeHighlights: function(element) {
var container = (element !== undefined ? element : this.context);
var unwrapHighlight = function(highlight) {
return $(highlight).contents().unwrap().get(0);
};
var mergeSiblingTextNodes = function(textNode) {
var prev = textNode.previousSibling;
var next = textNode.nextSibling;
if (prev && prev.nodeType == nodeTypes.TEXT_NODE) {
textNode.nodeValue = prev.nodeValue + textNode.nodeValue;
prev.parentNode.removeChild(prev);
}
if (next && next.nodeType == nodeTypes.TEXT_NODE) {
textNode.nodeValue = textNode.nodeValue + next.nodeValue;
next.parentNode.removeChild(next);
}
};
var self = this;
var $highlights = this.getAllHighlights(container, true);
$highlights.each(function() {
if (self.options.onRemoveHighlight(this) == true) {
var textNode = unwrapHighlight(this);
mergeSiblingTextNodes(textNode);
}
});
},
/**
* Returns all highlights in given container. If container is a highlight itself and
* andSelf is true, container will be also returned
*/
getAllHighlights: function(container, andSelf) {
var classSelectorStr = '.' + this.options.highlightedClass;
var $highlights = $(container).find(classSelectorStr);
if (andSelf == true && $(container).hasClass(this.options.highlightedClass)) {
$highlights = $highlights.add(container);
}
return $highlights;
},
/**
* Returns true if element is highlight, ie. has proper class.
*/
isHighlight: function($el) {
return $el.hasClass(this.options.highlightedClass);
},
/**
* Serializes all highlights to stringified JSON object.
*/
serializeHighlights: function() {
var $highlights = this.getAllHighlights(this.context);
var refEl = this.context;
var hlDescriptors = [];
var self = this;
var getElementPath = function (el, refElement) {
var path = [];
do {
var elIndex = $.inArray(el, el.parentNode.childNodes);
path.unshift(elIndex);
el = el.parentNode;
} while (el !== refElement);
return path;
};
$highlights.each(function(i, highlight) {
var offset = 0; // Hl offset from previous sibling within parent node.
var length = highlight.firstChild.length;
var hlPath = getElementPath(highlight, refEl);
var wrapper = $(highlight).clone().empty().get(0).outerHTML;
if (highlight.previousSibling && highlight.previousSibling.nodeType === nodeTypes.TEXT_NODE) {
offset = highlight.previousSibling.length;
}
hlDescriptors.push([
wrapper,
$(highlight).text(),
hlPath.join(':'),
offset,
length
]);
});
return JSON.stringify(hlDescriptors);
},
/**
* Deserializes highlights from stringified JSON given as parameter.
*/
deserializeHighlights: function(json) {
try {
var hlDescriptors = JSON.parse(json);
} catch (e) {
throw "Can't parse serialized highlights: " + e;
}
var highlights = [];
var self = this;
var deserializationFn = function (hlDescriptor) {
var wrapper = hlDescriptor[0];
var hlText = hlDescriptor[1];
var hlPath = hlDescriptor[2].split(':');
var elOffset = hlDescriptor[3];
var hlLength = hlDescriptor[4];
var elIndex = hlPath.pop();
var idx = null;
var node = self.context;
while ((idx = hlPath.shift()) !== undefined) {
node = node.childNodes[idx];
}
if (node.childNodes[elIndex-1] && node.childNodes[elIndex-1].nodeType === nodeTypes.TEXT_NODE) {
elIndex -= 1;
}
var textNode = node.childNodes[elIndex];
var hlNode = textNode.splitText(elOffset);
hlNode.splitText(hlLength);
if (hlNode.nextSibling && hlNode.nextSibling.nodeValue == '') {
hlNode.parentNode.removeChild(hlNode.nextSibling);
}
if (hlNode.previousSibling && hlNode.previousSibling.nodeValue == '') {
hlNode.parentNode.removeChild(hlNode.previousSibling);
}
var highlight = $(hlNode).wrap(wrapper).parent().get(0);
highlights.push(highlight);
};
$.each(hlDescriptors, function(i, hlDescriptor) {
try {
deserializationFn(hlDescriptor);
} catch (e) {
console && console.warn
&& console.warn("Can't deserialize " + i + "-th descriptor. Cause: " + e);
return true;
}
});
return highlights;
}
};
/**
* Returns TextHighlighter instance.
*/
$.fn.getHighlighter = function() {
return this.data(plugin.name);
};
$.fn[plugin.name] = function(options) {
return this.each(function() {
if (!$.data(this, plugin.name)) {
$.data(this, plugin.name, new TextHighlighter(this, options));
}
});
};
$.textHighlighter = {
/**
* Returns HTML element to wrap selected text in.
*/
createWrapper: function(options) {
return $('<span></span>')
.css('backgroundColor', options.color)
.addClass(options.highlightedClass);
},
defaults: {
color: '#ffff7b',
highlightedClass: 'highlighted',
contextClass: 'highlighter-context',
onRemoveHighlight: function() { return true; },
onBeforeHighlight: function() { return true; },
onAfterHighlight: function() { }
}
};
})(jQuery, window, document);

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();

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.

Call .js file in UpdatePanel from CodeBehind

I am have been trying to teach myself ASP.NET and Javascript for a project and have been stuck on one problem for literally dozens of hours now.
I found a really nice javascript drag-and-drop list online, copied the source offered and split the css into a .css file, the javascript into a .js file and the HTML and reference into my asp.net page. It worked perfectly. Great!
Next, I replaced the javascript list with a static HTML list populated with the same data, wrapped it in an UpdatePanel and set up an "edit order" button to swap the static list's HTML for the javascript list's HTML when the button is pressed.
No Dice!
First, the initial runtime would throw up javascript errors explaining that certain objects could not be found. For example:
Microsoft JScript runtime error: Unable to get value of the property 'getElementsByTagName': object is null or undefined
Understood, because the elements aren't actually there yet. So I removed my reference to the .js in the main header and tried to register the .js file when the update panel is changed instead.
This is my problem.
Most explanations online have focused onRegisterClientScriptBlock, or RegisterStartupScript, or RegisterClientScriptInclude, or myLiteral and I can't get any of them to work. I also find that lots of online explanations are for running a single javascript function, whereas the script I am trying to get working has 700 lines-worth of them! Do I have to reference them all individually?
Sorry for the, no doubt, newbish question. I waited to ask until I had shouted at the screen with sufficient vitriol to warrant begging for help!
Thanks and regards.
EDIT: CODE
As Requested, this is the code:
VB.net (this is in a sub called by the button press. This is when I need to register my script)
Dim script As String = ""
Dim Labelb As Label = CType(FindControl("Labelb"), Label)
Dim con As SqlConnection
Dim cmd As SqlCommand
con = New SqlConnection("[connection string here]")
con.Open()
Dim lrd As SqlDataReader
cmd = New SqlCommand("[command string here]", con)
lrd = cmd.ExecuteReader
Dim item = ""
While lrd.Read()
item = item & "<li style=""position: relative;"">" & lrd(1) & "</li>"
End While
lrd.Close()
item = "<table id=""phonetics""><tbody><tr><td><ul id=""phonetic3"" class=""boxy"">" & item & "</ul></td></tr></tbody></table><br/>"
Labelb.Text = item
This is the HTML update panel in the asp.net master page:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Labelb" runat="server" Text="" />
</ContentTemplate>
</asp:UpdatePanel>
and finally, this is the .js file that I need to register
var ToolMan = {
events : function() {
if (!ToolMan._eventsFactory) throw "ToolMan Events module isn't loaded";
return ToolMan._eventsFactory
},
css : function() {
if (!ToolMan._cssFactory) throw "ToolMan CSS module isn't loaded";
return ToolMan._cssFactory
},
coordinates : function() {
if (!ToolMan._coordinatesFactory) throw "ToolMan Coordinates module isn't loaded";
return ToolMan._coordinatesFactory
},
drag : function() {
if (!ToolMan._dragFactory) throw "ToolMan Drag module isn't loaded";
return ToolMan._dragFactory
},
dragsort : function() {
if (!ToolMan._dragsortFactory) throw "ToolMan DragSort module isn't loaded";
return ToolMan._dragsortFactory
},
helpers : function() {
return ToolMan._helpers
},
cookies : function() {
if (!ToolMan._cookieOven) throw "ToolMan Cookie module isn't loaded";
return ToolMan._cookieOven
},
junkdrawer : function() {
return ToolMan._junkdrawer
}
}
ToolMan._helpers = {
map : function(array, func) {
for (var i = 0, n = array.length; i < n; i++) func(array[i])
},
nextItem : function(item, nodeName) {
if (item == null) return
var next = item.nextSibling
while (next != null) {
if (next.nodeName == nodeName) return next
next = next.nextSibling
}
return null
},
previousItem : function(item, nodeName) {
var previous = item.previousSibling
while (previous != null) {
if (previous.nodeName == nodeName) return previous
previous = previous.previousSibling
}
return null
},
moveBefore : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2)
},
moveAfter : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2 ? item2.nextSibling : null)
}
}
/**
* scripts without a proper home
*
* stuff here is subject to change unapologetically and without warning
*/
ToolMan._junkdrawer = {
serializeList : function(list) {
var items = list.getElementsByTagName("li")
var array = new Array()
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array.push(ToolMan.junkdrawer()._identifier(item))
}
return array.join('|')
},
inspectListOrder : function(id) {
alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
},
restoreListOrder : function(listID) {
var list = document.getElementById(listID)
if (list == null) return
var cookie = ToolMan.cookies().get("list-" + listID)
if (!cookie) return;
var IDs = cookie.split('|')
var items = ToolMan.junkdrawer()._itemsByID(list)
for (var i = 0, n = IDs.length; i < n; i++) {
var itemID = IDs[i]
if (itemID in items) {
var item = items[itemID]
list.removeChild(item)
list.insertBefore(item, null)
}
}
},
_identifier : function(item) {
var trim = ToolMan.junkdrawer().trim
var identifier
identifier = trim(item.getAttribute("id"))
if (identifier != null && identifier.length > 0) return identifier;
identifier = trim(item.getAttribute("itemID"))
if (identifier != null && identifier.length > 0) return identifier;
// FIXME: strip out special chars or make this an MD5 hash or something
return trim(item.innerHTML)
},
_itemsByID : function(list) {
var array = new Array()
var items = list.getElementsByTagName('li')
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array[ToolMan.junkdrawer()._identifier(item)] = item
}
return array
},
trim : function(text) {
if (text == null) return null
return text.replace(/^(\s+)?(.*\S)(\s+)?$/, '$2')
}
}
ToolMan._eventsFactory = {
fix : function(event) {
if (!event) event = window.event
if (event.target) {
if (event.target.nodeType == 3) event.target = event.target.parentNode
} else if (event.srcElement) {
event.target = event.srcElement
}
return event
},
register : function(element, type, func) {
if (element.addEventListener) {
element.addEventListener(type, func, false)
} else if (element.attachEvent) {
if (!element._listeners) element._listeners = new Array()
if (!element._listeners[type]) element._listeners[type] = new Array()
var workaroundFunc = function() {
func.apply(element, new Array())
}
element._listeners[type][func] = workaroundFunc
element.attachEvent('on' + type, workaroundFunc)
}
},
unregister : function(element, type, func) {
if (element.removeEventListener) {
element.removeEventListener(type, func, false)
} else if (element.detachEvent) {
if (element._listeners
&& element._listeners[type]
&& element._listeners[type][func]) {
element.detachEvent('on' + type,
element._listeners[type][func])
}
}
}
}
ToolMan._cssFactory = {
readStyle : function(element, property) {
if (element.style[property]) {
return element.style[property]
} else if (element.currentStyle) {
return element.currentStyle[property]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(element, null)
return style.getPropertyValue(property)
} else {
return null
}
}
}
/* FIXME: assumes position styles are specified in 'px' */
ToolMan._coordinatesFactory = {
create : function(x, y) {
// FIXME: Safari won't parse 'throw' and aborts trying to do anything with this file
//if (isNaN(x) || isNaN(y)) throw "invalid x,y: " + x + "," + y
return new _ToolManCoordinate(this, x, y)
},
origin : function() {
return this.create(0, 0)
},
/*
* FIXME: Safari 1.2, returns (0,0) on absolutely positioned elements
*/
topLeftPosition : function(element) {
var left = parseInt(ToolMan.css().readStyle(element, "left"))
var left = isNaN(left) ? 0 : left
var top = parseInt(ToolMan.css().readStyle(element, "top"))
var top = isNaN(top) ? 0 : top
return this.create(left, top)
},
bottomRightPosition : function(element) {
return this.topLeftPosition(element).plus(this._size(element))
},
topLeftOffset : function(element) {
var offset = this._offset(element)
var parent = element.offsetParent
while (parent) {
offset = offset.plus(this._offset(parent))
parent = parent.offsetParent
}
return offset
},
bottomRightOffset : function(element) {
return this.topLeftOffset(element).plus(
this.create(element.offsetWidth, element.offsetHeight))
},
scrollOffset : function() {
if (window.pageXOffset) {
return this.create(window.pageXOffset, window.pageYOffset)
} else if (document.documentElement) {
return this.create(
document.body.scrollLeft + document.documentElement.scrollLeft,
document.body.scrollTop + document.documentElement.scrollTop)
} else if (document.body.scrollLeft >= 0) {
return this.create(document.body.scrollLeft, document.body.scrollTop)
} else {
return this.create(0, 0)
}
},
clientSize : function() {
if (window.innerHeight >= 0) {
return this.create(window.innerWidth, window.innerHeight)
} else if (document.documentElement) {
return this.create(document.documentElement.clientWidth,
document.documentElement.clientHeight)
} else if (document.body.clientHeight >= 0) {
return this.create(document.body.clientWidth,
document.body.clientHeight)
} else {
return this.create(0, 0)
}
},
/**
* mouse coordinate relative to the window (technically the
* browser client area) i.e. the part showing your page
*
* NOTE: in Safari the coordinate is relative to the document
*/
mousePosition : function(event) {
event = ToolMan.events().fix(event)
return this.create(event.clientX, event.clientY)
},
/**
* mouse coordinate relative to the document
*/
mouseOffset : function(event) {
event = ToolMan.events().fix(event)
if (event.pageX >= 0 || event.pageX < 0) {
return this.create(event.pageX, event.pageY)
} else if (event.clientX >= 0 || event.clientX < 0) {
return this.mousePosition(event).plus(this.scrollOffset())
}
},
_size : function(element) {
/* TODO: move to a Dimension class */
return this.create(element.offsetWidth, element.offsetHeight)
},
_offset : function(element) {
return this.create(element.offsetLeft, element.offsetTop)
}
}
function _ToolManCoordinate(factory, x, y) {
this.factory = factory
this.x = isNaN(x) ? 0 : x
this.y = isNaN(y) ? 0 : y
}
_ToolManCoordinate.prototype = {
toString : function() {
return "(" + this.x + "," + this.y + ")"
},
plus : function(that) {
return this.factory.create(this.x + that.x, this.y + that.y)
},
minus : function(that) {
return this.factory.create(this.x - that.x, this.y - that.y)
},
min : function(that) {
return this.factory.create(
Math.min(this.x , that.x), Math.min(this.y , that.y))
},
max : function(that) {
return this.factory.create(
Math.max(this.x , that.x), Math.max(this.y , that.y))
},
constrainTo : function (one, two) {
var min = one.min(two)
var max = one.max(two)
return this.max(min).min(max)
},
distance : function (that) {
return Math.sqrt(Math.pow(this.x - that.x, 2) + Math.pow(this.y - that.y, 2))
},
reposition : function(element) {
element.style["top"] = this.y + "px"
element.style["left"] = this.x + "px"
}
}
ToolMan._dragFactory = {
createSimpleGroup : function(element, handle) {
handle = handle ? handle : element
var group = this.createGroup(element)
group.setHandle(handle)
group.transparentDrag()
group.onTopWhileDragging()
return group
},
createGroup : function(element) {
var group = new _ToolManDragGroup(this, element)
var position = ToolMan.css().readStyle(element, 'position')
if (position == 'static') {
element.style["position"] = 'relative'
} else if (position == 'absolute') {
/* for Safari 1.2 */
ToolMan.coordinates().topLeftOffset(element).reposition(element)
}
// TODO: only if ToolMan.isDebugging()
group.register('draginit', this._showDragEventStatus)
group.register('dragmove', this._showDragEventStatus)
group.register('dragend', this._showDragEventStatus)
return group
},
_showDragEventStatus : function(dragEvent) {
window.status = dragEvent.toString()
},
constraints : function() {
return this._constraintFactory
},
_createEvent : function(type, event, group) {
return new _ToolManDragEvent(type, event, group)
}
}
function _ToolManDragGroup(factory, element) {
this.factory = factory
this.element = element
this._handle = null
this._thresholdDistance = 0
this._transforms = new Array()
// TODO: refactor into a helper object, move into events.js
this._listeners = new Array()
this._listeners['draginit'] = new Array()
this._listeners['dragstart'] = new Array()
this._listeners['dragmove'] = new Array()
this._listeners['dragend'] = new Array()
}
_ToolManDragGroup.prototype = {
/*
* TODO:
* - unregister(type, func)
* - move custom event listener stuff into Event library
* - keyboard nudging of "selected" group
*/
setHandle : function(handle) {
var events = ToolMan.events()
handle.toolManDragGroup = this
events.register(handle, 'mousedown', this._dragInit)
handle.onmousedown = function() { return false }
if (this.element != handle)
events.unregister(this.element, 'mousedown', this._dragInit)
},
register : function(type, func) {
this._listeners[type].push(func)
},
addTransform : function(transformFunc) {
this._transforms.push(transformFunc)
},
verticalOnly : function() {
this.addTransform(this.factory.constraints().vertical())
},
horizontalOnly : function() {
this.addTransform(this.factory.constraints().horizontal())
},
setThreshold : function(thresholdDistance) {
this._thresholdDistance = thresholdDistance
},
transparentDrag : function(opacity) {
var opacity = typeof(opacity) != "undefined" ? opacity : 0.75;
var originalOpacity = ToolMan.css().readStyle(this.element, "opacity")
this.register('dragstart', function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = opacity
element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')'
})
this.register('dragend', function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = originalOpacity
element.style.filter = 'alpha(opacity=100)'
})
},
onTopWhileDragging : function(zIndex) {
var zIndex = typeof(zIndex) != "undefined" ? zIndex : 100000;
var originalZIndex = ToolMan.css().readStyle(this.element, "z-index")
this.register('dragstart', function(dragEvent) {
dragEvent.group.element.style.zIndex = zIndex
})
this.register('dragend', function(dragEvent) {
dragEvent.group.element.style.zIndex = originalZIndex
})
},
_dragInit : function(event) {
event = ToolMan.events().fix(event)
var group = document.toolManDragGroup = this.toolManDragGroup
var dragEvent = group.factory._createEvent('draginit', event, group)
group._isThresholdExceeded = false
group._initialMouseOffset = dragEvent.mouseOffset
group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset)
ToolMan.events().register(document, 'mousemove', group._drag)
document.onmousemove = function() { return false }
ToolMan.events().register(document, 'mouseup', group._dragEnd)
group._notifyListeners(dragEvent)
},
_drag : function(event) {
event = ToolMan.events().fix(event)
var coordinates = ToolMan.coordinates()
var group = this.toolManDragGroup
if (!group) return
var dragEvent = group.factory._createEvent('dragmove', event, group)
var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset)
// TODO: replace with DragThreshold object
if (!group._isThresholdExceeded) {
var distance =
dragEvent.mouseOffset.distance(group._initialMouseOffset)
if (distance < group._thresholdDistance) return
group._isThresholdExceeded = true
group._notifyListeners(
group.factory._createEvent('dragstart', event, group))
}
for (i in group._transforms) {
var transform = group._transforms[i]
newTopLeftOffset = transform(newTopLeftOffset, dragEvent)
}
var dragDelta = newTopLeftOffset.minus(dragEvent.topLeftOffset)
var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta)
newTopLeftPosition.reposition(group.element)
dragEvent.transformedMouseOffset = newTopLeftOffset.plus(group._grabOffset)
group._notifyListeners(dragEvent)
var errorDelta = newTopLeftOffset.minus(coordinates.topLeftOffset(group.element))
if (errorDelta.x != 0 || errorDelta.y != 0) {
coordinates.topLeftPosition(group.element).plus(errorDelta).reposition(group.element)
}
},
_dragEnd : function(event) {
event = ToolMan.events().fix(event)
var group = this.toolManDragGroup
var dragEvent = group.factory._createEvent('dragend', event, group)
group._notifyListeners(dragEvent)
this.toolManDragGroup = null
ToolMan.events().unregister(document, 'mousemove', group._drag)
document.onmousemove = null
ToolMan.events().unregister(document, 'mouseup', group._dragEnd)
},
_notifyListeners : function(dragEvent) {
var listeners = this._listeners[dragEvent.type]
for (i in listeners) {
listeners[i](dragEvent)
}
}
}
function _ToolManDragEvent(type, event, group) {
this.type = type
this.group = group
this.mousePosition = ToolMan.coordinates().mousePosition(event)
this.mouseOffset = ToolMan.coordinates().mouseOffset(event)
this.transformedMouseOffset = this.mouseOffset
this.topLeftPosition = ToolMan.coordinates().topLeftPosition(group.element)
this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element)
}
_ToolManDragEvent.prototype = {
toString : function() {
return "mouse: " + this.mousePosition + this.mouseOffset + " " +
"xmouse: " + this.transformedMouseOffset + " " +
"left,top: " + this.topLeftPosition + this.topLeftOffset
}
}
ToolMan._dragFactory._constraintFactory = {
vertical : function() {
return function(coordinate, dragEvent) {
var x = dragEvent.topLeftOffset.x
return coordinate.x != x
? coordinate.factory.create(x, coordinate.y)
: coordinate
}
},
horizontal : function() {
return function(coordinate, dragEvent) {
var y = dragEvent.topLeftOffset.y
return coordinate.y != y
? coordinate.factory.create(coordinate.x, y)
: coordinate
}
}
}
ToolMan._dragsortFactory = {
makeSortable : function(item) {
var group = ToolMan.drag().createSimpleGroup(item)
group.register('dragstart', this._onDragStart)
group.register('dragmove', this._onDragMove)
group.register('dragend', this._onDragEnd)
return group
},
/**
* Iterates over a list's items, making them sortable, applying
* optional functions to each item.
*
* example: makeListSortable(myList, myFunc1, myFunc2, ... , myFuncN)
*/
makeListSortable : function(list) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var items = list.getElementsByTagName("li")
helpers.map(items, function(item) {
var dragGroup = dragsort.makeSortable(item)
dragGroup.setThreshold(4)
var min, max
dragGroup.addTransform(function(coordinate, dragEvent) {
return coordinate.constrainTo(min, max)
})
dragGroup.register('dragstart', function() {
var items = list.getElementsByTagName("li")
min = max = coordinates.topLeftOffset(items[0])
for (var i = 1, n = items.length; i < n; i++) {
var offset = coordinates.topLeftOffset(items[i])
min = min.min(offset)
max = max.max(offset)
}
})
})
for (var i = 1, n = arguments.length; i < n; i++)
helpers.map(items, arguments[i])
},
_onDragStart : function(dragEvent) {
},
_onDragMove : function(dragEvent) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var item = dragEvent.group.element
var xmouse = dragEvent.transformedMouseOffset
var moveTo = null
var previous = helpers.previousItem(item, item.nodeName)
while (previous != null) {
var bottomRight = coordinates.bottomRightOffset(previous)
if (xmouse.y <= bottomRight.y && xmouse.x <= bottomRight.x) {
moveTo = previous
}
previous = helpers.previousItem(previous, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, moveTo)
return
}
var next = helpers.nextItem(item, item.nodeName)
while (next != null) {
var topLeft = coordinates.topLeftOffset(next)
if (topLeft.y <= xmouse.y && topLeft.x <= xmouse.x) {
moveTo = next
}
next = helpers.nextItem(next, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, helpers.nextItem(moveTo, item.nodeName))
return
}
},
_onDragEnd : function(dragEvent) {
ToolMan.coordinates().create(0, 0).reposition(dragEvent.group.element)
}
}
ToolMan._cookieOven = {
set : function(name, value, expirationInDays) {
if (expirationInDays) {
var date = new Date()
date.setTime(date.getTime() + (expirationInDays * 24 * 60 * 60 * 1000))
var expires = "; expires=" + date.toGMTString()
} else {
var expires = ""
}
document.cookie = name + "=" + value + expires + "; path=/"
},
get : function(name) {
var namePattern = name + "="
var cookies = document.cookie.split(';')
for(var i = 0, n = cookies.length; i < n; i++) {
var c = cookies[i]
while (c.charAt(0) == ' ') c = c.substring(1, c.length)
if (c.indexOf(namePattern) == 0)
return c.substring(namePattern.length, c.length)
}
return null
},
eraseCookie : function(name) {
createCookie(name, "", -1)
}
}
var dragsort = ToolMan.dragsort()
var junkdrawer = ToolMan.junkdrawer()
window.onload = function() {
junkdrawer.restoreListOrder("phonetic3")
//junkdrawer.restoreListOrder("twolists1")
//junkdrawer.restoreListOrder("twolists2")
dragsort.makeListSortable(document.getElementById("phonetic3"),
verticalOnly, saveOrder)
/*
dragsort.makeListSortable(document.getElementById("twolists1"),
saveOrder)
dragsort.makeListSortable(document.getElementById("twolists2"),
saveOrder)
*/
}
function verticalOnly(item) {
item.toolManDragGroup.verticalOnly()
}
function speak(id, what) {
var element = document.getElementById(id);
element.innerHTML = 'Clicked ' + what;
}
function saveOrder(item) {
var group = item.toolManDragGroup
var list = group.element.parentNode
var id = list.getAttribute("id")
if (id == null) return
group.register('dragend', function() {
ToolMan.cookies().set("list-" + id,
junkdrawer.serializeList(list), 365)
})
}
//-->
Thanks so much for your support!
Regards,

If you are seeing "value of the property 'getElementsByTagName' object is null or undefined" there is one of two possible issues:
1) your script file is not properly loaded.
2) You are calling 'getElementsByTagName' inappropriately.
Since you haven't posted any sample code, it would be very difficult for anybody to provide a definitive answer to your question.

Javascript - Bypass new element in script

I have a group of tabs that change the main panel when clicked on. In order to change a particular color property, I need to insert an additional div into my HTML. However, when I do so, it cause an error in the javascript. I'm not a javascript expert, but I think the reason is that the script is calling for an element in a particular order. So when I throw a new element into the picture, it loses its track. Here's my HTML. Basically all the items in the ul are always visible, and when you click on one, it makes the corresponding content visible:
<div id="TabbedPanels">
<div id="TabbedPanels1" class="VTabbedPanels">
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">1</div>
<div class="TabbedPanelsContent">2</div>
<div class="TabbedPanelsContent">3</div>
</div>
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">1</li>
<li class="TabbedPanelsTab" tabindex="0">2</li>
<li class="TabbedPanelsTab" tabindex="0">3</li>
</ul>
</div>
</div>
So now I want to slip a div around theTabbedPanelsContentGroup div, but like I said, it messes everything up. Here's the complete js:
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
{
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
{
if (this.defaultTab < 0)
this.defaultTab = 0;
else
{
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
}
this.defaultTab = this.getTabs()[this.defaultTab];
}
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
};
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
{
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
};
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
{
var children = [];
var child = element.firstChild;
while (child)
{
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
}
return children;
};
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
};
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
if (!optionsObj)
return;
for (var optionName in optionsObj)
{
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
}
};
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
{
if (this.element)
{
var children = this.getElementChildren(this.element);
if (children.length)
return children[1];
}
return null;
};
Spry.Widget.TabbedPanels.prototype.getTabs = function()
{
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
};
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
{
if (this.element)
{
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[0];
}
return null;
};
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
{
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
};
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
{
ele = this.getElement(ele);
if (ele && arr && arr.length)
{
for (var i = 0; i < arr.length; i++)
{
if (ele == arr[i])
return i;
}
}
return -1;
};
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
{
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
};
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
{
return this.currentTabIndex;
};
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
{
return Math.min(this.getTabs().length, this.getContentPanels().length);
};
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
{
try
{
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
}
catch (e) {}
};
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
{
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
this.showPanel(tab);
return this.cancelEvent(e);
};
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
{
this.addClassName(tab, this.tabHoverClass);
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
{
this.removeClassName(tab, this.tabHoverClass);
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
{
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
{
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
};
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
{
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
{
var el = false;
if (key == this.previousPanelKeyCode && i > 0)
el = tabs[i-1];
else if (key == this.nextPanelKeyCode && i < tabs.length-1)
el = tabs[i+1];
if (el)
{
this.showPanel(el);
el.focus();
break;
}
}
return this.cancelEvent(e);
};
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
{
var stopTraversal = false;
if (root)
{
stopTraversal = func(root);
if (root.hasChildNodes())
{
var child = root.firstChild;
while (!stopTraversal && child)
{
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null; }
}
}
}
return stopTraversal;
};
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
{
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
{
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
{
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
{
tabIndexEle = node;
return true;
}
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
tabAnchorEle = node;
}
return false;
});
if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;
if (this.focusElement)
{
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
}
}
};
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
{
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
{
if (i != tpIndex)
{
if (tabs[i])
this.removeClassName(tabs[i], this.tabSelectedClass);
if (panels[i])
{
this.removeClassName(panels[i], this.panelVisibleClass);
panels[i].style.display = "none";
}
}
}
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
};
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
{
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
};
I think it could work if I could just figure out where in the js to bypass the new element I'm inserting. Thanks a lot.

You should be able to achieve styling, like changing some color without the need to resort to additional divs. Just add a class to the top div and change your css accordingly
If you currently initialize with Spry.Widget.TabbedPanels('TabbedPanels'), changing it to Spry.Widget.TabbedPanels('TabbedPanels1') should do the trick.. (if i understand your problem and edits correctly)

A simple solution is to put additional styles on each TabbedPanelsContent element. You can add the same children <div> for styling in each tab. For another solution, I have not tested this, but a change like the following might work:
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
{
if (this.element)
{
var children = this.getElementChildren(this.element);
if (children.length > 1)
{
var subchildren = this.getElementChildren(children[0]);
return subchildren[0];
}
}
return null;
};