Tarek Mahmud Apu » JavaScript http://www.apueee.com javascript, php, flash, engineer, electrical, electronic, xul, firefox, mysql, matlab, c, web, web developer, Sun, 21 Jun 2009 02:35:14 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 “eXtplorer” a cool PHP- and JavaScript- based File Manager http://www.apueee.com/2008/07/07/extplore-a-cool-php-and-javascript-based-file-manager/ http://www.apueee.com/2008/07/07/extplore-a-cool-php-and-javascript-based-file-manager/#comments Mon, 07 Jul 2008 18:03:18 +0000 admin http://www.apueee.com/2008/07/07/extplore-a-cool-php-and-javascript-based-file-manager/ I saw many ajax or javascript based work but i really became fan of “eXtplore”.Its not only a file manager for local files but also a web-based ftp application.

Its cool interface and simple animations are awesome. I am pleased with its amazing Features. No doubt its really brilliant , ausum!!!!

eXtplore

Features:

  • browse directories & files on the server and
  • edit, copy, move, delete files,
  • search, upload and download files,
  • create and extract archives,
  • create new files and directories,
  • change file permissions (chmod) and much more..
  • Create and Extract Archives (ZIP, Tar, Tar/GZ, Tar/BZ)
  • User Management with different permission levels like “View only” or “Edit” and “Admin”
  • Available as a component for Joomla! and Mambo.

For more information please visit : http://extplorer.sourceforge.net/


]]> http://www.apueee.com/2008/07/07/extplore-a-cool-php-and-javascript-based-file-manager/feed/ 2 Simple Drag`n Drop example (part 2) http://www.apueee.com/2008/03/27/simple-dragn-drop-example-part-2/ http://www.apueee.com/2008/03/27/simple-dragn-drop-example-part-2/#comments Thu, 27 Mar 2008 12:42:12 +0000 admin http://www.apueee.com/?p=7   After publishing Simple JavaScript drag`n drop i have write new function dragObj(element, target).  This object has two parameters.

1. element : The object on which the mouse events work.
2. target : The object which needs to Drag…

and its very simple to declare new draggable object…

new dragObj(draggableObject);
new dragObj(dragHandlerObject, draggableObject);

is it confusing? 

Here at the first declaration i used only one parameter.. that means element and target are same object. if it needs to drag a object with a drag handler then its need to give two parameter. the drag handler as an element and the target object as target… The following example will clear all the confusion..:)

http://www.apueee.com/tma_examples/dragit2_tma.htm

Source Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tarek Mahmud Apu : Sample Drag`n Drog Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
    .widget {
        height:200px;
        width:300px;
        position:absolute;
        border:1px outset #006666;
        border-right:1px inset #006666;
        border-bottom:1px inset #006666;
        background:#E0E0E0;
    }
    #dragit {
        height:20px;
        position:relative;
        background: #006666;
        cursor:move;
    }
    #box1 {
        height:200px;
        width:300px;
        position:absolute;
        border:1px solid red;
        background:#E0E0E0;
        cursor:move;
    }
</style>
<script type="text/javascript">
    
    function dragObj(element, target)
    {
        var objToDrag = (target) ? target : element;
        var dx, dy;
        
        // stop dragging and remove event
        function enddrag()
        {
            document.onmouseup = null;
            document.onmousemove = null;
        }
        
        //drag
        function drag(e)
        {
            e = e || window.event;
            
            objToDrag.style.top = (e.clientY - dy) + 'px';
            objToDrag.style.left = (e.clientX - dx) + 'px';
        }
        
        // initiate the drag
        function initDrag(e)
        {
            e = e || window.event;
            
            dx = Math.abs(parseInt(objToDrag.style.left) - e.clientX);
            dy = Math.abs(parseInt(objToDrag.style.top) - e.clientY);
        
            document.onmouseup = enddrag;
            document.onmousemove = drag;
            return false;
          }
 
          element.onmousedown = initDrag;
    }
 
    window.onload = function()
    {
      new dragObj(document.getElementById('box1'));
      new dragObj(document.getElementById('dragit'), document.getElementById('dragit').parentNode);
    }
</script>
</head>
    <body>
        <h2 align="center" >Simple Drag and Drop Examples</h2>
        <h6 align="center"><a href="http://www.apueee.com">www.apueee.com</a></h6>
        <div id="box1" style="left:100px;top:100px;"> Drag Me </div>
        <div class="widget" style="left:200px;top:200px;">
            <div id="dragit"> Drag it </div>
            <div style=" text-align:center; padding-top:50px;position:relative;color:#000"> Lorem ipsam... ... </div>
        </div>
    </body>
</html>


So it’ll make easy to declare drag`n drop html element…

]]> http://www.apueee.com/2008/03/27/simple-dragn-drop-example-part-2/feed/ 9 Simple JavaScript drag`n drop http://www.apueee.com/2008/03/22/simple-javascript-dragn-drop/ http://www.apueee.com/2008/03/22/simple-javascript-dragn-drop/#comments Sun, 23 Mar 2008 07:02:13 +0000 admin http://www.apueee.com/?p=5    JavaScript drag`n drop is very simple thing. Last week some juniors ask me how they can drag a div element. Then I thought to write this simple post..

   To Drag a div it needs 3 mouse events onmousedown, onmousemove and onmouseup. These three events can do all the job.

Live example here at

http://www.apueee.com/tma_examples/dragit_tma.htm

Javascript Code Here :

<script type="text/javascript">
    //initiate variables
    var element;
    var DragNow = false;
    var dx=0;
    var dy=0;
    
    function initDrag(e)
    {    
        e = (e)? e : event;
        
        DragNow = true;
        
        dx = Math.abs(parseInt(element.style.left) - e.clientX);
        dy = Math.abs(parseInt(element.style.top) - e.clientY);
        
        //declare mousemove and mouseup event
        document.onmousemove = startDrag;
        document.onmouseup = stopDrag;
    }
 
    function stopDrag()
    {
        DragNow = false;
    }
    
    function startDrag(e)
    {
        e = (e)? e : event;
       
        if(DragNow)
        {
            element.style.top = (e.clientY - dy) + 'px';
            element.style.left = (e.clientX - dx) + 'px';
        }
    }
    
    window.onload = function()
    {
      //set the draggable element 
      element = document.getElementById(elementId); 
      
      //initiate mousedown event
      element.onmousedown = initDrag;
    }
</script>
 
Here the important thing is that the position of the element must 
be 'absolute'.
That's all about the drag`n drop.
]]> http://www.apueee.com/2008/03/22/simple-javascript-dragn-drop/feed/ 6