[Xerte-dev] Re: Ifrane full window
Smith, John
J.J.Smith at gcu.ac.uk
Wed Jul 3 14:02:30 BST 2013
I've had a play around and you can't access any property/method (including width/height etc) of the actual iframe from a cross-domain framed page...
Only way I've managed to do it is to use postMessage to trigger an event in the parent window, which involves a bit of JavaScrip in the parent (iframe at bottom)
<script>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
toggleFullScreen(!!e.data)
},false);
var orgDimensions = new Array();
function toggleFullScreen(full) {
ifr = document.getElementById("xerte_1");
if (full) {
orgDimensions[0] = ifr.style.width;
orgDimensions[1] = ifr.style.height;
viewSize = getSize();
ifr.style.width = viewSize[0] + "px";
ifr.style.height = viewSize[1] + "px";
}
else {
ifr.style.width = orgDimensions[0];
ifr.style.height = orgDimensions[1];
}
}
function getSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return new Array(myWidth-20, myHeight-5);
}
</script>
<iframe id="xerte_1" src='http://xerte.smitcher.com/play.php?template_id=2' width='800' height='600' scrolling='no' frameborder="0" style="float:left; position:relative; top:0px; left:0px; z-index:0;"></iframe>
Then in Xenith.js you just need to add the //Post a message code into the button click handler
$("#x_cssBtn")
.button({
icons: {primary: "x_maximise"},
label: x_getLangInfo(x_languageData.find("sizes").find("item")[3], false, "Full screen"),
text: false
})
.click(function() {
// Post a message to the containing page for iframe resizing
if (window && window.parent && window.parent.postMessage) {
window.parent.postMessage((String)(!x_fillWindow), "*");
}
Needs a bit of work though, especially to perhaps position the iframe absolutely and take care of potential scrolling etc… But hey, it works!!
Regards,
John Smith
Learning Technologist
School of Health & Life Sciences
Glasgow Caledonian University
-----Original Message-----
From: xerte-dev-bounces at lists.nottingham.ac.uk [mailto:xerte-dev-bounces at lists.nottingham.ac.uk] On Behalf Of Pat @ Pgogy
Sent: Wednesday, July 03, 2013 8:24 AM
To: For Xerte technical developers
Subject: [Xerte-dev] Re: Ifrane full window
Not for my stuff, I've hacked the HTML of the LOs I'm using on the MOOC so they display differently anyways.
MOOCs - kinda crazy. 19000 students
English common law on coursera
In week 3 I make my grand appearance
On 2 Jul 2013, at 19:34, "Smith, John" <J.J.Smith at gcu.ac.uk<mailto:J.J.Smith at gcu.ac.uk>> wrote:
> Yeah you should be able to just set the iframe width/height to the window width/height or to 100% and it should scale...
>
> Is this for the mooc? Mooc sounds like a lot of work? What's the topic?
>
> Regards
>
> John Smith
> Learning Technologist
> School of Health and Life Sciences
>
> Sent from Samsung Galaxy SII
>
>
>
> "Pat @ Pgogy" <xerte at pgogywebstuff.com<mailto:xerte at pgogywebstuff.com>> wrote:
>
>
> You won't access the parent, iframe zindex massive width and height
> window size
>
> No other calls?
>
> On 2 Jul 2013, at 19:21, "Smith, John" <J.J.Smith at gcu.ac.uk<mailto:J.J.Smith at gcu.ac.uk>> wrote:
>
>> Hmm it should be possible but you might run into cross domain security issues trying to access the parent...
>>
>> Regards
>>
>> John Smith
>> Learning Technologist
>> School of Health and Life Sciences
>>
>> Sent from Samsung Galaxy SII
>>
>>
>> "Pat @ Pgogy" <xerte at pgogywebstuff.com<mailto:xerte at pgogywebstuff.com>> wrote:
>>
>>
>> In html5 if you click the four arrows it fills the screen,
>>
>> I'm thinking if in an iframe then the iframe is mangled via some JS
>> to become the size of the window the iframe is in
>>
>> On 2 Jul 2013, at 16:25, "Smith, John" <J.J.Smith at gcu.ac.uk<mailto:J.J.Smith at gcu.ac.uk>> wrote:
>>
>>> Do you mean the iframe embed code for the LO or in general? Didn't know there was a fullscreen option, thought you had to do it using width/height:100% is style= attribute or stylesheet?
>>>
>>> Regards,
>>>
>>> John Smith
>>> Learning Technologist
>>> School of Health & Life Sciences
>>> Glasgow Caledonian University
>>>
>>>
>>> -----Original Message-----
>>> From: xerte-dev-bounces at lists.nottingham.ac.uk<mailto:xerte-dev-bounces at lists.nottingham.ac.uk>
>>> [mailto:xerte-dev-bounces at lists.nottingham.ac.uk] On Behalf Of Pat @
>>> Pgogy
>>> Sent: Tuesday, July 02, 2013 3:24 PM
>>> To: For Xerte technical developers
>>> Subject: [Xerte-dev] Ifrane full window
>>>
>>> Hello,
>>>
>>> Should this make the iframe fill the entire window if iframe embed is used?
>>>
>>> Pat
>>>
>>> _______________________________________________
>>> Xerte-dev mailing list
>>> Xerte-dev at lists.nottingham.ac.uk<mailto:Xerte-dev at lists.nottingham.ac.uk>
>>> http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev
>>> This message and any attachment are intended solely for the addressee and may contain confidential information. If you have received this message in error, please send it back to me, and immediately delete it. Please do not use, copy or disclose the information contained in this message or in any attachment. Any views or opinions expressed by the author of this email do not necessarily reflect the views of the University of Nottingham.
>>>
>>> This message has been checked for viruses but the contents of an attachment may still contain software viruses which could damage your computer system, you are advised to perform your own checks. Email communications with the University of Nottingham may be monitored as permitted by UK legislation.
>>>
>>>
>>>
>>>
>>>
>>> Glasgow Caledonian University is a registered Scottish charity,
>>> number SC021474
>>>
>>> Winner: Times Higher Education’s Widening Participation Initiative of the Year 2009 and Herald Society’s Education Initiative of the Year 2009.
>>> http://www.gcu.ac.uk/newsevents/news/bycategory/theuniversity/1/name
>>> ,6219,en.html
>>>
>>> Winner: Times Higher Education’s Outstanding Support for Early Career Researchers of the Year 2010, GCU as a lead with Universities Scotland partners.
>>> http://www.gcu.ac.uk/newsevents/news/bycategory/theuniversity/1/name
>>> ,15691,en.html _______________________________________________
>>> Xerte-dev mailing list
>>> Xerte-dev at lists.nottingham.ac.uk<mailto:Xerte-dev at lists.nottingham.ac.uk>
>>> http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev
>>
>> _______________________________________________
>> Xerte-dev mailing list
>> Xerte-dev at lists.nottingham.ac.uk<mailto:Xerte-dev at lists.nottingham.ac.uk>
>> http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev
>>
>> Glasgow Caledonian University is a registered Scottish charity,
>> number SC021474
>>
>> Winner: Times Higher Education’s Widening Participation Initiative of the Year 2009 and Herald Society’s Education Initiative of the Year 2009.
>> http://www.gcu.ac.uk/newsevents/news/bycategory/theuniversity/1/name,
>> 6219,en.html
>>
>> Winner: Times Higher Education’s Outstanding Support for Early Career Researchers of the Year 2010, GCU as a lead with Universities Scotland partners.
>> http://www.gcu.ac.uk/newsevents/news/bycategory/theuniversity/1/name,
>> 15691,en.html _______________________________________________
>> Xerte-dev mailing list
>> Xerte-dev at lists.nottingham.ac.uk<mailto:Xerte-dev at lists.nottingham.ac.uk>
>> http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev
>
> _______________________________________________
> Xerte-dev mailing list
> Xerte-dev at lists.nottingham.ac.uk<mailto:Xerte-dev at lists.nottingham.ac.uk>
> http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev
>
> Glasgow Caledonian University is a registered Scottish charity, number
> SC021474
>
> Winner: Times Higher Education’s Widening Participation Initiative of the Year 2009 and Herald Society’s Education Initiative of the Year 2009.
> http://www.gcu.ac.uk/newsevents/news/bycategory/theuniversity/1/name,6
> 219,en.html
>
> Winner: Times Higher Education’s Outstanding Support for Early Career Researchers of the Year 2010, GCU as a lead with Universities Scotland partners.
> http://www.gcu.ac.uk/newsevents/news/bycategory/theuniversity/1/name,1
> 5691,en.html _______________________________________________
> Xerte-dev mailing list
> Xerte-dev at lists.nottingham.ac.uk<mailto:Xerte-dev at lists.nottingham.ac.uk>
> http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev
_______________________________________________
Xerte-dev mailing list
Xerte-dev at lists.nottingham.ac.uk<mailto:Xerte-dev at lists.nottingham.ac.uk>
http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev
Glasgow Caledonian University is a registered Scottish charity, number SC021474
Winner: Times Higher Education’s Widening Participation Initiative of the Year 2009 and Herald Society’s Education Initiative of the Year 2009.
http://www.gcu.ac.uk/newsevents/news/bycategory/theuniversity/1/name,6219,en.html
Winner: Times Higher Education’s Outstanding Support for Early Career Researchers of the Year 2010, GCU as a lead with Universities Scotland partners.
http://www.gcu.ac.uk/newsevents/news/bycategory/theuniversity/1/name,15691,en.html
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.nottingham.ac.uk/pipermail/xerte-dev/attachments/20130703/98289e6f/attachment-0001.html>
More information about the Xerte-dev
mailing list