Member Avatar for Kinetic

I am creating a website that will display the web in an inline frame. I want to be able to drag links from the frame to a text element that acts as an address bar also located in the page. When the items are dragged and dropped into the address bar I want the frame to redirect to the dropped link "ondrop". I will be creating the links that will be dragged as well so if code needs to be added to the links to drag their source to the address. The code I have so far is problematic, I think it is either that the text element is not getting the event or that it is getting the event but when the function fires it does not have the url to load. Here is the code- please feel free to rip it up, I have not coded in 6 years and am very rusty.

<html>
<head>
<style>
#showUrl {
border:2px solid #0A9;
height:400px;
width:650px;
Position: absolute;
top:4%;
left:30%;
}
#url {
width:150px;
height:400px;
}
</style>
<script>
function loadUrl() {
var url = document.getElementById( 'url' ).value;
var showUrl = document.getElementById( 'showUrl' );
showUrl.src = url;
}
</script>
</head>
<body>
<iframe
<form>
<input type="text" id="url" ondragend("loadUrl())"/>
</form>
<iframe src="http://www.cnn.com" id="showUrl" ></iframe>
</body>
</html>

Please help there is a lot riding on this.

  • 2 Contributors
  • 1 Reply
  • 112 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by fobos
Member Avatar for fobos

you need to fix your input box code

function loadUrl() {
url = document.getElementById("url").value;
document.getElementById("showUrl").src = url;
}
<input type="text" id="url" ondragend="(loadUrl())">
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.