Help with draggable layers javascript

**Teensweb** · 03-14-2010 08:35 AM

hi every one, I needed a (java)script to make a division draggable and got the following code from dynamicdrive:

Code:

var dragobject = 
{z: 0, x: 0, y: 0, offsetx: null, offsety: null, targetobj: null, dragapproved: 0, initialize: function()
   {document.onmousedown = this.drag;
   
    document.onmouseup = function()
       {
       this.dragapproved = 0;
       };
   }
, drag: function(e)
   {var a = window.event ? window.event: e;
    this.targetobj = window.event ? event.srcElement: e.target;
    if (this.targetobj.className == "draggable")
       {       this.dragapproved = 1;
        if (isNaN(parseInt(this.targetobj.style.left)))
           {this.targetobj.style.left = 0;
           }
        if (isNaN(parseInt(this.targetobj.style.top)))
           {this.targetobj.style.top = 0;
           }
        this.offsetx = parseInt(this.targetobj.style.left);
        this.offsety = parseInt(this.targetobj.style.top);
        this.x = a.clientX;
        this.y = a.clientY;
        if (a.preventDefault) a.preventDefault();
       
        document.onmousemove = dragobject.moveit;
       }
   }
, moveit: function(e)
   {var a = window.event ? window.event: e;
    if (this.dragapproved == 1)
       {this.targetobj.style.left = this.offsetx + a.clientX - this.x + "px";
        this.targetobj.style.top = this.offsety + a.clientY - this.y + "px";
        return false;
       }
   }
};
dragobject.initialize();

function ftoggle(id) //I added this myself...
   {document.getElementById(id).style.display = "";
    if (document.getElementById(id).style.visibility == "hidden")
       {document.getElementById('icon').style.display = "none";
        document.getElementById(id).style.visibility = "";
       }
    else 
       {document.getElementById(id).style.visibility = "hidden";
        document.getElementById('icon').style.display = "";
       }
   }

Now an html page with the following code:

HTML Code:

<style type="text/css">
#player {
background: url('m.png') no-repeat -1px 0;
cursor:move;
position:relative;
z-index:100;
height:250px;
width:192px;
}
#f {
height:260px;
position:absolute;
top:26px;
}
#c {
position:absolute;
right:7px;
top:7px;
}
</style>
<div id="player" style="display:none; visibility:hidden;" class="draggable">
<div id="c"><img style="cursor:pointer" src="min.png" onclick="ftoggle('player')"/></div>
<div id="f">
<iframe scrolling="no" frameborder="0" style="height:2580px; width:200px;" src="player/index.html"></iframe>
</div>
</div>
<div id="icon">
<a onclick="ftoggle('player')">click</a>
</div>

Now everything works fine as intended:On clicking the '<a onclick="ftoggle('player')">click</a>' , the visibility of the layers: "icon" and "player" toggles and the layer player is draggable and works smoothly.
But the problem begins when i add an iframe to the body, on doing so, the script slows terribly on firefox 3.6 and google chrome , but works well on ie.
here's the iframe code that i added:

HTML Code:

<div style="position:absolute; top:0px;width:100%;height:100%; z-index:0;">
<iframe id="frame" src="websiteurl" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" class="c1" name="frame" ></iframe>
</div>

Can someone help me modify the script so that it uses less memory load, and works smoothly?
(I have 1 gb of RAM and am not experiencing any other speed troubles)
- I am using the IM script from fleaim.com and the script used to drag the IM box in that page works fine even with iframes.
So it would be even fine if someone can get me some script like that since For some reason or the other I cant figure out how that one works!
Thanx in advance.

**kbjradmin** · 03-15-2010 01:34 AM

would it be possible to see a live site?

**Teensweb** · 03-15-2010 07:13 AM

yeah, see this.

**Teensweb** · 03-17-2010 06:46 AM

Can someone help me out in this?

**Teensweb** · 03-18-2010 07:44 AM

I somewhat changed the javascript and ended up with this:
The html:

HTML Code:

<!DOCTYPE html PUBLIC"-// W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">body{margin:0px;overflow:hidden;}iframe.c1{position:absolute;top:0px;z-index:0;overflow:visible;height:100%;width:100%}
    </style>
    <title>  </title>
    <style type="text/css">#player{position:absolute;z-index:100;height:250px;width:192px;}#f{position:absolute;height:249px;width:192px;left:1px;z-index:100;top:26px;}#c{position:absolute;z-index:110;height:250px;width:192px;cursor:move;}
    </style>
  </head>
  <iframe id="frame" src="http://blog.cyberflare.co.cc/index.php" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" class="c1" name="frame">
  </iframe>
  <div id="player" style="display:none;visibility:hidden;top:0;left:0">
    <div onmousedown="dragOBJ(document.getElementById('player'),event);fhide('hidden');return false" onmouseup="fhide('')" id="c">
      <img alt="" src="m.png">
      <img alt="" style="position:absolute;right:7px;top:7px;z-index:100;cursor:pointer" src="min.png" onclick="ftoggle('player')">
    </div>
    <iframe id="f" scrolling="no" frameborder="0" src="http://google.com">
    </iframe>
  </div>
</html>

and the javascript:

HTML Code:

$(v);
   {return (document.getElementById(v));
   }

function agent(v)
   {return (Math.max(navigator.userAgent.toLowerCase().indexOf(v), 0));
   }

function xy(e, v)
   {return (v ? (agent('msie') ? event.screenY + document.body.scrollTop: e.pageY): (agent('msie') ? event.screenX + 
      document.body.scrollTop: e.pageX));
   }

function dragOBJ(d, e)
   {
   function drag(e)
       {if ( ! stop)
           {d.style.top = (tX = xy(e, 1) + oY - eY + 'px');
            d.style.left = (tY = xy(e) + oX - eX + 'px');
           }
        return false;
       }
    var oX = parseInt(d.style.left), oY = parseInt(d.style.top), eX = xy(e), eY = xy(e, 1), tX, tY, stop;
    document.onmousemove = drag;
   
    document.onmouseup = function()
       {stop = 1;
        document.onmousemove = '';
        document.onmouseup = '';
       };
   }

function ftoggle(id)
   {document.getElementById(id).style.display = "";
    if (document.getElementById(id).style.visibility == "hidden")
       {document.getElementById(id).style.visibility = "";
       }
    else document.getElementById(id).style.visibility = "hidden";
   }

function fhide(s)
   {document.getElementById('f').style.visibility = s;
   }

Now this speeded up things a lot in google chrome and it works well, but with firefox it's still the same, can anyone help?

**Teensweb** · 03-18-2010 08:09 AM

hey, You wont believe this! I just found out that it happens only if the iframe links to my page! If you give something like google.com as the source(for the background iframe), it just works fine. i dunno if I am going crazy, can someone check it out here?

**farscapeone** · 03-18-2010 02:02 PM

I use jQuery and jQuery UI for that kind of stuff. You should definitely look at it.

**Teensweb** · 03-19-2010 06:46 AM

But i don't need the entire functionalities of jquery, and including jquery and the ui for just that would be just make my site bigger...

**Teensweb** · 03-19-2010 06:47 AM

Can someone at-least tell me the cause of the problem?
('coz I'm not so experienced with js)

**farscapeone** · 03-19-2010 08:06 PM

jQuery-min is 56KB na you can use some other <20KB plugin to do what you need. I don't think that's too big considering that jQuery code is much smaller than plain JavaScript (like they say "Write Less, Do More") and that you will end up with less code overall. Not to mention how much easier it is to work with it instead of plain JavaScript.

56KB is the price I'm alway ready to pay when it comes to jQuery.

Off-topic:
And please don't double post. It's against the rules of this forum. Use Edit button instead.

Thread: Help with draggable layers javascript

LinkBack

Thread Tools

Display

Help with draggable layers javascript

Re: Help with draggable layers javascript

Re: Help with draggable layers javascript

Re: Help with draggable layers javascript

Re: Help with draggable layers javascript

Re: Help with draggable layers javascript

Re: Help with draggable layers javascript

Re: Help with draggable layers javascript

Re: Help with draggable layers javascript

Re: Help with draggable layers javascript

Similar Threads

Need some javascript help

CSS or Javascript?

javascript and external javascript files problem

My Draggable Divs Script

Blending layers together

Posting Permissions