Iframe inside close - Is there a better way?

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 456,234 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,754 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 2042 | Replies: 5

•

Join Date: Nov 2007

Posts: 2

Reputation: RationalRabbit is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

RationalRabbit RationalRabbit is offline

Offline

Newbie Poster

Iframe inside close - Is there a better way?

Nov 13th, 2007

Hi!
My page has a list of products. Clicking on one of these product images brings up a detailed information iframe popup with interactive photos and text. The information is stored in a MySQL database, accessed with PHP.

I've struggled for hours to find the best way to open and close this iframe. The below method works, but is slow. I'm wondering if there is a way to do this that will pop up the iframe with its content faster.

Parent Page Head:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
      function OpenFrame(ID)
      {
         newID = ID;
         var makeframe=document.createElement("iframe");
         makeframe.setAttribute("id", "PopIframe");
         makeframe.setAttribute("class", "PopIframe");
         makeframe.setAttribute("name", "PopIframe");
         makeframe.setAttribute("frameborder", "0");
         makeframe.setAttribute("src", "detailbox.php?ID=" + newID);  // ID=Database record ID for item search
         makeframe.setAttribute("scrolling", "no");
         document.body.appendChild(makeframe);
      }
 
      function ClosePopup()
      {
           var ifr = parent.document.getElementById("PopIframe");
           ifr.parentNode.removeChild(ifr);
      }
 
      function OpenFrame(ID)
      {
         newID = ID;
         var makeframe=document.createElement("iframe");
         makeframe.setAttribute("id", "PopIframe");
         makeframe.setAttribute("class", "PopIframe");
         makeframe.setAttribute("name", "PopIframe");
         makeframe.setAttribute("frameborder", "0");
         makeframe.setAttribute("src", "detailbox.php?ID=" + newID);  // ID=Database record ID for item search
         makeframe.setAttribute("scrolling", "no");
         document.body.appendChild(makeframe);
      }

      function ClosePopup()
      {
           var ifr = parent.document.getElementById("PopIframe");
           ifr.parentNode.removeChild(ifr);
      }

In detailbox.php:

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
    <a class="CloseLink" href="javascript:void(0);" onclick="window.parent.ClosePopup();">X</a>
    <a class="CloseLink" href="javascript<b></b>:void(0);" onclick="window.parent.ClosePopup();">X</a>

The product has a series of styles, so once detailbox.php is open, the user may select other product information in the series by selecting an image, which recalls the page in the iframe with a different database ID get.

Currently, on my computer, with a good broadband connection, this takes about 3 seconds for a page to load in the iframe. I'm hoping there is some way to make it snappier.

•

Join Date: Apr 2007

Location: Birmingham

Posts: 378

Reputation: Fungus1487 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 38

Fungus1487 Fungus1487 is offline

Offline

Posting Whiz

Re: Iframe inside close - Is there a better way?

Nov 14th, 2007

why not hide/show the iframe instead of creating a new instance each time.

i.e.
on page startup create a hidden iframe
when openframe is called change the visibility and use document.frame.location = '.....' to change the url.

if your using php also depending ont he amout of code the server will have to compile, run and show the results of whatever your doing. You can try using zend or something to precompile the php that may increase performance.

also

Help with Code Tags

(Toggle Plain Text)

makeframe.setAttribute("class", "PopIframe");

is not compatible with all browsers, some use className as i am aware

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

Join Date: Nov 2007

Posts: 2

Reputation: RationalRabbit is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

RationalRabbit RationalRabbit is offline

Offline

Newbie Poster

Re: Iframe inside close - Is there a better way?

Nov 14th, 2007

Fungus -

Thanks much for the tip on "class" vs "classname". I'll check that out.

Originally, I was simply hiding/unhiding the iframe. Besides a simple JavaScript routine to The method I used was the following:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
     function OpenPopup()
      {
         z = document.getElementById('PopIframe');
         z.style.display = "block";
      }
 
     function AddID(ID)
      {
         newID = ID;
         x = document.getElementById('PopIframe');
         x.src = (x.src + "?id=" + newID);   // ID for database lookup
      }
 
      function ClosePopup()
      {
         y = document.getElementById('PopIframe');
         y.style.display = "none";
      }
     function OpenPopup()
      {
         z = document.getElementById('PopIframe');
         z.style.display = "block";
      }
  
     function AddID(ID)
      {
         newID = ID;
         x = document.getElementById('PopIframe');
         x.src = (x.src + "?id=" + newID);   // ID for database lookup
      }
 
      function ClosePopup()
      {
         y = document.getElementById('PopIframe');
         y.style.display = "none";
      }

The problem here was that when I would reopen the iframe, the first thing I would see was the last iframe content. No matter what order I put things in, as far as calling up the selected content and unhiding the iframe, the result was still the same; old content - blip - new content. Destroying then rebuilding the frame, of course, eliminates that, but as I say, is a bit slow. I tried some method (sorry - no notes) that was supposed to clear any cache, but no acceptable result.

Last edited by RationalRabbit : Nov 14th, 2007 at 9:33 pm. Reason: Add open function

•

Join Date: Apr 2007

Location: Birmingham

Posts: 378

Reputation: Fungus1487 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 38

Fungus1487 Fungus1487 is offline

Offline

Posting Whiz

Re: Iframe inside close - Is there a better way?

Nov 15th, 2007

you could always create an html page with a prompt something ike 'Loading.. Please wait' and upon hiding your iframe change the location to ths page.

then when opening the iframe they will see a lovely message awaiting them.

in my opinion

Help with Code Tags

(Toggle Plain Text)

document.framename.location = 'url';

is faster than accessing its src attribute node but i am unsure and probly would save u 10th's off a second.

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

Join Date: Jun 2006

Location: India

Posts: 7,012

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 25

Solved Threads: 368

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: Iframe inside close - Is there a better way?

Nov 15th, 2007

> some use className as i am aware
Almost all browsers out there support className. IE doesn't play well with setAttribute so it's wise not to use it.

> document.framename.location = 'url';
IFrames don't have a property named as location. Use the src property instead.

I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.

•

Join Date: Apr 2007

Location: Birmingham

Posts: 378

Reputation: Fungus1487 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 38

Fungus1487 Fungus1487 is offline

Offline

Posting Whiz

Re: Iframe inside close - Is there a better way?

Nov 15th, 2007

i stand corrected.

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

Only community members can participate in forum threads. You must register or log in to contribute.

•

DaniWeb JavaScript / DHTML / AJAX Marketplace

•

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

•

Thread Tools	Display Modes
Show Printable Version Email this Page	Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

•

Similar Threads

Dynamicallu Resizeing IFRAME based on content (JavaScript / DHTML / AJAX)
Dynamic iframe height (JavaScript / DHTML / AJAX)
how do i escape from an iframe? (HTML and CSS)
cookie problem with iframe and different domain (ASP)
Please Review My Office Live Site (Website Reviews)
Iframe opening new window problem (HTML and CSS)
iframe (HTML and CSS)
Close Multiple Windows (Windows tips 'n' tweaks)

Other Threads in the JavaScript / DHTML / AJAX Forum

Previous Thread: Validating a Check Box
Next Thread: Destroying Cookies

DaniWeb Home > Forums > Web Development > JavaScript / DHTML / AJAX

Iframe inside close - Is there a better way?

Iframe inside close - Is there a better way?

Re: Iframe inside close - Is there a better way?

Re: Iframe inside close - Is there a better way?

Re: Iframe inside close - Is there a better way?

Re: Iframe inside close - Is there a better way?

Re: Iframe inside close - Is there a better way?