PDA

Click to See Complete Forum and Search --> : 2 Questions

Jenuine
12-05-2004, 10:23 AM
1. I've found an event (onDrop) that I think would be perfect for what I need to do, but I'm not sure how to write the code. I have a movable object. As soon as this object is moved to a certain location, I need a new window to open.

2. How can I make sure my movable object starts out in a certain location? (For example, I need this object (a movable airplane) to start out on top of another image (runway - stationary) everytime someone opens the window. In other words, these two images need to be in the same location.)


:confused: I'm new to this programming thing, and any specific information given, would be greatly appreciated.

Thank you!
7stud
12-05-2004, 10:33 AM
See this thread where you asked the same question and were given specific information and links providing further details:

http://www.webdeveloper.com/forum/showthread.php?s=&threadid=50630

I'm new to this programming thing
Then, how can you possibly expect to understand the language of programming and comprehend responses to your questions? I suggest you start at the beginning, and not try to jump in over your head:

http://www.amazon.com/exec/obidos/tg/detail/-/0072227907/qid=1102264278/sr=8-1/ref=sr_8_xs_ap_i1_xgl14/002-2617736-7336829?v=glance&s=books&n=507846

Otherwise, hire a web designer and pay them to design your website. Forums like this are to help people learn javascript, not to provide free website development.
JPnyc
12-05-2004, 10:55 AM
I'm glad someone else feels the same as I about this. I get a little perturbed when people come here looking for ready made scripts, and others here provide them. I mean, is that what most of us do for money? Isn't that sort of cutting our own throats?
Jenuine
12-05-2004, 11:05 AM
All I did was come here for a little friendly advice and help. Isn't that what this forum is here for? I didn't think I'd get chewed out. If I were getting paid for this project, I might consider hiring someone to help me, but it's for a class I'm in...no money involved...and unfortunately, they don't teach programming...we're just expected to know. I visited this site over a year ago, and the person who helped me then was really nice...and did I say HELPFUL?!? He worked with me...and if/when I had questions about something specific, he answered those questions. I do have some programming background, but I use it so rarely. I'm trying to learn, but my time is running out.
7stud
12-05-2004, 11:20 AM
I might consider hiring someone to help me, but it's for a class I'm in.

So, your cheating. Wonderful. :(
JPnyc
12-05-2004, 11:22 AM
Actually the "chewing out", if you consider it that, wasn't really directed at you, per se. It also wasn't what I would call a castigation.

If you're looking to learn JS, of course we'll help. But the 1st thing you should do is google a drag and drop script. That's the fastest way to achieve your goal.
Jenuine
12-05-2004, 11:26 AM
Since when did seeking help from another source become cheating?!?

I'm not asking for someone to write the code for me...just for help to get started in the right direction. All I'm asking for is guidance...I'll find the code myself...but I'm not sure what the terms or events are that I need to look for.
Jenuine
12-05-2004, 11:28 AM
Thank you, DUNSEL.
JPnyc
12-05-2004, 11:30 AM
You're welcome. THe reason I suggest googling a ready made script, is that drap and drop is a bit complex for a beginner, and someone here would really have to write it for you. But we can answer questions about the script and how to deploy it.
Jenuine
12-05-2004, 11:42 AM
Thanks again, DUNSEL. I have the drag and drop part written (http://imsinet.casa.siu.edu/jen_k/Showcase/Home.htm). I found the following script, and adapted it to my own needs. But is there a way to incorporate something that would open a link as soon as the object is dropped?

<html>

<head>
<title>Cool script that lets you drag and drop images around your page!</title>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
</head>

<body>

<?php include "../../head.php"; ?>
<!-- TWO STEPS TO INSTALL DRAG-N-DROP:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Randy Bennett (rbennett@thezone.net) -->
<!-- Web Site: http://home.thezone.net/~rbennett/sitemap.htm -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}

if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
// End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<div id="s" style="position:absolute;left:50;top:300;">
<img src=http://javafile.com/javascripts/imagefx/dragndrop1/spades.gif name="s">
</div>

<div id="d" style="position:absolute;left:50;top:350;">
<img src=http://javafile.com/javascripts/imagefx/dragndrop1/diamonds.gif name="d">
</div>

<div id="c" style="position:absolute;left:100;top:300;">
<img src=http://javafile.com/javascripts/imagefx/dragndrop1/clubs.gif name="c">
</div>

<div id="h" style="position:absolute;left:100;top:350;">
<img src=http://javafile.com/javascripts/imagefx/dragndrop1/hearts.gif name="h">
</div>

Just click and hold the 4 suit images to the left and then you can move them around the page!


<!-- Script Size: 1.99 KB -->

<p>Author: <a href="http://www.javascriptsource.com">The JavaScriptSource</a>&nbsp;&nbsp; <a
href="http://www.javafile.com/javascripts/imagefx/dragndrop1/dragndrop1.zip">Download the Script</a></p>
</body>
</html>
7stud
12-05-2004, 11:49 AM
I found the following script, and adapted it to my own needs.
:D

So, you copied someone elses script, and now you want someone to modify it for you, so you can complete a class assignment. In most of the classes I've been in, that's called plagiarism. :(
Jenuine
12-05-2004, 11:58 AM
I didn't use the entire thing, and it's not word-for-word...NO, I don't think it's called plagiarism. Besides, isn't that why those scripts are out there on free script sites??? So you can take them and adapt them to your own needs (like I did)?!? Had I copied it exactly, then yes...it would be plagiarism. Oh..and not to worry...I'm going to give the site credit.

What is your problem 7stud?!?
JPnyc
12-05-2004, 12:03 PM
Sure, just add window.open() to the very end of the script.Here's (http://www.mozilla.org/docs/dom/domref/dom_window_ref76.html) a description of the parameters it accepts.
Jenuine
12-05-2004, 12:22 PM
I looked at the site you referenced, and I understand how to open just one link, but each location (module) is linked to a different page. How do I use window.open() in the following way: When the plane is dropped at location #1, I need to open link #1; when dropped to location #2, open link #2, etc.?

Awaiting your reply...(in the meantime, I'm still searching the web for more answers)
JPnyc
12-05-2004, 01:06 PM
That's way more complex. You'll have to test for values of x and y, and test for a range of em. Something like this:

if(x > 0 && x < 200)&&(y > 0 && y < 200) {
//code to execute here
}

You'll have to do that for each section of the screen, and put the appropriate window location.
Jenuine
12-05-2004, 01:37 PM
Thank you so much DUNSEL!!

I'm assuming then that I would need a series of "if" statements, one after the other for all 4 locations?

In that instance, would I still need the window.open()? Also, do I need to add an onDrop event somewhere to get the window to open when the plane is dropped?
JPnyc
12-05-2004, 01:57 PM
Use if and else if, or switch statements, depending on how many sections of the window there are. Either is correct, it's just a neatness and ease thing.

if

else if

else if

else

yes, you need window.open() and place that statement with the correct href after each of those tests.
JPnyc
12-05-2004, 02:00 PM
Oh, and the ondrop event of the body tag is what will trigger the function. You can either add the code to the end of what you have already, or, create a new function and just call it from the end of the drag drop script.
Jenuine
12-05-2004, 04:00 PM
DUNSEL, I figured the x,y coordinates and came up with the following and added it to the end of the script that I already had:

if(x >14 && x < 126)&&(y > 156 && y < 231) {
//object.onDrop=window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/booking.htm', 'winname', 'fullscreen');
}
else if(x >630 && x < 751)&&(y > 156 && y < 231) {
//object.onDrop=window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/items.htm', 'winname', 'fullscreen');
}
else if(x >14 && x < 126)&&(y > 394 && y < 466) {
//object.onDrop="window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/expect.htm', 'winname', 'fullscreen')";
}
else(x >630 && x < 751)&&(y > 394 && y < 466) {
//object.onDrop="window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/technology.htm', 'winname', 'fullscreen')";
}


However, when I try to run it, I get a syntax error? Could you please tell me what I'm doing wrong?
JPnyc
12-05-2004, 04:05 PM
if(x >14 && x < 126)&&(y > 156 && y < 231) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/booking.htm', 'winname', 'fullscreen');
}
else if(x >630 && x < 751)&&(y > 156 && y < 231) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/items.htm', 'winname', 'fullscreen');
}
else if(x >14 && x < 126)&&(y > 394 && y < 466) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/expect.htm', 'winname', 'fullscreen');
}
else if(x >630 && x < 751)&&(y > 394 && y < 466) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/technology.htm', 'winname', 'fullscreen');
}

The event handler is already in the body tag, or should be. You don't need to enter it again. If this doesn't work, try putting it in a separate function, named whatever you like, and call it from the 1st one like this:

functionName();
JPnyc
12-05-2004, 04:16 PM
Oh, 1 more thing. In looking back over the drag and drop you found, I notice that they use X,Y, not x, y. JS is case sensitive. Also, you'd be better off trying to get that code into the function you already have, or else you'd have to make X and Y global variables (global=declared outside of any function).
Jenuine
12-05-2004, 05:11 PM
I obviously don't have onDrop in my body tag...and now with the way things are, my plane doesn't move. Here's what all of what I have so far. What am I doing wrong?? Where would the event handler go? And, could you give me an example of how to write the code? (please) I'm trying and learning at the same time...I really am.

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv="Content-Language" content="en-us">

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.X;
Y=e.Y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetx;
Y=event.offsetY;
}
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pagex-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}

if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;


if(x >14 && x < 126)&&(y > 156 && y < 231) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/booking.htm', 'winname', 'fullscreen');
}
else if(x >630 && x < 751)&&(y > 156 && y < 231) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/items.htm', 'winname', 'fullscreen');
}
else if(x >14 && x < 126)&&(y > 394 && y < 466) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/expect.htm', 'winname', 'fullscreen');
}
else if(x >630 && x < 751)&&(y > 394 && y < 466) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/technology.htm', 'winname', 'fullscreen');
}
// End -->
</script>

</head>

<body background="cloud-bg.jpg" style="background-attachment: fixed">

<p align="center"><b><font face="Monotype Corsiva" size="7">
<img border="0" src="plane_takes_off.gif" width="582" height="50"></font></b></p>
<p align="center"><b><font face="Monotype Corsiva" size="7">Preparing for Flight</font></b></p>

<div id="s" style="position: absolute; top: 315px; left: 375px;">
<img border="0" src="airplane-transparent.gif" name="s" width="35" height="74">
</div>

<table border="0" width="100%" id="table1">

<tr>
<td width="123" valign="top" align="center">
<a href="booking.htm">
<img border="0" src="st-petersburg-airport-5.gif" width="117" height="69" align="left"></a><p>&nbsp;</p>
<p>&nbsp;</p>
<address align="center">
<span style="font-style: normal"><b>Booking your trip</b></span></address>
</td>
<td>&nbsp;</td>
<td valign="bottom" align="center">
<address align="center"><span style="font-style: normal"><b>Click and drag the airplane off the </b>
</span>
</address>
<address align="center"><span style="font-style: normal"><b>runway to each learning module.</b></span></address>
</td>
<td>&nbsp;</td>
<td width="123" align="center" valign="top">
<a href="items.htm">
<img border="0" src="st-petersburg-airport-5.gif" width="117" height="69" align="right"></a><p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center"><b>What can I take with me?</b></td>
</tr>
<tr>
<td width="123" height="114">&nbsp;</td>
<td height="114">&nbsp;</td>
<td align="center" height="114">
<p align="center">
<img border="0" src="runway.jpg" style="position: absolute; top: 280; left: 310; width: 137px; height: 111px; z-index: -7"></td>
<td height="114">&nbsp;</td>
<td width="123" height="114">&nbsp;</td>
</tr>
<tr>
<td width="123" align="center" valign="top">
<a href="expect.htm">
<img border="0" src="st-petersburg-airport-5.gif" width="117" height="69" align="left"></a><p>&nbsp;</p>
<p>&nbsp;</p>
<address align="center">
<span style="font-style: normal"><b>What to expect at the airport</b></span></address>
</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td width="123" align="center" valign="top">
<a href="technology.htm">
<img border="0" src="st-petersburg-airport-5.gif" width="117" height="69" align="right"></a><p>&nbsp;</p>
<p>&nbsp;</p>
<address align="center">
<span style="font-style: normal"><b>New On-Board Technology</b></span></address>
</td>
</tr>
</table>

</body>
JPnyc
12-05-2004, 05:32 PM
Make it:

if(X >14 && X < 126)&&(Y > 156 && Y < 231) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/booking.htm', 'winname', 'fullscreen');
}
else if(X >630 && X < 751)&&(Y > 156 && Y < 231) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/items.htm', 'winname', 'fullscreen');
}
else if(X >14 && X < 126)&&(Y > 394 && Y < 466) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/expect.htm', 'winname', 'fullscreen');
}
else if(X >630 && X < 751)&&(Y > 394 && Y < 466) {
window.open('http://imsinet.casa.siu.edu/jen_k/Showcase/technology.htm', 'winname', 'fullscreen');
}

If that doesn't work, you're going to have a problem requiring modification to that script. It would mean splitting into 2 functions, which means declaring X and Y outside the drag function.
Jenuine
12-05-2004, 05:54 PM
The only difference I see is the capatilization of the X's and Y's...I had actually changed that before, and it didn't work. I guess I copied the wrong thing. Besides that, am I missing anything else that you changed.

You had mentioned before:

Oh, and the ondrop event of the body tag is what will trigger the function. You can either add the code to the end of what you have already, or, create a new function and just call it from the end of the drag drop script.

As you can see from my previous post, I don't have an ondrop event, and I'm not sure how or where to incorporate one.

You also stated:

Also, you'd be better off trying to get that code into the function you already have,

How?
Jenuine
12-06-2004, 02:27 PM
Is it possible to combine windows.open() with onDrop?
JPnyc
12-06-2004, 02:36 PM
Any event handler should be able to trigger any function as long as the element in question HAS that event handler. THings are a bit busy at work now so I'm not able to check out the problem at present. Anyone else here willing to have a go?
Jenuine
12-06-2004, 02:40 PM
DUNSEL....I really want to thank you for all your help and "patience" with me. It's a shame not everyone on here is like you.
JPnyc
12-06-2004, 03:08 PM
No sweat. Anyone else care to pick this up?