Search jQuery

jQuery Forum

iframe popup

in jQuery Mobile • 9 years ago

Hi guys,
Trying to implement popup with iframe embedded.
This documentation is not that clear for me.
I want to dynamically bind popup to table cells, i have a widget that can be embedded.
now if i take this div:

<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content"> <iframe src="http://player.vimeo.com/video/41135183" width="497" height="298" seamless></iframe> </div>
(with my own url)

I get an iframe inside my page already, its not hidden but shown.
$(document.body).append(div)...

But if i create a page using static HTML like here , then the iframe is not shown
at the beginning but only shows up if i press the pop up button.
 
So my question is how can i insert my iframe div so it will be part of the HTML 
docuemnt but not shown.

Hope i was clear, if more clarification is needed please tell.
Thanks in advance.

Replies(8)

watusiware

Re: iframe popup

9 years ago

Your documentation link doesn't work. It looks like you pasted some HTML instead of a URL. So, not clear what you are talking about.

I don't understand what the demo you linked-to (W3Schools) is supposed to show. There's no iFrame on that page at all. Of course the iFrame doesn't show - there isn't one!

The popup documentation shows an example of including an iFrame in a popup:

http://api.jquerymobile.com/popup/

atav

Re: iframe popup

9 years ago

this is the documentation i meant: http://demos.jquerymobile.com/1.2.0/docs/pages/popup/popup-iframes.html

And this is the code that is working in fiddle: http://jsfiddle.net/5jjAq/
As you can see the HTML is created statically.
In my case i have a table.
Lets say a td tag.
i want to make this TD open a pop with iframe inside, and i need to insert the iframe div into the HTML page.
If i try $(docuement.body).append(iframeDiv), then the iframe itself already already appear on the page, even though the div have data-role set to "popup".

What i did is:
var div =

"<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">

    <iframe src="http://player.vimeo.com/video/41135183" width="497" height="298" seamless></iframe>
	 
</div>"
$(document.body).append(div);
$(td).on('click', function(s,e ){
      window.location = window.location + '#popupVideo';
})
 but i have the iframe in on my page and no as popup

jakecigar

Re: iframe popup

9 years ago

your first line is invalid. Use single quotes to unquote a string with double quotes in it. Don’t expect strings to be breakable in javaScript.

var div =
'<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">'+
' <iframe src="http://player.vimeo.com/video/41135183" width="497" height="298" seamless></iframe>'+
'</div>';

And I don’t see any variable named td, so I can’t comment on its correctness. But,

      window.location = window.location + '#popupVideo';

should be

      location.hash = 'popupVideo';

JΛ̊KE

atav

Re: iframe popup

9 years ago

Thanks for the reply JAKE.
The code i wrote i merely to demonstrate what im trying to do.
Im not near my working pc so i couldnt copy paste the original code.
Regarding the div string , i did exactly what you did, and please assume there is valud td object that represents a cell in a table.
Im asking about adding iframe div to the page without it to render on my page.
when i use

$(document.body).append(div);

the iframe is inserted to my page.. not as popup but as an iframe.
I dont receive any error regarding my code so assume the syntax is correct.
im trying to figure out how to add the iframe element so i can refer to it but 
dinamiclly and statically .

jakecigar

Re: iframe popup

9 years ago

Did you add a call like

$( "#popupVideo" ).trigger( "updatelayout" );

Panel - jQuery Mobile Demos

For more help, I’ll leave that to watusiware!

JΛ̊KE

atav

Re: iframe popup

9 years ago

ok so here is the proper code:

var tds = $('td', e);
var iframeDiv = '<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">'+
'<iframe src="myURL?embed=true" width="497" height="298" seamless></iframe>'+
'</div>';
_.each(tds, function(td, index){
$(td).attr('data-rel', 'popup');
$(td).on('click', function(s, e){
location.hash = "popupVideo";
})
})
$(document.body).append(iframeDiv);
debugger
$( "#popupVideo" ).trigger( "updatelayout" );
$( "#popupVideo" ).hide();

e is the element of my table.

Omar

Re: iframe popup

9 years ago

If I understand the issue well, you want to create a popup with an embedded iframe dynamically, right?

When you create a popup or any jQM widget dynamically, you need to initialize those widgets manually. For instance, you need to call .popup() on the popup div that was injected dynamically into body.

$("body").append(popupDiv);
$("#popupID").popup();

Once you call that function, the popup is created and is hidden.

Please check this demo I've made, if this is what you want, I will elaborate on it.

Edit: Here's a demo of how to create a popup dynamically.

watusiware

Re: iframe popup

9 years ago

I don't understand what you are trying to accomplish.

First, you stated you want to show a popup containing an iFrame.

Then, you show us code attempting to add an iFrame to your document.

Which is it?

You want an iFrame in a popup?

You want to append an iFrame to your document body? (And then do WHAT with it?)

Both?

Something else? You want to bring up an iFrame in a popup, and then move the iFrame to the document body? (And then do WHAT with it?)

jQuery Mobile only supports specific widgets (e.g. popup, panel) outside of a page. I don't know what you intend to do with an iFrame written to the end of your document.

Oh. I guess you intend to do nothing with it. But why?

So my question is how can i insert my iframe div so it will be part of the HTML 
docuemnt but not shown.

Top Reply

Response title

Attachments

jQuery Forum

iframe popup

Replies(8)

Re: iframe popup

Re: iframe popup

Re: iframe popup

Re: iframe popup

Re: iframe popup

Re: iframe popup

Re: iframe popup

Re: iframe popup

Statistics

Tags

Actions

Related Posts