Currently Browsing: JavaScript

“eXtplorer” a cool PHP- and JavaScript- based File Manager

Posted by admin in JavaScript, ajax, php on 07 7th, 2008 | Comments

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/

Simple Drag`n Drop example (part 2)

Posted by admin in JavaScript on 03 27th, 2008 | Comments

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…

Simple JavaScript drag`n drop

Posted by admin in JavaScript on 03 22nd, 2008 | Comments

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.