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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with drag and drop links

    I am creating a website that runs an iFrame with website displayed in it. On that page, in the frame, there is a simple href hyperlink. I have a text element next to the iFrame that is acting as an address bar. I want to be able to drag the link from the frame to the address bar and ondrop have the iframe redirect to the dragged link url. Here is the code I have
    Code:
    <html>
    <head>
    <style>
    #NetFrame {
    border:2px solid #0A9;
    height:650px;
    width:75%;
    Position: absolute;
    top:2%;
    left:25%;
    
    }
    #url {
    width:25%;
    height:650px;
    }
    </style>
    <script type="text/javascript">
    function getUrl() {
    var source = document.getElementById('url').value;
    loadUrl(source);
    }
    function loadUrl(source) {
    var showUrl = document.getElementById('NetFrame');
    
    NetFrame.src = source;
    
    document.getElementById('url').value="";
    }
    </script>
    </head>
    <body>
    <form>
    <input type="text" id="url" onDragEnd="getUrl()"/>
    
    </form>
    <iframe src="link1.html" id="NetFrame"> </iframe>
    </body>
    </html>
    The iFrame is called NetFrame and the Text element is url. I have not coded in 6 years and am stuck here. Please Help, and be specific you are explaining to an absolute novice.

  • #2
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Bump

    70 reads and no replies?

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,774
    Thanks
    55
    Thanked 518 Times in 515 Posts
    well, we like to ponder a little sometimes

    firstly, onDragEnd applies to the element getting dragged, not the destination, so the links in your iframe document should look like this:
    Code:
    <a href="blahblah.htm" onDragEnd="parent.loadUrl(this.href)">blah</a>
    next, it seems that your parent page code can be simplified, like this:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #NetFrame {
    border:2px solid #0A9;
    height:650px;
    width:75%;
    Position: absolute;
    top:2%;
    left:25%;
    
    }
    #url {
    width:25%;
    height:650px;
    }
    </style>
    
    </head>
    <body>
    <form>
    <input type="text" id="url"/>
    </form>
    <iframe src="link1.html" id="NetFrame"> </iframe>
    <script type="text/javascript">
    function loadUrl(source) {
    document.getElementById('NetFrame').src = source;
    document.getElementById('url').value="";
    }
    </script>
    </body>
    </html>
    (tested in firefox, but I suspect there may be cross-browser issues... you should check)

    hope that helps

  • Users who have thanked xelawho for this post:

    KineticSixx (01-25-2012)

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,774
    Thanks
    55
    Thanked 518 Times in 515 Posts
    ... although it occurs to me that if you want to check that the elelemt did in fact get dragged into the text input you should be doing this:

    Code:
    <a href="blahblah.htm" ondragend="parent.loadUrl()">blah</a>
    and
    Code:
    function loadUrl() {
    var source = document.getElementById('url').value;
    if(source!=""){
    document.getElementById('NetFrame').src = source;
    document.getElementById('url').value="";
    	}
    }

  • Users who have thanked xelawho for this post:

    KineticSixx (01-25-2012)


  •  

    Posting Permissions

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