Skip to main content

Posts

Showing posts with the label iframe

javascript onclick combining 2 events does not work on ios (iPhone, iPad)

I'm combining 2 javascripts in the onclick to do 2 things: 1. Stop an audio player 2. Load and iframe that has a video The following code works on all browsers but not iOS (iPhone, iPad) <a class="aboutclick" href="#" onclick="stop2();document.getElementById('frame').innerHTML='&lt;iframe src=&quot;paul-on-paul.html&quot; width=&quot;100%&quot; height=&quot;600&quot; scrolling=&quot;no&quot; frameborder=&quot;no&quot;&gt;&lt;/iframe&gt;'"><img src="assets/video-cold.jpg" alt="paul-gregory-video" width="161" height="81" border="0" /></a> The stop2() in the beginning of the onclick code is what turns off the music player. (it's Flash audio player so it doesn't apply to iOS). Tapping on the image does nothing on the iPad, iPhone with this code present. If I remove stop2(); from the onclick c

How to find out whether an element is in a hidden iframe

Using jQuery, one can easily find out whether a particular element is visible using $(element).is(':visible') While having some limitations (doesn't cover css visibility hidden or the actual visibility in the viewport, i.e. whether it's covered by other elements or scrolled away), I find it being useful for my scenario. The catch is, it only works within one iframe. If the element has any parent within its document with display:none; , it returns false. If the whole document is included in an iframe which has display:none , it returns true. Is it possible to somehow detect this in another way ?

How to find out whether an element is in a hidden iframe

Using jQuery, one can easily find out whether a particular element is visible using $(element).is(':visible') While having some limitations (doesn't cover css visibility hidden or the actual visibility in the viewport, i.e. whether it's covered by other elements or scrolled away), I find it being useful for my scenario. The catch is, it only works within one iframe. If the element has any parent within its document with display:none; , it returns false. If the whole document is included in an iframe which has display:none , it returns true. Is it possible to somehow detect this in another way ?

Iframe full height in a wordpress page problems (without scroll bar)

Am trying to get this code <iframe src="http://www.play-asia.com/paOS-38-19-0,,none,0,0,0,0,trans,000000,left,0,0-49-en-76-5-70-dhf7-6-2-78-2i-90-f8z9-33-iframe_banner-40-6-44-100%2525.html" style="border-style: none; border-width: 0px; border-color: #FFFFFF; padding: 0px; margin: 0px; scrolling: vertical; frameborder: 0;" scrolling="vertical" frameborder="0" width="100%25" height="1428"></iframe> To fill the page (height wise) and also without the scroll bar ive tryed and tryed to use css without any luck Anyone have any ideas how/if I do do this? Thanks

Reload page out of iframe

I'm using Fancybox and Zend. Hope the following is clear. On www.example.com/template/edit/id/3 I have jQuery UI Tabs. They are reachable directly via anchors. E.g. www.example.com/template/edit/id/3#tabs-2 On #tabs-2 I have some elements, doesn't matter what it is exactly. You can create or edit them. This elements got a own controller, so for editing them you call /elements/edit/id/44. Currently, I'm doing that in a Layer with Fancybox. I'm using the Iframe functionality of Fancybox for that. So, if you are on /template/edit and you click on the edit button of an element, a layer opens which includes an iframe which loads /elements/edit. So, if you change the element now and click on save, i want the layer to automatically close and reload. Fancybox provides an option to specify what it should do when it gets closed. At the moment i got it like that: 'onClosed' : function() {window.location.reload();} This actually reloads the top windo

communication between an iframe and the page its part of through javascript in ie8

I have seen many questions like this but have not found anything that seems to help with my specific situation so I apologize if this question seems repetitive. I have a site www.foo.com and have an iframe in it. When information I click on an a tag in foo.com a javascript function is called that passes a new image to the iframe to show the user. The communication between iframe and its "parent" seems to work fine on all browsers EXCEPT RANDOM IE8 PAGES. I get the following error message "access is denied" and the browser points to the function that has been activated. Following is a piece of code from the site to see how it works. the iframe: <iframe scrolling="no" src="foo.com/bar" id="ifram" name="ifram"></iframe> the a tag: The javascript: if($(this).val() == '242'){ document.getElementById('ifram').style.border='0px'; document.getElementById('ifram').style.back

FancyBox iFrame broke after Tables & Styles in IE

I'm wondering if there's any particular rules regarding using and stylizing 'fancybox' windows. I've implemented a 'fancybox' using the iFrame call - and when I just had some simple text, a background color, and an Image; it rendered great IE 6+. BUT, now that I've added a simple table with some styles for buttons within - it breaks in 6/7. Anything particular I should avoid implementing and putting inside an iFrame called .html while using fancybox supporting IE6/7? ! Update (please help me debug - here's what I have being called in the fancybox via iFrame): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style> h1 { font-famil

Send custom message from iframe guest to iframe host where host HTML from portlet

I'm trying to send a custom message from an iframe guest to an iframe host using jQuery (We are developing both guest and host). The guest and host are on the same domain but on different ports. Also, the iframe host is being rendered from a portlet within a Liferay portal instance (5.2.3) and the portal mangles the host URL of the portlet. The host and guest URLs look like: host: http://localhost:8080/host/foo/bar?p_p_id=portletname_WAR_portletname_INSTANCE_nNz9&... guest: http://localhost:8081/guest I know that trying to do this messaging violates the same origin policy enforced by browsers. To get around this I've looked at using PortHole, EasyXDM and the jquery-postmessage-plugin. The problem I have is this: For these libraries to work the sender (iframe guest) needs to know the host url but cannot know the mangled portlet host url in advance.