Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Draggable toolbar steals focus?

    Hi,

    I'm implementing a draggable toolbar for a web page, using a positioned div layer. The problem is that when I click on the toolbar to move it, the input field I'm editing loses focus. Is there a way to move the thing using onmousedown and onmouseup and still not lose focus of the control active at the moment of the click?

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi dinu, Welcome to Codingforums!

    You might try

    toolbarElement.onfocus = function() { return false; };

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Um, I don't see how that might work, let me be more specific: I have a toolbar in a DIV with a draggable region that responds to onmousedown and onmouseup. problem is that when I click on that region to move the toolbar, input fields on the page lose focus, which is totally unwanted. Since it's an image, it doesn't take focus or have an onfocus event, it's just that I'm clicking outside the active input and that takes away focus.

  • #4
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Hey, try running this onload:
    Code:
    var x = document.getElementsByTagName("input");
    for(var i=0;i<x.length;i++)
    x[i].onclick=function(){focusedObj=this.name;};
    focusedObj is a global variable and then whenever you drag the toolbar and lose the focus of an obj, just do:
    Code:
    focusedObj.focus();
    Last edited by BarrMan; 02-24-2007 at 02:11 PM.

  • #5
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yea, that might work, with a little tweaking. Thought there was a more standard way to do this. Now I have another problem: When dragging the toolbar, if I move the mouse faster than the toolbar position updates, I get IE selecting portions of the page (such as doing a regular click-n-drag). Any idea how to fix this?

  • #6
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    I'm not really sure what the code looks like so I can't know what methods you've used that might cause this.
    If you post some of your code I might be able to.

  • #7
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <div style="position:absolute; left:0px; top:0px; display:inline; width:auto" id="edit_div">
    <table cellspacing="0" cellpadding="0" border="0" style="width:auto">
    <tr height="23" id="edit_bar">
    <td width="23" height="23"><img src="Templates/Cpage/default/en/images/edit_tl.gif"></td>
    <td width="100%">
    <table cellspacing="0" cellpadding="0" border="0" width="100%" height="23">
    <tr height="23">
    <td width="50%" height="23" style="background:url(Templates/Cpage/default/en/images/edit_bar.gif)">&nbsp;</td>
    <td width="38" height="23"><img src="Templates/Cpage/default/en/images/edit_title.gif"></td>
    <td width="50%" height="23" style="background:url(Templates/Cpage/default/en/images/edit_bar.gif)">&nbsp;</td>
    </tr>
    </table>
    </td>
    <td width="24" height="23"><img src="Templates/Cpage/default/en/images/edit_tr.gif"></td>
    </tr>
    <tr>
    <td width="23" style="background:url(Templates/Cpage/default/en/images/edit_l.gif)"></td>
    <td style="background-color:#f7fafd">
    <div id="smartEditorToolbarArea"></div>
    </td>
    <td width="24" style="background:url(Templates/Cpage/default/en/images/edit_r.gif)"></td>
    </tr>
    <tr height="19">
    <td width="23" height="19"><img src="Templates/Cpage/default/en/images/edit_bl.gif"></td>
    <td width="100%" height="19" style="background:url(Templates/Cpage/default/en/images/edit_b.gif)"></td>
    <td width="24" height="19"><img src="Templates/Cpage/default/en/images/edit_br.gif"></td>
    </tr>
    </table>
    </div>
    <script language="javascript">
    //
    //
    //

    function MouseDown(e)
    {
    if (isMozilla) {
    objDiv = document.getElementById('edit_div');
    X=e.layerX;
    Y=e.layerY;
    return false;
    }
    else {
    objDiv = document.getElementById('edit_div');
    X=event.screenX;
    Y=event.screenY;
    }
    }


    //
    //
    //
    function MouseMove(e)
    {
    if (objDiv) {
    if (isMozilla) {
    objDiv.style.top = (e.pageY-Y) + 'px';
    objDiv.style.left = (e.pageX-X) + 'px';
    return false;
    }
    else
    {
    objDiv.style.left = (event.screenX-X + objDiv.offsetLeft)+'px';
    objDiv.style.top = (event.screenY-Y + objDiv.offsetTop)+'px';
    X=event.screenX;
    Y=event.screenY;
    return false;
    }
    }
    }

    //
    //
    //

    function MouseUp(e){
    objDiv=null;
    }


    //
    //
    //
    var isMozilla = (document.all) ? 0 : 1;

    if (isMozilla)
    {
    document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
    }

    var objDiv=null;
    var X=0;
    var Y=0;
    document.getElementById('edit_bar').onmousedown = MouseDown;
    document.onmousemove = MouseMove;
    document.onmouseup = MouseUp;


    </script>

  • #8
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    I tried running the script and it didn't select anything when I moved the mouse very quickly.

  • #9
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It happens when the contents of the toolbar are large and updating doesn't happen instantly. In this case, the mouse will hover over the document and select what regions it hovers onto.

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your listeners need to cancel the default action. For reference: xPreventDefault, xEnableDrag.

  • #11
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's no good. Actually if you go to http://cross-browser.com/x/examples/drag1.php and drag the windows around in a fury, the background document will get selected.

  • #12
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm. For me, no text selection in Opera nor FF. There was text selection in IE, but only after dragging across the adsense iframe.

    At any rate, canceling the default action (and maybe even stopping propagation) was just a suggestion - you don't have to try it.

  • #13
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried it, but in IE it's messy as hell. I think I'll never get this thing going.

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a simple fix (since you do not care if form elements lose focus during dragging action):
    Intercept onblur event.
    In the function that processes onblur: if objDiv in not null (you are dragging between mousedown and mouseup events) save the onblur target (the element that just lost focus) in a global variable
    In your mouseup event, set focus back to the element that lost it during dragging action
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #15
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Trying to prevent text selection while dragging has always been difficult.

    If you are only having a problem in IE then try canceling the default action in an ondragstart event listener (IE specific).

    Also, Vladdy has some great ideas.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •