Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old November 25th, 2004, 03:14 AM
Registered User
 
Join Date: Nov 2004
Location: Highland Park, CA, USA.
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default Targeting main window from an iframe

First post. Hello, everyone.

I'd like to have users click on links in an inline frame that will change an image in the main window. Here's a preview of what I'm working on: http://pennington.cc/dcp/01_01.html.

I am trying to incorporate a "Javascript Image Gallery" as described on the A List Apart web site (http://www.alistapart.com/articles/imagegallery/) to do this, but I can't figure out how to modify it so that it passes the parameter from the iframe to the main window. Also, if someone has a better solution for doing this than that presented in the A List Apart article I'd be happy to take a look. Thanks.



  #2 (permalink)  
Old November 25th, 2004, 05:17 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

With client side script, assuming you just have one page with an inline frame, you first get a reference to the main window which is "top". You then get the image, the easiest way is if it has an id, "imgMain" for example, although you could use the document.images collection. You then pass the href of the full image. So in your iframe have an onclick on the small image:
Code:
<img src="myThumbImage1.jpg" onclick="showFullImage('myFullImage1.jpg');">
or if your fullimage is just the same image but with different height and width:
Code:
<img src="myThumbImage1.jpg" onclick="showFullImage(this.src);">
Then in you iframe script block:
Code:
function showFullImage(href)
{
  var imgFull = window.top.document.getElementById("imgMain");
  imgFull.src = href;
}



--

Joe (Microsoft MVP - XML)
  #3 (permalink)  
Old November 25th, 2004, 05:18 AM
Friend of Wrox
 
Join Date: Jul 2003
Location: , , United Kingdom.
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post
Default

Hi,

To reference the parent window, you can use window.parent. To use this, replace the line
Code:
document.getElementByID('placeholder').src = whichpic.href;
with
Code:
window.parent.document.getElementById('placeholder').src = whichpic.href;
n.b. document.getElementById not document.getElementByID

HTH,

Chris


  #4 (permalink)  
Old November 25th, 2004, 05:28 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hi Sushified3000

Here is the solution for your question.

let say this code is ** mainpage.html***


<script>
function parentFunction(imagename)
{

parobj1=document.getElementById("divid");
newimg=document.getElementById("myimg");
newimg.src=imagename
newimg.height="440"
newimg.width="440"

}
</script>
  <img src="images1.jpg" id="myimg" height=400 width=400 >


<iframe name="myiframe" src="iframe.html" width=500 height=50></iframe>


Then your Innner Frame "iframe.html" will be like this
<script>
function callParent(img_name)
{
window.parent.parentFunction(img_name)
}
</script>
<table><tr><td>
<a href="javascript:callParent('images1.jpg')">Image1 </a></td><td>
<a href="javascript:callParent('images2.jpg')">Image1 1</a></td><td>
<a href="javascript:callParent('images3.jpg')">Image1 11</a></td><td>
<a href="javascript:callParent('images4.jpg')">Image1 111</a></td><td>
<a href="javascript:callParent('images5.jpg')">Image1 11111</a></td><td>
</tr></table>

Another method is use to store Images in the Array then use JavaScript Function to call and show on your given Area
Hope This wiill help You.
Cheers :)


vinod
  #5 (permalink)  
Old November 25th, 2004, 11:30 AM
Registered User
 
Join Date: Nov 2004
Location: Highland Park, CA, USA.
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Quote:
quote:Originally posted by vinod_yadav1919
 Hi Sushified3000

Here is the solution for your question.
Thank you.

  #6 (permalink)  
Old November 25th, 2004, 11:38 AM
Registered User
 
Join Date: Nov 2004
Location: Highland Park, CA, USA.
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Actually, one question: what is the purpose of the following line:

Quote:
quote:parobj1=document.getElementById("divid");
This variable is not referenced anywhere else in the script... ?

  #7 (permalink)  
Old November 25th, 2004, 11:51 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

I was going to ask but it seemed a bit churlish after he gave such a thorough answer :)

--

Joe (Microsoft MVP - XML)
  #8 (permalink)  
Old November 25th, 2004, 11:58 AM
Registered User
 
Join Date: Nov 2004
Location: Highland Park, CA, USA.
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

[quote]Originally posted by joefawcett
 I was going to ask but it seemed a bit churlish after he gave such a thorough answer /quote]

Well, being somewhat of a newb I just want to make sure I'm not missing anything. :) For all I know that could've been the linchpin holding the entire script together!

  #9 (permalink)  
Old November 25th, 2004, 02:38 PM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

You're right, it's not needed. Possibly a remnant from when the function did extra stuff.



--

Joe (Microsoft MVP - XML)
  #10 (permalink)  
Old November 26th, 2004, 11:55 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hi Sushifiend3000
I am really sorry when i was writing code for this demo.
Actually it's just extra stuff ,that is used for displaying in my JavaScript Game.
parobj1=document.getElementById("divid");
Offcourse u should remove that line
Cheers :)



vinod


Similar Threads
Thread Thread Starter Forum Replies Last Post
Resizing Main Access Window McDiddy Access VBA 0 January 5th, 2007 04:33 AM
iframe refresh scrolls main page down kdm260 ASP.NET 2.0 Professional 0 May 16th, 2006 02:06 PM
targeting external page in another page's IFRAME nancy HTML Code Clinic 1 March 30th, 2006 03:22 PM
close main window inside iframe crmpicco Javascript How-To 1 December 1st, 2005 12:54 PM
Passing value across iframe and pop-up window muklee Javascript 1 October 28th, 2004 04:44 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.