Jump to content

RenegadeFX

Members
  • Content count

    29
  • Joined

  • Last visited

Community Reputation

0 Neutral

About RenegadeFX

  • Rank
    Newbie
  1. Help Testing Drag N' Drop Script Cross Browsers

    Thank you all oh so very much.
  2. Help With Animation Object.

    Ok so I have this animation Object thing (I'm still kinda new to Objects).Script: var Widget = { Default: { Duration: 0.8, fps: 10 }, Effect: { Move: function(Id,oParams) { var Self = this; this.Obj = $(Id); this.fps = oParams.fps || Widget.Default.fps; this.Timer = null; this.x = oParams.x; this.y = oParams.y; this.FromX = Self.Obj.offsetLeft; this.FromY = Self.Obj.offsetTop; this.Duration = (oParams.Duration*1000) || (Widget.Default.Duration*1000); this.HigherTo = Math.max(Self.x,Self.y); this.HigherFrom = Math.max(Self.FromX,Self.FromY); this.Frames = (Self.HigherTo-Self.HigherFrom); this.XPos = Self.FromX; this.YPos = Self.FromY; this.onMove = oParams.onMove || function() {}; this.Animate = function() { if(Math.max(Self.XPos,Self.YPos) <= Self.HigherTo) { Self.onMove(Self.Obj,Self.XPos,Self.YPos); Self.XPos += Self.x/(Self.Frames/Self.fps); Self.YPos += Self.y/(Self.Frames/Self.fps); } else { clearInterval(Self.Timer); } } Self.Timer = setInterval(Self.Animate,(Self.Duration/Self.Frames)); } }} Body: <head><script type="text/javascript" src="External/WidgetDependencies.js"></script><style type="text/css">body { background: #FFF;}#Foo { background: #CCF; border: #36C 1px solid; width: 120px; height: auto; position: absolute; left: 0px; top: 0px;}</style></head><body id="Content"><div id="Foo">Hello, World!<br />I am Foo :)</div><script type="text/javascript" language="javascript">addEvent(document,'click',function(e) { new Widget.Effect.Move('Foo',{ Duration: 0.5, x: 270, y: 230, onMove: function(Obj,x,y) { console.log('x:',Math.round(x),'y:',Math.round(y)); Obj.style.left = x+'px'; Obj.style.top = y+'px'; } });});</script></body> And that seems to work fine if the x and y variables are Multiples of 10 otherwise the "Foo" Element doesn't go to the Exact Coordinate.I'm assuming this is just a math problem but I just can't seem to get it.Any help would be awesome.
  3. I need to be able to replace this <a href="http://www.UrlToSite.com">Site Link</a> with just http://www.UrlToSite.com with a Regular Expression this is what I have so far <a[^<>]+href="([^<>]+)"[^<>]*>([^<>]+)</a> and that works fine for a link with just the href but if it has anything else like style="background:#CCF;" it works but it includes the style="background:#CCF;"Any help would be Awesome.
  4. Help Testing Drag N' Drop Script Cross Browsers

    Thanks you sooo much. :)And yes that does help to know what browser.If it's not to much trouble what OS are you running(like Window XP, Vista, 98)
  5. I just need help testing this script cause I only have access to Macs and I need to test this Drag n' Drop Script in as many browsers as possible Like IE8,7 and so on I've already tested it on "Firefox 3, Safari 4 Beta, Opera 9.6, Camino 1.6, BumberCar 2, Flock 2, iCab 4.5, Internet Explorer 5, Mozilla 1.3, Navigator 9, OmniWeb 5.9, SeaMonkey 1.1, Shiira 2.2" and the only browser that caused trouble were Mozilla 1.3(Expected though) and IE 5(Also Expected).and Also I'm kinda new at this stuff so any help to Improve this script would be awesome thanks. function getElementsByClass(Class,Node,Tag) { var ClassElements = new Array(); Node = Node || document; Tag = Tag || '*'; var Elems = Node.getElementsByTagName(Tag); var Pattern = new RegExp('(^|\\\\s)'+Class+'(\\\\s|$)'); for (i = 0, j = 0; i < Elems.length; i++) { if (Pattern.test(Elems[i].className)) { ClassElements[j] = Elems[i]; j++; } } return ClassElements;}document.onmousemove = MouseMove;document.onmouseup = MouseUp;var DragObj = null;var MouseOffset = null;var DropZones = null;var Constraint = null;var Revert = false;var oPos = {};function SetDropZones(Drops) { DropZones = new Array(Drops.length); for(i=0;i<Drops.length;i++) { DropZones[i] = Drops[i]; }}function GetMouseOffset(target, e) { e = e || window.event; var DocPos = GetPosition(target); var MousePos = MouseCoords(e); return {x:MousePos.x - DocPos.x, y:MousePos.y - DocPos.y};}function GetPosition(e) { var Left = 0; var Top = 0; while (e.offsetParent) { Left += e.offsetLeft; Top += e.offsetTop; e = e.offsetParent; } Left += e.offsetLeft; Top += e.offsetTop; return {x:Left, y:Top};}function MouseMove(e) { e = e || window.event; var MousePos = MouseCoords(e); if(DragObj) { DragObj.style.position = 'absolute'; DragObj.style.opacity = 0.7; if(Constraint) { if(Constraint.toLowerCase() == 'horizontal') { DragObj.style.left = MousePos.x - MouseOffset.x+"px"; } if(Constraint.toLowerCase() == 'vertical') { DragObj.style.top = MousePos.y - MouseOffset.y+"px"; } } else { DragObj.style.top = MousePos.y - MouseOffset.y+"px"; DragObj.style.left = MousePos.x - MouseOffset.x+"px"; } return false; }}function FirstMove(e) { e = e || window.event; var MousePos = MouseCoords(e); DragObj.style.top = MousePos.y - MouseOffset.y+"px"; DragObj.style.left = MousePos.x - MouseOffset.x+"px";}function MouseCoords(e) { if(e.pageX || e.pageY){ return {x:e.pageX, y:e.pageY}; } return { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };}function MouseUp(e) { e = e || window.event; var MousePos = MouseCoords(e); if(DropZones) { if(DragObj) { for(var i=0; i<DropZones.length; i++) { var CurrTarget = document.getElementById(DropZones[i]); var TargetPos = GetPosition(CurrTarget); var TargetWidth = CurrTarget.offsetWidth; var TargetHeight = CurrTarget.offsetHeight; if( (MousePos.x > TargetPos.x) && (MousePos.x < (TargetPos.x + TargetWidth)) && (MousePos.y > TargetPos.y) && (MousePos.y < (TargetPos.y + TargetHeight))) { CurrTarget.innerHTML += '<br /><br />Dropped Object <br />"'+DragObj.id+'"'; if(Revert) { DragObj.style.left = oPos.x; DragObj.style.top = oPos.y; } else { DragObj.style.display = 'none'; } } } } } if(DragObj) { if(Revert) { DragObj.style.left = oPos.x+'px'; DragObj.style.top = oPos.y+'px'; } } if(DragObj) { DragObj.style.opacity = 1.0; DragObj.MozOpacity = 1.0; DragObj.KhtmlOpacity = 1.0; DragObj.filter = "alpha(100)"; DragObj = null; DropZones = null; Constraint = null; }}function Draggable(Id,Params) { if(!Id) return; Window = document.getElementById(Id); if(Params.Handle) { var Elems = getElementsByClass(Params.Handle,Window); Obj = Elems[0]; } else { Obj = Window; } this.Obj = Window; Obj.onmousedown = function(e) { DragObj = document.getElementById(Id); MouseOffset = GetMouseOffset(document.getElementById(Id), e); Constraint = Params.Constraint || null; Revert = Params.Revert || false; FirstMove(e); var Tags = document.getElementsByTagName("*"); for(i=0;i<Tags.length;i++) { if(Tags.item(i).style.position == "absolute") { Tags.item(i).style.zIndex = 100; } } DragObj.style.position = 'absolute'; DragObj.style.zIndex = 10000; DragObj.style.opacity = 0.7; DragObj.MozOpacity = 0.7; DragObj.KhtmlOpacity = 0.7; DragObj.filter = "alpha(70)"; oPos = {x:DragObj.offsetLeft,y:DragObj.offsetTop }; if(Params.Drops) { SetDropZones(Params.Drops); } return false; } this.Stop = function() { DragObj.style.opacity = 1.0; DragObj.MozOpacity = 1.0; DragObj.KhtmlOpacity = 1.0; DragObj.filter = "alpha(100)"; DragObj = null; }} And here's the rest of the code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Drag n' Drop</title><style type="text/css">.Draggables { cursor: default; border: #000 1px solid; background: #FFF; width: 200px; height: auto; float: left;}.Draggables div { padding: 10px;}#Dropper_1 { position: absolute; left: 10px; top: 300px;}#Dropper_2 { position: absolute; left: 220px; top: 300px;}.Dropper { width: 180px; height: 140px; border: #000 1px solid; overflow: auto; padding: 10px;}.Handles { display: block; background: #CCF; border-bottom: #36C 1px solid; cursor: move; text-decoration: none; margin-top: 0px;}#Draggable_1 { position: absolute; left: 10px; top: 163px;}#Draggable_2 { position: absolute; left: 220px; top: 163px;}#Draggable_3 { position: absolute; left: 110px; top: 26px;}#Draggable_4 { position: absolute; left: 430px; top: 205px;}#Draggable_5 { position: absolute; left: 430px; top: 300px;}</style><script type="text/javascript" language="javascript" src="External/Scriptacular.js"></script></head><body><div class="Draggables" id="Draggable_1"> <a href="java script:void(0);" class="Handles"> </a> <div> This is the First Draggable Box that you can only drop in drop box 1. </div></div><div class="Draggables" id="Draggable_2"> <a href="java script:void(0);" class="Handles"> </a> <div> This is the Second Draggable Box That you can drop in either Drop box 1 or 2. </div></div><div class="Draggables" id="Draggable_3"> <a href="java script:void(0);" class="Handles"> </a> <div> This is the Third Draggable Box that can't get drop in any of the Drop Boxes. </div></div><div class="Draggables" id="Draggable_4"> <a href="java script:void(0);" class="Handles"> </a> <div> This Draggable Box Can only move Horizontally </div></div><div class="Draggables" id="Draggable_5"> <a href="java script:void(0);" class="Handles"> </a> <div> This Draggable Box Can only move Vertically </div></div><div class="Dropper" id="Dropper_1"> This is Drop Box 1</div><div class="Dropper" id="Dropper_2"> This is Drop Box 2</div><script type="text/javascript" language="javascript">new Draggable('Draggable_1',{ Drops:['Dropper_1'], Handle:'Handles', Revert:true});new Draggable('Draggable_2',{ Drops:['Dropper_1','Dropper_2'], Handle:'Handles', Revert:true});new Draggable('Draggable_3',{ Handle:'Handles',});new Draggable('Draggable_4',{ Handle:'Handles', Constraint:'horizontal', Revert:true});new Draggable('Draggable_5',{ Handle:'Handles', Constraint:'vertical', Revert:true});</script></body></html> Ok here's a link to a page with it on it. http://advancedscripts.webs.com/DragnDrop/
  6. This Drag n' Drop script does seem to want to work and My browsers(Firefox,Safari "on a Mac") don't throw me any errors so I just need some help finding out whats wrong.Here's the Code <body><div class="Draggables" id="Draggable_1" onmouseover="MakeIt(this.id);"> Drag and drop me</div><div class="Draggables" id="Draggable_2" onmouseover="MakeIt(this.id);"> Drag and drop me too</div><div class="Dropper" id="Dropper_1">Drop it here please :)</div><div class="Dropper" id="Dropper_2">Or Drop it here :)</div><script type="text/javascript" language="javascript">function MakeIt(Id) { Draggable.Create(Id);}document.onmousemove = Draggable.MouseMove;document.onmouseup = Draggable.MouseUp;function Draggable() { var DragObj = null; var MouseOffset = 0; var oPos = {x:0,y:0}; var DropTargets = ['Dropper_1','Dropper_2']; this.Create = function(Id) { if(!Id) { return; } Obj = document.getElementById(Id); Obj.onmousedown = function(e) { DragObj = Obj; oPos.x = DragObj.offsetLeft; oPos.y = DragObj.offsetTop; MouseOffset = Draggable.GetMouseOffset(DragObj,e); return false; } } this.GetMouseOffset = function(Target,e) { e = e || window.event; var DocPos = Draggable.GetPosition(Target); var MousePos = Draggable.MouseCoords(e); return {x:MousePos.x-DocPos.x,y:MousePos.y-DocPos.y}; } this.MouseCoords = function(e) { if(e.pageX || e.pageY) { return {x:e.pageX,y:e.pageY}; } return { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientY }; } this.GetPosition = function(Obj) { var Left = 0; var Top = 0; while(Obj.offsetParent) { Left += Obj.offsetLeft; Top += Obj.offsetTop; Obj = Obj.offsetParent; } Left += Obj.offsetLeft; Top += Obj.offsetTop; return {x:Left,y:Top}; } this.AddDropTargets = function(DropTarget) { DropTargets.push(DropTarget); } this.MouseMove = function(e) { e = e || window.event; var MousePos = Draggable.MouseCoords(e); if(DragObj) { DragObj.style.position = 'absolute'; DragObj.style.left = MousePos.x - MouseOffset.x; DragObj.style.top = MousePos.y - MouseOffset.y; return false; } } this.MouseUp = function(e) { e = e || window.event; var MousePos = Draggable.MouseCoords(e); if(DragObj) { for(var i=0; i<DropTargets.length; i++) { var CurrTarget = document.getElementById(DropTargets[i]); var TargetPos = Draggable.GetPosition(CurrTarget); var TargetWidth = parseInt(CurrTarget.offsetWidth); var TargetHeight = parseInt(CurrTarget.offsetHeight); if((MousePos.x > TargetPos.x)&& (MousePos.x < (TargetPos.x + TargetWidth))&& (MousePos.y > TargetPos.y)&& (MousePos.y<(TargetPos.y + TargetHeight))) { DragObj.style.display = "none"; } } DragObj = null; } }}var Draggable = new Draggable();</script></body> Please Any help would be awesome
  7. Drag N' Drop Classes

    Need Help with my drag n' drop script I want to be able to send it a ClassName all elements with that className will be Draggable but It just Doesn't seem to work I got it to work fine with just an Id heres the script for that <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Drag n' Drop</title><style type="text/css">.Draggables { cursor: move; border: #000 1px solid; -moz-border-radius: 10px;}#Draggable_1 { width: 100px; height: auto;}#Draggable_2 { width: 75px; height: auto;}.Dropper { width: 200px; height: 200px; -moz-border-radius: 10px; border: #000 1px solid; margin: 10px;}</style></head><body><div class="Draggables" id="Draggable_1">Drag and drop me</div><div class="Draggables" id="Draggable_2">Drag and drop me too</div><div class="Dropper" id="Dropper_1">Drop it here please :)</div><div class="Dropper" id="Dropper_2">Or Drop it here :)</div><script type="text/javascript" language="javascript">MakeDraggable("Draggable_1");MakeDraggable("Draggable_2")function MakeDraggable(Id){ if(!Id) { return; } var Obj = document.getElementById(Id); if(Obj) { Obj.onmousedown = function(e) { DragObj = Obj; OrigX = Obj.offsetLeft; OrigY = Obj.offsetTop; MouseOffset = GetMouseOffset(Obj,e); return false; } }}document.onmousemove = MouseMove;document.onmouseup = MouseUp;var DragObj = null;var MouseOffset = null;var DropTargets = ['Dropper_1','Dropper_2'];var OrigX = 0;var OrigY = 0;function GetMouseOffset(Target, e){ e = e || window.event; var DocPos = GetPosition(Target); var MousePos = MouseCoords(e); return {x:MousePos.x - DocPos.x, y:MousePos.y - DocPos.y};}function MouseCoords(e){ if(e.pageX || e.pageY){ return {x:e.pageX, y:e.pageY}; } return { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };}function GetPosition(e){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft; top += e.offsetTop; e = e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return {x:left, y:top};}function MouseMove(e){ e = e || window.event; var MousePos = MouseCoords(e); if(DragObj){ DragObj.style.position = 'absolute'; DragObj.style.top = MousePos.y - MouseOffset.y + "px"; DragObj.style.left = MousePos.x - MouseOffset.x + "px"; return false; }}function AddDropTarget(DropTarget) { DropTargets.push(DropTarget);}function MouseUp(e) { e = e || window.event; var MousePos = MouseCoords(e); for(var i=0; i<DropTargets.length; i++) { var CurrTarget = document.getElementById(DropTargets[i]); var TargetPos = GetPosition(CurrTarget); var TargetWidth = parseInt(CurrTarget.offsetWidth); var TargetHeight = parseInt(CurrTarget.offsetHeight); if((MousePos.x > TargetPos.x)&&(MousePos.x < (TargetPos.x + TargetWidth))&&(MousePos.y > TargetPos.y)&&(MousePos.y<(TargetPos.y + TargetHeight))) { DragObj.style.display = "none"; } } DragObj = null;}</script></body></html> So I thought all I needed to do was replace MakeDraggable("Draggable_1");MakeDraggable("Draggable_2")function MakeDraggable(Id){ if(!Id) { return; } var Obj = document.getElementById(Id); if(Obj) { Obj.onmousedown = function(e) { DragObj = Obj; OrigX = Obj.offsetLeft; OrigY = Obj.offsetTop; MouseOffset = GetMouseOffset(Obj,e); return false; } }} with this MakeDraggable("Draggables");function MakeDraggable(Id){ if(!Id) { return; } var Tag = document.getElementsByTagName("*"); var Obj = document.getElementById(Id); if(Obj) { Obj.onmousedown = function(e) { DragObj = Obj; OrigX = Obj.offsetLeft; OrigY = Obj.offsetTop; MouseOffset = GetMouseOffset(Obj,e); return false; } } else { for(i=0;i<Tag.length;i++) { Obj = Tag.item(i); if(Obj.className == Id) { Obj.onmousedown = function(e) { DragObj = Obj; OrigX = Obj.offsetLeft; OrigY = Obj.offsetTop; MouseOffset = GetMouseOffset(Obj,e); return false; } } } }} But it just wont work any help would be awesome and I'm new at this so be nice.
  8. Drag N' Drop Adding 16px When Dragging?

    Ha wow now I feel stupid I just changed a + to a - Ha sorry
  9. So heres what I have so far I it works fine except It adds 16px to the y coords when I start the Drag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Drag n' Drop</title><style type="text/css">.Draggables { cursor: move; position: absolute; left: 220px; top: 20px;}.Dropper { width: 200px; height: 200px; -moz-border-radius: 10px; border: #000 1px solid;}</style></head><body><p class="Draggables" id="Draggable">Drag and drop the image</p><div class="Dropper" id="Dropper_1">Drop it here please :)</div><div class="Dropper" id="Dropper_2">Or Drop it here :)</div><script type="text/javascript" language="javascript">MakeDraggable(document.getElementById("Draggable"));document.onmousemove = MouseMove;document.onmouseup = MouseUp;var DragObj = null;var MouseOffset = null;var DropTargets = ['Dropper_1','Dropper_2'];var OrigX = 0;var OrigY = 0;function GetMouseOffset(Target, e){ e = e || window.event; var DocPos = GetPosition(Target); var MousePos = MouseCoords(e); return {x:MousePos.x - DocPos.x, y:MousePos.y - DocPos.y};}function MouseCoords(e){ if(e.pageX || e.pageY){ return {x:e.pageX, y:e.pageY}; } return { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };}function GetPosition(e){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft; top += e.offsetTop; e = e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return {x:left, y:top};}function MouseMove(e){ e = e || window.event; var MousePos = MouseCoords(e); if(DragObj){ DragObj.style.position = 'absolute'; DragObj.style.top = MousePos.y + MouseOffset.y + "px"; DragObj.style.left = MousePos.x - MouseOffset.x + "px"; return false; }}function MakeDraggable(item){ if(!item) return; item.onmousedown = function(e){ DragObj = this; OrigX = DragObj.offsetLeft; OrigY = DragObj.offsetTop; MouseOffset = GetMouseOffset(this, e); return false; }}function AddDropTarget(DropTarget){ DropTargets.push(DropTarget);}function MouseUp(e) { e = e || window.event; var MousePos = MouseCoords(e); for(var i=0; i<DropTargets.length; i++) { var CurrTarget = document.getElementById(DropTargets[i]); var TargetPos = GetPosition(CurrTarget); var TargetWidth = parseInt(CurrTarget.offsetWidth); var TargetHeight = parseInt(CurrTarget.offsetHeight); if((MousePos.x > TargetPos.x)&&(MousePos.x < (TargetPos.x + TargetWidth))&&(MousePos.y > TargetPos.y)&&(MousePos.y<(TargetPos.y + TargetHeight))) { DragObj.style.left = OrigX+"px"; DragObj.style.top = OrigY+"px"; alert("Left: "+DragObj.offsetLeft + "\n Top: "+DragObj.offsetTop+"\n OrigX: "+OrigX+"\n OrigY: "+OrigY); } } DragObj = null;}</script></body></html>
  10. So heres what I have so far I it works fine except It adds 16px to the y coords when I start the Drag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Drag n' Drop</title><style type="text/css">.Draggables { cursor: move; position: absolute; left: 220px; top: 20px;}.Dropper { width: 200px; height: 200px; -moz-border-radius: 10px; border: #000 1px solid;}</style></head><body><p class="Draggables" id="Draggable">Drag and drop the image</p><div class="Dropper" id="Dropper_1">Drop it here please :)</div><div class="Dropper" id="Dropper_2">Or Drop it here :)</div><script type="text/javascript" language="javascript">MakeDraggable(document.getElementById("Draggable"));document.onmousemove = MouseMove;document.onmouseup = MouseUp;var DragObj = null;var MouseOffset = null;var DropTargets = ['Dropper_1','Dropper_2'];var OrigX = 0;var OrigY = 0;function GetMouseOffset(Target, e){ e = e || window.event; var DocPos = GetPosition(Target); var MousePos = MouseCoords(e); return {x:MousePos.x - DocPos.x, y:MousePos.y - DocPos.y};}function MouseCoords(e){ if(e.pageX || e.pageY){ return {x:e.pageX, y:e.pageY}; } return { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };}function GetPosition(e){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft; top += e.offsetTop; e = e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return {x:left, y:top};}function MouseMove(e){ e = e || window.event; var MousePos = MouseCoords(e); if(DragObj){ DragObj.style.position = 'absolute'; DragObj.style.top = MousePos.y + MouseOffset.y + "px"; DragObj.style.left = MousePos.x - MouseOffset.x + "px"; return false; }}function MakeDraggable(item){ if(!item) return; item.onmousedown = function(e){ DragObj = this; OrigX = DragObj.offsetLeft; OrigY = DragObj.offsetTop; MouseOffset = GetMouseOffset(this, e); return false; }}function AddDropTarget(DropTarget){ DropTargets.push(DropTarget);}function MouseUp(e) { e = e || window.event; var MousePos = MouseCoords(e); for(var i=0; i<DropTargets.length; i++) { var CurrTarget = document.getElementById(DropTargets[i]); var TargetPos = GetPosition(CurrTarget); var TargetWidth = parseInt(CurrTarget.offsetWidth); var TargetHeight = parseInt(CurrTarget.offsetHeight); if((MousePos.x > TargetPos.x)&&(MousePos.x < (TargetPos.x + TargetWidth))&&(MousePos.y > TargetPos.y)&&(MousePos.y<(TargetPos.y + TargetHeight))) { DragObj.style.left = OrigX+"px"; DragObj.style.top = OrigY+"px"; alert("Left: "+DragObj.offsetLeft + "\n Top: "+DragObj.offsetTop+"\n OrigX: "+OrigX+"\n OrigY: "+OrigY); } } DragObj = null;}</script></body></html>
  11. So heres what I have so far I it works fine except It adds 16px to the y coords when I start the Drag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Drag n' Drop</title><style type="text/css">.Draggables { cursor: move; position: absolute; left: 220px; top: 20px;}.Dropper { width: 200px; height: 200px; -moz-border-radius: 10px; border: #000 1px solid;}</style></head><body><p class="Draggables" id="Draggable">Drag and drop the image</p><div class="Dropper" id="Dropper_1">Drop it here please :)</div><div class="Dropper" id="Dropper_2">Or Drop it here :)</div><script type="text/javascript" language="javascript">MakeDraggable(document.getElementById("Draggable"));document.onmousemove = MouseMove;document.onmouseup = MouseUp;var DragObj = null;var MouseOffset = null;var DropTargets = ['Dropper_1','Dropper_2'];var OrigX = 0;var OrigY = 0;function GetMouseOffset(Target, e){ e = e || window.event; var DocPos = GetPosition(Target); var MousePos = MouseCoords(e); return {x:MousePos.x - DocPos.x, y:MousePos.y - DocPos.y};}function MouseCoords(e){ if(e.pageX || e.pageY){ return {x:e.pageX, y:e.pageY}; } return { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };}function GetPosition(e){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft; top += e.offsetTop; e = e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return {x:left, y:top};}function MouseMove(e){ e = e || window.event; var MousePos = MouseCoords(e); if(DragObj){ DragObj.style.position = 'absolute'; DragObj.style.top = MousePos.y + MouseOffset.y + "px"; DragObj.style.left = MousePos.x - MouseOffset.x + "px"; return false; }}function MakeDraggable(item){ if(!item) return; item.onmousedown = function(e){ DragObj = this; OrigX = DragObj.offsetLeft; OrigY = DragObj.offsetTop; MouseOffset = GetMouseOffset(this, e); return false; }}function AddDropTarget(DropTarget){ DropTargets.push(DropTarget);}function MouseUp(e) { e = e || window.event; var MousePos = MouseCoords(e); for(var i=0; i<DropTargets.length; i++) { var CurrTarget = document.getElementById(DropTargets[i]); var TargetPos = GetPosition(CurrTarget); var TargetWidth = parseInt(CurrTarget.offsetWidth); var TargetHeight = parseInt(CurrTarget.offsetHeight); if((MousePos.x > TargetPos.x)&&(MousePos.x < (TargetPos.x + TargetWidth))&&(MousePos.y > TargetPos.y)&&(MousePos.y<(TargetPos.y + TargetHeight))) { DragObj.style.left = OrigX+"px"; DragObj.style.top = OrigY+"px"; alert("Left: "+DragObj.offsetLeft + "\n Top: "+DragObj.offsetTop+"\n OrigX: "+OrigX+"\n OrigY: "+OrigY); } } DragObj = null;}</script></body></html>
  12. I hate it that safari automatically puts a glowing blue border around the input fields when they have focus and I would like to know how to get rid of that border(if Possible with javascript).Like this when It's normal and when it's selected
  13. Random Prize Generator

    Ok I think this is what your page should look like. <html><head><title></title><script type="text/javascript>function GetNumbers() { var Chance = Math.round(Math.random()*1000); var Winner = 1; var Output = "Nope sorry you lost :("; if(Chance == Winner) { Output = "OMG It's so amazing you won!!!! :D"; } ShowWinner(Output);}function ShowWinner(Output) { document.getElementById("DisplayDiv").innerHTML = Output;}window.onload = GetNumbers;</script></head><body><div id="DisplayDiv"></div></body> Ok so what this does, first I create a variable called "Chance" and I set that variable equal to a random number between 1 and 1,000. then i create another variable called "Winner" and I set that equal to 1. and then I create yet another variable called "Output" and I set that equal to the default text that will be display. and then I use an if statement to say "if the variable Chance (which is a number from 1 to 1,000) is the same number as the variable Winner(Which is equal to 1)" if that statement is true then I set the "Output" variable equal to "OMG It's so amazing you won!!!! " or the text that will be displayed if the two numbers do match. and then I run the function "ShowWinner" which set text in the div with the Id of "DisplayDiv" equal to the "Output" variable.Hope this helped?
  14. Random Prize Generator

    function GetNumbers() { var Chance = Math.round(Math.random()*1000); var Winner = 1; var Output = "Nope sorry you lost :("; if(Chance == Winner) { Output = "OMG It's so amazing you won!!!! :D"; } ShowWinner(Output);}function ShowWinner(Output) { window.location = "WinningPage.html";}window.onload = GetNumbers; Something like that I think what ever is in the ShowWinner function will be displayed if the numbers match.
  15. Random Prize Generator

    Yeah thats all pure javascript
×