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.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't drag pop-up div

    Hi All,

    I'm new to the CF forums and also to JavaScript. Trying to get a pop-up div to be draggable, but it doesn't seem to be working. Can someone help me out? I'd be very grateful!

    JavaScript I'm using:
    Code:
    //used for dragging div
    function agent(v) 
    { 
    return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); 
    }
    function xy(e,v) 
    { 
    return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+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'); 
    } 
    }
    
    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=''; 
    };
    }
    
    //used for pop-up div
    function pop(div) 
    {
    document.getElementById(div).style.display='block';
    return false
    }
    function hide(div) 
    {
    document.getElementById(div).style.display='none';
    return false
    }
    Also, here is the HTML:
    Code:
    <a href="#" onclick="return pop('myDiv2')">Pop-up div #2</a> - Hidden div shows upon clicking this link, but it won't drag
    
    <div class="bubble" onmousedown="dragOBJ(this,event); return false;"> 
       <div id="myDiv2" class="parentDisable"> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       <p><a href="#" onClick="return hide('myDiv2')">Close [X]</a></p> 
       </div> 
    </div>
    And the CSS:
    Code:
    .parentDisable { 
    position:absolute;
    margin:120px;
    padding:20px;
    width:400px;
    display:none;
    z-index:3;
    background-color:#DEDEDE;
    border:1px solid #DEDEDE;
    border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
    }
    
    .bubble { position:fixed; width:400px; top:150px; left:250px; cursor:move; }

  • #2
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anybody?


  •  

    Posting Permissions

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