JavaScript - Mouseclick (x,y Coords) Multiple Frames

Help!

I am trying to get a ball within an image and then send the x, y coordinates to paypal. I'm almost there but the BALL.GIF wont go into the picture. Can anyone help me do this? The second script (getting the coordinates works perfectly.... I just cant figure out how to get the ball in the picture!!)

Here's my code:

[code]
<script language="JavaScript">

function placeCrosshair(e) {
var ch = document.getElementById('ball');
var pic = document.getElementById('myImg');
ch.style.left = e.x + 11;
ch.style.top = e.y + 11;

</script>

<script language="JavaScript">

javascript&colonself.resizeTo(900,screen.availHeight);self.moveTo(40,0);

var d = document;

//Get the img X and Y positions with an onMouseOver event

function getCoor(imgId) {
x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("clickImage").offsetLeft;
y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("clickImage").offsetTop;

document.mypaypalform.item_name.value = "Ball position: x=" + x + "\ny=" + y;

//this section writes out the coordinates on the page.

var data = "<br><h3>Your selected ball position is: x =" + x + " and y =" + y + "</h3>";
if (mypaypalform.layers) {
mypaypalform.layers.cust.document.write(data);
mypaypalform.layers.cust.document.close();
}

else {
if (mypaypalform.all) {
cust.innerHTML = data;
}
}
}

</script>

<p></p>

<a href="#" onClick="placeCrosshair(event)>
<img src="ball.jpg" width="21" height="21" id="ball" />


<a href="#" onclick="getCoor('myImg')">
<img src="picture.jpg" alt="" border="0" height="600" width="850" name="myImg" ismap></a>


<br><br>

<h3>Click on the payment button to enter.</h3>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="mypaypalform">
<!-- Placeholder for dynamic form contents -->
<span name=cust id=cust style="position:relative;"></span>

<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="buy@buy.co.uk">
<input type="hidden" name="item_name" value="Game - ">
<input type="hidden" name="item_number" " value="1">
<input type="hidden" name="amount" value="0.50">
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-BuyNowBF">

<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_paynow_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">

<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Thank you
Al

i have a problem with this code when working in IE
it gives me 0,0 coords when i use iframe tag and -1,-1 when i use div tag but gives correct coords when using firefox


Code:

unction GetRealOffset(id)
{
	
	var elem = document.getElementById(id);
	var leftOffset = elem.offsetLeft;
	var topOffset = elem.offsetTop;
	var parent = elem.offsetParent;
	
        while(parent != document.body) 
	{
             leftOffset += parent.offsetLeft;
	     topOffset += parent.offsetTop;
            parent = parent.offsetParent;
	}
        var Offsets = new Object();
	Offsets.top = topOffset;
	Offsets.left = leftOffset;
	
        alert(Offsets.top + " " +Offsets.left)
	return Offsets;
}

i tried this code as well
Code:

function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}

but both r giving same value in IE
can u help me plz
thx in advance
Edit/Delete Message

Hi,

I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html.

I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress.

Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page.

Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover.

There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer.

Is this possible?

I have a web page with two frames, frame1 and frame2. I am trying to get the body tag of frame2 from frame1. I have declared two variables in javascript in frame1:

var mainFrameDoc = parent.frame2.document;
var mainFrameBody = mainFrameDoc.body;

When I try to utilize the variable mainFrameBody I get an error stating that it is null or undefined.

How can I get a handle to the body tag of frame2?

i have a simple frame that looks like this
http://i307.photobucket.com/albums/n...aker/help2.jpg

i have 3 pages (side.html, page1.html and page2.html) the above picture has side.html and page1.html loaded on default, what i want to do is whenever i click on the page 1 button, page1.html will load on the right side and when i click on page 2 button, page2.html will load

i cant figure out what the code for this is and googling for the solution isn't getting me anywhere

help please

Hi Friends.........

I have two frames in page and in top frame i have a menu....
some of the submenus are clipped because they hide below second frame as height of first frame is small...however i dont want to change height of frames....
So is there any way so that i could display rest of submenus which are being clipped over second frame......

Please help.....

What's Up?

OK, So I've been trying to add text to a <textarea> and text field tag inside of a frame via JavaScript, I did find a tutorial and using off-line html's it worked, But when I try to use a online frame, It doesn't work.

OK, So one html opens two frames which are.

Left.html
Code:

<HTML>
<HEAD>
<TITLE>JavaScript Example 13</TITLE>
</HEAD>
<BODY>
<INPUT type="button" value="Button" onClick="">
</FORM>
</BODY>
</HTML>

right.html
Code:

<form action="posting.php" method="post" name="post" onsubmit="return checkForm(this)">
<table width="100%" cellspacing="2" cellpadding="2" border="0">
<input class="post" type="text" value="" tabindex="2" style="width: 450px;" maxlength="60" size="45" name="subject"/>
<textarea onkeyup="storeCaret(this);" onclick="storeCaret(this);" onselect="storeCaret(this);" class="post" tabindex="3" style="width: 450px;" cols="35" rows="15" name="message"/></textarea>
<input type="submit" value="Submit" class="mainoption" name="post" tabindex="6" accesskey="s"/>

Anyone Know What To Do?

Thanks Bye.

I need to display a picture when it is clicked within various color mats and frames. Does anyone know the code for it? Thanks.

Hi,
I will appreciate if someone could help me with this Case Problem. For some reason that I don't understand, it seems to be working in Firefox, but not IE. Well, most of it is working.

The problem is to create a "Demo" which has three frames in rows. The first frame at the top is the title bar with "Submit Code", "show only code", "show only preview", and "show code and preview" buttons.

The middle frame has 2 textarea boxes. The html code goes in the left box, and the css styles go in the right box.

Once you enter any code in their respected boxes, and press "submit code", it should be rendered as a web page in the third frame below the boxes (which is just an empty document).

I have attached a screenshot of how it should look like, and I am posting my entire code below. Everything is working except for the rendering of the web page in the third frame. When I click on submit, I get no errors, nothing happens.

Any help or suggestions would be greatly appreciated.
Thank you.

Code:

function showPreview(){
  parent.document.getElementById("demo").rows="100,1,*";
}

function showCode(){
  parent.document.getElementById("demo").rows="100,*,1";
  parent.frames[1].document.getElementById("inputhtml").style.height="300px";
  parent.frames[2].document.getElementById("inputcss").style.height="300px";
}

function showBoth(){
  parent.document.getElementById("demo").rows="100,210,*";
  parent.frames[1].document.getElementById("inputhtml").style.height="150px";
  parent.frames[2].document.getElementById("inputcss").style.height="150px";
}

function sendCode(){
  var previewFrame=parent.frames[3];
  var htmlCode=parent.frames[1].document.getElementById("inputhtml").value;
  var cssCode=parent.frames[2].document.getElementById("inputcss").value;

  previewFrame.document.write("<html><head><title></title>");
  previewFrame.document.write("<style type='text/css'>"+cssCode+"</styles>");
  previewFrame.document.write("</head>");
  previewFrame.document.write("<body>"+htmlCode+"</body></html>");
  //previewFrame.document.close();
}
</script>
</head>

<body>
<form name="control" id="control" action="">

<h2 id="demotitle">Creating Web Pages</h2>
<p>
   <input type="button" value="Submit Code" onClick="sendCode()"/>
   <input type="button" value="Show Only Code" onClick="showCode()" />
   <input type="button" value="Show Only Preview" onClick="showPreview()"/>
   <input type="button" value="Show Code and Preview" onClick="showBoth()"/>
</p>
</form>
</body>
</html>

Hello, I'd need some help for scripting.
Here is what I need to do.

I got links in frameA which open pages in frameB.
Pages might be long to load, so when I click on the link, from frameA, I want to have the "wait" cursor until body of frameB loads, then return to "default" cursor in frameA.

I'd also want the cursor to be on "wait" in all my 4 frames during the load if possible.

I can't do it with a:active in CSS cause the cursor is stuck on "wait" when it's clicked even after page in frameB is loaded.

I searched hours in forums, tried lots of things and didn't fix my problem.

Would need help, thanks

I am using a JavaScript page that acts as a 'side-by-side' tester. It sends the same form in a POST to two different servers. One server is usually the production server the other a server under test.

The results returned by the servers are displayed in two frames aligned side by side on the page.

This page has worked in Firefox for several years. It worked up till early last week. Now, instead of populating the two frames, a new window opens up to display the response received from the Server.

Nothing has changed in the code so I'm thinking that possibly the latest release of Firefox (10.0.2) has somehow broken this page.

Here is the code that is envolved:
Code:

// setting up the frames
<frameset rows="400,*">
	<frame src="file:///C:/TestSanity/controller.htm" name="controller"/>
	<frameset cols="50%,50%">
		<frame src="leftFrameInitialContent.html"   name="leftWindow"  onload='parent.controller.stopLeftFrameClock() ;'/>
		<frame src="rightFrameInitialContent.html"  name="rightWindow" onload='parent.controller.stopRightFrameClock();'/>
	</frameset>
</frameset>

// sending a request whose response will be displayed in a frame
// pick the form that matches the current command
	formToSubmit = document.getElementById(command + "_FORM") ;

	// set the left frame destination url (action) from the value on the UI
	formToSubmit.setAttribute("action", document.getElementById('leftFrameBaseUrl').value );

	// send left window request
	formToSubmit.setAttribute("target", "leftWindow");
	formToSubmit.submit();

I don't have any idea what to look for as a cause. Any help and/or suggestions would be appreciated.

Thanks,
bkey

New assignment. This is the code i have below already supplied now.
not exactly correct yet but want to just get something to work from

i need to insert an embedded script element in head section of document,
purpose os to hide htmlcode and csscode frames to provide more screen space

to hide 2 frames i am to change value of rows attribute in demo frameset to "100,1,*"

id of the frameset object is demo




Code:

<title>Web Design Demo Control Buttons</title>
<link href="title.css" rel="stylesheet" type="text/css" />
<script src="demo.htm" type="text/javascript"></script>
<script type="text/javascript">

function showPreview(id,x,y) {

 object=document.getElementById(id);
 object.style.visibility="hidden";
 top.FrameName.rows = "100,1,*";
 }
 
 
</script>

just for your reference
here is the demo part

Code:

<html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 6
   Case Problem 3

   Web Design Demo

   Filename:         demo.htm
   Supporting files: css.htm, html.htm, title.htm
-->

<title>HTML Demo</title>
</head>

<frameset rows="100,210,*" id="demo" name="demo"> 
   <frame name="title" id="title" src="title.htm" scrolling="no" />
   <frameset cols="*,*">
      <frame name="code1" id="code1" src="html.htm" />
      <frame name="code2" id="code2" src="css.htm" />
   </frameset>
   <frame name="output" id="output" />
</frameset>

</html>

how does this look so far

just remember the top code is what i am working on

what should i change and add?

suggestions anyone?

I am having trouble I can target two iframe windows at the same time using a Text Link, However I have not found a way to do this using a roll over image. Here is the Two codes I know. Can anyone help me please....


(roll over image) In the <head>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://www.midwestfishing.org/pics/01_info_blue.gif";
staticImage1 = new Image();
staticImage1.src = "http://www.midwestfishing.org/pics/01_info_black.gif";
...........................................................
(button)

<a href="info.html" rel="nofollow" target="frame1" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;">
<img name="image1" src="http://www.midwestfishing.org/pics/01_info_black.gif" border=0></a>
...........................................................



(two frames at once text) In the <head>

<script language="javascript">
function loadTwo(iframe1URL, iframe2URL)
{
parent.frame1.location.href=iframe1URL
parent.frame2.location.href=iframe2URL
}
</script>
...........................................................
(button)

<a href="javascript:loadTwo('info.html','home.html')">info</a>



Thanks!

Hi,

I have a problem with my script displaying tabs (jquery tabs) in frames. When the scripts (not in frames) are viewed in the browser, the tabs are displayed correctly.
I created a script containing frames for existing scripts to be displayed in certain frames. Some scripts display fine in the frames, even some of those that contain tabs. While some may display correctly, I still get some scripts when viewed in the frames script that are not displaying the tabs correctly.
Can anyone please give me a solution to this problem.

Thank you.

Hi, im having a problem adding a frame busting killer that counteracts a frame killer script on sites so i can load them inside my iframes..

here is the code i use

<?php
$result = mysql_query("SELECT ru.id, ru.username, ru.owid FROM raidbar_users ru LEFT JOIN raidbar_groups rg ON ru.groupid = rg.id WHERE rg.id = '".(int)$_REQUEST['group']."'") or die(mysql_error());
$myRaidid = raidid();

if(isset($_GET['gm']))
{
echo '<FRAMESET rows="*,*,*,30" frameborder="0">' . "\n";
echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n";
$i = 0;
while($row = mysql_fetch_array($result))
{
if ($i == 2)
{
echo ' </FRAMESET>' . "\n";
echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n";
$i = 0;
}
echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/joinraid.php?raidid=' . $myRaidid . '&suid=' . $row['owid'] . '&serverid='.$siteConfig['userServer'].'">' . "\n";
$i++;
}
echo ' <FRAME src="">' . "\n";
echo ' </FRAMESET>' . "\n";
echo ' <FRAMESET frameborder="0" scrolling="no">' . "\n";
echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . $myRaidid . '">' . "\n";
echo ' </FRAMESET>' . "\n";
echo '</FRAMESET>' . "\n";
}
else
{
echo '<table cellspacing=1 cellpadding=1>' . "\n";
echo '<tr>' . "\n";
$i = 0;
while($row = mysql_fetch_array($result))
{
if ($i == 2)
{
echo '</tr>' . "\n";
echo '<tr>' . "\n";
$i = 0;
}
echo ' <td><iframe src="./acct.php?suid=' . $row['owid'] . '" width=450 height=225 scrolling=no frameborder=0></iframe>' . "\n";
$i++;
}
echo '</tr>' . "\n";
echo '<tr>' . "\n";
echo ' <td><iframe src=http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . raidid() . '&serverid='.$siteConfig['userServer'].' width=250 height=30 scrolling=no></iframe>' . "\n";
echo '</tr>' . "\n";
echo '</table>' . "\n";
}
?>

Now im told to use the following..
<script type="text/javascript">
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://server-which-responds-with-204.com'
}
}, 1)
</script>

or
var prevent_bust = 0;

// Event handler to catch execution of the busting script.
window.onbeforeunload = function() { prevent_bust++ };

// Continuously monitor whether busting script has fired.
setInterval(function() {
if (prevent_bust > 0) { // Yes: it has fired.
prevent_bust -= 2; // Avoid further action.
// Get a 'No Content' status which keeps us on the same page.
window.top.location = 'http://server-which-responds-with-204.com';
}
}, 1);


But the window.top.location i dont know how to incorporate that to work.

Can anyone help?