iFrame in Modal causing problems

[marlonsabala]

Hi folks,

I use a few modals on my site to load iframes.
The problem is that the loading of the iframes happens right at the initial page load, which substantially slows down the whole loading, even causing rev slider to stall a bit.

Here’s my question: Is there anyway of making the iframe load only open the opening of the modal?

Cheers

[marlonsabala]

I have a second problem, this more serious.

In this page I have 5 modals loading 5 different iframes. But after the initial page load they will all load the link for the first iframe. I don’t know what to do but this is very a serious part of my site.

Have a look please.
Here’s what a typical modal looks like:

[sf_modal header="Get a 20 minute lesson with Carla" btn_colour="accent" btn_type="standard" btn_size="large" btn_text="Book Free Lesson"]<iframe style="" name="20min" id="20min" src="https://www.vcita.com/v/portuguesewithcarla/online_scheduling?service_id=94638086" height="508" width="710" frameborder="0" scrolling="no"></iframe>[/sf_modal]

[marlonsabala]

Here’s the page:

One on One Pricing

I’ve tried differentiating the iframes by id, name, style, even using a script to load the iframe just with the “class” parameter…nothing works, still loads the first link for all the modals.

Please help.

[Melanie – SUPPORT]

Hi, I’m afraid that would be a general webdevelopment question we cannot assist with really – I recommend trying a google search.

All the best

[marlonsabala]

Hi there,

Thanks for your answer. I understand that the first issue with the loading is not really a problem with your theme but more of a request and I’ve sorted that with some scripting.

But the second issue only happens in your theme. If I use two different iframes on the same page they load the two different urls. But if I put them inside your modals, all of them end up loading the first iframe url after the second click. I’ve tried everything but the problem persists.

Please have a look at it.

Cheers

[Melanie – SUPPORT]

Hi!
I’d like to check the backend of your website, so to speed things up, could you let me know your login details via a private reply please?

Thanks and cheers!

[marlonsabala]

This reply has been marked as private.

[marlonsabala]

Any ideas?

[Melanie – SUPPORT]

Let me ask the developer about that, that might be something that needs to be changed in the theme code.

[Swift Ideas – Ed]

Hi there,

Checked here and all working fine – can you confirm the issue? I’m getting different iframes in each modal – and the page loads rather quick considering!

– Ed

[marlonsabala]

Hi Ed,

Thanks for your interest in the issue.

The problem is there. The first time you click the modal it loads the right iframe. But if you then close it and try to load another one it always reverts to the url on the first iframe.

To make it clearer…reload the page and click on the “gold bundle” option. An iframe will be loaded and it will say: “Service: Buy Gold Bundle and book first session”.
Ok, now close it and try clicking on it again. Now it says: “Service: Buy and book 1 session”. That’s the content for the “1 lesson” option, the first iframe.

Do you see what I mean?

[Swift Ideas – Ed]

No, not seeing that here at all, here’s a video of it: http://d.pr/v/88DM

– Ed

[marlonsabala]

Hi Ed,

Thanks for the video.
You didn’t see it because on the second click you chose the first option, which is where the url defaults to anyway.
Try the gold twice for example and you will see the problem.

Cheers

[Swift Ideas – Ed]

Ok sorry, I misread your steps. Can you try editing /js/functions.js lines 110-112 to:

jQuery(".modal-backdrop, .modal .close, .modal .btn").live("click", function() {
				jQuery(".modal iframe").each(function() {
					var thisModal = jQuery(this);
					thisModal.attr("src", thisModal.attr("src"));
				});
			});

That should sort it!

– Ed

[marlonsabala]

Fantastic! Sorted.

Now…will I need to keep on changing this file on every new iteration of the theme or will this be included next time round?

Thanks