[align=center][b][u]CLICK FOR THE PREVIEW[/b][/u][quote][url=http://profiles.friendster.com/32477026][img]http://www.myklmphotoframes.com/images/preview_sign.jpg[/img][/url] [url=http://profiles.friendster.com/32477026]PREVIEW[/url] [/quote] [/align] [b]PLEASE RATE[/b] [b]STEP1-MAKE A SLIDESHOW in [url]www.slide.com[/url] STEP 2 -Save this as draggableslide.css[/b] [quote]#root { position:relative; cursor:hand; z-index: 100; } #header_drop { background-color: transparent; background-image:url([b]URL OF UR OWN IMAGE AS HEADER[/b]); background-position:center center; background-attachment:scroll! important; background-repeat:repeat; border-color:transparent; border-top-width: 1px! important; border-bottom-width: 1px! important; border-left-width: 1px! important; border-right-width: 1px! important; border-style: inset! important; border-color:#1a1a1a! important; width: 300px; } #content_dropin {display: none;}[/quote] [b]SAVE this as ur FINAL JS[/b] [spoiler] var css = document.createElement("link"); css.type = "text/css"; css.rel = "stylesheet";css.href = "[b]URL OF UR draggableslide.css[/b]"; css.media = "screen, print";document.getElementsByTagName("head")[0].appendChild(css); function toggle3(obj) { var hel = document.getElementById(obj); if ( hel.style.display != 'inline' ) { hel.style.display = 'inline'; }else { hel.style.display = 'none';}} if (!attachOnLoadHandler(function(){onProfileLoad()})) window.onload = function(){onProfileLoad()}; function onProfileLoad() { var FriendstertalkRulez; try {FriendstertalkRulez = document.createElement("div"); } catch (e) {FriendstertalkRulez = document.createElement("<div>"); } FriendstertalkRulez.setAttribute("style","text-align:center;padding-top: 5px"); FriendstertalkRulez.innerHTML = "<br><div align=\"center\"><center><input type=\"button\" value=\"Show Slideshow\" onClick=\"javascript:redo()\"></center></div>"; document.getElementById("controlPanelButtons").parentNode.appendChild(FriendstertalkRulez); var div = document.createElement("div"); div.innerHTML = "<div id=\"dropin\" style=\"position:absolute;visibility:hidden;left:200px;top:100px;width:300px;height:80px;background-color:transparent;\">"+ "<div id=\"root\">"+ "<div id=\"handle\" style=\"background-color: transparent;background-image:url([b]BG url of ur draggable box[/b]);background-position:top center;background-attachment:scroll;background-repeat: repeat-x;border: 1px inset #1a1a1a;color:#000000;font-size:9pt;font-weight:bold;text-align: right;\"> Draggable Slideshow</div>"+ "<h2 id=\"header_drop\"><a onClick=\"javascript:toggle3('content_dropin');\"><font color=\"#ffffff\" size=\"2\"><b>[Minimizer]</b></font> </a><a onClick=\"dismissbox();return false\"><font color=\"#ffffff\" size=\"2\"> [Close Box]</b></font> </a></h2>"+ "<div align=\"center\" id=\"content_dropin\" >[b]YOUR SLIDESHOW EMBED CODE[/b]"+ "</div>"+ "</div>"+ "</div>"; document.getElementsByTagName("body")[0].appendChild(div); } /*********************************************** * Drop-in content box: By Dynamic Drive * For full source code and more DHTML scripts, visit http://www.dynamicdrive.com * This credit MUST stay intact for use * Edited by: cip6192 ***********************************************/ //Specify rate of display (1/freq) var freq=100 var random_num=Math.floor(Math.random()*freq) if (random_num==0) window.onload=initbox var ie=document.all var dom=document.getElementById var ns4=document.layers var calunits=document.layers? "" : "px" var bouncelimit=32 //(must be divisible by 8) var direction="up" function initbox(){ if (!dom&&!ie&&!ns4) return crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin scroll_top=(ie)? truebody().scrollTop : window.pageYOffset crossobj.top=scroll_top-250+calunits crossobj.visibility=(dom||ie)? "visible" : "show" dropstart=setInterval("dropin()",50) } function dropin(){ scroll_top=(ie)? truebody().scrollTop : window.pageYOffset if (parseInt(crossobj.top)<100+scroll_top) crossobj.top=parseInt(crossobj.top)+40+calunits else{ clearInterval(dropstart) bouncestart=setInterval("bouncein()",50) } } function bouncein(){ crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits if (bouncelimit<0) bouncelimit+=8 bouncelimit=bouncelimit*-1 if (bouncelimit==0){ clearInterval(bouncestart) } } function dismissbox(){ if (window.bouncestart) clearInterval(bouncestart) crossobj.visibility="hidden" } function redo(){ bouncelimit=32 direction="up" initbox() } function truebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } /************************************************** * dom-drag.js * 09.25.2001 * www.youngpup.net * Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005 ************************************************** * 10.28.2001 - fixed minor bug where events * sometimes fired off the handle, not the root. **************************************************/ var Drag = { obj : null, init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) { o.onmousedown = Drag.start; o.hmode = bSwapHorzRef ? false : true ; o.vmode = bSwapVertRef ? false : true ; o.root = oRoot && oRoot != null ? oRoot : o ; if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px"; if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px"; if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px"; if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px"; o.minX = typeof minX != 'undefined' ? minX : null; o.minY = typeof minY != 'undefined' ? minY : null; o.maxX = typeof maxX != 'undefined' ? maxX : null; o.maxY = typeof maxY != 'undefined' ? maxY : null; o.xMapper = fXMapper ? fXMapper : null; o.yMapper = fYMapper ? fYMapper : null; o.root.onDragStart = new Function(); o.root.onDragEnd = new Function(); o.root.onDrag = new Function(); }, start : function(e) { var o = Drag.obj = this; e = Drag.fixE(e); var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom); var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right ); o.root.onDragStart(x, y); o.lastMouseX = e.clientX; o.lastMouseY = e.clientY; if (o.hmode) { if (o.minX != null) o.minMouseX = e.clientX - x + o.minX; if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX; } else { if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x; if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x; } if (o.vmode) { if (o.minY != null) o.minMouseY = e.clientY - y + o.minY; if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY; } else { if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y; if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y; } document.onmousemove = Drag.drag; document.onmouseup = Drag.end; return false; }, drag : function(e) { e = Drag.fixE(e); var o = Drag.obj; var ey = e.clientY; var ex = e.clientX; var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom); var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right ); var nx, ny; if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX); if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX); if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY); if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY); nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1)); ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1)); if (o.xMapper) nx = o.xMapper(y) else if (o.yMapper) ny = o.yMapper(x) Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px"; Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px"; Drag.obj.lastMouseX = ex; Drag.obj.lastMouseY = ey; Drag.obj.root.onDrag(nx, ny); return false; }, end : function() { document.onmousemove = null; document.onmouseup = null; Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"])); Drag.obj = null; }, fixE : function(e) { if (typeof e == 'undefined') e = window.event; if (typeof e.layerX == 'undefined') e.layerX = e.offsetX; if (typeof e.layerY == 'undefined') e.layerY = e.offsetY; return e; } }; [/spoiler] [b] JUST EDIT THE BOLD PART CREDITS to www.dynamicdrive.com cip6192's DROP IN DRAGGABLE BOXES - [url]http://theftalk.com/t10528-Drop-in-Draggable-Box-%5Bupdated-feb-28%5D.html ENJOY![/url][/b]

Last edited by chan2raagas (2008-07-05 10:19:11)