|
Post by natzy24 on Jan 6, 2011 11:32:24 GMT
I was just wondering if there was anyway this code Click could be adjusted to include head and base images?
|
|
|
Post by moneyman18 on Jan 7, 2011 0:03:24 GMT
Sorry I didn't get to this sooner today I have been quite busy.
Same placement just fill out the two new variables for the head and base image urls.
<script type="text/javascript"><!-- /* * Drag and Drop Category Splitter with Head/Base Images * Made by moneyman18 */
var gap = 22;
var headImageURL = 'http://...'; var baseImageURL = 'http://...';
/*==(Do Not Edit Below)==*/ function addEvent(el, type, func){ if(el.addEventListener) el.addEventListener(type, func, false); else if(el.attachEvent) el.attachEvent('on'+type, func); else el['on'+type] = func; }
function removeEvent(el, type, func){ if(el.removeEventListener) el.removeEventListener(type, func, false); else if(el.detachEvent) el.detachEvent('on'+type, func); else el['on'+type] = null; }
var Draggable = { currently_dragging: null, startDrag: function(e){ Draggable.currently_dragging = e.target || e.srcElement; while(Draggable.currently_dragging.nodeName.toLowerCase() != 'table' || Draggable.currently_dragging.className) if(Draggable.currently_dragging.parentNode) Draggable.currently_dragging = Draggable.currently_dragging.parentNode; else return false; with(Draggable.currently_dragging.style){ opacity = .75; filter = 'alpha(opacity=75)'; zIndex = 1000; } Draggable.currently_dragging_position = coordinates.element(Draggable.currently_dragging); var coords = coordinates.mouse(e); Draggable.currently_dragging_position_offset = { 'y': coords.y-Draggable.currently_dragging_position.y, 'x': coords.x-Draggable.currently_dragging_position.x }; addEvent(document, 'mousemove', Draggable.drag); addEvent(document, 'mouseup', Draggable.stopDrag); }, drag: function(e){ if(Draggable.currently_dragging != null){ var coords = coordinates.mouse(e); with(Draggable.currently_dragging.style){ left = ((coords.x-Draggable.currently_dragging_position.x)-Draggable.currently_dragging_position_offset.x)+'px'; top = ((coords.y-Draggable.currently_dragging_position.y)-Draggable.currently_dragging_position_offset.y)+'px'; } if(move.before(Draggable.currently_dragging) || move.after(Draggable.currently_dragging)){ with(Draggable){ with(currently_dragging.style){ left = 0; top = 0; } currently_dragging_position = coordinates.element(Draggable.currently_dragging); drag(e); } } if(document.selection && document.selection.empty) document.selection.empty(); else if(window.getSelection && (sel = window.getSelection()) && sel.removeAllRanges) sel.removeAllRanges(); } }, stopDrag: function(){ removeEvent(document, 'mousemove', Draggable.drag); removeEvent(document, 'mouseup', Draggable.stopDrag); with(Draggable.currently_dragging.style){ left = 0; top = 0; opacity = 1; filter = 'alpha(opacity=100)'; zIndex = 'auto'; } Draggable.currently_dragging = null; order.save(); } };
var coordinates = { mouse: function(e){ e = e || window.event; if(e.clientX || e.clientY) return { 'x': e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft)-(document.documentElement.clientLeft || 0), 'y': e.clientY+(document.documentElement.scrollTop || document.body.scrollTop)-(document.documentElement.clientTop || 0) }; else return { 'x': (document.documentElement.scrollLeft || document.body.scrollLeft)-(document.documentElement.clientLeft || 0), 'y': (document.documentElement.scrollTop || document.body.scrollTop)-(document.documentElement.clientTop || 0) }; }, element: function(el){ return { 'x': el.offsetLeft, 'y': el.offsetTop }; } };
var move = { before: function(el1){ var el2 = el1.previousSibling; if(el2 != null && coordinates.element(el1).y < (coordinates.element(el2).y+el2.offsetHeight/2)){ with(el1.parentNode){ insertBefore(el1, el2); if(lastChild == el2){ el2.style.marginBottom = 0; if(pb_username != 'Guest') el2.getElementsByTagName('table')[0].rows[0].parentNode.appendChild( el1.getElementsByTagName('table')[0].rows[el1.getElementsByTagName('table')[0].rows.length-1] ); } } el1.style.marginBottom = gap+'px'; return true; } return false; }, after: function(el1){ var el2 = el1.nextSibling; if(el2 != null && (coordinates.element(el1).y+el1.offsetHeight) > (coordinates.element(el2).y+el2.offsetHeight/2)){ with(el1.parentNode){ insertBefore(el1, (el2.nextSibling? el2.nextSibling : null)); if(lastChild == el1){ el1.style.marginBottom = 0; if(pb_username != 'Guest') el1.getElementsByTagName('table')[0].rows[0].parentNode.appendChild( el2.getElementsByTagName('table')[0].rows[el2.getElementsByTagName('table')[0].rows.length-1] ); } } el2.style.marginBottom = gap+'px'; return true; } return false; } };
var order = { restore: function(categories){ if(pb_username != 'Guest') var markAsRead = wrapperDiv.lastChild.getElementsByTagName('table')[0].rows[wrapperDiv.lastChild.getElementsByTagName('table')[0].rows.length-1]; mTable = wrapperDiv.getElementsByTagName('table'); for(a = 0; a < categories.length; a++) for(b = 0; b < mTable.length; b++) if(mTable[b].parentNode == wrapperDiv && categories[a] == mTable[b].getElementsByTagName('a')[0].name){ mTable[b].style.marginBottom = gap+'px'; wrapperDiv.appendChild( mTable[b] ); } with(wrapperDiv.lastChild){ style.marginBottom = 0; } if(pb_username != 'Guest') wrapperDiv.lastChild.getElementsByTagName('table')[0].rows[0].parentNode.appendChild( markAsRead ); }, save: function(){ mTable = wrapperDiv.getElementsByTagName('table'); var categories = new Array(); for(i = 0; i < mTable.length; i++) if(mTable[i].parentNode == wrapperDiv) categories.push(mTable[i].getElementsByTagName('a')[0].name); document.cookie = 'cOrder='+encodeURI(categories.join('|'))+'; expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;'; } };
var mTable = document.getElementsByTagName('table'); var wrapperDiv = document.createElement('div'); var Img = document.createElement('img'); Img.border = 0; for(a = 5; a < mTable.length; a++) if(mTable[a].cellPadding == 4 && mTable[a-1].className == 'bordercolor' && /Forum\sName/i.test(mTable[a].rows[0].cells[0].innerHTML)){ for(b = 1; b < mTable[a].rows.length; b++) if(mTable[a].rows[b].getElementsByTagName('a')[0].name){ with(Table1 = document.createElement('table')){ width = '100%'; align = 'center'; cellPadding = 4; cellSpacing = 1; className = 'bordercolor'; appendChild( document.createElement('tbody') ); with(firstChild){ appendChild( mTable[a].rows[0].cloneNode(true) ); appendChild( mTable[a].rows[b].cloneNode(true) ); rows[1].cells[0].style.cursor = 'move'; } } with(Table2 = document.createElement('table')){ width = '100%'; cellPadding = cellSpacing = border = 0; with(style){ marginBottom = gap+'px'; position = 'relative'; } insertRow(0).insertCell(0); insertRow(1).insertCell(0); insertRow(2).insertCell(0); with(rows[0].cells[0]){ align = 'center'; Img.src = headImageURL; appendChild( Img.cloneNode(true) ); } rows[1].cells[0].appendChild( Table1 ); with(rows[2].cells[0]){ align = 'center'; Img.src = baseImageURL; appendChild( Img.cloneNode(true) ); } } addEvent(Table1.rows[1].cells[0], 'mousedown', Draggable.startDrag); wrapperDiv.appendChild( Table2 ); }else if(mTable[a].rows[b].cells[4] || mTable[a].rows[b].innerHTML.match(/action=markallboardsread/i)) Table1.firstChild.appendChild( mTable[a].rows[b].cloneNode(true) ); wrapperDiv.lastChild.style.marginBottom = 0; mTable[a-1].parentNode.replaceChild(wrapperDiv, mTable[a-1]); if(document.cookie.match(/cOrder=(.+?)(?:;|$)/)) order.restore(decodeURI(RegExp.$1).split('|')); break; } //--></script>
|
|
|
Post by natzy24 on Jan 7, 2011 8:29:21 GMT
Thank you!!! ^_^ I'll test it now
|
|