Load ifrom content on click

Hello,

I have a hidden frame and I want it to load when I click the link, I am able to get it to display pre loaded but I need to make it so that when it is clicked it loads and not before.

I am using google maps and I do not want all 20 maps to load at once for obvious reasons.

Thanks!
<div id="map<? echo $mapid; ?>" style="width: 590px; height: 260px; background: #FFFFFF; display:none">
<br />
<b>Map of <?php echo $aProperty[$j]["sLocation"]; ?></b><br />
<iframe src="/gmap.php?a=<?php echo $aProperty[$j]["sLocation"]; ?>&amp;lat=0&amp;lng=0&amp;margin=8" frameborder="0" scrolling="no" width="592" height="202"></iframe>
<div style="clear:both"></div>
</div>

Open in new window

LVL 1
movieprodwAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

exalkoniumCommented:
Can you post the code you use to display the iframe? The most likely solution would be to set the src of the iframe after it is displayed. If you want to store the location that will be used, you could also store this in the title attribute so you can retain your PHP structure:
HTML
==================
<div id="map<? echo $mapid; ?>" style="width: 590px; height: 260px; background: #FFFFFF; display:none">
<br />
<b>Map of <?php echo $aProperty[$j]["sLocation"]; ?></b><br />
<iframe src="about:blank" title="/gmap.php?a=<?php echo $aProperty[$j]["sLocation"]; ?>&amp;lat=0&amp;lng=0&amp;margin=8" frameborder="0" scrolling="no" width="592" height="202"></iframe>
<div style="clear:both"></div>
</div>


Javascript
===================
function code_that_shows_iframe(myiframe) {
    myiframe.style.display = "block";
    myiframe.src = myiframe.title;
}

Open in new window

0
movieprodwAuthor Commented:
Hello,

I think that sounds like your on the correct track.

Here is the code:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/dropani.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('map1', 'fade=0,height=240px')
animatedcollapse.addDiv('map2', 'fade=0,height=240px')
animatedcollapse.addDiv('map3', 'fade=0,height=240px')
animatedcollapse.addDiv('map4', 'fade=0,height=240px')
animatedcollapse.addDiv('map5', 'fade=0,height=240px')
animatedcollapse.addDiv('map6', 'fade=0,height=240px')
animatedcollapse.addDiv('map7', 'fade=0,height=240px')
animatedcollapse.addDiv('map8', 'fade=0,height=240px')
animatedcollapse.addDiv('map9', 'fade=0,height=240px')
animatedcollapse.addDiv('map10', 'fade=0,height=240px')
animatedcollapse.addDiv('map11', 'fade=0,height=240px')
animatedcollapse.addDiv('map12', 'fade=0,height=240px')
animatedcollapse.addDiv('map13', 'fade=0,height=240px')
animatedcollapse.addDiv('map14', 'fade=0,height=240px')
animatedcollapse.addDiv('map15', 'fade=0,height=240px')
animatedcollapse.addDiv('map16', 'fade=0,height=240px')
animatedcollapse.addDiv('map17', 'fade=0,height=240px')
animatedcollapse.addDiv('map18', 'fade=0,height=240px')
animatedcollapse.addDiv('map19', 'fade=0,height=240px')
animatedcollapse.addDiv('map20', 'fade=0,height=240px')
animatedcollapse.addDiv('map21', 'fade=0,height=240px')
animatedcollapse.addDiv('map22', 'fade=0,height=240px')
animatedcollapse.addDiv('map23', 'fade=0,height=240px')
animatedcollapse.addDiv('map24', 'fade=0,height=240px')
animatedcollapse.addDiv('map25', 'fade=0,height=240px')
animatedcollapse.addDiv('map26', 'fade=0,height=240px')
animatedcollapse.addDiv('map27', 'fade=0,height=240px')
animatedcollapse.addDiv('map28', 'fade=0,height=240px')
animatedcollapse.addDiv('map29', 'fade=0,height=240px')
animatedcollapse.addDiv('map30', 'fade=0,height=240px')



animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>

Open in new window

0
exalkoniumCommented:
If you are using jQuery, this can be easier too. I would assign classes to your iframes so this will apply to all of them. Here's an example.
HTML
==================
<div id="map<? echo $mapid; ?>" style="width: 590px; height: 260px; background: #FFFFFF; display:none">
<br />
<b>Map of <?php echo $aProperty[$j]["sLocation"]; ?></b><br />
<iframe src="about:blank" title="/gmap.php?a=<?php echo $aProperty[$j]["sLocation"]; ?>&amp;lat=0&amp;lng=0&amp;margin=8" frameborder="0" scrolling="no" width="592" height="202" class="mapframe"></iframe>
<div style="clear:both"></div>
</div>


Javascript
===================
function to_open_iframe(iframeid) {
   $('#' + iframeid).show().attr('src',$(this).attr('title'));
}

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

exalkoniumCommented:
So, is the iframe shown when the DIV that contains it is shown? If so, try changing that function above like so (this would also involve change the iframes to place the src in the title attribute like I did in the code before):
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
        if (state == "block") {
           divobj.children('iframe').show().attr('src',$(this).attr('title'));

        }
}

Open in new window

0
exalkoniumCommented:
In fact, if the iframe is already visible, you can exclude the show() function:
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
        if (state == "block") {
           divobj.children('iframe').attr('src',$(this).attr('title'));

        }
}

Open in new window

0
movieprodwAuthor Commented:
Okay,

I have entered that into my code but to be honest I am not sure what the next step is, can you please let  me know how I would link the java to the iframe. I see that it says iframeid, should I put an id on the iframe then enter that id in the java?

Thanks,
Matt
0
exalkoniumCommented:
Use my updated code, you won't need the id.
0
movieprodwAuthor Commented:
Okay so I reverted it all back to the original code, then used your html from your 2nd code and your java from the 4th code and this is my result:

"An error exists inside your "ontoggle" function:

TypeError: divobj.children is not a function

Aborting execution of function."
0
movieprodwAuthor Commented:
Which was this:
...
animatedcollapse.addDiv('map28', 'fade=0,height=240px')
animatedcollapse.addDiv('map29', 'fade=0,height=240px')
animatedcollapse.addDiv('map30', 'fade=0,height=240px')



animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
        //$: Access to jQuery
        //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
        //state: "block" or "none", depending on state
        if (state == "block") {
           divobj.children('iframe').attr('src',$(this).attr('title'));

        }
}


animatedcollapse.init()

</script>


html
<div id="map<? echo $mapid; ?>" style="width: 590px; height: 260px; background: #FFFFFF; display:none">
<br />
<b>Map of <?php echo $aProperty[$j]["sLocation"]; ?></b><br />
<iframe src="about:blank" title="/gmap.php?a=<?php echo $aProperty[$j]["sLocation"]; ?>&amp;lat=0&amp;lng=0&amp;margin=8" frameborder="0" scrolling="no" width="592" height="202" class="mapframe"></iframe>
<div style="clear:both"></div>
</div>
<div style="clear:both;"></div>

Open in new window

0
exalkoniumCommented:
Sorry, my mistake. Change it to this:
$(divobj).children('iframe').attr('src',$(this).attr('title'));

Open in new window

0
movieprodwAuthor Commented:
So close!

It shows the div without an error but it is not loading the iframe, almost looks like its not calling for that title/address

Matt
0
exalkoniumCommented:
Can you post your whole source code?
0
movieprodwAuthor Commented:
It is about 3k lines but here is all that applies to this issue:

Thank so much for your help
JAVASCRIPT
########
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/dropani.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('map1', 'fade=0,height=240px')
animatedcollapse.addDiv('map2', 'fade=0,height=240px')
animatedcollapse.addDiv('map3', 'fade=0,height=240px')
animatedcollapse.addDiv('map4', 'fade=0,height=240px')
animatedcollapse.addDiv('map5', 'fade=0,height=240px')
animatedcollapse.addDiv('map6', 'fade=0,height=240px')
animatedcollapse.addDiv('map7', 'fade=0,height=240px')
animatedcollapse.addDiv('map8', 'fade=0,height=240px')
animatedcollapse.addDiv('map9', 'fade=0,height=240px')
animatedcollapse.addDiv('map10', 'fade=0,height=240px')
animatedcollapse.addDiv('map11', 'fade=0,height=240px')
animatedcollapse.addDiv('map12', 'fade=0,height=240px')
animatedcollapse.addDiv('map13', 'fade=0,height=240px')
animatedcollapse.addDiv('map14', 'fade=0,height=240px')
animatedcollapse.addDiv('map15', 'fade=0,height=240px')
animatedcollapse.addDiv('map16', 'fade=0,height=240px')
animatedcollapse.addDiv('map17', 'fade=0,height=240px')
animatedcollapse.addDiv('map18', 'fade=0,height=240px')
animatedcollapse.addDiv('map19', 'fade=0,height=240px')
animatedcollapse.addDiv('map20', 'fade=0,height=240px')
animatedcollapse.addDiv('map21', 'fade=0,height=240px')
animatedcollapse.addDiv('map22', 'fade=0,height=240px')
animatedcollapse.addDiv('map23', 'fade=0,height=240px')
animatedcollapse.addDiv('map24', 'fade=0,height=240px')
animatedcollapse.addDiv('map25', 'fade=0,height=240px')
animatedcollapse.addDiv('map26', 'fade=0,height=240px')
animatedcollapse.addDiv('map27', 'fade=0,height=240px')
animatedcollapse.addDiv('map28', 'fade=0,height=240px')
animatedcollapse.addDiv('map29', 'fade=0,height=240px')
animatedcollapse.addDiv('map30', 'fade=0,height=240px')



animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
        //$: Access to jQuery
        //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
        //state: "block" or "none", depending on state
        if (state == "block") {
$(divobj).children('iframe').attr('src',$(this).attr('title'));
        }
}


animatedcollapse.init()

</script>


HTML
########
            <span class="mapLink"><a href="javascript:animatedcollapse.toggle('map<? echo $mapid; ?>')">Map</a></span>



            </div>
			<?php //echo $aProperty[$j]["sLocation"]; ?>
			</div>
            </div>
            <div style="clear:both;"></div>

            <div id="map<? echo $mapid; ?>" style="width: 590px; height: 260px; background: #FFFFFF; display:none">
            <br />
            <b>Map of <?php echo $aProperty[$j]["sLocation"]; ?></b><br />
            <iframe src="about:blank" title="/gmap.php?a=<?php echo $aProperty[$j]["sLocation"]; ?>&amp;lat=0&amp;lng=0&amp;margin=8" frameborder="0" scrolling="no" width="592" height="202" class="mapframe"></iframe>
            <div style="clear:both"></div>
            </div>
            <div style="clear:both;"></div>

Open in new window

0
exalkoniumCommented:
Most likely this stems from the iframe not being the direct child of the element that contains it. Try this:
$(divobj).find('iframe').attr('src',$(this).attr('title'));

Open in new window

0
movieprodwAuthor Commented:
still no, sorry
0
exalkoniumCommented:
Sorry, I'm full of bugs today. Replace that one line with these:
var iframe = $(divobj).find('iframe');
iframe.attr('src',iframe.attr('title'));

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
movieprodwAuthor Commented:
Your full of awesome if you ask me!

It worked perfectly!

Thank you so much
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.